update codemirror

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"

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: {

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 };

packages/codemirror/src/editor.json.ts

@@ -1,26 +1,13 @@
-import { EditorView, basicSetup } from 'codemirror';
 import { json } from '@codemirror/lang-json';
-
+import * as Base from './editor.base';
-let editor: EditorView = null;
 
 /**
  * 创建单例
  * @param el
  * @returns
  */
-const createEditorInstance = (el?: HTMLDivElement) => {
+export const createEditorInstance = (el?: HTMLDivElement) => {
-  if (editor && el) {
+  return Base.createEditorInstance(el, { extensions: [json()] });
-    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;
 };
 
 /**
@@ -29,12 +16,9 @@ const createEditorInstance = (el?: HTMLDivElement) => {
  * @returns
  */
 export const createEditor = (el: HTMLDivElement) => {
-  const editor = new EditorView({
+  return Base.createEditor(el, { extensions: [json()] });
-    extensions: [basicSetup, json()],
-    parent: el || document.body,
-  });
-  editor.dom.style.height = '100%';
-  return editor;
 };
 
-export { editor, createEditorInstance };
+export { Base };
+
+export const editor = Base.editor;

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') {
+
+  switch (type) {
+    case 'json':
       plugins.push(json());
-  } else {
+      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') {
+  switch (type) {
+    case 'json':
       plugins.push(json());
-  } else {
+      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,

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