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.
This commit is contained in:
MassiveBox 2025-04-05 00:22:38 +02:00
parent e9a9961b61
commit e165c69664
Signed by: massivebox
GPG key ID: 9B74D3A59181947D
2 changed files with 30 additions and 18 deletions

View file

@ -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 Editor, {BaseWidget, EditorEventType} from "js-draw";
import { MaterialIconProvider } from '@js-draw/material-icons'; import { MaterialIconProvider } from '@js-draw/material-icons';
import 'js-draw/styles'; import 'js-draw/styles';
import {getFile, saveFile} from "@/file"; import {getFile, saveFile} from "@/file";
import {DATA_PATH, JSON_MIME, SVG_MIME, TOOLBAR_PATH} from "@/const"; import {DATA_PATH, JSON_MIME, SVG_MIME, TOOLBAR_PATH} from "@/const";
import {idToPath} from "@/helper";
import {replaceAntiCacheID} from "@/protyle"; import {replaceAntiCacheID} from "@/protyle";
import {idToPath} from "@/helper";
export function openEditorTab(p: Plugin, path: string) { 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({ openTab({
app: p.app, app: p.app,
custom: { 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; const editor = new Editor(element, {
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, {
iconProvider: new MaterialIconProvider(), iconProvider: new MaterialIconProvider(),
}); });
@ -79,3 +78,18 @@ export function createEditor(i: ITabModel) {
editor.getRootElement().style.height = '100%'; 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);
}

View file

@ -7,7 +7,7 @@ import {
findImgSrc, findImgSrc,
imgSrcToPath imgSrcToPath
} from "@/helper"; } from "@/helper";
import {createEditor, openEditorTab} from "@/editorTab"; import {editorTabInit, openEditorTab} from "@/editorTab";
import {ASSETS_PATH} from "@/const"; import {ASSETS_PATH} from "@/const";
export default class DrawJSPlugin extends Plugin { export default class DrawJSPlugin extends Plugin {
@ -16,9 +16,7 @@ export default class DrawJSPlugin extends Plugin {
loadIcons(this); loadIcons(this);
this.addTab({ this.addTab({
'type': "whiteboard", 'type': "whiteboard",
init() { init() { editorTabInit(this) }
createEditor(this);
}
}); });
this.protyleSlash = [{ this.protyleSlash = [{