diff --git a/src/public/app/entities/note_short.js b/src/public/app/entities/note_short.js index 13bae5a93..3203d9c6e 100644 --- a/src/public/app/entities/note_short.js +++ b/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" }; /** diff --git a/src/public/app/services/tree_context_menu.js b/src/public/app/services/tree_context_menu.js index 89d860804..1a0b64213 100644 --- a/src/public/app/services/tree_context_menu.js +++ b/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" }, ]; } diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js index 0a0790fa8..69af9d507 100644 --- a/src/public/app/widgets/note_detail.js +++ b/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 = `
@@ -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'); } diff --git a/src/public/app/widgets/note_type.js b/src/public/app/widgets/note_type.js index e3206ebc0..0ce02b83f 100644 --- a/src/public/app/widgets/note_type.js +++ b/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 } ]; diff --git a/src/public/app/widgets/note_wrapper.js b/src/public/app/widgets/note_wrapper.js index 80da4558c..53f734bfb 100644 --- a/src/public/app/widgets/note_wrapper.js +++ b/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') ); } diff --git a/src/public/app/widgets/type_widgets/canvas.js b/src/public/app/widgets/type_widgets/canvas.js index 23e8cdbbd..0512e3ede 100644 --- a/src/public/app/widgets/type_widgets/canvas.js +++ b/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 diff --git a/src/public/app/widgets/type_widgets/iframe.js b/src/public/app/widgets/type_widgets/iframe.js new file mode 100644 index 000000000..9eaab65f5 --- /dev/null +++ b/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 = ` +
+
+

This help note is shown because this note of type IFrame HTML doesn't have required label to function properly.

+ +

Please create label with a URL address you want to embed, e.g. #iframeSrc="http://www.google.com"

+
+ + +
`; + +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(); + } + } +} diff --git a/src/services/note_types.js b/src/services/note_types.js index cdc890162..5fc923686 100644 --- a/src/services/note_types.js +++ b/src/services/note_types.js @@ -1,13 +1,14 @@ module.exports = [ - 'text', - 'code', - 'render', - 'file', - 'image', - 'search', - 'relation-map', - 'book', + 'text', + 'code', + 'render', + 'file', + 'image', + 'search', + 'relation-map', + 'book', 'note-map', 'mermaid', - 'canvas' -]; \ No newline at end of file + 'canvas', + 'iframe' +]; diff --git a/src/services/notes.js b/src/services/notes.js index 5e3670727..0a23c72eb 100644 --- a/src/services/notes.js +++ b/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';