@senyao-design-system/editor 0.0.1

package/dist/types/index.d.ts

@@ -0,0 +1,110 @@
+import { Extension } from '../../@codemirror/state';
+import { EditorView } from '../../@codemirror/view';
+
+/**
+ * 只读区域范围接口
+ */
+export interface ReadOnlyRange {
+    /**
+     * 开始位置
+     */
+    start: number;
+    /**
+     * 结束位置
+     */
+    end: number;
+}
+/**
+ * 编辑器变更事件数据
+ */
+export interface EditorChangeEvent {
+    /**
+     * 编辑器的新值
+     */
+    value: string;
+    /**
+     * 当前的只读区域范围
+     */
+    readOnlyRanges: ReadOnlyRange[];
+}
+/**
+ * 基础编辑器属性接口
+ */
+export interface BaseEditorProps {
+    /**
+     * 编辑器的值
+     */
+    value: string;
+    /**
+     * 编辑器值变化时的回调函数
+     */
+    onChange?: (event: EditorChangeEvent) => void;
+    /**
+     * 编辑器高度，默认 '300px'
+     */
+    height?: string | number;
+    /**
+     * 是否禁用编辑器
+     */
+    disabled?: boolean;
+    /**
+     * 编辑器样式类名
+     */
+    className?: string;
+    /**
+     * 编辑器内联样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 编辑器视图创建后的回调
+     */
+    onEditorViewCreated?: (view: EditorView) => void;
+}
+/**
+ * 通用编辑器属性接口
+ */
+export interface EditorProps extends BaseEditorProps {
+    /**
+     * 编辑器扩展
+     */
+    extensions?: Extension[];
+    /**
+     * 编辑器语言
+     */
+    language?: string;
+}
+/**
+ * SQL 编辑器属性接口
+ */
+export interface SQLEditorProps extends BaseEditorProps {
+    /**
+     * SQL 编辑器扩展
+     */
+    extensions?: Extension[];
+    /**
+     * 不可编辑区域范围
+     */
+    readOnlyRanges?: ReadOnlyRange[];
+    /**
+     * 是否内部管理只读区域（默认为true）
+     */
+    manageReadOnlyRanges?: boolean;
+}
+/**
+ * JSON 编辑器属性接口
+ */
+export interface JSONEditorProps extends BaseEditorProps {
+    /**
+     * JSON 编辑器扩展
+     */
+    extensions?: Extension[];
+    /**
+     * 是否启用格式化功能
+     */
+    enableFormatting?: boolean;
+}
+export type { Extension, EditorView };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@senyao-design-system/editor",
+  "version": "0.0.1",
+  "description": "A flexible editor component based on CodeMirror",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.0",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-sql": "^6.5.4",
+    "@codemirror/language": "^6.9.3",
+    "@codemirror/lint": "^6.4.2",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.22.3",
+    "@emotion/react": "^11.11.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}