From e165c696643fbba38dacde48881abdd27271dc7b Mon Sep 17 00:00:00 2001
From: MassiveBox <box@massivebox.net>
Date: Sat, 5 Apr 2025 00:22:38 +0200
Subject: [PATCH] Open editor in dialog on mobile SiYuan Mobile doesn't have
 tabs, so the editor has to be opened in a dialog. In the future, consider
 including a setting to open editor in dialog on desktop as well.

---
 src/editorTab.ts | 42 ++++++++++++++++++++++++++++--------------
 src/index.ts     |  6 ++----
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/editorTab.ts b/src/editorTab.ts
index c00b9db..d2f89fb 100644
--- a/src/editorTab.ts
+++ b/src/editorTab.ts
@@ -1,13 +1,22 @@
-import {ITabModel, openTab, Plugin} from "siyuan"
+import {Dialog, getFrontend, ITabModel, openTab, Plugin} from "siyuan"
 import Editor, {BaseWidget, EditorEventType} from "js-draw";
 import { MaterialIconProvider } from '@js-draw/material-icons';
 import 'js-draw/styles';
 import {getFile, saveFile} from "@/file";
 import {DATA_PATH, JSON_MIME, SVG_MIME, TOOLBAR_PATH} from "@/const";
-import {idToPath} from "@/helper";
 import {replaceAntiCacheID} from "@/protyle";
+import {idToPath} from "@/helper";
 
 export function openEditorTab(p: Plugin, path: string) {
+    if(getFrontend() == "mobile") {
+        const dialog = new Dialog({
+            width: "100vw",
+            height: "100vh",
+            content: `<div id="DrawingPanel" style="width:100%; height: 100%;"></div>`,
+        });
+        createEditor(dialog.element.querySelector("#DrawingPanel"), path);
+        return;
+    }
     openTab({
         app: p.app,
         custom: {
@@ -36,19 +45,9 @@ async function saveCallback(editor: Editor, path: string, saveButton: BaseWidget
 
 }
 
-export function createEditor(i: ITabModel) {
+export function createEditor(element: HTMLElement, path: string) {
 
-    let path = i.data.path;
-    if(path == null) {
-        const fileID = i.data.id; // legacy compatibility
-        if (fileID == null) {
-            alert("File ID and path missing - couldn't open file.")
-            return;
-        }
-        path = idToPath(fileID);
-    }
-
-    const editor = new Editor(i.element, {
+    const editor = new Editor(element, {
         iconProvider: new MaterialIconProvider(),
     });
 
@@ -78,4 +77,19 @@ export function createEditor(i: ITabModel) {
     editor.dispatch(editor.setBackgroundStyle({ autoresize: true }), false);
     editor.getRootElement().style.height = '100%';
 
+}
+
+export function editorTabInit(tab: ITabModel) {
+
+    let path = tab.data.path;
+    if(path == null) {
+        const fileID = tab.data.id; // legacy compatibility
+        if (fileID == null) {
+            alert("File ID and path missing - couldn't open file.")
+            return;
+        }
+        path = idToPath(fileID);
+    }
+    createEditor(tab.element, path);
+
 }
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index b5d4e90..a3d8d43 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,7 +7,7 @@ import {
     findImgSrc,
     imgSrcToPath
 } from "@/helper";
-import {createEditor, openEditorTab} from "@/editorTab";
+import {editorTabInit, openEditorTab} from "@/editorTab";
 import {ASSETS_PATH} from "@/const";
 
 export default class DrawJSPlugin extends Plugin {
@@ -16,9 +16,7 @@ export default class DrawJSPlugin extends Plugin {
         loadIcons(this);
         this.addTab({
             'type': "whiteboard",
-            init() {
-                createEditor(this);
-            }
+            init() { editorTabInit(this) }
         });
 
         this.protyleSlash = [{