From 395d76a156f68186273e44e678f3911a9d085dd1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 21 Mar 2025 21:52:05 +0200
Subject: [PATCH] feat(mermaid): basic horizontal layout

---
 src/public/app/layouts/desktop_layout.ts      |  2 --
 src/public/app/widgets/note_detail.ts         |  2 +-
 .../abstract_split_type_widget.ts             | 23 +++++++++++++++----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/public/app/layouts/desktop_layout.ts b/src/public/app/layouts/desktop_layout.ts
index 129173838..945be3e5e 100644
--- a/src/public/app/layouts/desktop_layout.ts
+++ b/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()
diff --git a/src/public/app/widgets/note_detail.ts b/src/public/app/widgets/note_detail.ts
index fea37940c..b7db17337 100644
--- a/src/public/app/widgets/note_detail.ts
+++ b/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;
diff --git a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
index 54fec9f54..740677610 100644
--- a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
+++ b/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);