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 0000000..fbc5e13
Binary files /dev/null and b/public/icon.png differ
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;