@senyao/editor

基于 CodeMirror 的编辑器组件，提供多种类型的编辑器和丰富的自定义功能。

安装

pnpm add @senyao/editor

特性

• 多种类型的编辑器支持（SQL、JSON 等）
• 语法高亮和智能提示
• 内置搜索和替换功能（支持中英文界面）
• 可自定义主题和扩展
• 支持不可编辑区域
• 自动缩进和换行支持
• TypeScript 类型支持

使用示例

通用编辑器

import { Editor } from '@senyao/editor';

function App() {
  const [value, setValue] = useState('console.log("Hello World");');

  return (
    <Editor
      value={value}
      onChange={setValue}
      language="javascript"
      height="300px"
    />
  );
}

SQL 编辑器

import { SQLEditor } from '@senyao/editor';

function App() {
  const [value, setValue] = useState('SELECT * FROM users;');

  return (
    <SQLEditor
      value={value}
      onChange={setValue}
      readOnlyRanges={[
        { start: 0, end: 7 } // "SELECT " 部分不可编辑
      ]}
    />
  );
}

JSON 编辑器

import { JSONEditor } from '@senyao/editor';

function App() {
  const [value, setValue] = useState('{"name": "John", "age": 30}');

  return (
    <JSONEditor
      value={value}
      onChange={setValue}
      enableFormatting={true}
    />
  );
}

自定义扩展

import { Editor, createAutocompletionExtension } from '@senyao/editor';

function App() {
  const [value, setValue] = useState('console.log("Hello World");');

  // 自定义自动补全
  const customCompletions = createAutocompletionExtension({
    override: [
      (context) => {
        return {
          from: context.pos,
          options: [
            { label: 'console.log', type: 'function' },
            { label: 'alert', type: 'function' },
            { label: 'document', type: 'variable' },
          ]
        };
      }
    ]
  });

  return (
    <Editor
      value={value}
      onChange={setValue}
      language="javascript"
      extensions={[customCompletions]}
    />
  );
}

API

通用编辑器 <Editor>

| 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | value | string | - | 编辑器的值 | | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 | | language | string | 'json' | 编辑器语言 | | extensions | Extension[] | [] | 编辑器扩展 | | height | string | number | '300px' | 编辑器高度 | | disabled | boolean | false | 是否禁用编辑器 | | className | string | - | 编辑器样式类名 | | style | React.CSSProperties | - | 编辑器内联样式 | | placeholder | string | - | 占位文本 | | theme | 'light' | 'dark' | 'light' | 编辑器主题 |

SQL 编辑器 <SQLEditor>

| 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | value | string | - | 编辑器的值 | | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 | | extensions | Extension[] | [] | 编辑器扩展 | | readOnlyRanges | Array<{ start: number; end: number }> | [] | 不可编辑区域范围 | | height | string | number | '300px' | 编辑器高度 | | disabled | boolean | false | 是否禁用编辑器 | | className | string | - | 编辑器样式类名 | | style | React.CSSProperties | - | 编辑器内联样式 | | placeholder | string | - | 占位文本 |

JSON 编辑器 <JSONEditor>

| 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | value | string | - | 编辑器的值 | | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 | | extensions | Extension[] | [] | 编辑器扩展 | | enableFormatting | boolean | true | 是否启用格式化功能 | | height | string | number | '300px' | 编辑器高度 | | disabled | boolean | false | 是否禁用编辑器 | | className | string | - | 编辑器样式类名 | | style | React.CSSProperties | - | 编辑器内联样式 | | placeholder | string | - | 占位文本 |

搜索功能和国际化

编辑器内置了 CodeMirror 的搜索功能，支持中英文界面：

键盘快捷键

• Ctrl+F (Mac: Cmd+F): 打开搜索面板
• Ctrl+H (Mac: Cmd+H): 打开替换面板
• Ctrl+G (Mac: Cmd+G): 查找下一个
• Ctrl+Shift+G (Mac: Cmd+Shift+G): 查找上一个
• Escape: 关闭搜索面板

语言选择

// 中文搜索面板（默认）
<JSONEditor locale="zh-CN" />

// 英文搜索面板
<JSONEditor locale="en-US" />

编程式调用

import { JSONEditor, openSearchPanel } from '@senyao/editor'

function MyEditor() {
  const editorRef = useRef<EditorRef>(null)
  
  const handleOpenSearch = () => {
    const view = editorRef.current?.getEditorView()
    if (view) {
      openSearchPanel(view)
    }
  }
  
  return (
    <div>
      <button onClick={handleOpenSearch}>打开搜索</button>
      <JSONEditor 
        ref={editorRef} 
        value={value} 
        onChange={setValue}
        locale="zh-CN"  // 设置为中文界面
      />
    </div>
  )
}

其他定位功能

// 跳转到指定行
editorRef.current?.goToLine(10)

// 跳转到指定位置
editorRef.current?.goToPosition(100)

中文翻译对照

| 中文 | 英文 | |------|------| | 搜索 | Search | | 替换 | Replace | | 查找 | Find | | 全部替换 | Replace all | | 区分大小写 | Match case | | 全字匹配 | Match whole word | | 使用正则表达式 | Use regular expression | | 无匹配结果 | No matches | | 关闭 | Close |

工具函数

• getLanguageExtension(language): 根据语言类型获取对应的语言扩展
• createAutocompletionExtension(options): 创建自动补全扩展
• createSearchExtension(): 创建中文搜索扩展
• createEnglishSearchExtension(): 创建英文搜索扩展
• chineseLanguageExtension(): 中文翻译扩展
• createLintExtension(lintFunction): 创建错误检查扩展
• createKeymapExtension(): 创建键盘快捷键扩展
• getThemeExtension(theme): 根据主题类型获取对应的主题扩展

贡献指南

欢迎提交 Issue 或 Pull Request 来完善本组件库。

许可证

MIT