feat(mermaid): basic horizontal layout

src/public/app/layouts/desktop_layout.ts

@@ -40,7 +40,6 @@ import EditButton from "../widgets/buttons/edit_button.js";
 import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
 import ShowTocWidgetButton from "../widgets/buttons/show_toc_widget_button.js";
 import ShowHighlightsListWidgetButton from "../widgets/buttons/show_highlights_list_widget_button.js";
-import MermaidWidget from "../widgets/mermaid.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
@@ -215,7 +214,6 @@ export default class DesktopLayout {
                                                                 .child(new ContextualHelpButton())
                                                                 .child(new HideFloatingButtonsButton())
                                                         )
-                                                        .child(new MermaidWidget())
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()

src/public/app/widgets/note_detail.ts

@@ -197,7 +197,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         // https://github.com/zadam/trilium/issues/2522
         const isBackendNote = this.noteContext?.noteId === "_backendLog";
         const isSqlNote = this.mime === "text/x-sqlite;schema=trilium";
-        const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "geoMap"].includes(this.type ?? "");
+        const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "geoMap", "mermaid"].includes(this.type ?? "");
         const isFullHeight = (!this.noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote)
             || this.noteContext?.viewScope?.viewMode === "attachments"
             || isBackendNote;

src/public/app/widgets/type_widgets/abstract_split_type_widget.ts

@@ -1,15 +1,32 @@
-import type { EventData } from "../../components/app_context.js";
 import type FNote from "../../entities/fnote.js";
 import EditableCodeTypeWidget from "./editable_code.js";
 import TypeWidget from "./type_widget.js";
 
 const TPL = `\
-<div class="note-detail-split-editor note-detail-printable">
+<div class="note-detail-split note-detail-printable split-horizontal">
     <div class="note-detail-split-preview">
+        Preview goes here.
     </div>
 
     <div class="note-detail-split-editor">
     </div>
+
+    <style>
+        .note-detail-split {
+            display: flex;
+            height: 100%;
+        }
+
+        .note-detail-split.split-horizontal > div {
+            height: 100%;
+            width: 50%;
+        }
+
+        .note-detail-split .note-detail-split-editor {
+            width: 100%;
+        }
+
+    </style>
 </div>
 `;
 
@@ -26,7 +43,6 @@ export default class SplitTypeEditor extends TypeWidget {
     }
 
     doRender(): void {
-        console.log("Render");
         this.$widget = $(TPL);
 
         this.$preview = this.$widget.find(".note-detail-split-preview");
@@ -40,7 +56,6 @@ export default class SplitTypeEditor extends TypeWidget {
         await this.editorTypeWidget.initialized;
 
         if (note) {
-            console.log("Refresh with ", note);
             this.editorTypeWidget.noteContext = this.noteContext;
             this.editorTypeWidget.spacedUpdate = this.spacedUpdate;
             this.editorTypeWidget.doRefresh(note);