feat(share): render webviews using iframe

Author: eliandoran

apps/server/src/share/content_renderer.ts

@@ -18,6 +18,7 @@ import { highlightAuto } from "@triliumnext/highlightjs";
 import becca from "../becca/becca.js";
 import { BAttachment } from "../services/backend_script_entrypoint.js";
 import SAttachment from "./shaca/entities/sattachment.js";
+import { sanitizeUrl } from "@braintree/sanitize-url";
 
 const shareAdjustedAssetPath = isDev ? assetPath : `../${assetPath}`;
 const templateCache: Map<string, string> = new Map();
@@ -250,6 +251,8 @@ export function getContent(note: SNote | BNote) {
         renderFile(note, result);
     } else if (note.type === "book") {
         result.isEmpty = true;
+    } else if (note.type === "webView") {
+        renderWebView(note, result);
     } else {
         result.content = `<p>${t("content_renderer.note-cannot-be-displayed")}</p>`;
     }
@@ -414,6 +417,13 @@ function renderFile(note: SNote | BNote, result: Result) {
     }
 }
 
+function renderWebView(note: SNote | BNote, result: Result) {
+    const url = note.getLabelValue("webViewSrc");
+    if (!url) return;
+
+    result.content = `<iframe class="webview" src="${sanitizeUrl(url)}"></iframe>`;
+}
+
 export default {
     getContent
 };

packages/share-theme/src/styles/content.css

@@ -52,4 +52,19 @@
 
 body:not(.math-loaded) .math-tex {
     visibility: hidden;
+}
+
+body.type-webView #main {
+    max-width: unset;
+}
+
+body.type-webView #content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+iframe.webview {
+    width: 100%;
+    flex-grow: 1;
 }