chore(react/type_widget): basic integration of web view

apps/client/src/widgets/NoteDetail.tsx

@@ -11,6 +11,7 @@ import { TypeWidgetProps } from "./type_widgets/type_widget";
 import ProtectedSession from "./type_widgets/ProtectedSession";
 import Book from "./type_widgets/Book";
 import ContentWidget from "./type_widgets/ContentWidget";
+import WebView from "./type_widgets/WebView";
 
 /**
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
@@ -64,6 +65,7 @@ function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: T
         case "protectedSession": return <ProtectedSession />
         case "book": return <Book {...props} />
         case "contentWidget": return <ContentWidget {...props} />
+        case "webView": return <WebView {...props} />
         default: break;
     }
 }

apps/client/src/widgets/type_widgets/WebView.tsx

@@ -0,0 +1,37 @@
+import { t } from "../../services/i18n";
+import utils from "../../services/utils";
+import Alert from "../react/Alert";
+import { useNoteLabel } from "../react/hooks";
+import { TypeWidgetProps } from "./type_widget";
+
+const isElectron = utils.isElectron();
+
+export default function WebView({ note }: TypeWidgetProps) {
+    const [ webViewSrc ] = useNoteLabel(note, "webViewSrc");
+
+    return (
+        <div className="note-detail-web-view note-detail-printable" style={{ height: "100%" }}>
+            {webViewSrc
+                ? <WebViewContent src={webViewSrc} />
+                : <WebViewHelp />}
+        </div>
+    )
+}
+
+function WebViewContent({ src }: { src: string }) {
+    if (!isElectron) {
+        return <iframe src={src} class="note-detail-web-view-content" sandbox="allow-same-origin allow-scripts allow-popups" />
+    } else {
+        return <webview src={src} class="note-detail-web-view-content" />
+    }
+}
+
+function WebViewHelp() {
+    return (
+        <Alert className="note-detail-web-view-help" type="warning" style={{ margin: "50px", padding: "20px 20px 0px 20px;" }}>
+            <h4>{t("web_view.web_view")}</h4>
+            <p>{t("web_view.embed_websites")}</p>
+            <p>{t("web_view.create_label")}</p>
+        </Alert>
+    )
+}

apps/client/src/widgets/type_widgets_old/web_view.ts

@@ -6,23 +6,13 @@ import type { EventData } from "../../components/app_context.js";
 import utils from "../../services/utils.js";
 
 const TPL = /*html*/`
-<div class="note-detail-web-view note-detail-printable" style="height: 100%">
-    <div class="note-detail-web-view-help alert alert-warning" style="margin: 50px; padding: 20px 20px 0px 20px;">
-        <h4>${t("web_view.web_view")}</h4>
-
-        <p>${t("web_view.embed_websites")}</p>
-
-        <p>${t("web_view.create_label")}</p>
-    </div>
-
     ${buildElement()}
 </div>`;
 
 function buildElement() {
     if (!utils.isElectron()) {
-        return `<iframe class="note-detail-web-view-content" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>`;
     } else {
-        return `<webview class="note-detail-web-view-content"></webview>`;
+        return ``;
     }
 }
 

packages/commons/src/lib/attribute_names.ts

@@ -39,6 +39,9 @@ type Labels = {
     "board:groupBy": string;
     maxNestingDepth: number;
     includeArchived: boolean;
+
+    // Note-type specific
+    webViewSrc: string;
 }
 
 /**