npm package: @senyao-design-system/editor
Description: A flexible editor component based on CodeMirror
Latest version: 0.0.14

# @senyao/editor

基于 CodeMirror 的编辑器组件，提供多种类型的编辑器和丰富的自定义功能。

## 安装

```bash
pnpm add @senyao/editor
```

## 特性

- 多种类型的编辑器支持（SQL、JSON 等）
- 语法高亮和智能提示
- 内置搜索和替换功能（支持中英文界面）
- 可自定义主题和扩展
- 支持不可编辑区域
- 自动缩进和换行支持
- TypeScript 类型支持

## 使用示例

### 通用编辑器

```tsx
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 编辑器

```tsx
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 编辑器

```tsx
import { JSONEditor } from '@senyao/editor';

function App() {
  const [value, setValue] = useState('{"name": "John", "age": 30}');

  return (
    <JSONEditor
      value={value}
      onChange={setValue}
      enableFormatting={true}
    />
  );
}
```

## 自定义扩展

```tsx
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`: 关闭搜索面板

### 语言选择

```tsx
// 中文搜索面板（默认）
<JSONEditor locale="zh-CN" />

// 英文搜索面板
<JSONEditor locale="en-US" />
```

### 编程式调用

```tsx
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>
  )
}
```

### 其他定位功能

```tsx
// 跳转到指定行
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