@fast-crud/editor-code 1.25.13

package/src/editor/components/fs-editor-code/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <div ref="monacoRef" class="fs-editor-code"></div>
+</template>
+
+<script lang="ts" setup>
+import * as monaco from "monaco-editor";
+// import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { cloneDeep, debounce as lodashDebounce } from "lodash-es";
+import {
+  importJavascriptContribution,
+  importJsonContribution,
+  importMonacoYaml,
+  importYamlContribution
+} from "./async-import";
+import { initWorkers } from "./workers";
+/**
+ * config:
+ *   value: '', // 编辑器初始文本
+ *   language: 'javascript', // 语言
+ *   theme: 'vs', // 主题
+ *   readOnly: false, // 是否只读
+ *   minimap: { enabled: false }, // 是否启用小地图
+ *   fontSize: 14, // 字体大小
+ *   tabSize: 2, // tab缩进长度
+ *   automaticLayout: true, // 自动布局
+ *   lineNumbers: 'off', // 是否启用行号
+ *   contextmenu: true, // 是否启用上下文菜单
+ *   folding: true, // 是否启用代码折叠
+ *   foldingStrategy: 'auto', // 代码折叠策略
+ *   wordWrap: 'on', // 自动换行设置
+ *   wrappingIndent: 'indent', // 换行缩进
+ *   formatOnPaste: true, // 粘贴时是否自动格式化
+ *   formatOnType: true, // 输入时是否自动格式化
+ *   dragAndDrop: true, // 是否允许拖放
+ *   cursorStyle: 'line', // 光标样式
+ *   cursorBlinking: 'blink', // 光标闪烁方式
+ *   scrollbar: {
+ *     vertical: 'auto', // 垂直滚动条的显示方式
+ *     horizontal: 'auto', // 水平滚动条的显示方式
+ *     verticalScrollbarSize: 2, // 垂直滚动条的宽
+ *     horizontalScrollbarSize: 2, // 水平滚动条的高度
+ *   }
+ */
+const props = defineProps<{
+  language?: string;
+  modelValue?: string;
+  config?: any;
+  schema?: any;
+  debounce?: number;
+  init?: any;
+  readonly?: boolean;
+  disabled?: boolean;
+  id?: string;
+}>();
+
+export type EditorCodeCtx = {
+  // monaco对象
+  monaco: any;
+  //语言
+  language: string;
+  //配置
+  config: any;
+  //editor实例对象
+  instance?: any;
+
+  schema?: any;
+
+  initialValue?: any;
+};
+initWorkers();
+const monacoRef = ref();
+
+let instanceRef: any = null;
+
+function disposeEditor() {
+  if (instanceRef) {
+    instanceRef.dispose(); //使用完成销毁实例
+  }
+}
+
+onUnmounted(() => {
+  disposeEditor();
+});
+
+const emits = defineEmits(["update:modelValue", "change", "ready"]);
+
+const emitValue = lodashDebounce((value: any) => {
+  emits("update:modelValue", value);
+}, props.debounce || 500);
+
+async function createEditor(ctx: EditorCodeCtx) {
+  disposeEditor();
+  const instance = monaco.editor.create(monacoRef.value, {
+    automaticLayout: true,
+    value: props.modelValue,
+    language: ctx.language,
+    theme: "vs-dark",
+    minimap: { enabled: false },
+    readOnly: props.readonly || props.disabled,
+    hover: {
+      enabled: true
+    },
+    ...ctx.config
+  });
+
+  // @event `change`
+  instance.onDidChangeModelContent((event) => {
+    const value = instance.getValue();
+    if (props.modelValue !== value) {
+      emits("change", value);
+      emitValue(value);
+    }
+  });
+
+  instanceRef = instance;
+  ctx.instance = instance;
+  emits("ready", ctx);
+  return instance;
+}
+
+async function initJavascript(ctx: EditorCodeCtx) {
+  await importJavascriptContribution();
+  monaco.languages.register({ id: "javascript" });
+}
+
+async function initJson(ctx: EditorCodeCtx) {
+  await importJsonContribution();
+  monaco.languages.register({ id: "json" });
+
+  const schemas = [];
+  if (ctx.schema) {
+    schemas.push({
+      uri: "http://myserver/foo-schema.json", // id of the first schema
+      fileMatch: ["*"], // associate with our model
+      schema: {
+        ...ctx.schema
+      }
+    });
+  }
+
+  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    validate: true,
+    enableSchemaRequest: false,
+    schemas
+  });
+}
+
+async function initYaml(ctx: EditorCodeCtx) {
+  await importYamlContribution();
+  const { configureMonacoYaml } = await importMonacoYaml();
+  monaco.languages.register({ id: "yaml" });
+  let id = `fs-editor-code-yaml-${props.id || ""}.yaml`;
+  const schemas = [];
+  if (ctx.schema) {
+    schemas.push({
+      fileMatch: ["*"], // associate with our model
+      schema: {
+        ...ctx.schema
+      },
+      uri: `http://myserver/${id}`
+    });
+  }
+  configureMonacoYaml(monaco, {
+    schemas,
+    format: true,
+    hover: true,
+    completion: true,
+    validate: true,
+    isKubernetes: false,
+    enableSchemaRequest: false
+  });
+
+  // const uri = monaco.Uri.parse(id);
+  // const oldModel = monaco.editor.getModel(uri);
+  // if (oldModel) {
+  //   oldModel.dispose();
+  // }
+  // ctx.config.model = monaco.editor.createModel(props.modelValue, null, uri);
+}
+
+async function doInit() {
+  disposeEditor();
+  const ctx: EditorCodeCtx = {
+    monaco,
+    language: props.language || "javascript",
+    config: cloneDeep(props.config || {}),
+    initialValue: props.modelValue || "",
+    schema: props.schema
+  };
+  if (ctx.language === "javascript") {
+    await initJavascript(ctx);
+  } else if (ctx.language === "yaml") {
+    await initYaml(ctx);
+  } else if (ctx.language === "json") {
+    await initJson(ctx);
+  }
+
+  await createEditor(ctx);
+}
+
+onMounted(async () => {
+  await doInit();
+  watch(
+    () => {
+      return {
+        language: props.language,
+        config: props.config
+      };
+    },
+    (value: any) => {
+      doInit();
+    }
+  );
+});
+
+watch(
+  () => {
+    return props.modelValue;
+  },
+  (value: any) => {
+    if (instanceRef && instanceRef.getValue() !== value) {
+      instanceRef.setValue(value);
+    }
+  }
+);
+</script>
+
+<style lang="less">
+.fs-editor-code {
+  min-height: 100px;
+  width: 100%;
+  border: 1px solid #eee;
+  border-radius: 5px;
+}
+
+.monaco-editor .hover-content {
+  z-index: 10000 !important;
+}
+</style>

package/src/editor/components/fs-editor-code/validators.ts

@@ -0,0 +1,37 @@
+import { importJsYaml } from "./async-import";
+
+const jsonRule = {
+  validator: async (rule: any, value: any) => {
+    //校验value json的有效性
+    if (value) {
+      try {
+        JSON.parse(value);
+      } catch (e: any) {
+        console.error(e);
+        throw new Error("json格式错误:" + e.message);
+      }
+    }
+  },
+  message: "json格式错误"
+};
+
+const yamlRule = {
+  validator: async (rule: any, value: any) => {
+    //校验value yaml的有效性
+    if (value) {
+      try {
+        const yaml = await importJsYaml();
+        yaml.load(value, { schema: yaml.JSON_SCHEMA });
+      } catch (e: any) {
+        console.error(e);
+        throw new Error("yaml格式错误:" + e.message);
+      }
+    }
+  },
+  message: "yaml格式错误"
+};
+
+export const FsEditorCodeValidators = {
+  jsonRule,
+  yamlRule
+};

package/src/editor/components/fs-editor-code/worker/index.ts

@@ -0,0 +1,64 @@
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import yamlWorker from "./yaml.worker?worker";
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+export type WorkerItem = {
+  worker: any;
+  match: (label: string) => boolean;
+};
+const WorkerBucket: WorkerItem[] = [];
+/**
+ * 注册自定义worker
+ */
+export function registerWorker(labels: string | string[], worker: any) {
+  WorkerBucket.push({
+    worker: worker,
+    match: (label: string) => {
+      if (typeof labels === "string") {
+        return labels === label;
+      }
+      for (const labelItem of labels) {
+        if (labelItem === "*") {
+          return true;
+        }
+        if (labelItem === label) {
+          return true;
+        }
+      }
+      return false;
+    }
+  });
+}
+
+export function initWorkers() {
+  if (window.MonacoEnvironment) {
+    return;
+  }
+
+  //@ts-ignore
+  window.MonacoEnvironment = {
+    //@ts-ignore
+    getWorker(_, label) {
+      for (const workerLoader of WorkerBucket) {
+        if (workerLoader.match(label)) {
+          return new workerLoader.worker();
+        }
+      }
+      if (label === "json") {
+        return new jsonWorker();
+      } else if (label === "css" || label === "scss" || label === "less") {
+        return new cssWorker();
+      } else if (label === "html" || label === "handlebars" || label === "razor") {
+        return new htmlWorker();
+      } else if (label === "typescript" || label === "javascript") {
+        return new tsWorker();
+      } else if (label === "yaml" || label === "yml") {
+        //@ts-ignore
+        return new yamlWorker();
+      }
+      return new editorWorker();
+    }
+  };
+}

package/src/editor/components/fs-editor-code/worker/yaml.worker.ts

@@ -0,0 +1 @@
+export * from "monaco-yaml/yaml.worker.js";

package/src/editor/components/fs-editor-code/workers.ts

@@ -0,0 +1,45 @@
+export type WorkerItem = {
+  worker: any;
+  match: (label: string) => boolean;
+};
+const WorkerBucket: WorkerItem[] = [];
+/**
+ * 注册自定义worker
+ */
+export function registerWorker(labels: string | string[], worker: any) {
+  WorkerBucket.push({
+    worker: worker,
+    match: (label: string) => {
+      if (typeof labels === "string") {
+        return labels === label;
+      }
+      for (const labelItem of labels) {
+        if (labelItem === "*") {
+          return true;
+        }
+        if (labelItem === label) {
+          return true;
+        }
+      }
+      return false;
+    }
+  });
+}
+
+export function initWorkers() {
+  if (window.MonacoEnvironment) {
+    return;
+  }
+
+  //@ts-ignore
+  window.MonacoEnvironment = {
+    //@ts-ignore
+    getWorker(_, label) {
+      for (const workerLoader of WorkerBucket) {
+        if (workerLoader.match(label)) {
+          return new workerLoader.worker();
+        }
+      }
+    }
+  };
+}

package/src/editor/exports.ts

@@ -0,0 +1,3 @@
+export * from "./type";
+export * from "./components/fs-editor-code/validators";
+export * from "./components/fs-editor-code/workers";

package/src/editor/index.umd.ts

@@ -0,0 +1,17 @@
+import FsExtendsModelType from "./type";
+export * from "./exports";
+import { utils } from "@fast-crud/fast-crud";
+// @ts-ignore
+const modules = import.meta.glob("./components/*/*.vue", { eager: true });
+const FsExtendsComponents = {
+  install(app: any) {
+    utils.vite.installSyncComponents(app, modules, null, /^.*\/([^\/]+)\/.*.vue$/, null);
+  }
+};
+
+export const FsEditorCode = {
+  install(app: any, options: any) {
+    app.use(FsExtendsModelType, options);
+    app.use(FsExtendsComponents);
+  }
+};

package/src/editor/type/types.ts

@@ -0,0 +1,7 @@
+export default function () {
+  return {
+    "editor-code": {
+      form: { component: { name: "fs-editor-code" }, col: { span: 24 } }
+    }
+  };
+}

package/src/index.umd.ts

@@ -0,0 +1 @@
+export * from "./editor/index.umd";

package/src/style.css

@@ -0,0 +1 @@
+/*占位，勿删*/

package/tsconfig.json

@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "noImplicitAny": false,
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "verbatimModuleSyntax":false ,
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strictNullChecks" :false,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "outDir": "./dist/ts",
+    "types": [
+      "vite/client",
+      "mocha",
+      "chai",
+      "unplugin-vue-define-options/macros-global"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/vite.config.js

@@ -0,0 +1,125 @@
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import path from "path";
+import { visualizer } from "rollup-plugin-visualizer";
+import strip from "@rollup/plugin-strip";
+import DefineOptions from "unplugin-vue-define-options/vite";
+import typescript from "@rollup/plugin-typescript";
+import _ from "lodash";
+const { resolve } = path;
+// https://vitejs.dev/config/
+export default ({ command, mode }) => {
+  let build = {};
+  if (mode === "umd") {
+    build = {
+      build: {
+        emptyOutDir: true,
+        lib: {
+          entry: resolve(__dirname, "src/index.umd.ts"),
+          formats: ["umd"]
+        },
+        rollupOptions: {
+          output: {
+            manualChunks: null
+          }
+        }
+      }
+    };
+  }
+
+  const options = {
+    base: "./",
+    plugins: [DefineOptions(), vueJsx(), vue()],
+    esbuild: {
+      drop: command === "build" ? ["debugger"] : [],
+      jsxFactory: "h",
+      jsxFragment: "Fragment",
+      pure: ["console.log", "debugger"]
+    },
+    build: {
+      emptyOutDir: false,
+      lib: {
+        entry: resolve(__dirname, "src/index.ts"),
+        name: "FsExtends",
+        formats: ["es"]
+      },
+      // cssCodeSplit: true,
+      sourcemap: true,
+      // minify: false,
+      rollupOptions: {
+        plugins: [
+          strip(),
+          visualizer(),
+          typescript({
+            target: "es2020",
+            rootDir: "src",
+            declaration: true,
+            declarationDir: "dist/d",
+            exclude: "./node_modules/**",
+            allowSyntheticDefaultImports: true
+          })
+        ],
+        // make sure to externalize deps that shouldn't be bundled
+        // into your library
+        external: [
+          "vue",
+          "lodash-es",
+          "dayjs",
+          "vue-i18n",
+          "vuedraggable",
+          "ali-oss",
+          "cos-js-sdk-v5",
+          "axios",
+          "qiniu-js",
+          "@fast-crud/fast-crud",
+          "@fast-crud/ui-interface",
+          "monaco-editor",
+          "monaco-yaml",
+          "js-yaml",
+          "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution",
+          "monaco-editor/esm/vs/language/json/monaco.contribution",
+          "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution",
+          "monaco-editor/esm/vs/editor/editor.worker?worker",
+          "monaco-editor/esm/vs/language/json/json.worker?worker",
+          "monaco-editor/esm/vs/language/css/css.worker?worker",
+          "monaco-editor/esm/vs/language/typescript/ts.worker?worker",
+          "monaco-editor/esm/vs/language/html/html.worker?worker",
+          "monaco-yaml/yaml.worker.js",
+          "monaco-yaml/yaml.worker.js?worker",
+          "monaco-editor/*",
+          "monaco-editor/**"
+        ],
+        output: {
+          manualChunks(id) {
+            if (id.includes("src/components") && id.lastIndexOf(".vue") > 0) {
+              let name = id.substring(id.lastIndexOf("/") + 1);
+              name = name.substring(0, name.indexOf("."));
+              return "components/" + name;
+            }
+          },
+          // Provide global variables to use in the UMD build
+          // for externalized deps
+          globals: {
+            vue: "Vue",
+            "lodash-es": "_",
+            dayjs: "dayjs",
+            "vue-i18n": "VueI18n",
+            axios: "axios",
+            vuedraggable: "vuedraggable",
+            "@fast-crud/fast-crud": "FastCrud",
+            "ali-oss": "OSS",
+            "cos-js-sdk-v5": "COS",
+            "qiniu-js": "qiniu",
+            "@fast-crud/ui-interface": "FsUiInterface",
+            "monaco-editor": "monaco",
+            "monaco-yaml": "monacoYaml",
+            "js-yaml": "jsYaml"
+          }
+        }
+      }
+    }
+  };
+
+  _.merge(options, build);
+  return options;
+};