From 673947b2d008481df498579ade324d188c070e79 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Tue, 1 Nov 2022 14:18:16 +0800 Subject: [PATCH] feat: add preset language support for codemirror components (#675) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### 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 ``` 2. 外部引入 ```bash pnpm install @codemirror/lang-java ``` ```vue ``` #### Special notes for your reviewer: /cc @halo-dev/sig-halo-console #### Does this PR introduce a user-facing change? ```release-note None ``` --- packages/components/package.json | 4 + .../codemirror/Codemirror.story.vue | 2 +- .../src/components/codemirror/Codemirror.vue | 24 +++++- pnpm-lock.yaml | 74 +++++++++++++++++-- 4 files changed, 94 insertions(+), 10 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index af4a60c9..e7a7161b 100644 --- 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", diff --git a/packages/components/src/components/codemirror/Codemirror.story.vue b/packages/components/src/components/codemirror/Codemirror.story.vue index a1f079e6..7ef227fd 100644 --- a/packages/components/src/components/codemirror/Codemirror.story.vue +++ b/packages/components/src/components/codemirror/Codemirror.story.vue @@ -10,7 +10,7 @@ function initState() { diff --git a/packages/components/src/components/codemirror/Codemirror.vue b/packages/components/src/components/codemirror/Codemirror.vue index f9540670..6907ebf6 100644 --- 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(); const cmView = shallowRef(); 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(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 28df37f0..3d5fbbad 100644 --- 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==}