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

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,