feat: add preset language support for codemirror components (#675)

#### What type of PR is this? /kind feature /milestone 2.0 #### What this PR does / why we need it: 为 Codemirror 组件添加更多预设语言支持，以及支持从外部传入语言包。目前预设支持： 1. yaml 2. html 3. javascript 4. css 5. json 使用方式： 1. 使用预设 ```vue <script lang="ts" setup> import { VCodemirror } from "@halo-dev/components" </script> <template> <VCodemirror language="html" /> </template> ``` 2. 外部引入 ```bash pnpm install @codemirror/lang-java ``` ```vue <script lang="ts" setup> import { VCodemirror } from "@halo-dev/components" import { java } from "@codemirror/lang-java" </script> <template> <VCodemirror :language="java()" /> </template> ``` #### Special notes for your reviewer: /cc @halo-dev/sig-halo-console #### Does this PR introduce a user-facing change? ```release-note None ```
2 years ago · 673947b2d0
parent 28c95c199f
commit 673947b2d0
4 changed files with 94 additions and 10 deletions
--- a/packages/components/package.json
+++ b/packages/components/package.json
@ -63,6 +63,10 @@
  },
  "dependencies": {
    "@codemirror/commands": "^6.1.2",
+    "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-html": "^6.1.3",
+    "@codemirror/lang-javascript": "^6.1.1",
+    "@codemirror/lang-json": "^6.0.1",
    "@codemirror/language": "^6.3.0",
    "@codemirror/legacy-modes": "^6.2.0",
    "@codemirror/state": "^6.1.2",
--- a/packages/components/src/components/codemirror/Codemirror.story.vue
+++ b/packages/components/src/components/codemirror/Codemirror.story.vue
@ -10,7 +10,7 @@ function initState() {
 <template>
  <Story :init-state="initState" title="Codemirror">
    <template #default="{ state }">
-      <VCodemirror v-model="state.value" height="500px" language="yaml" />
+      <VCodemirror v-model="state.value" height="500px" language="html" />
    </template>
  </Story>
 </template>
--- a/packages/components/src/components/codemirror/Codemirror.vue
+++ b/packages/components/src/components/codemirror/Codemirror.vue
@ -4,18 +4,29 @@ import type { EditorStateConfig } from "@codemirror/state";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { basicSetup } from "codemirror";
-import { StreamLanguage } from "@codemirror/language";
+import { LanguageSupport, StreamLanguage } from "@codemirror/language";
 import { yaml } from "@codemirror/legacy-modes/mode/yaml";
+import { html } from "@codemirror/lang-html";
+import { javascript } from "@codemirror/lang-javascript";
+import { css } from "@codemirror/lang-css";
+import { json } from "@codemirror/lang-json";

-const languages = {
+const presetLanguages = {
  yaml: StreamLanguage.define(yaml),
+  html: html(),
+  javascript: javascript({
+    jsx: true,
+    typescript: true,
+  }),
+  css: css(),
+  json: json(),
 };

 const props = withDefaults(
  defineProps<{
    modelValue?: string;
    height?: string;
-    language?: "yaml";
+    language: keyof typeof presetLanguages | LanguageSupport;
    extensions?: EditorStateConfig["extensions"];
  }>(),
  {
@ -42,11 +53,16 @@ const cmState = shallowRef<EditorState>();
 const cmView = shallowRef<EditorView>();

 const createCmEditor = () => {
+  const language =
+    typeof props.language === "string"
+      ? presetLanguages[props.language]
+      : props.language;
+
  let extensions = [
    basicSetup,
    EditorView.lineWrapping,
    customTheme,
-    languages[props.language],
+    language,
    EditorView.updateListener.of((viewUpdate) => {
      if (viewUpdate.docChanged) {
        const doc = viewUpdate.state.doc.toString();
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -200,6 +200,10 @@ importers:
  packages/components:
    specifiers:
      '@codemirror/commands': ^6.1.2
+      '@codemirror/lang-css': ^6.0.1
+      '@codemirror/lang-html': ^6.1.3
+      '@codemirror/lang-javascript': ^6.1.1
+      '@codemirror/lang-json': ^6.0.1
      '@codemirror/language': ^6.3.0
      '@codemirror/legacy-modes': ^6.2.0
      '@codemirror/state': ^6.1.2
@ -212,6 +216,10 @@ importers:
      vite-plugin-dts: ^1.6.6
    dependencies:
      '@codemirror/commands': 6.1.2
+      '@codemirror/lang-css': 6.0.1_@codemirror+view@6.4.0
+      '@codemirror/lang-html': 6.1.3
+      '@codemirror/lang-javascript': 6.1.1
+      '@codemirror/lang-json': 6.0.1
      '@codemirror/language': 6.3.0
      '@codemirror/legacy-modes': 6.2.0
      '@codemirror/state': 6.1.2
@ -1660,12 +1668,47 @@ packages:
      '@codemirror/view': 6.4.0
      '@lezer/common': 1.0.1

-  /@codemirror/lang-json/6.0.0:
-    resolution: {integrity: sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==}
+  /@codemirror/lang-css/6.0.1_@codemirror+view@6.4.0:
+    resolution: {integrity: sha512-rlLq1Dt0WJl+2epLQeAsfqIsx3lGu4HStHCJu95nGGuz2P2fNugbU3dQYafr2VRjM4eMC9HviI6jvS98CNtG5w==}
+    dependencies:
+      '@codemirror/autocomplete': 6.3.0_hyoev4pkfjyim3j7kwcs5im5xu
+      '@codemirror/language': 6.3.0
+      '@codemirror/state': 6.1.2
+      '@lezer/css': 1.0.1
+    transitivePeerDependencies:
+      - '@codemirror/view'
+    dev: false
+
+  /@codemirror/lang-html/6.1.3:
+    resolution: {integrity: sha512-LmtIElopGK6bBfddAyjBitS6hz8nFr/PVUtvqmfomXlHB4m+Op2d5eGk/X9/CSby6Y8NqXXkGa3yDd9lfJ6Qlg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.3.0_hyoev4pkfjyim3j7kwcs5im5xu
+      '@codemirror/lang-css': 6.0.1_@codemirror+view@6.4.0
+      '@codemirror/lang-javascript': 6.1.1
+      '@codemirror/language': 6.3.0
+      '@codemirror/state': 6.1.2
+      '@codemirror/view': 6.4.0
+      '@lezer/common': 1.0.1
+      '@lezer/html': 1.0.1
+    dev: false
+
+  /@codemirror/lang-javascript/6.1.1:
+    resolution: {integrity: sha512-F4+kiuC5d5dUSJmff96tJQwpEXs/tX/4bapMRnZWW6bHKK1Fx6MunTzopkCUWRa9bF87GPmb9m7Qtg7Yv8f3uQ==}
+    dependencies:
+      '@codemirror/autocomplete': 6.3.0_hyoev4pkfjyim3j7kwcs5im5xu
+      '@codemirror/language': 6.3.0
+      '@codemirror/lint': 6.0.0
+      '@codemirror/state': 6.1.2
+      '@codemirror/view': 6.4.0
+      '@lezer/common': 1.0.1
+      '@lezer/javascript': 1.0.2
+    dev: false
+
+  /@codemirror/lang-json/6.0.1:
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
    dependencies:
      '@codemirror/language': 6.3.0
      '@lezer/json': 1.0.0
-    dev: true

  /@codemirror/language/6.3.0:
    resolution: {integrity: sha512-6jOE5DEt6sKD46SXhn3xPbBehn+l48ACcA6Uxs2k+E2YNH9XGF5WdGMTYr2DlggfK4h0QZBK6zEb5S7lkTriWA==}
@ -1991,7 +2034,7 @@ packages:
    resolution: {integrity: sha512-DwSHDRcAoGpgAyTcjcwPfL+yybY3q5HJITDL8Y6MWkG1blQMKcwukZhEv9WDGp6QxABrZzsSKuamKJdXRLpE5w==}
    dependencies:
      '@codemirror/commands': 6.1.2
-      '@codemirror/lang-json': 6.0.0
+      '@codemirror/lang-json': 6.0.1
      '@codemirror/language': 6.3.0
      '@codemirror/lint': 6.0.0
      '@codemirror/state': 6.1.2
@ -2347,17 +2390,38 @@ packages:
  /@lezer/common/1.0.1:
    resolution: {integrity: sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw==}

+  /@lezer/css/1.0.1:
+    resolution: {integrity: sha512-kLGsbzXdp1ntzO2jDwFf+2w76EBlLiD4FKofx7tgkdqeFRoslFiMS2qqbNtAauXw8ihZ4cE5YpxSpfsKXSs5Sg==}
+    dependencies:
+      '@lezer/highlight': 1.1.1
+      '@lezer/lr': 1.2.3
+    dev: false
+
  /@lezer/highlight/1.1.1:
    resolution: {integrity: sha512-duv9D23O9ghEDnnUDmxu+L8pJy4nYo4AbCOHIudUhscrLSazqeJeK1V50EU6ZufWF1zv0KJwu/frFRyZWXxHBQ==}
    dependencies:
      '@lezer/common': 1.0.1

+  /@lezer/html/1.0.1:
+    resolution: {integrity: sha512-sC00zEt3GBh3vVO6QaGX4YZCl41S9dHWN/WGBsDixy9G+sqOC7gsa4cxA/fmRVAiBvhqYkJk+5Ul4oul92CPVw==}
+    dependencies:
+      '@lezer/common': 1.0.1
+      '@lezer/highlight': 1.1.1
+      '@lezer/lr': 1.2.3
+    dev: false
+
+  /@lezer/javascript/1.0.2:
+    resolution: {integrity: sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==}
+    dependencies:
+      '@lezer/highlight': 1.1.1
+      '@lezer/lr': 1.2.3
+    dev: false
+
  /@lezer/json/1.0.0:
    resolution: {integrity: sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==}
    dependencies:
      '@lezer/highlight': 1.1.1
      '@lezer/lr': 1.2.3
-    dev: true

  /@lezer/lr/1.2.3:
    resolution: {integrity: sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==}