From bae5dddb60d13d63caf983ee6b961add9e2c1053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A2=96=E9=80=B8?=
 <49649786+Zuoqiu-Yingyi@users.noreply.github.com>
Date: Sat, 15 Jul 2023 13:20:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(monaco-editor):=20=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=BC=96=E8=BE=91=E5=99=A8=20|=20Im?=
 =?UTF-8?q?plement=20sidebar=20editor.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 editor/index.html => iframes/editor.html |   0
 package.json                             |  18 +-
 public/README.md                         |   0
 public/README_zh_CN.md                   |   0
 public/i18n/en_US.json                   |  21 +-
 public/i18n/zh_CHT.json                  |  21 +-
 public/i18n/zh_CN.json                   |  21 +-
 public/icon.png                          | Bin 0 -> 4711 bytes
 public/plugin.json                       |  39 ++++
 src/components/Dock.svelte               |  74 +++++++
 src/components/Editor.svelte             | 220 +++++++++++++++++--
 src/configs/default.ts                   |  64 ++++++
 src/constants.ts                         |  20 ++
 src/editor/index.ts                      | 127 +++++++++++
 src/handlers/block.ts                    |  18 ++
 src/index.ts                             | 263 +++++++++++++++++++++++
 src/main.ts                              |  81 ++++---
 src/types/config.d.ts                    |  49 +++++
 src/types/editor.d.ts                    |  32 +++
 tsconfig.json                            |  17 +-
 tsconfig.node.json                       |  17 +-
 vite.config.ts                           |  92 ++------
 vite.iframes.config.ts                   |  32 +++
 vite.plugin.config.ts                    |  73 +++++++
 vite.share.config.ts                     |  79 +++++++
 25 files changed, 1225 insertions(+), 153 deletions(-)
 rename editor/index.html => iframes/editor.html (100%)
 create mode 100644 public/README.md
 create mode 100644 public/README_zh_CN.md
 create mode 100644 public/icon.png
 create mode 100644 src/components/Dock.svelte
 create mode 100644 src/configs/default.ts
 create mode 100644 src/constants.ts
 create mode 100644 src/editor/index.ts
 create mode 100644 src/handlers/block.ts
 create mode 100644 src/types/config.d.ts
 create mode 100644 src/types/editor.d.ts
 create mode 100644 vite.iframes.config.ts
 create mode 100644 vite.plugin.config.ts
 create mode 100644 vite.share.config.ts

diff --git a/editor/index.html b/iframes/editor.html
similarity index 100%
rename from editor/index.html
rename to iframes/editor.html
diff --git a/package.json b/package.json
index 2c95b22..756961c 100644
--- a/package.json
+++ b/package.json
@@ -5,29 +5,31 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "vite build",
+        "build": "npm run build:plugin && npm run build:iframes",
+        "build:plugin": "vite build --mode plugin",
+        "build:iframes": "vite build --mode iframes",
         "preview": "vite preview",
         "check": "svelte-check --tsconfig ./tsconfig.json"
     },
     "devDependencies": {
+        "@monaco-editor/loader": "^1.3.3",
         "@sveltejs/vite-plugin-svelte": "^2.4.2",
         "@tsconfig/svelte": "^4.0.1",
-        "@types/node": "^20.4.1",
+        "@types/node": "^20.4.2",
+        "deepmerge": "^4.3.1",
         "less": "^4.1.3",
+        "monaco-editor": "^0.40.0",
         "svelte": "^3.59.2",
-        "svelte-check": "^3.4.5",
+        "svelte-check": "^3.4.6",
         "svelte-preprocess-less": "^0.4.0",
         "tslib": "^2.6.0",
         "typescript": "^5.1.6",
-        "vite": "^4.4.2",
-        "vite-plugin-monaco-editor": "^1.1.0",
+        "vite": "^4.4.4",
         "vite-plugin-static-copy": "^0.16.0"
     },
     "dependencies": {
-        "@monaco-editor/loader": "^1.3.3",
         "@workspace/components": "workspace:^",
         "@workspace/types": "workspace:^",
-        "@workspace/utils": "workspace:^",
-        "monaco-editor": "^0.40.0"
+        "@workspace/utils": "workspace:^"
     }
 }
diff --git a/public/README.md b/public/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/public/README_zh_CN.md b/public/README_zh_CN.md
new file mode 100644
index 0000000..e69de29
diff --git a/public/i18n/en_US.json b/public/i18n/en_US.json
index 6e0d1a6..69ed0dc 100644
--- a/public/i18n/en_US.json
+++ b/public/i18n/en_US.json
@@ -1,3 +1,22 @@
 {
-    "displayName": "Code Editor"
+    "displayName": "Code Editor",
+    "dock": {
+        "kramdown": {
+            "ariaLabel": "Edit kramdown"
+        },
+        "title": "Code Edit"
+    },
+    "editor": {
+        "action": {
+            "save": {
+                "label": "Save"
+            },
+            "saveAs": {
+                "label": "Save As"
+            },
+            "toggleWordWrap": {
+                "label": "Toggle Word Wrap"
+            }
+        }
+    }
 }
diff --git a/public/i18n/zh_CHT.json b/public/i18n/zh_CHT.json
index 50e318d..58a9d6a 100644
--- a/public/i18n/zh_CHT.json
+++ b/public/i18n/zh_CHT.json
@@ -1,3 +1,22 @@
 {
-    "displayName": "代碼編輯器"
+    "displayName": "程式碼編輯器",
+    "dock": {
+        "kramdown": {
+            "ariaLabel": "編輯 kramdown"
+        },
+        "title": "程式碼編輯"
+    },
+    "editor": {
+        "action": {
+            "save": {
+                "label": "保存"
+            },
+            "saveAs": {
+                "label": "另存為"
+            },
+            "toggleWordWrap": {
+                "label": "切換自動換行"
+            }
+        }
+    }
 }
diff --git a/public/i18n/zh_CN.json b/public/i18n/zh_CN.json
index fcd8f06..6cdb14d 100644
--- a/public/i18n/zh_CN.json
+++ b/public/i18n/zh_CN.json
@@ -1,3 +1,22 @@
 {
-    "displayName": "代码编辑器"
+    "displayName": "代码编辑器",
+    "dock": {
+        "kramdown": {
+            "ariaLabel": "编辑 kramdown"
+        },
+        "title": "代码编辑"
+    },
+    "editor": {
+        "action": {
+            "save": {
+                "label": "保存"
+            },
+            "saveAs": {
+                "label": "另存为"
+            },
+            "toggleWordWrap": {
+                "label": "切换自动换行"
+            }
+        }
+    }
 }
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fbc5e13b3ec0139bff326cd31bc3e36fac6f151c
GIT binary patch
literal 4711
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

literal 0
HcmV?d00001

diff --git a/public/plugin.json b/public/plugin.json
index e69de29..d33b86e 100644
--- a/public/plugin.json
+++ b/public/plugin.json
@@ -0,0 +1,39 @@
+{
+    "name": "monaco-editor",
+    "author": "Zuoqiu Yingyi",
+    "url": "https://github.com/Zuoqiu-Yingyi/siyuan-plugin-webview",
+    "version": "0.0.0",
+    "minAppVersion": "2.9.5",
+    "backends": [
+        "all"
+    ],
+    "frontends": [
+        "desktop",
+        "desktop-window",
+        "browser-desktop"
+    ],
+    "displayName": {
+        "default": "Code Editor",
+        "zh_CN": "代码编辑器",
+        "zh_CHT": "程式碼編輯器"
+    },
+    "description": {
+        "default": "Use the <a href='https://microsoft.github.io/monaco-editor/'>Monaco Editor</a> to view and edit code.",
+        "zh_CN": "使用 <a href='https://microsoft.github.io/monaco-editor/'>Monaco Editor</a> 查看与编辑代码。",
+        "zh_CHT": "使用 <a href='https://microsoft.github.io/monaco-editor/'>Monaco Editor</a> 檢視與編輯程式碼。"
+    },
+    "readme": {
+        "default": "README.md",
+        "zh_CN": "README_zh_CN.md",
+        "zh_CHT": "README_zh_CN.md"
+    },
+    "funding": {
+        "openCollective": "",
+        "patreon": "",
+        "github": "",
+        "custom": [
+            "https://afdian.net/a/zuoqiu",
+            "https://ko-fi.com/zuoqiu"
+        ]
+    }
+}
diff --git a/src/components/Dock.svelte b/src/components/Dock.svelte
new file mode 100644
index 0000000..eb96d7e
--- /dev/null
+++ b/src/components/Dock.svelte
@@ -0,0 +1,74 @@
+<!--
+ Copyright (C) 2023 Zuoqiu Yingyi
+ 
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as
+ published by the Free Software Foundation, either version 3 of the
+ License, or (at your option) any later version.
+ 
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+ 
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts">
+    import type { ComponentEvents } from "svelte";
+    import Bar from "@workspace/components/siyuan/dock/block/Bar.svelte";
+    import Editor from "./Editor.svelte";
+
+    import regexp from "@workspace/utils/regexp";
+    import type { IBar } from "@workspace/components/siyuan/dock/block/index";
+
+    import type MonacoEditorPlugin from "@/index";
+    import type { IDockEditor } from "@/types/editor";
+
+    export let plugin: InstanceType<typeof MonacoEditorPlugin>; // 插件对象
+    export let id: string; // 块 ID
+    export let kramdown: boolean; // 是否启用 kramdown 模式
+
+    export let bar: IBar; // 标题栏配置
+    export let editor: IDockEditor; // 编辑器配置
+
+    $: {
+        if (regexp.id.test(id)) {
+            if (kramdown) {
+                plugin.client
+                    .getBlockKramdown({ id })
+                    .then(response => {
+                        editor.modified.value = response.data.kramdown;
+                    })
+                    .catch(err => plugin.logger.error(err));
+            } else {
+                // TODO: markdown 模式
+            }
+        }
+    }
+
+    function save(e: ComponentEvents<Editor>["save"]) {
+        if (kramdown) {
+            plugin.client
+                .updateBlock({
+                    id,
+                    dataType: "markdown",
+                    data: e.detail.value,
+                })
+                .catch(err => plugin.logger.error(err));
+        } else {
+            // TODO: markdown 模式
+        }
+    }
+</script>
+
+<Bar {...bar} />
+<Editor
+    on:save={save}
+    {...editor}
+    {plugin}
+    embed={true}
+    savable={true}
+    locale={globalThis.siyuan.config.lang}
+/>
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
index 2d10d85..2e9709a 100644
--- a/src/components/Editor.svelte
+++ b/src/components/Editor.svelte
@@ -16,33 +16,114 @@
 -->
 
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onMount, createEventDispatcher } from "svelte";
 
-    import type { editor } from "monaco-editor";
+    import type { default as Monaco, editor as Editor } from "monaco-editor";
     import loader from "@monaco-editor/loader";
+
+    import type MonacoEditorPlugin from "@/index";
     import { mapLocale } from "@/utils/locale";
+    import type { IEditorModel } from "@/types/editor";
+    import type { IMonacoEditorOptions } from "@/types/config";
 
     import { merge } from "@workspace/utils/misc/merge";
+    import { SaveFileAs } from "@workspace/utils/misc/save";
+    import { FLAG_ELECTRON } from "@workspace/utils/env/front-end";
+
+    export let plugin: InstanceType<typeof MonacoEditorPlugin>;
+
+    export let embed: boolean = false; // 是否为嵌入模式 (嵌入在思源页面中)
+
+    export let diff: boolean = false; // 是否为差异对比模式
+    export let savable: boolean = false; // 是否可保存
 
     export let locale = "zh-Hans"; // 界面语言
-    export let content = ""; // 编辑器内容
-    export let language = "plaintext"; // 编辑器语言模式
-    export let options: editor.IStandaloneEditorConstructionOptions = {}; // 编辑器配置
+    export let original: IEditorModel = { value: "" }; // 差异对比模式下的原始内容
+    export let modified: IEditorModel = { value: "" }; // 编辑器内容 (差异对比模式下的变更内容)
+    export let options: IMonacoEditorOptions = {}; // 编辑器配置
 
-    let editorElement;
+    let monaco: typeof Monaco; // monaco-editor 实例
+    let editorElement: HTMLDivElement; // 编辑器挂载的元素
+    let editor: Editor.IStandaloneCodeEditor; // 常规编辑器实例 (差异对比模式下的修改编辑器)
+    let diffEditor: Editor.IStandaloneDiffEditor; // 差异对比编辑器实例
 
-    loader.config({
-        paths: {
-            vs: (() => {
+    var inited = false; // 编辑器是否初始化完成
+
+    const i18n = plugin.i18n;
+    const dispatch = createEventDispatcher<{
+        changed: {
+            value: string;
+            event: Editor.IModelContentChangedEvent;
+        }; // 内容更改事件
+        save: { value: string }; // 保存事件
+    }>();
+
+    /* 更改编辑器语言类型 */
+    $: {
+        if (inited) {
+            if (diff) {
+                monaco.editor.setModelLanguage(
+                    diffEditor.getOriginalEditor().getModel(), //
+                    original.language, //
+                );
+                monaco.editor.setModelLanguage(
+                    diffEditor.getModifiedEditor().getModel(), //
+                    modified.language, //
+                );
+            } else {
+                monaco.editor.setModelLanguage(
+                    editor.getModel(), //
+                    modified.language, //
+                );
+            }
+        }
+    }
+
+    /* 更改编辑器内容 */
+    $: {
+        if (inited) {
+            if (diff) {
+                diffEditor.getOriginalEditor().setValue(original.value);
+                diffEditor.getModifiedEditor().setValue(modified.value);
+            } else {
+                editor.setValue(modified.value);
+            }
+        }
+    }
+
+    // monaco editor 资源目录
+    const vs = (() => {
+        switch (true) {
+            case import.meta.env.DEV: // 开发模式
+                return "node_modules/monaco-editor/min/vs";
+
+            case import.meta.env.PROD: // 生产环境
+            default:
                 switch (true) {
-                    case import.meta.env.DEV:
-                        return "node_modules/monaco-editor/min/vs";
+                    case embed: // 嵌入到思源内部
+                        switch (true) {
+                            case FLAG_ELECTRON: {
+                                // Electron 环境
+                                return globalThis.require("path").resolve(globalThis.siyuan.config.system.workspaceDir, `./data/plugins/${plugin.name}/libs/monaco-editor/min/vs`);
+                                // return `${globalThis.siyuan.system.workspaceDir}/data/plugins/${plugin.name}/libs/monaco-editor/min/vs`;
+                            }
+                            default: {
+                                // 浏览器环境
+                                const url = new URL(`${globalThis.document.baseURI}plugins/${plugin.name}/libs/monaco-editor/min/vs`);
+                                return url.pathname;
+                            }
+                        }
 
-                    case import.meta.env.PROD:
-                    default:
+                    default: // 通过 iframe 加载
                         return "./../libs/monaco-editor/min/vs";
                 }
-            })(),
+        }
+    })();
+    // plugin.logger.debug(vs);
+
+    loader.config({
+        paths: {
+            vs,
         },
         // monaco,
         "vs/nls": {
@@ -54,14 +135,106 @@
     const init = loader.init();
 
     onMount(() => {
-        init.then(monaco => {
-            const editor = monaco.editor.create(
-                editorElement,
-                merge(options, {
-                    value: content,
-                    language: language,
-                }),
-            );
+        init.then(instance => {
+            monaco = instance;
+            if (diff) {
+                // 差异对比编辑器
+                diffEditor = monaco.editor.createDiffEditor(
+                    editorElement, //
+                    options, //
+                );
+                diffEditor.setModel({
+                    original: monaco.editor.createModel(
+                        original.value, //
+                        original.language, //
+                        original.uri, //
+                    ),
+                    modified: monaco.editor.createModel(
+                        modified.value, //
+                        modified.language, //
+                        modified.uri, //
+                    ),
+                });
+                editor = diffEditor.getModifiedEditor();
+            } else {
+                // 常规编辑器
+                editor = monaco.editor.create(
+                    editorElement, //
+                    merge(options, modified), //
+                );
+            }
+
+            /**
+             * 监听编辑器内容变更事件
+             * REF: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html#onDidChangeModelContent
+             */
+            editor.onDidChangeModelContent(e => {
+                dispatch("changed", {
+                    value: editor.getValue(),
+                    event: e,
+                });
+            });
+
+            /**
+             * 注册命令
+             * REF: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IActionDescriptor.html
+             */
+            /* 切换自动换行 */
+            editor.addAction({
+                id: "F9E62A24-619E-49EA-A870-B31E6F9D284F", // 菜单项 id
+                label: i18n.editor.action.toggleWordWrap.label, // 菜单项名称
+                /**
+                 * REF: https://microsoft.github.io/monaco-editor/api/classes/monaco.KeyMod.html
+                 * REF: https://microsoft.github.io/monaco-editor/api/enums/monaco.KeyCode.html
+                 */
+                keybindings: [monaco.KeyMod.Alt | monaco.KeyCode.KeyZ], // 绑定快捷键
+                contextMenuGroupId: "2_view", // 所属菜单的分组
+                contextMenuOrder: 1, // 菜单分组内排序
+                run: () => {
+                    // 点击后执行的操作
+                    // Editor.EditorOption.wordWrap === 128
+                    const word_wrap_status = editor.getOption(128) === "off" ? "on" : "off";
+                    if (diff) {
+                        diffEditor.getOriginalEditor().updateOptions({ wordWrap: word_wrap_status });
+                        diffEditor.getModifiedEditor().updateOptions({ wordWrap: word_wrap_status });
+                    } else {
+                        editor.updateOptions({ wordWrap: word_wrap_status });
+                    }
+                },
+            });
+            /* 保存 */
+            if (savable) {
+                editor.addAction({
+                    id: "18730D32-5451-4102-B299-BE281BA929B9",
+                    label: i18n.editor.action.save.label,
+                    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+                    contextMenuGroupId: "3_file",
+                    contextMenuOrder: 1,
+                    run: () => {
+                        dispatch("save", {
+                            value: editor.getValue(),
+                        });
+                    },
+                });
+            }
+            /* 另存为文件 */
+            editor.addAction({
+                id: "D68588DD-8D0C-4435-8DC2-145B0F464FF8",
+                label: i18n.editor.action.saveAs.label,
+                keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyS],
+                contextMenuGroupId: "3_file",
+                contextMenuOrder: 2,
+                run: () => {
+                    SaveFileAs({
+                        data: editor.getValue(),
+                    });
+                },
+            });
+
+            inited = true;
+        }).catch(err => {
+            inited = false;
+            plugin.logger.error(err);
         });
     });
 </script>
@@ -69,7 +242,8 @@
 <!-- REF: https://www.svelte.cn/docs#bind_element -->
 <div
     bind:this={editorElement}
-    class="editor"
+    class:fn__flex-1={embed}
+    class:editor={!embed}
 />
 
 <style lang="less">
diff --git a/src/configs/default.ts b/src/configs/default.ts
new file mode 100644
index 0000000..9494846
--- /dev/null
+++ b/src/configs/default.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { IConfig, IMonacoEditorOptions } from "@/types/config";
+// import type { editor as Editor } from "monaco-editor";
+
+/**
+ * 将思源的设置转换为编辑器设置
+ */
+export function siyuanConfig2EditorOptions(config = globalThis.siyuan.config): IMonacoEditorOptions {
+    return {
+        /**
+         * REF: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
+         * REF: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties#javascript_%E4%B8%AD%E7%9A%84%E5%80%BC
+         */
+        fontFamily: globalThis.getComputedStyle(document.documentElement).getPropertyValue("--b3-font-family-code"),
+        fontLigatures: config.editor.codeLigatures,
+        mouseWheelZoom: config.editor.fontSizeScrollZoom,
+        readOnly: config.editor.readOnly,
+        tabSize: config.editor.codeTabSpaces,
+        wordWrap: config.editor.wordWrap ? "on" : "off",
+        theme: config.appearance.mode === 0 ? "vs" : "vs-dark",
+    };
+}
+
+export const DEFAULT_CONFIG: IConfig = {
+    editor: {
+        options: {
+            // autoClosingBrackets: 'languageDefined', // 是否自动添加后括号(包括中括号)
+            // autoClosingDelete: 'languageDefined', // 是否自动删除后括号(包括中括号)
+            // autoClosingQuotes: 'languageDefined', // 是否自动添加后单引号 双引号
+            automaticLayout: true, // 是否自动布局
+            bracketPairColorization: { // 匹配括号颜色
+                enabled: true,
+            },
+            colorDecorators: true, // 是否渲染定义的颜色(CSS 中颜色值)
+            copyWithSyntaxHighlighting: false, // 是否复制为富文本
+            // cursorSmoothCaretAnimation: true, // 光标平滑移动动画
+            fontFamily: '"JetBrainsMono-Regular", mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"', // 字体
+            fontLigatures: true, // 是否启用字体连字
+            formatOnPaste: true, // 是否格式化粘贴的内容
+            // inDiffEditor: false, // 是启用对比功能
+            mouseWheelZoom: true, // 是否使用鼠标滚轮缩放
+            readOnly: false, // 是否只读
+            tabSize: 4, // Tab 制表符缩进大小
+            useShadowDOM: true, // 是否使用 Shadow DOM
+            wordWrap: 'off', // 是否自动换行 "on" | "off" | "wordWrapColumn" | "bounded"
+        },
+    },
+};
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..0e2d648
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export default {
+    INIT_CHANNEL_NAME: "monaco-editor-init", // 初始化通道名称
+}
diff --git a/src/editor/index.ts b/src/editor/index.ts
new file mode 100644
index 0000000..96aa6e1
--- /dev/null
+++ b/src/editor/index.ts
@@ -0,0 +1,127 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import constants from "@/constants";
+
+import { isElectron } from "@workspace/utils/env/front-end";
+import MonacoEditorPlugin from "@/index";
+
+import type { Electron } from "@workspace/types/electron";
+
+export class Editor {
+    constructor(
+        public readonly plugin: InstanceType<typeof MonacoEditorPlugin>, // 插件对象
+        public readonly channel: MessageChannel | Electron.MessageChannelMain, // 消息通道
+        public readonly url: URL = new URL(`${globalThis.document.baseURI}plugins/${plugin.name}/iframes/editor.html`), // 编辑器 URL
+    ) { }
+
+    /**
+     * 编辑器加载完成监听器
+     */
+    protected loadListener = () => {
+
+    }
+
+    /**
+     * 在新窗口中打开编辑器
+    */
+    public openEditorInWindow(
+        params: Electron.BrowserWindowConstructorOptions,
+    ) {
+        if (isElectron()) {
+            try {
+                const { BrowserWindow } = globalThis.require("@electron/remote") as Electron.RemoteMainInterface;
+                const window = new BrowserWindow(params);
+
+                /* 启用 Electron 环境 */
+                globalThis
+                    .require('@electron/remote')
+                    .require('@electron/remote/main')
+                    .enable(window.webContents);
+
+                /* 加载 URL */
+                window.loadURL(this.url.href);
+
+                /**
+                 * 编辑器加载完成
+                 * REF: https://www.electronjs.org/zh/docs/latest/api/web-contents#event-did-finish-load
+                 */
+                window.webContents.once("did-finish-load", () => {
+                    /**
+                     * 向窗口发送消息以建立消息通道
+                     * REF: https://www.electronjs.org/zh/docs/latest/api/web-contents#contentspostmessagechannel-message-transfer
+                     */
+                    window.webContents.postMessage(
+                        constants.INIT_CHANNEL_NAME,
+                        undefined,
+                        [this.channel.port2 as Electron.MessagePortMain],
+                    );
+                });
+
+                return window;
+            } catch (err) {
+                this.plugin.logger.warn(err);
+            }
+        }
+        else {
+            const window = globalThis.open(
+                this.url,
+                this.url.href,
+                [
+                    `popup = true`,
+                    `width = ${params.width}`,
+                    `height = ${params.height}`,
+                    `left = ${params.x}`,
+                    `top = ${params.y}`,
+                ].join(","),
+            );
+            window.addEventListener("load", () => {
+                /**
+                 * 向窗口发送消息以建立消息通道
+                 * REF: https://zh.javascript.info/cross-window-communication#iframe-cuo-wu-wen-dang-xian-jing
+                 * REF: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
+                 */
+                window.postMessage(
+                    undefined,
+                    "*",
+                    [this.channel.port2 as MessagePort],
+                );
+            });
+            return window;
+        }
+    }
+
+    /**
+     * 在 iframe 中打开
+     */
+    public openEditorInIframe(
+        iframe: HTMLIFrameElement = globalThis.document.createElement("iframe"),
+    ): HTMLIFrameElement {
+        iframe.src = this.url.href;
+        iframe.addEventListener("load", () => {
+            /**
+             * 向 iframe 发送消息以建立消息通道
+             * REF: https://github.com/mdn/dom-examples/blob/main/channel-messaging-basic/index.html
+             */
+            iframe.contentWindow.postMessage(
+                undefined,
+                "*",
+                [this.channel.port2 as MessagePort],
+            );
+        });
+        return iframe;
+    }
+}
diff --git a/src/handlers/block.ts b/src/handlers/block.ts
new file mode 100644
index 0000000..1d94c97
--- /dev/null
+++ b/src/handlers/block.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* 块处理器 */
diff --git a/src/index.ts b/src/index.ts
index ce07e9f..21b3394 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,5 +18,268 @@
 /* 插件入口 */
 import siyuan from "siyuan";
 
+import { Client } from "@siyuan-community/siyuan-sdk";
+
+import {
+    FLAG_ELECTRON,
+    FLAG_DESKTOP,
+    FLAG_MOBILE,
+} from "@workspace/utils/env/front-end";
+import { Logger } from "@workspace/utils/logger";
+import { getBlockID } from "@workspace/utils/siyuan/dom";
+import { merge } from "@workspace/utils/misc/merge";
+import { getBlockMenuContext } from "@workspace/utils/siyuan/menu/block";
+import { getElementScreenPosition } from "@workspace/utils/misc/position";
+
+import type { IClickBlockIconEvent, IClickEditorContentEvent } from "@workspace/types/siyuan/events";
+
+import Dock from "./components/Dock.svelte";
+import { DEFAULT_CONFIG, siyuanConfig2EditorOptions } from "./configs/default";
+import { Editor } from "./editor";
+
+import type {
+    IConfig, IEditorOptions,
+} from "./types/config";
+import type { I18N } from "@/utils/i18n";
+import type { BlockID } from "@workspace/types/siyuan";
+
 export default class MonacoEditorPlugin extends siyuan.Plugin {
+    static readonly GLOBAL_CONFIG_NAME = "global-config";
+
+    declare public readonly i18n: I18N;
+    public readonly siyuan = siyuan;
+    public readonly logger: InstanceType<typeof Logger>;
+    public readonly client: InstanceType<typeof Client>;
+
+    protected readonly EDITOR_URL: URL;
+    protected readonly SETTINGS_DIALOG_ID: string;
+    protected readonly tab: ReturnType<siyuan.Plugin["addTab"]>;
+    protected readonly dock: {
+        // editor: InstanceType<typeof Editor>,
+        object: ReturnType<siyuan.Plugin["addDock"]>,
+        model?: siyuan.IModel,
+        component?: InstanceType<typeof Dock>,
+    };
+    protected config: IConfig;
+
+    constructor(options: any) {
+        super(options);
+
+        this.logger = new Logger(this.name);
+        this.client = new Client();
+        this.EDITOR_URL = new URL(`${globalThis.document.baseURI}plugins/${this.name}/editor`);
+        this.SETTINGS_DIALOG_ID = `${this.name}-settings-dialog`;
+
+        const plugin = this;
+        this.tab = this.addTab({
+            type: "-editor-tab",
+            init() {
+                // const tab = this;
+                // new Editor({
+                //     // target,
+                //     target: tab.element,
+                //     props: {
+                //         src: tab.data.href,
+                //         tab,
+                //         plugin,
+                //     },
+                // });
+            },
+        });
+        this.dock = {
+            object: this.addDock({
+                config: {
+                    position: "BottomRight",
+                    size: { width: 256, height: 256 },
+                    icon: "iconCode",
+                    title: this.i18n.dock.title,
+                    show: true,
+                },
+                data: {
+                    id: "",
+                    kramdown: true,
+                },
+                type: "-dock-panel",
+                init() {
+                    // plugin.logger.debug(this);
+                    (this.element as HTMLElement).classList.add("fn__flex-column");
+                    const dock = new Dock({
+                        target: this.element,
+                        props: {
+                            plugin,
+                            id: this.data.id,
+                            kramdown: this.data.kramdown,
+
+                            bar: {
+                                logo: "#iconCode",
+                                title: plugin.i18n.dock.title,
+                                icons: [
+                                    {
+                                        icon: "#iconMarkdown",
+                                        type: "kramdown",
+                                        active: this.data.kramdown,
+                                        ariaLabel: plugin.i18n.dock.kramdown.ariaLabel,
+                                        onClick: (element, _e) => {
+                                            element.classList.toggle("toolbar__item--active");
+                                            if (element.classList.contains("toolbar__item--active")) {
+                                                plugin.dock.component.$set({ kramdown: true });
+                                            }
+                                            else {
+                                                plugin.dock.component.$set({ kramdown: false });
+                                            }
+                                        }
+                                    },
+                                    {
+                                        icon: "#iconMin",
+                                        type: "min",
+                                        ariaLabel: `${globalThis.siyuan.languages.min} ${siyuan.adaptHotkey("⌘W")}`,
+                                    },
+                                ],
+                            },
+                            editor: {
+                                modified: {
+                                    value: "",
+                                    language: "markdown",
+                                },
+                                options: plugin.config.editor.options,
+                            },
+                        },
+                    });
+                    plugin.dock.model = this;
+                    plugin.dock.component = dock;
+                },
+                destroy() {
+                    plugin.dock.component?.$destroy();
+                    delete plugin.dock.component;
+                },
+            }),
+        }
+    }
+
+    onload(): void {
+        // this.logger.debug(this);
+        this.loadData(MonacoEditorPlugin.GLOBAL_CONFIG_NAME)
+            .then(config => {
+                this.config = merge(DEFAULT_CONFIG, config || {}) as IConfig;
+                this.updateConfigBySiyuanConfig();
+            })
+            .catch(error => this.logger.error(error))
+            .finally(() => {
+                // globalThis.addEventListener(this.config.view.open.mouse.type, this.openViewEventListener, true);
+                // globalThis.addEventListener(this.config.edit.open.mouse.type, this.openEditEventListener, true);
+
+                /* 编辑区点击 */
+                this.eventBus.on("click-editorcontent", this.clickEditorContentEventListener);
+
+                /* 其他块菜单 */
+                this.eventBus.on("click-blockicon", this.blockMenuEventListener);
+                // /* 文档块菜单 */
+                // this.eventBus.on("click-editortitleicon", this.blockMenuEventListener);
+                // /* 块引用菜单 */
+                // this.eventBus.on("open-menu-blockref", this.blockRefMenuEventListener);
+                // /* 超链接菜单 */
+                // this.eventBus.on("open-menu-link", this.linkMenuEventListener);
+
+                // /* 快捷键/命令 */
+                // this.addCommand({
+                //     langKey: "openDesktopWindow",
+                //     langText: this.i18n.menu.openDesktopWindow.label,
+                //     hotkey: "⇧⌘N",
+                //     customHotkey: "",
+                //     callback: () => {
+                //         this.openSiyuanDesktopWindow();
+                //     },
+                // });
+                // this.addCommand({
+                //     langKey: "openMobildWindow",
+                //     langText: this.i18n.menu.openMobildWindow.label,
+                //     hotkey: "",
+                //     customHotkey: "",
+                //     callback: () => {
+                //         this.openSiyuanMobileWindow();
+                //     },
+                // });
+
+            })
+    }
+
+    onLayoutReady(): void {
+        this.openSetting();
+    }
+
+    onunload(): void {
+        // globalThis.removeEventListener(this.config.view.open.mouse.type, this.openTabEventListener, true);
+        // globalThis.removeEventListener(this.config.edit.open.mouse.type, this.openWindowEventListener, true);
+
+        this.eventBus.off("click-editorcontent", this.clickEditorContentEventListener);
+
+        this.eventBus.off("click-blockicon", this.blockMenuEventListener);
+        // this.eventBus.off("click-editortitleicon", this.blockMenuEventListener);
+        // this.eventBus.off("open-menu-blockref", this.blockRefMenuEventListener);
+        // this.eventBus.off("open-menu-link", this.linkMenuEventListener);
+    }
+
+    openSetting(): void {
+        // const that = this;
+        // const dialog = new siyuan.Dialog({
+        //     title: `${this.i18n.displayName} <code class="fn__code">${this.name}</code>`,
+        //     content: `<div id="${that.SETTINGS_DIALOG_ID}" class="fn__flex-column" />`,
+        //     width: FLAG_MOBILE ? "92vw" : "720px",
+        //     height: FLAG_MOBILE ? undefined : "640px",
+        // });
+        // const settings = new Settings({
+        //     target: dialog.element.querySelector(`#${that.SETTINGS_DIALOG_ID}`),
+        //     props: {
+        //         config: this.config,
+        //         plugin: this,
+        //     },
+        // });
+    }
+
+    /* 重置插件配置 */
+    public async resetConfig(): Promise<void> {
+        return this.updateConfig(merge(DEFAULT_CONFIG) as IConfig);
+    }
+
+    /* 更新插件配置 */
+    public async updateConfig(config?: IConfig): Promise<void> {
+        if (config && config !== this.config) {
+            this.config = config;
+        }
+        this.updateConfigBySiyuanConfig();
+        return this.saveData(MonacoEditorPlugin.GLOBAL_CONFIG_NAME, this.config);
+    }
+
+    /* 通过思源配置更新插件配置 */
+    public updateConfigBySiyuanConfig(): void {
+        this.config.editor.options = merge(this.config.editor.options, siyuanConfig2EditorOptions());
+    }
+
+    /* 更新侧边栏编辑器内容 */
+    public updateDockEditor(id: BlockID): void {
+        if (this.dock.model && this.dock.component) {
+            this.dock.model.data.id = id;
+            this.dock.component.$set({ id });
+        }
+    }
+
+    /* 编辑器点击事件监听器 */
+    protected clickEditorContentEventListener = (e: IClickEditorContentEvent) => {
+        // this.logger.debug(e);
+        // this.logger.debug(this.dock);
+        const block_id = getBlockID(e.detail.event);
+        if (block_id) {
+            this.updateDockEditor(block_id);
+        }
+    }
+
+    /* 块菜单弹出事件监听器 */
+    protected blockMenuEventListener = (e: IClickBlockIconEvent) => {
+        const context = getBlockMenuContext(e.detail);
+
+        /* 非文档块, 非多个块 */
+        if (!context.isDocumentBlock && !context.isMultiBlock) {
+            this.updateDockEditor(context.id);
+        }
+    }
 }
diff --git a/src/main.ts b/src/main.ts
index a535a87..1dadb3f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,42 +17,59 @@
 
 /* 界面入口 */
 import Main from "./components/Main.svelte";
+import constants from "./constants";
 import "./styles/main.less";
 
+import {
+    FLAG_ELECTRON,
+    FLAG_IFRAME,
+} from "@workspace/utils/env/front-end";
+
+import type { Electron } from "@workspace/types/electron";
+
+/* 通道端口 */
+var port: MessagePort;
+
 /**
- * Monaco Editor 环境
- * REF: https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
+ * 初始化监听器
  */
-self.MonacoEnvironment = {
-    getWorker: function (workerId, label) {
-        const getWorkerModule = (moduleUrl, label) => {
-            return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl, label), {
-                name: label,
-                type: "module",
-            });
-        };
-
-        switch (label) {
-            case "json":
-                return getWorkerModule("/monaco-editor/esm/vs/language/json/json.worker?worker", label);
-            case "css":
-            case "scss":
-            case "less":
-                return getWorkerModule("/monaco-editor/esm/vs/language/css/css.worker?worker", label);
-            case "html":
-            case "handlebars":
-            case "razor":
-                return getWorkerModule("/monaco-editor/esm/vs/language/html/html.worker?worker", label);
-            case "js":
-            case "ts":
-            case "javascript":
-            case "typescript":
-                return getWorkerModule("/monaco-editor/esm/vs/language/typescript/ts.worker?worker", label);
-            default:
-                return getWorkerModule("/monaco-editor/esm/vs/editor/editor.worker?worker", label);
-        }
-    },
-};
+async function initListener(e: MessageEvent | Electron.IpcRendererEvent) {
+    port = e.ports[0];
+    port.onmessage = messageListener;
+}
+
+/**
+ * 消息监听器
+ */
+async function messageListener(e: MessageEvent) {
+    console.log(e);
+}
+
+switch (true) {
+    case FLAG_ELECTRON: {
+        /**
+         * 使用 ipcRenderer 获取 MessagePortMain
+         * REF: https://www.electronjs.org/zh/docs/latest/api/ipc-renderer
+         * REF: https://www.electronjs.org/zh/docs/latest/tutorial/ipc
+         * REF: https://www.electronjs.org/zh/docs/latest/api/message-channel-main
+         */
+        const { ipcRenderer } = globalThis.require("electron") as { ipcRenderer: Electron.IpcRenderer };
+        ipcRenderer.once(constants.INIT_CHANNEL_NAME, initListener);
+        break;
+    }
+    case FLAG_IFRAME: {
+        /**
+         * 使用 addEventListener("message") 获取 MessagePort
+         * REF: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage#the_dispatched_event
+         * REF: https://developer.mozilla.org/zh-CN/docs/Web/API/MessagePort
+         * REF: https://github.com/mdn/dom-examples/blob/main/channel-messaging-basic/page2.html
+         */
+        globalThis.addEventListener("message", initListener, { once: true });
+        break;
+    }
+    default:
+        break;
+}
 
 const main = new Main({
     target: globalThis.document.body,
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
new file mode 100644
index 0000000..005442c
--- /dev/null
+++ b/src/types/config.d.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { editor as Editor } from "monaco-editor";
+
+export type IMonacoEditorOptions = Editor.IStandaloneEditorConstructionOptions & Editor.IStandaloneDiffEditorConstructionOptions;
+
+export interface IEditor {
+    options: IEditorOptions;
+}
+
+export interface IEditorOptions extends IMonacoEditorOptions {
+    // autoClosingBrackets: 'languageDefined', // 是否自动添加后括号(包括中括号)
+    // autoClosingDelete: 'languageDefined', // 是否自动删除后括号(包括中括号)
+    // autoClosingQuotes: 'languageDefined', // 是否自动添加后单引号 双引号
+    automaticLayout: IMonacoEditorOptions["automaticLayout"], // 是否自动布局
+    bracketPairColorization: IMonacoEditorOptions["bracketPairColorization"], // 匹配括号颜色
+    colorDecorators: IMonacoEditorOptions["colorDecorators"], // 是否渲染定义的颜色(CSS 中颜色值)
+    // copyWithSyntaxHighlighting: false, // 是否复制为富文本
+    // cursorSmoothCaretAnimation: true, // 光标平滑移动动画
+    fontFamily: IMonacoEditorOptions["fontFamily"], // 字体
+    fontLigatures: IMonacoEditorOptions["fontLigatures"], // 是否启用字体连字
+    formatOnPaste: IMonacoEditorOptions["formatOnPaste"], // 是否格式化粘贴的内容
+    // inDiffEditor: false, // 是启用对比功能
+    mouseWheelZoom: IMonacoEditorOptions["mouseWheelZoom"], // 是否使用鼠标滚轮缩放
+    readOnly: IMonacoEditorOptions["readOnly"], // 是否只读
+    tabSize: number, // Tab 制表符缩进大小
+    useShadowDOM: IMonacoEditorOptions["useShadowDOM"], // 是否使用 Shadow DOM
+    // value: '', // 初始文本
+    wordWrap: IMonacoEditorOptions["wordWrap"], // 是否自动换行 "on" | "off" | "wordWrapColumn" | "bounded"
+}
+
+export interface IConfig {
+    editor: IEditor;
+}
diff --git a/src/types/editor.d.ts b/src/types/editor.d.ts
new file mode 100644
index 0000000..4077161
--- /dev/null
+++ b/src/types/editor.d.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { editor as Editor } from "monaco-editor";
+import type { IMonacoEditorOptions } from "@/types/config";
+
+/* 编辑器模式 */
+export interface IEditorModel {
+    value: string; // 编辑器内容
+    language?: string; // 编辑器语言模式
+    uri?: Editor.Uri; // 通过 URI 推断编辑器语言模式
+}
+
+/* 侧边栏编辑器 */
+export interface IDockEditor {
+    modified: IEditorModel,
+    options: IMonacoEditorOptions,
+}
diff --git a/tsconfig.json b/tsconfig.json
index de72301..051ad8f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,7 @@
         "isolatedModules": true,
         "lib": [
             "ESNext",
-            "DOM"
+            "DOM",
         ],
         "baseUrl": "./",
         "paths": {
@@ -25,23 +25,24 @@
             ],
             "@/*": [
                 "src/*"
-            ]
-        }
+            ],
+        },
     },
     "include": [
         "public/i18n/*.json",
         "src/**/*.d.ts",
         "src/**/*.ts",
         "src/**/*.js",
-        "src/**/*.svelte"
+        "src/**/*.svelte",
     ],
     "exclude": [
+        "dist",
         "node_modules",
-        "temp"
+        "temp",
     ],
     "references": [
         {
-            "path": "./tsconfig.node.json"
-        }
-    ]
+            "path": "./tsconfig.node.json",
+        },
+    ],
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 494bfe0..11e1806 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,9 +1,12 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler"
-  },
-  "include": ["vite.config.ts"]
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+    },
+    "include": [
+        "vite.config.ts",
+        "vite.*.config.ts",
+    ],
 }
diff --git a/vite.config.ts b/vite.config.ts
index 9e99f71..dce9009 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,81 +15,29 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { defineConfig } from "vite";
-import { resolve } from "path"
+import { defineConfig, UserConfig } from "vite";
+import viteShareConfig from "./vite.share.config";
+import vitePluginConfig from "./vite.plugin.config";
+import viteIframesConfig from "./vite.iframes.config";
 
-import monacoEditorPlugin from 'vite-plugin-monaco-editor';
-import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { less } from "svelte-preprocess-less";
+import deepmerge from "deepmerge";
 
-import { viteStaticCopy } from 'vite-plugin-static-copy'
+// REF: https://cn.vitejs.dev/config/#conditional-config
+export default defineConfig(async env => {
+    var config: UserConfig;
+    // console.log(env);
 
-// https://vitejs.dev/config/
-export default defineConfig({
-    base: `./`,
-    plugins: [
-        (monacoEditorPlugin as any).default({}),
-        svelte({
-            preprocess: {
-                style: less(),
-            },
-        }),
-        viteStaticCopy({
-            targets: [
-                {
-                    src: "./node_modules/monaco-editor/min",
-                    dest: "./libs/monaco-editor",
-                    rename: "min",
-                },
-            ],
-        }),
-    ],
-    resolve: {
-        alias: {
-            "~": resolve(__dirname, "./"),
-            "@": resolve(__dirname, "./src"),
-        },
-    },
-    build: {
-        // minify: true,
-        // sourcemap: "inline",
-        lib: {
-            entry: resolve(__dirname, "src/index.ts"),
-            fileName: "index",
-            formats: ["cjs"],
-        },
-        rollupOptions: {
-            input: {
-                index: resolve(__dirname, "src/index.ts"),
-                editor: resolve(__dirname, "editor/index.html"),
-            },
-            external: [
-                "siyuan",
-                /^@electron\/.*$/,
-            ],
-            output: {
-                entryFileNames: chunkInfo => {
-                    // console.log(chunkInfo);
-                    switch (chunkInfo.name) {
-                        case "index":
-                            return "[name].js";
+    switch (env.mode) {
+        case "iframes":
+            config = deepmerge.all([viteShareConfig, viteIframesConfig]);
+            break;
 
-                        default:
-                            return "assets/[name]-[hash].js";
-                    }
-                },
-                assetFileNames: assetInfo => {
-                    // console.log(chunkInfo);
-                    switch (assetInfo.name) {
-                        // case "style.css":
-                        case "index.css":
-                            return "index.css";
+        case "plugin":
+        default:
+            config = deepmerge.all([viteShareConfig, vitePluginConfig]);
+            break;
+    }
 
-                        default:
-                            return "assets/[name]-[hash][extname]";
-                    }
-                },
-            },
-        },
-    },
+    // console.log(config);
+    return config;
 });
diff --git a/vite.iframes.config.ts b/vite.iframes.config.ts
new file mode 100644
index 0000000..64cc322
--- /dev/null
+++ b/vite.iframes.config.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { UserConfig } from "vite";
+import { resolve } from "path"
+
+// https://vitejs.dev/config/
+export default {
+    build: {
+        minify: true,
+        // sourcemap: "inline",
+        rollupOptions: {
+            input: {
+                editor: resolve(__dirname, "./iframes/editor.html"),
+            },
+        },
+    },
+} as UserConfig;
diff --git a/vite.plugin.config.ts b/vite.plugin.config.ts
new file mode 100644
index 0000000..7b63e7a
--- /dev/null
+++ b/vite.plugin.config.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { UserConfig } from "vite";
+import { resolve } from "path"
+
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+
+// https://vitejs.dev/config/
+export default {
+    plugins: [
+        viteStaticCopy({
+            targets: [
+                {
+                    src: "./node_modules/monaco-editor/min",
+                    dest: "./libs/monaco-editor",
+                    rename: "min",
+                },
+            ],
+        }),
+    ],
+    build: {
+        emptyOutDir: true,
+        copyPublicDir: true,
+        lib: {
+            entry: resolve(__dirname, "src/index.ts"),
+            fileName: "index",
+            formats: ["cjs"],
+        },
+        rollupOptions: {
+            input: {
+                index: resolve(__dirname, "src/index.ts"),
+            },
+            output: {
+                entryFileNames: chunkInfo => {
+                    // console.log(chunkInfo);
+                    switch (chunkInfo.name) {
+                        case "index":
+                            return "[name].js";
+
+                        default:
+                            return "assets/[name]-[hash].js";
+                    }
+                },
+                assetFileNames: assetInfo => {
+                    // console.log(chunkInfo);
+                    switch (assetInfo.name) {
+                        case "style.css":
+                        case "index.css":
+                            return "index.css";
+
+                        default:
+                            return "assets/[name]-[hash][extname]";
+                    }
+                },
+            },
+        },
+    },
+} as UserConfig;
diff --git a/vite.share.config.ts b/vite.share.config.ts
new file mode 100644
index 0000000..23a4165
--- /dev/null
+++ b/vite.share.config.ts
@@ -0,0 +1,79 @@
+/**
+ * Copyright (C) 2023 Zuoqiu Yingyi
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { UserConfig } from "vite";
+import { resolve } from "path"
+
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { less } from "svelte-preprocess-less";
+
+// https://vitejs.dev/config/
+export default {
+    base: `./`,
+    plugins: [
+        svelte({
+            preprocess: {
+                style: less(),
+            },
+        }),
+    ],
+    resolve: {
+        alias: {
+            "~": resolve(__dirname, "./"),
+            "@": resolve(__dirname, "./src"),
+        },
+    },
+    build: {
+        minify: true,
+        // sourcemap: "inline",
+        emptyOutDir: false,
+        copyPublicDir: false,
+        rollupOptions: {
+            external: [
+                "siyuan",
+                /^@electron\/.*$/,
+            ],
+            output: {
+                // REF: https://cn.rollupjs.org/configuration-options/#output-intro-output-outro
+                // manualChunks: (id: string, { getModuleInfo, getModuleIds }) => {
+                //     console.log(id);
+                // },
+                entryFileNames: chunkInfo => {
+                    // console.log(chunkInfo);
+                    switch (chunkInfo.name) {
+                        default:
+                            return "assets/[name]-[hash].js";
+                    }
+                },
+                chunkFileNames: chunkInfo => {
+                    // console.log(chunkInfo);
+                    switch (chunkInfo.name) {
+                        default:
+                            return "chunks/[name]-[hash].js";
+                    }
+                },
+                assetFileNames: assetInfo => {
+                    // console.log(chunkInfo);
+                    switch (assetInfo.name) {
+                        default:
+                            return "assets/[name]-[hash][extname]";
+                    }
+                },
+            },
+        },
+    },
+} as UserConfig;