@senyao-design-system/editor 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,172 +1,251 @@
1
- # @senyao/editor
2
-
3
- 基于 CodeMirror 的编辑器组件,提供多种类型的编辑器和丰富的自定义功能。
4
-
5
- ## 安装
6
-
7
- ```bash
8
- pnpm add @senyao/editor
9
- ```
10
-
11
- ## 特性
12
-
13
- - 多种类型的编辑器支持(SQL、JSON 等)
14
- - 语法高亮和智能提示
15
- - 可自定义主题和扩展
16
- - 支持不可编辑区域
17
- - TypeScript 类型支持
18
-
19
- ## 使用示例
20
-
21
- ### 通用编辑器
22
-
23
- ```tsx
24
- import { Editor } from '@senyao/editor';
25
-
26
- function App() {
27
- const [value, setValue] = useState('console.log("Hello World");');
28
-
29
- return (
30
- <Editor
31
- value={value}
32
- onChange={setValue}
33
- language="javascript"
34
- height="300px"
35
- />
36
- );
37
- }
38
- ```
39
-
40
- ### SQL 编辑器
41
-
42
- ```tsx
43
- import { SQLEditor } from '@senyao/editor';
44
-
45
- function App() {
46
- const [value, setValue] = useState('SELECT * FROM users;');
47
-
48
- return (
49
- <SQLEditor
50
- value={value}
51
- onChange={setValue}
52
- readOnlyRanges={[
53
- { start: 0, end: 7 } // "SELECT " 部分不可编辑
54
- ]}
55
- />
56
- );
57
- }
58
- ```
59
-
60
- ### JSON 编辑器
61
-
62
- ```tsx
63
- import { JSONEditor } from '@senyao/editor';
64
-
65
- function App() {
66
- const [value, setValue] = useState('{"name": "John", "age": 30}');
67
-
68
- return (
69
- <JSONEditor
70
- value={value}
71
- onChange={setValue}
72
- enableFormatting={true}
73
- />
74
- );
75
- }
76
- ```
77
-
78
- ## 自定义扩展
79
-
80
- ```tsx
81
- import { Editor, createAutocompletionExtension } from '@senyao/editor';
82
-
83
- function App() {
84
- const [value, setValue] = useState('console.log("Hello World");');
85
-
86
- // 自定义自动补全
87
- const customCompletions = createAutocompletionExtension({
88
- override: [
89
- (context) => {
90
- return {
91
- from: context.pos,
92
- options: [
93
- { label: 'console.log', type: 'function' },
94
- { label: 'alert', type: 'function' },
95
- { label: 'document', type: 'variable' },
96
- ]
97
- };
98
- }
99
- ]
100
- });
101
-
102
- return (
103
- <Editor
104
- value={value}
105
- onChange={setValue}
106
- language="javascript"
107
- extensions={[customCompletions]}
108
- />
109
- );
110
- }
111
- ```
112
-
113
- ## API
114
-
115
- ### 通用编辑器 `<Editor>`
116
-
117
- | 属性 | 类型 | 默认值 | 描述 |
118
- | --- | --- | --- | --- |
119
- | value | string | - | 编辑器的值 |
120
- | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 |
121
- | language | string | 'json' | 编辑器语言 |
122
- | extensions | Extension[] | [] | 编辑器扩展 |
123
- | height | string \| number | '300px' | 编辑器高度 |
124
- | disabled | boolean | false | 是否禁用编辑器 |
125
- | className | string | - | 编辑器样式类名 |
126
- | style | React.CSSProperties | - | 编辑器内联样式 |
127
- | placeholder | string | - | 占位文本 |
128
- | theme | 'light' \| 'dark' | 'light' | 编辑器主题 |
129
-
130
- ### SQL 编辑器 `<SQLEditor>`
131
-
132
- | 属性 | 类型 | 默认值 | 描述 |
133
- | --- | --- | --- | --- |
134
- | value | string | - | 编辑器的值 |
135
- | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 |
136
- | extensions | Extension[] | [] | 编辑器扩展 |
137
- | readOnlyRanges | Array<{ start: number; end: number }> | [] | 不可编辑区域范围 |
138
- | height | string \| number | '300px' | 编辑器高度 |
139
- | disabled | boolean | false | 是否禁用编辑器 |
140
- | className | string | - | 编辑器样式类名 |
141
- | style | React.CSSProperties | - | 编辑器内联样式 |
142
- | placeholder | string | - | 占位文本 |
143
-
144
- ### JSON 编辑器 `<JSONEditor>`
145
-
146
- | 属性 | 类型 | 默认值 | 描述 |
147
- | --- | --- | --- | --- |
148
- | value | string | - | 编辑器的值 |
149
- | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 |
150
- | extensions | Extension[] | [] | 编辑器扩展 |
151
- | enableFormatting | boolean | true | 是否启用格式化功能 |
152
- | height | string \| number | '300px' | 编辑器高度 |
153
- | disabled | boolean | false | 是否禁用编辑器 |
154
- | className | string | - | 编辑器样式类名 |
155
- | style | React.CSSProperties | - | 编辑器内联样式 |
156
- | placeholder | string | - | 占位文本 |
157
-
158
- ## 工具函数
159
-
160
- - `getLanguageExtension(language)`: 根据语言类型获取对应的语言扩展
161
- - `createAutocompletionExtension(options)`: 创建自动补全扩展
162
- - `createLintExtension(lintFunction)`: 创建错误检查扩展
163
- - `createKeymapExtension()`: 创建键盘快捷键扩展
164
- - `getThemeExtension(theme)`: 根据主题类型获取对应的主题扩展
165
-
166
- ## 贡献指南
167
-
168
- 欢迎提交 Issue Pull Request 来完善本组件库。
169
-
170
- ## 许可证
171
-
172
- MIT
1
+ # @senyao/editor
2
+
3
+ 基于 CodeMirror 的编辑器组件,提供多种类型的编辑器和丰富的自定义功能。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ pnpm add @senyao/editor
9
+ ```
10
+
11
+ ## 特性
12
+
13
+ - 多种类型的编辑器支持(SQL、JSON 等)
14
+ - 语法高亮和智能提示
15
+ - 内置搜索和替换功能(支持中英文界面)
16
+ - 可自定义主题和扩展
17
+ - 支持不可编辑区域
18
+ - 自动缩进和换行支持
19
+ - TypeScript 类型支持
20
+
21
+ ## 使用示例
22
+
23
+ ### 通用编辑器
24
+
25
+ ```tsx
26
+ import { Editor } from '@senyao/editor';
27
+
28
+ function App() {
29
+ const [value, setValue] = useState('console.log("Hello World");');
30
+
31
+ return (
32
+ <Editor
33
+ value={value}
34
+ onChange={setValue}
35
+ language="javascript"
36
+ height="300px"
37
+ />
38
+ );
39
+ }
40
+ ```
41
+
42
+ ### SQL 编辑器
43
+
44
+ ```tsx
45
+ import { SQLEditor } from '@senyao/editor';
46
+
47
+ function App() {
48
+ const [value, setValue] = useState('SELECT * FROM users;');
49
+
50
+ return (
51
+ <SQLEditor
52
+ value={value}
53
+ onChange={setValue}
54
+ readOnlyRanges={[
55
+ { start: 0, end: 7 } // "SELECT " 部分不可编辑
56
+ ]}
57
+ />
58
+ );
59
+ }
60
+ ```
61
+
62
+ ### JSON 编辑器
63
+
64
+ ```tsx
65
+ import { JSONEditor } from '@senyao/editor';
66
+
67
+ function App() {
68
+ const [value, setValue] = useState('{"name": "John", "age": 30}');
69
+
70
+ return (
71
+ <JSONEditor
72
+ value={value}
73
+ onChange={setValue}
74
+ enableFormatting={true}
75
+ />
76
+ );
77
+ }
78
+ ```
79
+
80
+ ## 自定义扩展
81
+
82
+ ```tsx
83
+ import { Editor, createAutocompletionExtension } from '@senyao/editor';
84
+
85
+ function App() {
86
+ const [value, setValue] = useState('console.log("Hello World");');
87
+
88
+ // 自定义自动补全
89
+ const customCompletions = createAutocompletionExtension({
90
+ override: [
91
+ (context) => {
92
+ return {
93
+ from: context.pos,
94
+ options: [
95
+ { label: 'console.log', type: 'function' },
96
+ { label: 'alert', type: 'function' },
97
+ { label: 'document', type: 'variable' },
98
+ ]
99
+ };
100
+ }
101
+ ]
102
+ });
103
+
104
+ return (
105
+ <Editor
106
+ value={value}
107
+ onChange={setValue}
108
+ language="javascript"
109
+ extensions={[customCompletions]}
110
+ />
111
+ );
112
+ }
113
+ ```
114
+
115
+ ## API
116
+
117
+ ### 通用编辑器 `<Editor>`
118
+
119
+ | 属性 | 类型 | 默认值 | 描述 |
120
+ | --- | --- | --- | --- |
121
+ | value | string | - | 编辑器的值 |
122
+ | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 |
123
+ | language | string | 'json' | 编辑器语言 |
124
+ | extensions | Extension[] | [] | 编辑器扩展 |
125
+ | height | string \| number | '300px' | 编辑器高度 |
126
+ | disabled | boolean | false | 是否禁用编辑器 |
127
+ | className | string | - | 编辑器样式类名 |
128
+ | style | React.CSSProperties | - | 编辑器内联样式 |
129
+ | placeholder | string | - | 占位文本 |
130
+ | theme | 'light' \| 'dark' | 'light' | 编辑器主题 |
131
+
132
+ ### SQL 编辑器 `<SQLEditor>`
133
+
134
+ | 属性 | 类型 | 默认值 | 描述 |
135
+ | --- | --- | --- | --- |
136
+ | value | string | - | 编辑器的值 |
137
+ | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 |
138
+ | extensions | Extension[] | [] | 编辑器扩展 |
139
+ | readOnlyRanges | Array<{ start: number; end: number }> | [] | 不可编辑区域范围 |
140
+ | height | string \| number | '300px' | 编辑器高度 |
141
+ | disabled | boolean | false | 是否禁用编辑器 |
142
+ | className | string | - | 编辑器样式类名 |
143
+ | style | React.CSSProperties | - | 编辑器内联样式 |
144
+ | placeholder | string | - | 占位文本 |
145
+
146
+ ### JSON 编辑器 `<JSONEditor>`
147
+
148
+ | 属性 | 类型 | 默认值 | 描述 |
149
+ | --- | --- | --- | --- |
150
+ | value | string | - | 编辑器的值 |
151
+ | onChange | (value: string) => void | - | 编辑器值变化时的回调函数 |
152
+ | extensions | Extension[] | [] | 编辑器扩展 |
153
+ | enableFormatting | boolean | true | 是否启用格式化功能 |
154
+ | height | string \| number | '300px' | 编辑器高度 |
155
+ | disabled | boolean | false | 是否禁用编辑器 |
156
+ | className | string | - | 编辑器样式类名 |
157
+ | style | React.CSSProperties | - | 编辑器内联样式 |
158
+ | placeholder | string | - | 占位文本 |
159
+
160
+ ## 搜索功能和国际化
161
+
162
+ 编辑器内置了 CodeMirror 的搜索功能,支持中英文界面:
163
+
164
+ ### 键盘快捷键
165
+ - `Ctrl+F` (Mac: `Cmd+F`): 打开搜索面板
166
+ - `Ctrl+H` (Mac: `Cmd+H`): 打开替换面板
167
+ - `Ctrl+G` (Mac: `Cmd+G`): 查找下一个
168
+ - `Ctrl+Shift+G` (Mac: `Cmd+Shift+G`): 查找上一个
169
+ - `Escape`: 关闭搜索面板
170
+
171
+ ### 语言选择
172
+
173
+ ```tsx
174
+ // 中文搜索面板(默认)
175
+ <JSONEditor locale="zh-CN" />
176
+
177
+ // 英文搜索面板
178
+ <JSONEditor locale="en-US" />
179
+ ```
180
+
181
+ ### 编程式调用
182
+
183
+ ```tsx
184
+ import { JSONEditor, openSearchPanel } from '@senyao/editor'
185
+
186
+ function MyEditor() {
187
+ const editorRef = useRef<EditorRef>(null)
188
+
189
+ const handleOpenSearch = () => {
190
+ const view = editorRef.current?.getEditorView()
191
+ if (view) {
192
+ openSearchPanel(view)
193
+ }
194
+ }
195
+
196
+ return (
197
+ <div>
198
+ <button onClick={handleOpenSearch}>打开搜索</button>
199
+ <JSONEditor
200
+ ref={editorRef}
201
+ value={value}
202
+ onChange={setValue}
203
+ locale="zh-CN" // 设置为中文界面
204
+ />
205
+ </div>
206
+ )
207
+ }
208
+ ```
209
+
210
+ ### 其他定位功能
211
+
212
+ ```tsx
213
+ // 跳转到指定行
214
+ editorRef.current?.goToLine(10)
215
+
216
+ // 跳转到指定位置
217
+ editorRef.current?.goToPosition(100)
218
+ ```
219
+
220
+ ### 中文翻译对照
221
+
222
+ | 中文 | 英文 |
223
+ |------|------|
224
+ | 搜索 | Search |
225
+ | 替换 | Replace |
226
+ | 查找 | Find |
227
+ | 全部替换 | Replace all |
228
+ | 区分大小写 | Match case |
229
+ | 全字匹配 | Match whole word |
230
+ | 使用正则表达式 | Use regular expression |
231
+ | 无匹配结果 | No matches |
232
+ | 关闭 | Close |
233
+
234
+ ## 工具函数
235
+
236
+ - `getLanguageExtension(language)`: 根据语言类型获取对应的语言扩展
237
+ - `createAutocompletionExtension(options)`: 创建自动补全扩展
238
+ - `createSearchExtension()`: 创建中文搜索扩展
239
+ - `createEnglishSearchExtension()`: 创建英文搜索扩展
240
+ - `chineseLanguageExtension()`: 中文翻译扩展
241
+ - `createLintExtension(lintFunction)`: 创建错误检查扩展
242
+ - `createKeymapExtension()`: 创建键盘快捷键扩展
243
+ - `getThemeExtension(theme)`: 根据主题类型获取对应的主题扩展
244
+
245
+ ## 贡献指南
246
+
247
+ 欢迎提交 Issue 或 Pull Request 来完善本组件库。
248
+
249
+ ## 许可证
250
+
251
+ MIT
@@ -1 +1 @@
1
- .senyao-editor{width:100%;border:1px solid #ddd;border-radius:4px;overflow:hidden;font-family:Menlo,Monaco,Courier New,monospace;transition:border-color .2s,box-shadow .2s}.senyao-editor:focus-within{border-color:#00ae87;box-shadow:0 0 0 2px #00ae8733}.senyao-editor .cm-editor{height:100%}.senyao-editor .cm-scroller{overflow:auto}.senyao-editor .cm-content{padding:8px 4px;text-align:left!important}.senyao-editor .cm-readonly{background-color:#f5f5f5}.senyao-editor .cm-readOnly{background-color:#0000000d!important;border-radius:2px;position:relative;pointer-events:all;transition:background-color .2s;border-left:2px solid rgba(0,0,0,.1);z-index:1}.senyao-editor .cm-readOnly:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;cursor:not-allowed!important;z-index:10;pointer-events:auto}.senyao-editor .cm-readOnly:hover:after{background-color:#00000005}.senyao-editor .cm-diagnosticError{text-decoration:wavy underline #ff4d4f;text-decoration-skip-ink:none}.senyao-editor .cm-diagnosticWarning{text-decoration:wavy underline #faad14;text-decoration-skip-ink:none}.senyao-editor .cm-keyword{color:#00f!important;z-index:2;position:relative;background-color:transparent!important}.senyao-editor .cb,.senyao-editor .cm-content span.cb,.senyao-editor span.cm-keyword{color:#00f;font-weight:700;position:relative;background-color:transparent}.senyao-editor .cm-operator{color:#777!important;z-index:2;position:relative}.senyao-editor .cm-number{color:#098658!important;z-index:2;position:relative}.senyao-editor .cm-string{color:#a31515!important;z-index:2;position:relative}.senyao-editor .cm-comment{color:green!important;z-index:2;position:relative}.senyao-editor .cm-propertyName{color:#0451a5!important;z-index:2;position:relative}.senyao-editor.disabled{opacity:.7;cursor:not-allowed}.senyao-editor.disabled .cm-content{cursor:not-allowed}.senyao-editor .cm-placeholder{color:#999}.senyao-editor .cm-activeLine{background-color:#0000000a}
1
+ .senyao-editor{width:100%;border:1px solid #ddd;border-radius:4px;overflow:hidden;font-family:Menlo,Monaco,Courier New,monospace;transition:border-color .2s,box-shadow .2s}.senyao-editor:focus-within{border-color:#00ae87;box-shadow:0 0 0 2px #00ae8733}.senyao-editor .cm-editor{height:100%}.senyao-editor .cm-scroller{overflow:auto}.senyao-editor .cm-content{padding:8px 4px;text-align:left!important}.senyao-editor .cm-readonly{background-color:#f5f5f5}.senyao-editor .cm-readOnly{background-color:#0000000d!important;border-radius:2px;position:relative;pointer-events:all;transition:background-color .2s;border-left:2px solid rgba(0,0,0,.1);z-index:1}.senyao-editor .cm-readOnly:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;cursor:not-allowed!important;z-index:10;pointer-events:auto}.senyao-editor .cm-readOnly:hover:after{background-color:#00000005}.senyao-editor .cm-diagnosticError{text-decoration:wavy underline #ff4d4f;text-decoration-skip-ink:none}.senyao-editor .cm-diagnosticWarning{text-decoration:wavy underline #faad14;text-decoration-skip-ink:none}.senyao-editor .cm-keyword{color:#00f!important;z-index:2;position:relative;background-color:transparent!important}.senyao-editor .cb,.senyao-editor .cm-content span.cb,.senyao-editor span.cm-keyword{color:#00f;font-weight:700;position:relative;background-color:transparent}.senyao-editor .cm-operator{color:#777!important;z-index:2;position:relative}.senyao-editor .cm-number{color:#098658!important;z-index:2;position:relative}.senyao-editor .cm-string{color:#a31515!important;z-index:2;position:relative}.senyao-editor .cm-comment{color:green!important;z-index:2;position:relative}.senyao-editor .cm-propertyName{color:#0451a5!important;z-index:2;position:relative}.senyao-editor.disabled{opacity:.7;cursor:not-allowed}.senyao-editor.disabled .cm-content{cursor:not-allowed}.senyao-editor .cm-placeholder{color:#999}.senyao-editor .cm-activeLine{background-color:#0000000a}.senyao-editor .cm-panel.cm-search{background:#fff;border:1px solid #e1e5e9;border-radius:6px;box-shadow:0 4px 12px #0000001a;padding:12px;font-size:14px}.senyao-editor .cm-search label{font-size:13px;color:#6c757d;margin-right:8px}.senyao-editor .cm-search input[type=text]{border:1px solid #ced4da;border-radius:4px;padding:6px 8px;font-size:13px;margin-right:6px}.senyao-editor .cm-search input[type=text]:focus{outline:none;border-color:#00ae87;box-shadow:0 0 0 2px #00ae8733}.senyao-editor .cm-search button{background:#f8f9fa;border:1px solid #ced4da;border-radius:4px;padding:6px 10px;font-size:12px;cursor:pointer;margin-right:4px}.senyao-editor .cm-search button:hover{background:#e9ecef}.senyao-editor .cm-search button:active{background:#dee2e6}.senyao-editor .cm-searchMatch{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:2px;color:#856404}.senyao-editor .cm-searchMatch-selected{background-color:#ffc107;border-color:#ffb300;color:#212529}.senyao-editor .cm-selectionMatch{background-color:#00ae8726;border-radius:2px}
@@ -1,11 +1,7 @@
1
- import { EditorProps } from '../../../types';
1
+ import { EditorProps, EditorRef } from '../../../types';
2
2
  import { ThemeType } from '../../../extensions';
3
3
 
4
- /**
5
- * 通用编辑器组件
6
- * 支持语言选择和主题切换
7
- */
8
- export declare const Editor: ({ value, onChange, language, extensions, theme, showLineNumbers, ...rest }: EditorProps & {
4
+ declare const _default: import('../../react').ForwardRefExoticComponent<EditorProps & {
9
5
  theme?: ThemeType;
10
- }) => import("react/jsx-runtime").JSX.Element;
11
- export default Editor;
6
+ } & import('../../react').RefAttributes<EditorRef>>;
7
+ export default _default;
@@ -1,8 +1,9 @@
1
- import { EditorProps } from '../../../types';
1
+ import { EditorProps, EditorRef } from '../../../types';
2
2
 
3
3
  /**
4
4
  * 通用编辑器组件
5
5
  * 作为所有特定编辑器的基础组件
6
6
  */
7
- export declare const GenericEditor: ({ value, onChange, extensions, height, disabled, className, style, placeholder: placeholderText, showLineNumbers, onEditorViewCreated, }: EditorProps) => import("react/jsx-runtime").JSX.Element;
8
- export default GenericEditor;
7
+ export declare const GenericEditor: ({ value, onChange, extensions, height, disabled, className, style, placeholder: placeholderText, showLineNumbers, onEditorViewCreated, locale, }: EditorProps, ref: React.Ref<EditorRef>) => import("react/jsx-runtime").JSX.Element;
8
+ declare const _default: import('../../react').ForwardRefExoticComponent<EditorProps & import('../../react').RefAttributes<EditorRef>>;
9
+ export default _default;
@@ -1,7 +1,5 @@
1
- import { JSONEditorProps } from '../../../types';
1
+ import { default as React } from '../../react';
2
+ import { JSONEditorProps, EditorRef } from '../../../types';
2
3
 
3
- /**
4
- * JSON 编辑器组件
5
- * 支持 JSON 语法高亮和换行
6
- */
7
- export default function JSONEditor(props: JSONEditorProps): import("react/jsx-runtime").JSX.Element;
4
+ declare const _default: React.ForwardRefExoticComponent<JSONEditorProps & React.RefAttributes<EditorRef>>;
5
+ export default _default;
@@ -1,8 +1,4 @@
1
- import { SQLEditorProps } from '../../../types';
1
+ import { SQLEditorProps, EditorRef } from '../../../types';
2
2
 
3
- /**
4
- * SQL 编辑器组件
5
- * 提供 SQL 语法高亮和智能提示
6
- */
7
- export declare const SQLEditor: ({ value, onChange, extensions, readOnlyRanges: externalReadOnlyRanges, manageReadOnlyRanges, showLineNumbers, ...rest }: SQLEditorProps) => import("react/jsx-runtime").JSX.Element;
8
- export default SQLEditor;
3
+ declare const _default: import('../../react').ForwardRefExoticComponent<SQLEditorProps & import('../../react').RefAttributes<EditorRef>>;
4
+ export default _default;
@@ -3,3 +3,4 @@ export * from '../../features';
3
3
  export * from '../../theme';
4
4
  export * from '../../utils';
5
5
  export * from '../../readOnlyRanges';
6
+ export * from '../../search';
@@ -0,0 +1,38 @@
1
+ import { Extension } from '../../@codemirror/state';
2
+ import { searchKeymap, highlightSelectionMatches, search } from '../../@codemirror/search';
3
+
4
+ /**
5
+ * 创建搜索扩展(中文版)
6
+ * 包含搜索面板、相关键盘快捷键和中文翻译
7
+ *
8
+ * 默认快捷键:
9
+ * - Ctrl+F (Cmd+F on Mac): 打开搜索面板
10
+ * - Ctrl+H (Cmd+H on Mac): 打开替换面板
11
+ * - Ctrl+G (Cmd+G on Mac): 查找下一个
12
+ * - Ctrl+Shift+G (Cmd+Shift+G on Mac): 查找上一个
13
+ * - Escape: 关闭搜索面板
14
+ */
15
+ export declare function createSearchExtension(): Extension;
16
+ /**
17
+ * 轻量级搜索扩展
18
+ * 只包含选中文本高亮,不包含搜索面板
19
+ */
20
+ export declare function createHighlightOnlyExtension(): Extension;
21
+ /**
22
+ * 创建英文搜索扩展
23
+ * 保持原有的英文界面
24
+ */
25
+ export declare function createEnglishSearchExtension(): Extension;
26
+ /**
27
+ * 自定义搜索快捷键
28
+ */
29
+ export declare const customSearchKeymap: ({
30
+ key: string;
31
+ mac: string;
32
+ run: () => boolean;
33
+ } | {
34
+ key: string;
35
+ run: () => boolean;
36
+ mac?: undefined;
37
+ })[];
38
+ export { searchKeymap, highlightSelectionMatches, search };
@@ -0,0 +1 @@
1
+ export * from '../../search-zh-cn';
@@ -0,0 +1,13 @@
1
+ import { Extension } from '../../@codemirror/state';
2
+ import { EditorView } from '../../@codemirror/view';
3
+
4
+ /**
5
+ * CodeMirror 6 中文翻译
6
+ * 使用正确的 API 实现
7
+ */
8
+ export declare function chineseLanguageExtension(): Extension;
9
+ /**
10
+ * 使用JavaScript方式修改搜索面板文本
11
+ * 这是一个变通方案,通过DOM操作实现中文化
12
+ */
13
+ export declare function applyChinese(view: EditorView): void;
@@ -0,0 +1,44 @@
1
+ import { Extension } from '../../@codemirror/state';
2
+ import { EditorView } from '../../@codemirror/view';
3
+
4
+ /**
5
+ * CodeMirror 搜索面板中文翻译
6
+ * 包含所有搜索相关的界面文本
7
+ */
8
+ export declare const searchTranslationsZhCN: {
9
+ Search: string;
10
+ Replace: string;
11
+ Find: string;
12
+ 'Replace all': string;
13
+ Next: string;
14
+ Previous: string;
15
+ All: string;
16
+ Close: string;
17
+ done: string;
18
+ 'Match case': string;
19
+ 'Match whole word': string;
20
+ 'Use regular expression': string;
21
+ 'by word': string;
22
+ replace: string;
23
+ 'Search for': string;
24
+ 'Replace with': string;
25
+ 'No matches': string;
26
+ 'replaced $ matches': string;
27
+ 'replaced match on line $': string;
28
+ 'on line': string;
29
+ line: string;
30
+ '$ of $ matches': string;
31
+ 'Invalid regular expression': string;
32
+ 'Query too long': string;
33
+ 'Search string too long': string;
34
+ };
35
+ /**
36
+ * 创建中文语言扩展
37
+ * 使用 CSS 和 DOM 操作实现中文化
38
+ */
39
+ export declare function chineseLanguageExtension(): Extension;
40
+ /**
41
+ * 应用中文翻译到搜索面板
42
+ * 这个函数需要在搜索面板打开后调用
43
+ */
44
+ export declare function applyChinese(view: EditorView): void;
package/dist/index.d.ts CHANGED
@@ -4,6 +4,8 @@ export { default as JSONEditor } from '../components/JSONEditor';
4
4
  export { default as GenericEditor } from '../components/GenericEditor';
5
5
  export { blocksToEditorData } from '../extensions/utils';
6
6
  export type { ContentBlock, EditorData } from '../extensions/utils';
7
- export type { EditorChangeEvent, ReadOnlyRange } from '../types';
7
+ export type { EditorChangeEvent, ReadOnlyRange, EditorProps, EditorRef, SQLEditorProps, JSONEditorProps, } from '../types';
8
8
  export * from '../extensions';
9
+ export { openSearchPanel, closeSearchPanel } from '../@codemirror/search';
10
+ export * from '../i18n';
9
11
  export * from '../types';