diff --git a/packages/codemirror/package.json b/packages/codemirror/package.json index 0908113..f95362d 100644 --- a/packages/codemirror/package.json +++ b/packages/codemirror/package.json @@ -1,6 +1,6 @@ { "name": "@kevisual/codemirror", - "version": "0.0.4", + "version": "0.0.5", "description": "", "main": "dist/editor.js", "private": false, @@ -16,13 +16,15 @@ ], "author": "abearxiong", "license": "ISC", - "dependencies": {}, "devDependencies": { - "codemirror": "^6.0.1", + "@codemirror/lang-css": "^6.3.1", + "@codemirror/lang-html": "^6.4.9", "@codemirror/lang-javascript": "^6.2.3", "@codemirror/lang-json": "^6.0.1", + "@codemirror/lang-markdown": "^6.3.2", "@rollup/plugin-node-resolve": "^16.0.1", "@rollup/plugin-typescript": "^12.1.2", + "codemirror": "^6.0.1", "rollup": "^4.40.2", "tslib": "^2.8.1", "typescript": "^5.8.3" @@ -36,6 +38,10 @@ "import": "./dist/editor.js", "types": "./dist/editor.d.ts" }, + "./base": { + "import": "./dist/editor.base.js", + "types": "./dist/editor.base.d.ts" + }, "./json": { "import": "./dist/editor.json.js", "types": "./dist/editor.json.d.ts" diff --git a/packages/codemirror/rollup.config.mjs b/packages/codemirror/rollup.config.mjs index 53c9215..83bcbc5 100644 --- a/packages/codemirror/rollup.config.mjs +++ b/packages/codemirror/rollup.config.mjs @@ -1,7 +1,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'; import typescript from '@rollup/plugin-typescript'; -const entrys = ['editor', 'editor.json']; +const entrys = ['editor', 'editor.json', 'editor.base']; const configs = entrys.map((entry) => ({ input: `./src/${entry}.ts`, // 修改输入文件为 TypeScript 文件 output: { diff --git a/packages/codemirror/src/editor.base.ts b/packages/codemirror/src/editor.base.ts new file mode 100644 index 0000000..18af63d --- /dev/null +++ b/packages/codemirror/src/editor.base.ts @@ -0,0 +1,45 @@ +import { EditorView, basicSetup } from 'codemirror'; + +let editor: EditorView = null; + +export type EditorOptions = { + extensions?: any[]; +}; +/** + * 创建单例 + * @param el + * @returns + */ +const createEditorInstance = (el?: HTMLDivElement, opts?: EditorOptions) => { + if (editor && el) { + el.appendChild(editor.dom); + return editor; + } else if (editor) { + return editor; + } + const extensions = opts?.extensions || []; + editor = new EditorView({ + extensions: [basicSetup, ...extensions], + parent: el || document.body, + }); + editor.dom.style.height = '100%'; + return editor; +}; + +/** + * 每次都创建新的实例 + * @param el + * @returns + */ +export const createEditor = (el: HTMLDivElement, opts?: EditorOptions) => { + const extensions = opts?.extensions || []; + const editor = new EditorView({ + extensions: [basicSetup, ...extensions], + parent: el || document.body, + }); + editor.dom.style.height = '100%'; + return editor; +}; +export const getEditor = () => editor; + +export { editor, createEditorInstance }; diff --git a/packages/codemirror/src/editor.json.ts b/packages/codemirror/src/editor.json.ts index 5a40234..aaad794 100644 --- a/packages/codemirror/src/editor.json.ts +++ b/packages/codemirror/src/editor.json.ts @@ -1,26 +1,13 @@ -import { EditorView, basicSetup } from 'codemirror'; import { json } from '@codemirror/lang-json'; - -let editor: EditorView = null; +import * as Base from './editor.base'; /** * 创建单例 * @param el * @returns */ -const createEditorInstance = (el?: HTMLDivElement) => { - if (editor && el) { - el.appendChild(editor.dom); - return editor; - } else if (editor) { - return editor; - } - editor = new EditorView({ - extensions: [basicSetup, json()], - parent: el || document.body, - }); - editor.dom.style.height = '100%'; - return editor; +export const createEditorInstance = (el?: HTMLDivElement) => { + return Base.createEditorInstance(el, { extensions: [json()] }); }; /** @@ -29,12 +16,9 @@ const createEditorInstance = (el?: HTMLDivElement) => { * @returns */ export const createEditor = (el: HTMLDivElement) => { - const editor = new EditorView({ - extensions: [basicSetup, json()], - parent: el || document.body, - }); - editor.dom.style.height = '100%'; - return editor; + return Base.createEditor(el, { extensions: [json()] }); }; -export { editor, createEditorInstance }; +export { Base }; + +export const editor = Base.editor; diff --git a/packages/codemirror/src/editor.ts b/packages/codemirror/src/editor.ts index 7598bb1..14edd8a 100644 --- a/packages/codemirror/src/editor.ts +++ b/packages/codemirror/src/editor.ts @@ -1,13 +1,15 @@ import { EditorView, basicSetup } from 'codemirror'; import { javascript } from '@codemirror/lang-javascript'; import { json } from '@codemirror/lang-json'; - +import { html } from '@codemirror/lang-html'; +import { markdown } from '@codemirror/lang-markdown'; +import { css } from '@codemirror/lang-css'; let editor: EditorView = null; type CreateOpts = { jsx?: boolean; typescript?: boolean; - type?: 'javascript' | 'json'; + type?: 'javascript' | 'json' | 'html' | 'markdown' | 'css'; }; /** * 创建单例 @@ -23,10 +25,23 @@ const createEditorInstance = (el?: HTMLDivElement, opts?: CreateOpts) => { } const { type = 'javascript' } = opts || {}; const plugins = [basicSetup]; - if (type === 'json') { - plugins.push(json()); - } else { - plugins.push(javascript({ jsx: opts?.jsx, typescript: opts?.typescript })); + + switch (type) { + case 'json': + plugins.push(json()); + break; + case 'javascript': + plugins.push(javascript({ jsx: opts?.jsx, typescript: opts?.typescript })); + break; + case 'css': + plugins.push(css()); + break; + case 'html': + plugins.push(html()); + break; + case 'markdown': + plugins.push(markdown()); + break; } editor = new EditorView({ extensions: plugins, @@ -44,10 +59,22 @@ const createEditorInstance = (el?: HTMLDivElement, opts?: CreateOpts) => { export const createEditor = (el: HTMLDivElement, opts?: CreateOpts) => { const { type = 'javascript' } = opts || {}; const plugins = [basicSetup]; - if (type === 'json') { - plugins.push(json()); - } else { - plugins.push(javascript({ jsx: opts?.jsx, typescript: opts?.typescript })); + switch (type) { + case 'json': + plugins.push(json()); + break; + case 'javascript': + plugins.push(javascript({ jsx: opts?.jsx, typescript: opts?.typescript })); + break; + case 'css': + plugins.push(css()); + break; + case 'html': + plugins.push(html()); + break; + case 'markdown': + plugins.push(markdown()); + break; } const editor = new EditorView({ extensions: plugins, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d18f6bd..18caf13 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -136,12 +136,21 @@ importers: packages/codemirror: devDependencies: + '@codemirror/lang-css': + specifier: ^6.3.1 + version: 6.3.1(@codemirror/view@6.33.0) + '@codemirror/lang-html': + specifier: ^6.4.9 + version: 6.4.9 '@codemirror/lang-javascript': specifier: ^6.2.3 version: 6.2.3 '@codemirror/lang-json': specifier: ^6.0.1 version: 6.0.1 + '@codemirror/lang-markdown': + specifier: ^6.3.2 + version: 6.3.2 '@rollup/plugin-node-resolve': specifier: ^16.0.1 version: 16.0.1(rollup@4.40.2) @@ -549,12 +558,21 @@ packages: '@codemirror/commands@6.6.2': resolution: {integrity: sha512-Fq7eWOl1Rcbrfn6jD8FPCj9Auaxdm5nIK5RYOeW7ughnd/rY5AmPg6b+CfsG39ZHdwiwe8lde3q8uR7CF5S0yQ==} + '@codemirror/lang-css@6.3.1': + resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==} + + '@codemirror/lang-html@6.4.9': + resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==} + '@codemirror/lang-javascript@6.2.3': resolution: {integrity: sha512-8PR3vIWg7pSu7ur8A07pGiYHgy3hHj+mRYRCSG8q+mPIrl0F02rgpGv+DsQTHRTc30rydOsf5PZ7yjKFg2Ackw==} '@codemirror/lang-json@6.0.1': resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==} + '@codemirror/lang-markdown@6.3.2': + resolution: {integrity: sha512-c/5MYinGbFxYl4itE9q/rgN/sMTjOr8XL5OWnC+EaRMLfCbVUmmubTJfdgpfcSS2SCaT7b+Q+xi3l6CgoE+BsA==} + '@codemirror/language@6.10.3': resolution: {integrity: sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==} @@ -948,9 +966,15 @@ packages: '@lezer/common@1.2.1': resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==} + '@lezer/css@1.1.11': + resolution: {integrity: sha512-FuAnusbLBl1SEAtfN8NdShxYJiESKw9LAFysfea1T96jD3ydBn12oYjaSG1a04BQRIUd93/0D8e5CV1cUMkmQg==} + '@lezer/highlight@1.2.1': resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==} + '@lezer/html@1.3.10': + resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==} + '@lezer/javascript@1.4.18': resolution: {integrity: sha512-Y8BeHOt4LtcxJgXwadtfSeWPrh0XzklcCHnCVT+vOsxqH4gWmunP2ykX+VVOlM/dusyVyiNfG3lv0f10UK+mgA==} @@ -960,6 +984,9 @@ packages: '@lezer/lr@1.4.2': resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==} + '@lezer/markdown@1.4.3': + resolution: {integrity: sha512-kfw+2uMrQ/wy/+ONfrH83OkdFNM0ye5Xq96cLlaCy7h5UT9FO54DU4oRoIc0CSBh5NWmWuiIJA7NGLMJbQ+Oxg==} + '@mdx-js/mdx@3.1.0': resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==} @@ -4787,6 +4814,28 @@ snapshots: '@codemirror/view': 6.33.0 '@lezer/common': 1.2.1 + '@codemirror/lang-css@6.3.1(@codemirror/view@6.33.0)': + dependencies: + '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1) + '@codemirror/language': 6.10.3 + '@codemirror/state': 6.4.1 + '@lezer/common': 1.2.1 + '@lezer/css': 1.1.11 + transitivePeerDependencies: + - '@codemirror/view' + + '@codemirror/lang-html@6.4.9': + dependencies: + '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1) + '@codemirror/lang-css': 6.3.1(@codemirror/view@6.33.0) + '@codemirror/lang-javascript': 6.2.3 + '@codemirror/language': 6.10.3 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + '@lezer/common': 1.2.1 + '@lezer/css': 1.1.11 + '@lezer/html': 1.3.10 + '@codemirror/lang-javascript@6.2.3': dependencies: '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1) @@ -4802,6 +4851,16 @@ snapshots: '@codemirror/language': 6.10.3 '@lezer/json': 1.0.2 + '@codemirror/lang-markdown@6.3.2': + dependencies: + '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.33.0)(@lezer/common@1.2.1) + '@codemirror/lang-html': 6.4.9 + '@codemirror/language': 6.10.3 + '@codemirror/state': 6.4.1 + '@codemirror/view': 6.33.0 + '@lezer/common': 1.2.1 + '@lezer/markdown': 1.4.3 + '@codemirror/language@6.10.3': dependencies: '@codemirror/state': 6.4.1 @@ -5100,10 +5159,22 @@ snapshots: '@lezer/common@1.2.1': {} + '@lezer/css@1.1.11': + dependencies: + '@lezer/common': 1.2.1 + '@lezer/highlight': 1.2.1 + '@lezer/lr': 1.4.2 + '@lezer/highlight@1.2.1': dependencies: '@lezer/common': 1.2.1 + '@lezer/html@1.3.10': + dependencies: + '@lezer/common': 1.2.1 + '@lezer/highlight': 1.2.1 + '@lezer/lr': 1.4.2 + '@lezer/javascript@1.4.18': dependencies: '@lezer/common': 1.2.1 @@ -5120,6 +5191,11 @@ snapshots: dependencies: '@lezer/common': 1.2.1 + '@lezer/markdown@1.4.3': + dependencies: + '@lezer/common': 1.2.1 + '@lezer/highlight': 1.2.1 + '@mdx-js/mdx@3.1.0(acorn@8.14.1)': dependencies: '@types/estree': 1.0.7