feat(monaco-editor): 实现 monaco 编辑器初始化 | Implement monaco editor initi…

…alization.
Zuoqiu-Yingyi · Jul 10, 2023 · 7d5ac79 · 7d5ac79
1 parent 045b78b
commit 7d5ac79
Show file tree

Hide file tree

Showing 15 changed files with 371 additions and 4 deletions.
diff --git a/editor/index.html b/editor/index.html
@@ -0,0 +1,31 @@
+<!--
+ 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/>.
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Editor</title>
+    <script async type="module" src="~/src/main.ts"></script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!--
+ 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/>.
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script async type="module" src="./src/main.ts"></script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -12,15 +12,19 @@
     "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^2.4.2",
         "@tsconfig/svelte": "^4.0.1",
+        "@types/node": "^20.4.1",
         "less": "^4.1.3",
         "svelte": "^3.59.2",
         "svelte-check": "^3.4.5",
         "svelte-preprocess-less": "^0.4.0",
         "tslib": "^2.6.0",
         "typescript": "^5.1.6",
-        "vite": "^4.4.2"
+        "vite": "^4.4.2",
+        "vite-plugin-monaco-editor": "^1.1.0",
+        "vite-plugin-static-copy": "^0.16.0"
     },
     "dependencies": {
+        "@monaco-editor/loader": "^1.3.3",
         "@workspace/components": "workspace:^",
         "@workspace/types": "workspace:^",
         "@workspace/utils": "workspace:^",

diff --git a/public/i18n/en_US.json b/public/i18n/en_US.json
@@ -0,0 +1,3 @@
+{
+    "displayName": "Code Editor"
+}
diff --git a/public/i18n/zh_CHT.json b/public/i18n/zh_CHT.json
@@ -0,0 +1,3 @@
+{
+    "displayName": "代碼編輯器"
+}
diff --git a/public/i18n/zh_CN.json b/public/i18n/zh_CN.json
@@ -0,0 +1,3 @@
+{
+    "displayName": "代码编辑器"
+}
diff --git a/public/plugin.json b/public/plugin.json
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
@@ -0,0 +1,80 @@
+<!--
+ 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 { onMount } from "svelte";
+
+    import type { editor } from "monaco-editor";
+    import loader from "@monaco-editor/loader";
+    import { mapLocale } from "@/utils/locale";
+
+    import { merge } from "@workspace/utils/misc/merge";
+
+    export let locale = "zh-Hans"; // 界面语言
+    export let content = ""; // 编辑器内容
+    export let language = "plaintext"; // 编辑器语言模式
+    export let options: editor.IStandaloneEditorConstructionOptions = {}; // 编辑器配置
+
+    let editorElement;
+
+    loader.config({
+        paths: {
+            vs: (() => {
+                switch (true) {
+                    case import.meta.env.DEV:
+                        return "node_modules/monaco-editor/min/vs";
+
+                    case import.meta.env.PROD:
+                    default:
+                        return "./../libs/monaco-editor/min/vs";
+                }
+            })(),
+        },
+        // monaco,
+        "vs/nls": {
+            availableLanguages: {
+                "*": mapLocale(locale),
+            },
+        },
+    });
+    const init = loader.init();
+
+    onMount(() => {
+        init.then(monaco => {
+            const editor = monaco.editor.create(
+                editorElement,
+                merge(options, {
+                    value: content,
+                    language: language,
+                }),
+            );
+        });
+    });
+</script>
+
+<!-- REF: https://www.svelte.cn/docs#bind_element -->
+<div
+    bind:this={editorElement}
+    class="editor"
+/>
+
+<style lang="less">
+    .editor {
+        width: 100%;
+        height: 100%;
+    }
+</style>
diff --git a/src/components/Main.svelte b/src/components/Main.svelte
@@ -0,0 +1,25 @@
+<!--
+ 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 Editor from "./Editor.svelte";
+</script>
+
+<Editor />
+
+<style lang="less">
+</style>
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,22 @@
+/**
+ * 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 siyuan from "siyuan";
+
+export default class MonacoEditorPlugin extends siyuan.Plugin {
+}
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,61 @@
+/**
+ * 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 Main from "./components/Main.svelte";
+import "./styles/main.less";
+
+/**
+ * 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);
+        }
+    },
+};
+
+const main = new Main({
+    target: globalThis.document.body,
+    props: {
+    },
+});
diff --git a/src/styles/main.less b/src/styles/main.less
@@ -0,0 +1,9 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+
+    margin: 0;
+    border: 0;
+    padding: 0;
+}
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
@@ -0,0 +1,33 @@
+/**
+ * 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 {
+    i18nCheck,
+    i18nChecks,
+} from "@workspace/types/siyuan/i18n";
+
+import zh_Hans from "~/public/i18n/zh_CN.json";
+import zh_Hant from "~/public/i18n/zh_CHT.json";
+import en from "~/public/i18n/en_US.json";
+
+export type I18N = typeof zh_Hans;
+
+i18nChecks([
+    i18nCheck<I18N, typeof zh_Hans>(),
+    i18nCheck<I18N, typeof zh_Hant>(),
+    i18nCheck<I18N, typeof en>(),
+]);
diff --git a/src/utils/locale.ts b/src/utils/locale.ts
@@ -0,0 +1,47 @@
+/**
+ * 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 { mapLang } from "@workspace/utils/locale/language";
+
+// REF: https://www.npmjs.com/package/monaco-editor-nls
+export function mapLocale(locale: string): string {
+    switch (mapLang(locale)) {
+        case "zh-Hans":
+            return "zh-cn";
+        case "zh-Hant":
+            return "zh-tw";
+
+        case "de":
+            return "de";
+        case "es":
+            return "es";
+        case "fr":
+            return "fr";
+        case "it":
+            return "it";
+        case "ja":
+            return "ja";
+        case "ko":
+            return "ko";
+        case "ru":
+            return "ru";
+
+        case "en":
+        default:
+            return "en";
+    }
+}