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 = `
`;
+/**
+ * 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;
private $editor!: JQuery;
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();
}