added iframe note type

src/public/app/entities/note_short.js

@@ -17,7 +17,8 @@ const NOTE_TYPE_ICONS = {
     "book": "bx bx-book",
     "note-map": "bx bx-map-alt",
     "mermaid": "bx bx-selection",
-    "canvas": "bx bx-pen"
+    "canvas": "bx bx-pen",
+    "iframe": "bx bx-globe-alt"
 };
 
 /**

src/public/app/services/tree_context_menu.js

@@ -35,6 +35,7 @@ class TreeContextMenu {
             { title: "Book", command: command, type: "book", uiIcon: "book" },
             { title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "selection" },
             { title: "Canvas", command: command, type: "canvas", uiIcon: "pen" },
+            { title: "IFrame", command: command, type: "iframe", uiIcon: "globe-alt" },
         ];
     }
 

src/public/app/widgets/note_detail.js

@@ -3,6 +3,12 @@ import protectedSessionHolder from "../services/protected_session_holder.js";
 import SpacedUpdate from "../services/spaced_update.js";
 import server from "../services/server.js";
 import libraryLoader from "../services/library_loader.js";
+import appContext from "../services/app_context.js";
+import keyboardActionsService from "../services/keyboard_actions.js";
+import noteCreateService from "../services/note_create.js";
+import attributeService from "../services/attributes.js";
+import attributeRenderer from "../services/attribute_renderer.js";
+
 import EmptyTypeWidget from "./type_widgets/empty.js";
 import EditableTextTypeWidget from "./type_widgets/editable_text.js";
 import EditableCodeTypeWidget from "./type_widgets/editable_code.js";
@@ -13,16 +19,12 @@ import RelationMapTypeWidget from "./type_widgets/relation_map.js";
 import CanvasTypeWidget from "./type_widgets/canvas.js";
 import ProtectedSessionTypeWidget from "./type_widgets/protected_session.js";
 import BookTypeWidget from "./type_widgets/book.js";
-import appContext from "../services/app_context.js";
-import keyboardActionsService from "../services/keyboard_actions.js";
-import noteCreateService from "../services/note_create.js";
 import DeletedTypeWidget from "./type_widgets/deleted.js";
 import ReadOnlyTextTypeWidget from "./type_widgets/read_only_text.js";
 import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
 import NoneTypeWidget from "./type_widgets/none.js";
-import attributeService from "../services/attributes.js";
 import NoteMapTypeWidget from "./type_widgets/note_map.js";
-import attributeRenderer from "../services/attribute_renderer.js";
+import IframeTypeWidget from "./type_widgets/iframe.js";
 
 const TPL = `
 <div class="note-detail">
@@ -54,7 +56,8 @@ const typeWidgetClasses = {
     'canvas': CanvasTypeWidget,
     'protected-session': ProtectedSessionTypeWidget,
     'book': BookTypeWidget,
-    'note-map': NoteMapTypeWidget
+    'note-map': NoteMapTypeWidget,
+    'iframe': IframeTypeWidget
 };
 
 export default class NoteDetailWidget extends NoteContextAwareWidget {
@@ -154,7 +157,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         // https://github.com/zadam/trilium/issues/2522
         this.$widget.toggleClass("full-height",
             !this.noteContext.hasNoteList()
-            && ['editable-text', 'editable-code', 'canvas'].includes(this.type)
+            && ['editable-text', 'editable-code', 'canvas', 'iframe'].includes(this.type)
             && this.mime !== 'text/x-sqlite;schema=trilium');
     }
 

src/public/app/widgets/note_type.js

@@ -12,8 +12,9 @@ const NOTE_TYPES = [
     { type: "relation-map", mime: "application/json", title: "Relation Map", selectable: true },
     { type: "render", mime: '', title: "Render Note", selectable: true },
     { type: "canvas", mime: 'application/json', title: "Canvas", selectable: true },
-    { type: "book", mime: '', title: "Book", selectable: true },
     { type: "mermaid", mime: 'text/mermaid', title: "Mermaid Diagram", selectable: true },
+    { type: "book", mime: '', title: "Book", selectable: true },
+    { type: "iframe", mime: '', title: "IFrame", selectable: true },
     { type: "code", mime: 'text/plain', title: "Code", selectable: true }
 ];
 

src/public/app/widgets/note_wrapper.js

@@ -36,7 +36,7 @@ export default class NoteWrapperWidget extends FlexContainer {
         const note = this.noteContext?.note;
 
         this.$widget.toggleClass("full-content-width",
-            ['image', 'mermaid', 'book', 'render', 'canvas'].includes(note?.type)
+            ['image', 'mermaid', 'book', 'render', 'canvas', 'iframe'].includes(note?.type)
             || !!note?.hasLabel('fullContentWidth')
         );
     }

src/public/app/widgets/type_widgets/canvas.js

@@ -336,6 +336,10 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
             setDimensions(dimensions);
 
             const onResize = () => {
+                if (this.note?.type !== 'canvas') {
+                    return;
+                }
+
                 const dimensions = {
                     width: excalidrawWrapperRef.current.getBoundingClientRect().width,
                     height: excalidrawWrapperRef.current.getBoundingClientRect().height

src/public/app/widgets/type_widgets/iframe.js

@@ -0,0 +1,67 @@
+import TypeWidget from "./type_widget.js";
+import attributeService from "../../services/attributes.js";
+
+const TPL = `
+<div class="note-detail-iframe note-detail-printable" style="height: 100%">
+    <div class="note-detail-iframe-help alert alert-warning" style="margin: 50px; padding: 20px;">
+        <p><strong>This help note is shown because this note of type IFrame HTML doesn't have required label to function properly.</strong></p>
+
+        <p>Please create label with a URL address you want to embed, e.g. <code>#iframeSrc="http://www.google.com"</code></p>
+    </div>
+
+    <iframe class="note-detail-iframe-content"></iframe>
+</div>`;
+
+export default class IframeTypeWidget extends TypeWidget {
+    static getType() { return "iframe"; }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$noteDetailIframeHelp = this.$widget.find('.note-detail-iframe-help');
+        this.$noteDetailIframeContent = this.$widget.find('.note-detail-iframe-content');
+
+        window.addEventListener('resize', () => this.setDimensions(), false);
+
+        super.doRender();
+    }
+
+    async doRefresh(note) {
+        this.$widget.show();
+        this.$noteDetailIframeHelp.hide();
+        this.$noteDetailIframeContent.hide();
+
+        const iframeSrc = this.note.getLabelValue('iframeSrc');
+
+        if (iframeSrc) {
+            this.$noteDetailIframeContent
+                .show()
+                .attr("src", iframeSrc);
+        }
+        else {
+            this.$noteDetailIframeContent.hide();
+            this.$noteDetailIframeHelp.show();
+        }
+
+        this.setDimensions();
+
+        setTimeout(() => this.setDimensions(), 1000);
+    }
+
+    cleanup() {
+        this.$noteDetailIframeContent.removeAttribute("src");
+    }
+
+    setDimensions() {
+        const $parent = this.$widget;
+
+        this.$noteDetailIframeContent
+            .height($parent.height())
+            .width($parent.width());
+    }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.getAttributes().find(attr => attr.name === 'iframeSrc' && attributeService.isAffecting(attr, this.noteContext.note))) {
+            this.refresh();
+        }
+    }
+}

src/services/note_types.js

@@ -9,5 +9,6 @@ module.exports = [
     'book',
     'note-map',
     'mermaid',
-    'canvas'
+    'canvas',
+    'iframe'
 ];

src/services/notes.js

@@ -55,7 +55,7 @@ function deriveMime(type, mime) {
         mime = 'text/plain';
     } else if (['relation-map', 'search', 'canvas'].includes(type)) {
         mime = 'application/json';
-    } else if (['render', 'book'].includes(type)) {
+    } else if (['render', 'book', 'iframe'].includes(type)) {
         mime = '';
     } else {
         mime = 'application/octet-stream';