Add Monaco Editor (#335)

* js方法切换到ts支持
删除通过id管理编辑器

* 修改PR意见

* 修改pr意见

* 优化ts文件

* 增加Monaco Editor ts

* 删除冲突文件

* Update src/Component/BlazorComponent.Web/package.json

Co-authored-by: capdiem <[email protected]>

* Update src/Component/BlazorComponent.Web/package.json

Co-authored-by: capdiem <[email protected]>

* 修改名称

* 修改editor

* 更换ts方法顺序

---------

Co-authored-by: capdiem <[email protected]>

src/Component/BlazorComponent.Web/package.json

@@ -8,6 +8,8 @@
     "build": "rollup --config rollup.config.ts",
     "dev:echarts": "rollup --config rollup.config.echarts.ts --watch",
     "build:echarts": "rollup --config rollup.config.echarts.ts",
+    "dev:monacoseditor": "rollup --config rollup.config.monaco-editor.ts --watch",
+    "build:monacoseditor": "rollup --config rollup.config.monaco-editor.ts",
     "dev:gridstack": "rollup --config rollup.config.gridstack.ts --watch",
     "build:gridstack": "rollup --config rollup.config.gridstack.ts",
     "dev:input": "rollup --config rollup.config.input.ts --watch",
@@ -45,6 +47,7 @@
     "rollup": "^2.79.0",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.4.0",
-    "typescript": "^4.8.2"
+    "typescript": "^4.8.2",
+    "monaco-editor": "^0.36.1"
   }
-}
+}

src/Component/BlazorComponent.Web/rollup.config.monaco-editor.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "rollup";
+import { terser } from "rollup-plugin-terser";
+
+import typescript from "@rollup/plugin-typescript";
+
+export default defineConfig({
+  input: "./src/proxies/monaco-editor/index.ts",
+  output: [
+    {
+      file: "../../../../MASA.Blazor/wwwroot/js/proxies/monaco-editor-proxy.js",
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+  plugins: [typescript(), terser()],
+});

src/Component/BlazorComponent.Web/src/proxies/monaco-editor/index.ts

@@ -0,0 +1,76 @@
+import { editor as MonacoEditor } from "monaco-editor";
+
+interface Monaco {
+  editor: typeof MonacoEditor;
+}
+
+declare const monaco: Monaco;
+
+function init(id: string, options: MonacoEditor.IStandaloneEditorConstructionOptions) {
+  return monaco.editor.create(document.getElementById(id), options);
+}
+
+function defineTheme(name, value: MonacoEditor.IStandaloneThemeData) {
+  monaco.editor.defineTheme(name, value)
+}
+
+function remeasureFonts() {
+  monaco.editor.remeasureFonts();
+}
+
+function addKeybindingRules(rules: MonacoEditor.IKeybindingRule[]) {
+  monaco.editor.addKeybindingRules(rules);
+}
+
+function addKeybindingRule(rule: MonacoEditor.IKeybindingRule) {
+  monaco.editor.addKeybindingRule(rule);
+}
+
+function setTheme(theme: string) {
+  monaco.editor.setTheme(theme);
+}
+
+function colorizeElement(id: string, options: any) {
+  monaco.editor.colorizeElement(document.getElementById(id), options);
+}
+
+function getModels() {
+  return monaco.editor.getModels();
+}
+
+function updateOptions(instance: MonacoEditor.IStandaloneCodeEditor, options: any) {
+  instance.updateOptions(options);
+}
+
+
+function getModel(instance: MonacoEditor.IStandaloneCodeEditor) {
+  return instance.getModel();
+}
+
+function getValue(instance: MonacoEditor.IStandaloneCodeEditor) {
+  return instance.getValue();
+}
+
+function setValue(instance: MonacoEditor.IStandaloneCodeEditor, value) {
+  instance.setValue(value);
+}
+
+function setModelLanguage(instance: MonacoEditor.IStandaloneCodeEditor, languageId: string) {
+  monaco.editor.setModelLanguage(instance.getModel(), languageId);
+}
+
+export {
+  init,
+  getValue,
+  setValue,
+  setTheme,
+  getModels,
+  getModel,
+  setModelLanguage,
+  remeasureFonts,
+  addKeybindingRules,
+  colorizeElement,
+  defineTheme,
+  updateOptions,
+  addKeybindingRule
+}