@tntd/monaco-editor 0.0.2 → 0.0.3

package/README.md

@@ -0,0 +1,215 @@
+# @tntd/monaco-editor
+
+基于 Monaco Editor 封装的代码编辑器组件，提供了丰富的编辑功能和自定义主题支持。
+
+## 安装
+
+```bash
+npm install @tntd/monaco-editor --save
+```
+
+## 特性
+
+- 🎨 支持自定义主题
+- 🌍 支持国际化（中文/英文）
+- 🔍 支持关键字高亮
+- 📝 支持公式编辑模式
+- 🔄 支持 Diff 对比模式
+- 🔌 插件化架构
+
+## 基础使用
+
+```jsx
+import MonacoEditor from '@tntd/monaco-editor';
+
+const App = () => {
+  return (
+    <MonacoEditor
+      language="javascript"
+      defaultValue={code}
+      onChange={(value) => console.log(value)}
+    />
+  );
+};
+```
+
+## API
+
+### 基础配置项
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| language | 编辑器语言 | string | 'javascript' |
+| value | 编辑器内容 | string | - |
+| onChange | 内容变化回调函数 | (value: string) => void | - |
+| path | Monaco Editor 资源文件路径 | string | '/vs' |
+| theme | 主题 | 'vs-dark' \| 'tntd-vs-dark' \| string | 'vs-dark' |
+| options | 编辑器配置项 | object | defaultOptions |
+| isDiff | 是否启用对比模式 | boolean | false |
+| isFormula | 是否启用公式编辑模式 | boolean | false |
+| keywords | 需要高亮的关键字列表 | string[] | [] |
+
+### 编辑器事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| editorWillMount | 编辑器挂载前的回调 | (monaco: any) => object |
+| editorDidMount | 编辑器挂载后的回调 | ({ monaco, editor }) => void |
+| editorWillUnmount | 编辑器卸载前的回调 | (editor: any) => void |
+
+### 默认编辑器配置
+
+```javascript
+const defaultOptions = {
+  selectOnLineNumbers: true,
+  fontSize: 14,
+  lineHeight: 24,
+  tabSize: 2,
+  minimap: { enabled: false },
+  automaticLayout: true,
+  scrollBeyondLastLine: false,
+  // ... 更多配置项见代码
+}
+```
+
+### 主题配置
+
+组件内置了 `tntd-vs-dark` 主题，提供了以下默认颜色配置：
+
+```javascript
+const defaultThemeColor = {
+  'editor.background': '#17233D',
+  'editor.foreground': '#BABDC5',
+  'editorGutter.background': '#212c45',
+  'editorLineNumber.foreground': '#BABDC5',
+  'editorCursor.foreground': '#ff9800',
+  'editor.lineHighlightBackground': '#002240',
+  // ... 更多颜色配置见代码
+}
+```
+
+### 实例方法
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| getValue | 获取编辑器内容 | () => string |
+| setValue | 设置编辑器内容 | (value: string) => void |
+| getPosition | 获取光标位置 | () => Position |
+| setPosition | 设置光标位置 | (position: Position) => void |
+| focus | 使编辑器获得焦点 | () => void |
+| layout | 重新布局编辑器 | () => void |
+| updateOptions | 更新编辑器配置 | (options: object) => void |
+| insertText | 在光标位置插入文本 | (content: string) => void |
+
+### Diff 模式配置
+
+当 `isDiff={true}` 时，需要提供以下额外配置：
+
+```jsx
+<MonacoEditor
+  isDiff={true}
+  original="原始代码"
+  modified="修改后的代码"
+  language="javascript"
+/>
+```
+
+### 公式编辑模式
+
+当 `isFormula={true}` 时，支持以下特性：
+
+- 自定义语言高亮规则
+- 特殊的主题配置
+- 通过 `modeField` 配置公式编辑规则
+
+### 插件系统
+
+组件支持通过插件扩展功能：
+
+```javascript
+editor.use({
+  name: 'myPlugin',
+  apply: (editor) => {
+    // 插件逻辑
+    return {
+      dispose: () => {
+        // 清理逻辑
+      }
+    }
+  }
+});
+```
+
+## 注意事项
+
+1. 确保 Monaco Editor 资源文件路径配置正确
+2. 在生产环境中，建议使用 `CopyWebpackPlugin` 复制 Monaco Editor 资源文件
+3. 使用 Diff 模式时，需要同时提供 `original` 和 `modified` 属性
+4. 自定义主题时，建议继承 `vs-dark` 主题进行扩展
+
+## 示例
+
+### 基础编辑器
+
+```jsx
+import MonacoEditor from '@tntd/monaco-editor';
+
+const App = () => {
+  const handleEditorDidMount = ({ monaco, editor }) => {
+    // 编辑器初始化完成后的操作
+  };
+
+  return (
+    <MonacoEditor
+      language="javascript"
+      value={code}
+      onChange={handleChange}
+      editorDidMount={handleEditorDidMount}
+      options={{
+        fontSize: 16,
+        minimap: { enabled: true }
+      }}
+    />
+  );
+};
+```
+
+### 对比模式
+
+```jsx
+import {DiffEditor} from '@tntd/monaco-editor';
+
+const App = () => {
+  return (
+    <DiffEditor
+      isDiff={true}
+      original={originalCode}
+      modified={modifiedCode}
+      language="javascript"
+    />
+  );
+};
+```
+
+### 公式编辑模式
+
+```jsx
+import {FormulaEditor} from '@tntd/monaco-editor';
+
+const App = () => {
+  return (
+    <FormulaEditor
+      fieldList={fieldList || []} // @唤起
+      methodList={methodList || []} // #唤起
+      readOnly={readOnly}
+      cnCodeToEnExtraLogic={(item) => {
+          if (item.type) {
+              return `α${item.type}`;
+          }
+      }}
+      enCodeToCnExtraLogic={()=>{}}
+      cnCodeToEnUniqueLogic={({ group2, group1, list, turnStr }) => {}}
+    />
+  );
+};
+```