feat: add codemirror perf

This commit is contained in:
熊潇 2025-05-12 15:17:02 +08:00
parent 55b1c5fdca
commit 54a486427b
14 changed files with 181 additions and 138 deletions

View File

@ -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"

View File

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

View File

@ -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,

View File

@ -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());

View File

@ -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, // 默认快捷键
]);

View File

@ -33,6 +33,7 @@
"@eslint/js": "^9.26.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/typography": "^0.5.16",
"@tailwindcss/vite": "^4.1.6",
"@types/node": "^22.15.17",
"@types/react": "^19.1.3",
"@types/react-dom": "^19.1.3",
@ -42,7 +43,7 @@
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.1.0",
"tailwind-merge": "^3.2.0",
"tailwind-merge": "^3.3.0",
"tailwindcss": "^4.1.6",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.8.3",

View File

@ -14,7 +14,7 @@ export const App = () => {
<Router>
<Routes>
<Route path='/' element={<Navigate to='/modal/' />} />
<Route path='/modal/*' element={<FlowApps />} />
{/* <Route path='/modal/*' element={<FlowApps />} /> */}
<Route path='/codemirror/*' element={<CodeMirrorApp />} />
<Route path='/404' element={<div>404</div>} />
<Route path='*' element={<div>404</div>} />

View File

@ -1,15 +1 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl font-bold;
}
h2 {
@apply text-xl font-bold;
}
h3 {
@apply text-lg font-bold;
}
}
@import 'tailwindcss';

View File

@ -1,6 +1,8 @@
import { createRoot } from 'react-dom/client';
import { App } from './App.tsx';
// import './tailwind.css';
const App2 = () => {
return <div>hello</div>;
};
import './globals.css';
import './index.css';

View File

@ -1,4 +1,4 @@
import { createEditorInstance } from '@kevisual/codemirror/json';
import { createEditor } from '@kevisual/codemirror/json';
import { useEffect, useRef } from 'react';
export const App = () => {
const ref = useRef<HTMLDivElement>(null);
@ -6,7 +6,7 @@ export const App = () => {
init();
}, []);
const init = () => {
const editor = createEditorInstance(ref.current!);
const editor = createEditor(ref.current!);
editor.dom.style.height = '100%';
};
return (

View File

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@ -1,36 +0,0 @@
console.log('tailwind.config.js');
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ['class'],
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@abearxiong/flows/components/**/*.{ts,tsx}', //
'./node_modules/@abearxiong/flows/hooks/**/*.{ts,tsx}', //
'./node_modules/@abearxiong/flows/src/**/*.{ts,tsx}' //
],
plugins: [require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography')],
theme: {
extend: {},
screen: {
sm: '640px',
// => @media (min-width: 640px) { ... }
md: '768px',
// => @media (min-width: 768px) { ... }
lg: '1024px',
// => @media (min-width: 1024px) { ... }
xl: '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
'3xl': '1920px',
// => @media (min-width: 1920) { ... }
'4xl': '2560px'
// => @media (min-width: 2560) { ... }
}
},
plugins: [require('tailwindcss-animate')]
};

View File

@ -1,25 +1,18 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import path from 'path'
import nesting from 'tailwindcss/nesting'
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
css: {
postcss: {
plugins: [nesting, tailwindcss, autoprefixer]
}
},
plugins: [react(), tailwindcss()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
'@': path.resolve(__dirname, './src'),
},
},
define: {
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development')
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
},
server: {
port: 7101,
@ -27,8 +20,8 @@ export default defineConfig({
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api')
}
}
}
})
rewrite: (path) => path.replace(/^\/api/, '/api'),
},
},
},
});

129
pnpm-lock.yaml generated
View File

@ -136,9 +136,15 @@ importers:
packages/codemirror:
devDependencies:
'@codemirror/autocomplete':
specifier: ^6.18.6
version: 6.18.6
'@codemirror/commands':
specifier: ^6.8.1
version: 6.8.1
'@codemirror/lang-css':
specifier: ^6.3.1
version: 6.3.1(@codemirror/view@6.33.0)
version: 6.3.1
'@codemirror/lang-html':
specifier: ^6.4.9
version: 6.4.9
@ -151,6 +157,12 @@ importers:
'@codemirror/lang-markdown':
specifier: ^6.3.2
version: 6.3.2
'@codemirror/state':
specifier: ^6.5.2
version: 6.5.2
'@codemirror/view':
specifier: ^6.36.7
version: 6.36.7
'@rollup/plugin-node-resolve':
specifier: ^16.0.1
version: 16.0.1(rollup@4.40.2)
@ -159,7 +171,10 @@ importers:
version: 12.1.2(rollup@4.40.2)(tslib@2.8.1)(typescript@5.8.3)
codemirror:
specifier: ^6.0.1
version: 6.0.1(@lezer/common@1.2.1)
version: 6.0.1
prettier:
specifier: ^3.5.3
version: 3.5.3
rollup:
specifier: ^4.40.2
version: 4.40.2
@ -225,6 +240,9 @@ importers:
'@tailwindcss/typography':
specifier: ^0.5.16
version: 0.5.16(tailwindcss@4.1.6)
'@tailwindcss/vite':
specifier: ^4.1.6
version: 4.1.6(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.36.0)(yaml@2.5.1))
'@types/node':
specifier: ^22.15.17
version: 22.15.17
@ -547,16 +565,11 @@ packages:
'@capsizecss/unpack@2.4.0':
resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==}
'@codemirror/autocomplete@6.18.1':
resolution: {integrity: sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==}
peerDependencies:
'@codemirror/language': ^6.0.0
'@codemirror/state': ^6.0.0
'@codemirror/view': ^6.0.0
'@lezer/common': ^1.0.0
'@codemirror/autocomplete@6.18.6':
resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
'@codemirror/commands@6.6.2':
resolution: {integrity: sha512-Fq7eWOl1Rcbrfn6jD8FPCj9Auaxdm5nIK5RYOeW7ughnd/rY5AmPg6b+CfsG39ZHdwiwe8lde3q8uR7CF5S0yQ==}
'@codemirror/commands@6.8.1':
resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
'@codemirror/lang-css@6.3.1':
resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
@ -582,11 +595,11 @@ packages:
'@codemirror/search@6.5.6':
resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
'@codemirror/state@6.4.1':
resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
'@codemirror/state@6.5.2':
resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
'@codemirror/view@6.33.0':
resolution: {integrity: sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==}
'@codemirror/view@6.36.7':
resolution: {integrity: sha512-kCWGW/chWGPgZqfZ36Um9Iz0X2IVpmCjg1P/qY6B6a2ecXtWRRAigmpJ6YgUQ5lTWXMyyVdfmpzhLZmsZQMbtg==}
'@emnapi/runtime@1.4.3':
resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
@ -987,6 +1000,9 @@ packages:
'@lezer/markdown@1.4.3':
resolution: {integrity: sha512-kfw+2uMrQ/wy/+ONfrH83OkdFNM0ye5Xq96cLlaCy7h5UT9FO54DU4oRoIc0CSBh5NWmWuiIJA7NGLMJbQ+Oxg==}
'@marijn/find-cluster-break@1.0.2':
resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
'@mdx-js/mdx@3.1.0':
resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
@ -3475,6 +3491,11 @@ packages:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
engines: {node: '>= 0.8.0'}
prettier@3.5.3:
resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
engines: {node: '>=14'}
hasBin: true
prismjs@1.30.0:
resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
engines: {node: '>=6'}
@ -4800,49 +4821,47 @@ snapshots:
transitivePeerDependencies:
- encoding
'@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/autocomplete@6.18.6':
dependencies:
'@codemirror/language': 6.10.3
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
'@lezer/common': 1.2.1
'@codemirror/commands@6.6.2':
'@codemirror/commands@6.8.1':
dependencies:
'@codemirror/language': 6.10.3
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
'@lezer/common': 1.2.1
'@codemirror/lang-css@6.3.1(@codemirror/view@6.33.0)':
'@codemirror/lang-css@6.3.1':
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/autocomplete': 6.18.6
'@codemirror/language': 6.10.3
'@codemirror/state': 6.4.1
'@codemirror/state': 6.5.2
'@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/autocomplete': 6.18.6
'@codemirror/lang-css': 6.3.1
'@codemirror/lang-javascript': 6.2.3
'@codemirror/language': 6.10.3
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
'@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)
'@codemirror/autocomplete': 6.18.6
'@codemirror/language': 6.10.3
'@codemirror/lint': 6.8.1
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
'@lezer/common': 1.2.1
'@lezer/javascript': 1.4.18
@ -4853,18 +4872,18 @@ snapshots:
'@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/autocomplete': 6.18.6
'@codemirror/lang-html': 6.4.9
'@codemirror/language': 6.10.3
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
'@lezer/common': 1.2.1
'@lezer/markdown': 1.4.3
'@codemirror/language@6.10.3':
dependencies:
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
'@lezer/common': 1.2.1
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
@ -4872,21 +4891,23 @@ snapshots:
'@codemirror/lint@6.8.1':
dependencies:
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
crelt: 1.0.6
'@codemirror/search@6.5.6':
dependencies:
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
crelt: 1.0.6
'@codemirror/state@6.4.1': {}
'@codemirror/view@6.33.0':
'@codemirror/state@6.5.2':
dependencies:
'@codemirror/state': 6.4.1
'@marijn/find-cluster-break': 1.0.2
'@codemirror/view@6.36.7':
dependencies:
'@codemirror/state': 6.5.2
style-mod: 4.1.2
w3c-keyname: 2.2.8
@ -5196,6 +5217,8 @@ snapshots:
'@lezer/common': 1.2.1
'@lezer/highlight': 1.2.1
'@marijn/find-cluster-break@1.0.2': {}
'@mdx-js/mdx@3.1.0(acorn@8.14.1)':
dependencies:
'@types/estree': 1.0.7
@ -6069,17 +6092,15 @@ snapshots:
clsx@2.1.1: {}
codemirror@6.0.1(@lezer/common@1.2.1):
codemirror@6.0.1:
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/commands': 6.6.2
'@codemirror/autocomplete': 6.18.6
'@codemirror/commands': 6.8.1
'@codemirror/language': 6.10.3
'@codemirror/lint': 6.8.1
'@codemirror/search': 6.5.6
'@codemirror/state': 6.4.1
'@codemirror/view': 6.33.0
transitivePeerDependencies:
- '@lezer/common'
'@codemirror/state': 6.5.2
'@codemirror/view': 6.36.7
collapse-white-space@2.1.0: {}
@ -8224,6 +8245,8 @@ snapshots:
prelude-ls@1.2.1: {}
prettier@3.5.3: {}
prismjs@1.30.0: {}
promise.series@0.2.0: {}