add webcontents id to helpview webview. (#969)

also allow contextmneu items to have sublabel, visible, and enabled

frontend/app/block/block.tsx

@@ -51,7 +51,7 @@ function makeViewModel(blockId: string, blockView: string, nodeModel: NodeModel)
         return makeCpuPlotViewModel(blockId);
     }
     if (blockView === "help") {
-        return makeHelpViewModel();
+        return makeHelpViewModel(blockId);
     }
     return makeDefaultViewModel(blockId, blockView);
 }

frontend/app/store/contextmenu.ts

@@ -24,9 +24,16 @@ class ContextMenuModelType {
                 role: item.role,
                 type: item.type,
                 label: item.label,
+                sublabel: item.sublabel,
                 id: crypto.randomUUID(),
                 checked: item.checked,
             };
+            if (item.visible === false) {
+                electronItem.visible = false;
+            }
+            if (item.enabled === false) {
+                electronItem.enabled = false;
+            }
             if (item.click) {
                 this.handlers.set(electronItem.id, item.click);
             }

frontend/app/view/helpview/helpview.tsx

@@ -2,26 +2,63 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { getApi } from "@/app/store/global";
-import { useState } from "react";
+import { WebviewTag } from "electron";
+import { createRef, useEffect, useState } from "react";
 import "./helpview.less";
 
 class HelpViewModel implements ViewModel {
     viewType: string;
+    blockId: string;
+    webviewRef: React.RefObject<WebviewTag>;
 
-    constructor() {
+    constructor(blockId: string) {
         this.viewType = "help";
+        this.blockId = blockId;
+        this.webviewRef = createRef<WebviewTag>();
     }
 }
 
-function makeHelpViewModel() {
-    return new HelpViewModel();
+function makeHelpViewModel(blockId: string) {
+    return new HelpViewModel(blockId);
 }
 
-function HelpView({}: { model: HelpViewModel }) {
+function HelpView({ model }: { model: HelpViewModel }) {
     const [url] = useState(() => getApi().getDocsiteUrl());
+    const [webContentsId, setWebContentsId] = useState(null);
+    const [domReady, setDomReady] = useState(false);
+
+    useEffect(() => {
+        if (model.webviewRef.current && domReady) {
+            const wcId = model.webviewRef.current.getWebContentsId?.();
+            if (wcId) {
+                setWebContentsId(wcId);
+            }
+        }
+    }, [model.webviewRef.current, domReady]);
+
+    useEffect(() => {
+        const webview = model.webviewRef.current;
+        if (!webview) {
+            return;
+        }
+        const handleDomReady = () => {
+            setDomReady(true);
+        };
+        webview.addEventListener("dom-ready", handleDomReady);
+        return () => {
+            webview.removeEventListener("dom-ready", handleDomReady);
+        };
+    });
+
     return (
         <div className="help-view">
-            <webview className="docsite-webview" src={url} />
+            <webview
+                ref={model.webviewRef}
+                data-blockid={model.blockId}
+                data-webcontentsid={webContentsId} // needed for emain
+                className="docsite-webview"
+                src={url}
+            />
         </div>
     );
 }

frontend/app/view/webview/webview.tsx

@@ -441,8 +441,9 @@ const WebView = memo(({ model }: WebViewProps) => {
 
     useEffect(() => {
         const webview = model.webviewRef.current;
-
-        if (webview) {
+        if (!webview) {
+            return;
+        }
         const navigateListener = (e: any) => {
             model.handleNavigate(e.url);
         };
@@ -503,7 +504,6 @@ const WebView = memo(({ model }: WebViewProps) => {
             webview.removeEventListener("blur", webviewBlur);
             webview.removeEventListener("dom-ready", handleDomReady);
         };
-        }
     }, []);
 
     return (

frontend/types/custom.d.ts

@@ -86,6 +86,9 @@ declare global {
         type?: "separator" | "normal" | "submenu" | "checkbox" | "radio";
         submenu?: ElectronContextMenuItem[];
         checked?: boolean;
+        visible?: boolean;
+        enabled?: boolean;
+        sublabel?: string;
     };
 
     type ContextMenuItem = {
@@ -95,6 +98,9 @@ declare global {
         click?: () => void; // not required if role is set
         submenu?: ContextMenuItem[];
         checked?: boolean;
+        visible?: boolean;
+        enabled?: boolean;
+        sublabel?: string;
     };
 
     type KeyPressDecl = {