feat: add codemirror perf

packages/codemirror/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevisual/codemirror",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "",
   "main": "dist/editor.js",
   "private": false,
@@ -16,15 +16,22 @@
   ],
   "author": "abearxiong",
   "license": "ISC",
-  "devDependencies": {
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.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",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.36.7",
+    "codemirror": "^6.0.1",
+    "prettier": "^3.5.3"
+  },
+  "devDependencies": {
     "@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"

packages/codemirror/rollup.config.mjs

@@ -5,10 +5,12 @@ const entrys = ['editor', 'editor.json', 'editor.base'];
 const configs = entrys.map((entry) => ({
   input: `./src/${entry}.ts`, // 修改输入文件为 TypeScript 文件
   output: {
-    file: `./dist/${entry}.js`,
+    // file: `./dist/${entry}.js`,
+    dir: './dist',
   },
+  target: 'browser',
   plugins: [
-    nodeResolve(),
+    // nodeResolve(),
     typescript({
       tsconfig: './tsconfig.json',
       compilerOptions: {

packages/codemirror/src/editor.base.ts

@@ -1,5 +1,5 @@
 import { EditorView, basicSetup } from 'codemirror';
-
+import { formatKeymap } from './extensions/tab';
 let editor: EditorView = null;
 
 export type EditorOptions = {
@@ -19,6 +19,7 @@ const createEditorInstance = (el?: HTMLDivElement, opts?: EditorOptions) => {
     return editor;
   }
   const extensions = opts?.extensions || [];
+  extensions.push(formatKeymap);
   const hasBaseicSetup = opts?.hasBasicSetup ?? true;
   if (hasBaseicSetup) {
     extensions.unshift(basicSetup);
@@ -42,6 +43,7 @@ export const createEditor = (el: HTMLDivElement, opts?: EditorOptions) => {
   if (hasBaseicSetup) {
     extensions.unshift(basicSetup);
   }
+  extensions.push(formatKeymap);
   const editor = new EditorView({
     extensions,
     parent: el || document.body,

packages/codemirror/src/editor.ts

@@ -4,6 +4,7 @@ import { json } from '@codemirror/lang-json';
 import { html } from '@codemirror/lang-html';
 import { markdown } from '@codemirror/lang-markdown';
 import { css } from '@codemirror/lang-css';
+import { formatKeymap } from './extensions/tab';
 let editor: EditorView = null;
 
 type CreateOpts = {
@@ -12,6 +13,7 @@ type CreateOpts = {
   type?: 'javascript' | 'json' | 'html' | 'markdown' | 'css';
   hasBasicSetup?: boolean;
   extensions?: any[];
+  hasKeymap?: boolean;
 };
 /**
  * 创建单例
@@ -28,9 +30,13 @@ const createEditorInstance = (el?: HTMLDivElement, opts?: CreateOpts) => {
   const { type = 'javascript' } = opts || {};
   const extensions = opts?.extensions || [];
   const hasBaseicSetup = opts?.hasBasicSetup ?? true;
+  const hasKeymap = opts?.hasKeymap ?? true;
   if (hasBaseicSetup) {
     extensions.unshift(basicSetup);
   }
+  if (hasKeymap) {
+    extensions.push(formatKeymap);
+  }
   switch (type) {
     case 'json':
       extensions.push(json());
@@ -65,9 +71,13 @@ export const createEditor = (el: HTMLDivElement, opts?: CreateOpts) => {
   const { type = 'javascript' } = opts || {};
   const extensions = opts?.extensions || [];
   const hasBaseicSetup = opts?.hasBasicSetup ?? true;
+  const hasKeymap = opts?.hasKeymap ?? true;
   if (hasBaseicSetup) {
     extensions.unshift(basicSetup);
   }
+  if (hasKeymap) {
+    extensions.push(formatKeymap);
+  }
   switch (type) {
     case 'json':
       extensions.push(json());

packages/codemirror/src/extensions/tab.ts

@@ -0,0 +1,56 @@
+import { EditorView, keymap } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { defaultKeymap, indentWithTab, insertTab } from '@codemirror/commands';
+import prettier from 'prettier';
+// import parserBabel from 'prettier/plugins/babel';
+import parserEstree from 'prettier/plugins/estree';
+// import parserHtml from 'prettier/plugins/html';
+import parserTypescript from 'prettier/plugins/typescript';
+
+// 格式化函数
+// Function to format the code using Prettier
+type FormatCodeOptions = {
+  type: 'typescript';
+  plugins?: any[];
+};
+async function formatCode(view: EditorView, opts?: FormatCodeOptions) {
+  const editor = view;
+  const code = editor.state.doc.toString();
+  const plugins = opts?.plugins || [];
+  plugins.push(parserEstree);
+  const parser = opts?.type || 'typescript';
+  if (parser === 'typescript') {
+    plugins.push(parserTypescript);
+  }
+  try {
+    const formattedCode = await prettier.format(code, {
+      parser: parser,
+      plugins: plugins,
+    });
+
+    editor.dispatch({
+      changes: {
+        from: 0,
+        to: editor.state.doc.length,
+        insert: formattedCode.trim(),
+      },
+    });
+  } catch (error) {
+    console.error('Error formatting code:', error);
+  }
+}
+
+export const formatKeymap = keymap.of([
+  {
+    // bug, 必须小写
+    key: 'alt-shift-f', // 快捷键绑定
+    // mac: 'cmd-shift-f',
+    run: (view) => {
+      formatCode(view);
+      return true; // 表示按键事件被处理
+    },
+  },
+  // indentWithTab, // Tab键自动缩进
+  { key: 'Tab', run: insertTab }, // 在光标位置插入Tab字符
+  ...defaultKeymap, // 默认快捷键
+]);