From 8952ff512fc8baa2cc1f008a2db501e144eb2efc Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 21 Mar 2025 22:02:08 +0200
Subject: [PATCH] feat(split_editor): make the two panes resizable

---
 src/public/app/widgets/mermaid.ts             | 27 -----------
 .../abstract_split_type_widget.ts             | 47 +++++++++++++++++--
 2 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/public/app/widgets/mermaid.ts b/src/public/app/widgets/mermaid.ts
index af297d315..be608ef2c 100644
--- a/src/public/app/widgets/mermaid.ts
+++ b/src/public/app/widgets/mermaid.ts
@@ -6,9 +6,6 @@ import utils from "../services/utils.js";
 import { loadElkIfNeeded, postprocessMermaidSvg } from "../services/mermaid.js";
 import type FNote from "../entities/fnote.js";
 import type { EventData } from "../components/app_context.js";
-import ScrollingContainer from "./containers/scrolling_container.js";
-import Split from "split.js";
-import { DEFAULT_GUTTER_SIZE } from "../services/resizer.js";
 
 const TPL = `<div class="mermaid-widget">
     <style>
@@ -58,7 +55,6 @@ export default class MermaidWidget extends NoteContextAwareWidget {
     private dirtyAttachment?: boolean;
     private zoomHandler?: () => void;
     private zoomInstance?: SvgPanZoom.Instance;
-    private splitInstance?: Split.Instance;
     private lastNote?: FNote;
 
     isEnabled() {
@@ -126,7 +122,6 @@ export default class MermaidWidget extends NoteContextAwareWidget {
             this.$errorContainer.show();
         }
 
-        this.#setupResizer();
         this.lastNote = note;
     }
 
@@ -206,28 +201,6 @@ export default class MermaidWidget extends NoteContextAwareWidget {
         $(window).on("resize", this.zoomHandler);
     }
 
-    #setupResizer() {
-        if (!utils.isDesktop()) {
-            return;
-        }
-
-        const selfEl = this.$widget;
-        const scrollingContainer = this.parent?.children.find((ch) => ch instanceof ScrollingContainer)?.$widget;
-
-        if (!selfEl.length || !scrollingContainer?.length) {
-            return;
-        }
-
-        if (!this.splitInstance) {
-            this.splitInstance = Split([ selfEl[0], scrollingContainer[0] ], {
-                sizes: [ 50, 50 ],
-                direction: "vertical",
-                gutterSize: DEFAULT_GUTTER_SIZE,
-                onDragEnd: () => this.zoomHandler?.()
-            });
-        }
-    }
-
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (this.noteId && loadResults.isNoteContentReloaded(this.noteId)) {
             this.dirtyAttachment = true;
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 740677610..d5870d924 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,6 +1,9 @@
 import type FNote from "../../entities/fnote.js";
+import utils from "../../services/utils.js";
 import EditableCodeTypeWidget from "./editable_code.js";
 import TypeWidget from "./type_widget.js";
+import Split from "split.js";
+import { DEFAULT_GUTTER_SIZE } from "../../services/resizer.js";
 
 const TPL = `\
 <div class="note-detail-split note-detail-printable split-horizontal">
@@ -17,21 +20,39 @@ const TPL = `\
             height: 100%;
         }
 
+        .note-detail-split .note-detail-split-editor {
+            width: 100%;
+        }
+
+        /* Horizontal layout */
+
+        .note-detail-split.split-horizontal > .note-detail-split-editor {
+            border-left: 1px solid var(--main-border-color);
+        }
+
         .note-detail-split.split-horizontal > div {
             height: 100%;
             width: 50%;
         }
 
-        .note-detail-split .note-detail-split-editor {
-            width: 100%;
-        }
+        /* Vertical layout */
+
 
     </style>
 </div>
 `;
 
+/**
+ * Abstract `TypeWidget` which contains a preview and editor pane, each displayed on half of the available screen.
+ *
+ * Features:
+ *
+ * - The two panes are resizeable via a split, on desktop.
+ */
 export default class SplitTypeEditor extends TypeWidget {
 
+    private splitInstance?: Split.Instance;
+
     private $preview!: JQuery<HTMLElement>;
     private $editor!: JQuery<HTMLElement>;
     private editorTypeWidget: EditableCodeTypeWidget;
@@ -48,10 +69,16 @@ export default class SplitTypeEditor extends TypeWidget {
         this.$preview = this.$widget.find(".note-detail-split-preview");
         this.$editor = this.$widget.find(".note-detail-split-editor");
         this.$editor.append(this.editorTypeWidget.render());
+        this.#setupResizer();
 
         super.doRender();
     }
 
+    cleanup(): void {
+        this.splitInstance?.destroy();
+        this.splitInstance = undefined;
+    }
+
     async doRefresh(note: FNote | null | undefined) {
         await this.editorTypeWidget.initialized;
 
@@ -62,6 +89,20 @@ export default class SplitTypeEditor extends TypeWidget {
         }
     }
 
+    #setupResizer() {
+        if (!utils.isDesktop()) {
+            return;
+        }
+
+        this.splitInstance?.destroy();
+        this.splitInstance = Split([ this.$preview[0], this.$editor[0] ], {
+            sizes: [ 50, 50 ],
+            direction: "horizontal",
+            gutterSize: DEFAULT_GUTTER_SIZE,
+            // onDragEnd: () => this.zoomHandler?.()
+        });
+    }
+
     getData() {
         return this.editorTypeWidget.getData();
     }