@mxmweb/rtext 1.0.1

package/README.md

@@ -0,0 +1,350 @@
+# @mxmweb/rtext - 统一富文本组件库
+
+一个基于 slate.js 的统一富文本组件库，提供强大的富文本编辑和渲染功能，支持多种数据格式和虚拟滚动。
+
+## 🚀 特性
+
+- 📝 **统一富文本组件** - 支持编辑和渲染模式
+- 🎨 **多种数据格式** - 支持 Slate、Markdown、HTML、Text 格式
+- ⚡ **虚拟滚动** - 高性能大数据渲染
+- 📦 **分段加载** - 支持动态内容加载
+- 🎯 **主题定制** - 灵活的主题配置系统
+- 📱 **响应式设计** - 支持不同尺寸和屏幕
+- 🔧 **TypeScript** - 完整的类型支持
+- 🎪 **代码块复制** - 一键复制代码内容
+
+## 📦 安装
+
+```bash
+npm install @mxmweb/rtext
+# 或
+yarn add @mxmweb/rtext
+# 或
+pnpm add @mxmweb/rtext
+```
+
+## 🎯 核心组件
+
+### UnifiedRichText - 统一富文本组件
+
+核心的富文本组件，支持多种数据格式的编辑和渲染。
+
+```tsx
+import { UnifiedRichText, DataType } from '@mxmweb/rtext';
+
+// 基本使用
+<UnifiedRichText
+  dataSource={{
+    type: DataType.MARKDOWN,
+    content: '# Hello World\n\nThis is **bold** text.'
+  }}
+  isEditing={false}
+  theme={{
+    primaryColor: '#007bff',
+    backgroundColor: '#ffffff'
+  }}
+/>
+```
+
+#### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `dataSource` | `DataSource` | - | 数据源对象 |
+| `isEditing` | `boolean` | `false` | 是否编辑模式 |
+| `placeholder` | `string` | `'开始输入...'` | 占位符文本 |
+| `size` | `'sm' \| 'md'` | `'md'` | 组件尺寸 |
+| `theme` | `Theme` | `{}` | 主题配置 |
+| `onChange` | `(content, type) => void` | - | 内容变化回调 |
+| `onFocus` | `() => void` | - | 焦点回调 |
+| `onBlur` | `() => void` | - | 失焦回调 |
+
+### Markdownit - 高级 Markdown 渲染组件
+
+基于 UnifiedRichText 的高级组件，提供虚拟滚动和分段加载功能。
+
+```tsx
+import { Markdownit } from '@mxmweb/rtext';
+
+// 基本使用
+<Markdownit
+  dataSource={{
+    type: DataType.MARKDOWN,
+    content: '# 标题\n\n内容...'
+  }}
+  enableVirtualScroll={true}
+  size="md"
+  theme={{
+    primaryColor: '#007bff',
+    backgroundColor: '#ffffff'
+  }}
+/>
+```
+
+#### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `dataSource` | `DataSource \| SegmentData[]` | - | 数据源 |
+| `enableVirtualScroll` | `boolean` | `false` | 启用虚拟滚动 |
+| `itemHeight` | `number` | `200` | 虚拟滚动项高度 |
+| `preloadCount` | `number` | `5` | 预加载项数量 |
+| `enableSegmentedLoading` | `boolean` | `false` | 启用分段加载 |
+| `onLoadMore` | `(lastSegmentId) => Promise<SegmentData[]>` | - | 加载更多回调 |
+| `isLoadingMore` | `boolean` | `false` | 是否正在加载 |
+| `size` | `'sm' \| 'md'` | `'sm'` | 组件尺寸 |
+| `theme` | `Theme` | `{}` | 主题配置 |
+| `onChange` | `(content, type) => void` | - | 内容变化回调 |
+| `onScroll` | `(scrollTop, scrollHeight) => void` | - | 滚动回调 |
+| `onSegmentClick` | `(segmentId, segment) => void` | - | 分段点击回调 |
+
+## 📚 数据类型
+
+### DataType 枚举
+
+```tsx
+enum DataType {
+  SLATE = 'slate',      // Slate.js 格式
+  MARKDOWN = 'markdown', // Markdown 格式
+  HTML = 'html',        // HTML 格式
+  TEXT = 'text'         // 纯文本格式
+}
+```
+
+### DataSource 接口
+
+```tsx
+interface DataSource {
+  type: DataType;
+  content: any;
+}
+```
+
+### SegmentData 接口
+
+```tsx
+interface SegmentData {
+  id: string;
+  content: string | CustomElement[];
+  type: DataType;
+  timestamp?: number;
+  metadata?: Record<string, any>;
+}
+```
+
+## 🎨 主题配置
+
+### Theme 接口
+
+```tsx
+interface Theme {
+  primaryColor?: string;        // 主色调
+  secondaryColor?: string;      // 次要色调
+  backgroundColor?: string;     // 背景色
+  textColor?: string;          // 文本色
+  borderColor?: string;        // 边框色
+  disabledBackground?: string; // 禁用背景色
+  hoverBackground?: string;    // 悬停背景色
+  borderRadius?: string;       // 圆角
+  padding?: string;           // 内边距
+  margin?: string;            // 外边距
+  minHeight?: string;         // 最小高度
+  scrollbarTrack?: string;    // 滚动条轨道色
+  scrollbarThumb?: string;    // 滚动条滑块色
+  scrollbarThumbHover?: string; // 滚动条滑块悬停色
+}
+```
+
+## 🔧 高级功能
+
+### 虚拟滚动
+
+对于大量数据的渲染，启用虚拟滚动可以显著提升性能：
+
+```tsx
+<Markdownit
+  dataSource={largeDataArray}
+  enableVirtualScroll={true}
+  itemHeight={200}
+  preloadCount={5}
+/>
+```
+
+### 分段加载
+
+支持动态加载内容，适用于聊天记录等场景：
+
+```tsx
+<Markdownit
+  dataSource={segments}
+  enableSegmentedLoading={true}
+  onLoadMore={async (lastSegmentId) => {
+    // 加载更多数据
+    return await fetchMoreData(lastSegmentId);
+  }}
+  isLoadingMore={loading}
+/>
+```
+
+### 代码块复制
+
+代码块自动支持复制功能，点击右上角的复制按钮即可复制代码内容。
+
+### 响应式表格
+
+表格支持横向滚动，当内容超出容器宽度时自动显示滚动条。
+
+## 📁 目录结构
+
+```
+src/
+├── core/                    # 核心组件
+│   ├── UnifiedRichText.tsx  # 统一富文本组件
+│   ├── richElements/        # 富文本元素渲染
+│   │   ├── index.tsx       # 元素渲染逻辑
+│   │   └── styles.tsx      # 样式定义
+│   ├── converters/         # 数据转换器
+│   │   ├── slateConverters.ts
+│   │   └── deserializers.ts
+│   ├── types.ts           # 类型定义
+│   ├── utils.ts           # 工具函数
+│   └── events.ts          # 事件处理
+├── adopters/              # 业务适配器
+│   └── Markdownit.tsx     # Markdown 渲染组件
+└── types/                 # 全局类型定义
+```
+
+## 🚀 快速开始
+
+### 1. 基本渲染
+
+```tsx
+import { Markdownit, DataType } from '@mxmweb/rtext';
+
+function App() {
+  const markdownContent = `
+# 欢迎使用
+
+这是一个 **Markdown** 内容示例。
+
+## 功能特性
+
+- ✅ 支持 Markdown 语法
+- ✅ 代码高亮
+- ✅ 表格渲染
+- ✅ 图片显示
+
+\`\`\`javascript
+console.log('Hello World!');
+\`\`\`
+  `;
+
+  return (
+    <Markdownit
+      dataSource={{
+        type: DataType.MARKDOWN,
+        content: markdownContent
+      }}
+      size="md"
+      theme={{
+        primaryColor: '#007bff',
+        backgroundColor: '#ffffff'
+      }}
+    />
+  );
+}
+```
+
+### 2. 编辑模式
+
+```tsx
+import { UnifiedRichText, DataType } from '@mxmweb/rtext';
+
+function Editor() {
+  const [content, setContent] = useState({
+    type: DataType.SLATE,
+    content: [{ type: 'paragraph', children: [{ text: '' }] }]
+  });
+
+  return (
+    <UnifiedRichText
+      dataSource={content}
+      isEditing={true}
+      onChange={(newContent, type) => {
+        setContent({ type, content: newContent });
+      }}
+      placeholder="开始编写..."
+    />
+  );
+}
+```
+
+### 3. 虚拟滚动
+
+```tsx
+function VirtualScrollExample() {
+  const segments = [
+    { id: '1', content: '# 第一段\n内容...', type: DataType.MARKDOWN },
+    { id: '2', content: '# 第二段\n内容...', type: DataType.MARKDOWN },
+    // ... 更多数据
+  ];
+
+  return (
+    <Markdownit
+      dataSource={segments}
+      enableVirtualScroll={true}
+      itemHeight={200}
+      height="600px"
+      onScroll={(scrollTop, scrollHeight) => {
+        console.log('滚动位置:', scrollTop);
+      }}
+    />
+  );
+}
+```
+
+## 🔧 开发指南
+
+### 环境要求
+
+- Node.js >= 18
+- React >= 18
+- TypeScript >= 4.9
+
+### 本地开发
+
+```bash
+# 克隆仓库
+git clone <repository-url>
+cd base/slate
+
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 构建
+pnpm build
+```
+
+### 代码规范
+
+- 使用 TypeScript 编写代码
+- 遵循 ESLint 和 Prettier 配置
+- 编写清晰的组件文档
+- 添加必要的类型定义
+
+## 📄 许可证
+
+MIT
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+在提交代码前，请确保：
+1. 代码符合项目规范
+2. 添加了必要的测试
+3. 更新了相关文档
+4. 提交信息符合规范

package/assets/style.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--spacing:.25rem;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::-moz-placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.end-1{inset-inline-end:calc(var(--spacing)*1)}.isolate{isolation:isolate}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.container\!{width:100%!important}@media (min-width:40rem){.container\!{max-width:40rem!important}}@media (min-width:48rem){.container\!{max-width:48rem!important}}@media (min-width:64rem){.container\!{max-width:64rem!important}}@media (min-width:80rem){.container\!{max-width:80rem!important}}@media (min-width:96rem){.container\!{max-width:96rem!important}}.mb-4{margin-bottom:calc(var(--spacing)*4)}.block{display:block}.block\!{display:block!important}.contents{display:contents}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-table{display:inline-table}.list-item{display:list-item}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row{display:table-row}.table-row-group{display:table-row-group}.flex-shrink,.shrink{flex-shrink:1}.flex-grow,.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.bg-gray-200{background-color:var(--color-gray-200)}.mask-repeat{-webkit-mask-repeat:repeat;mask-repeat:repeat}.py-10{padding-block:calc(var(--spacing)*10)}.text-justify{text-align:justify}.break-all{word-break:break-all}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.diagonal-fractions{--tw-numeric-fraction:diagonal-fractions;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.oldstyle-nums{--tw-numeric-figure:oldstyle-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.stacked-fractions{--tw-numeric-fraction:stacked-fractions;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}@media (hover:hover){.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}}*{margin:0;padding:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

package/core/converters/deserializers.d.ts

@@ -0,0 +1,5 @@
+import { CustomElement, BaseElement } from './slateConverters';
+export interface ThinkElement extends BaseElement {
+    type: 'think';
+}
+export declare function deserializeMarkdown(markdown: string): CustomElement[];

package/core/converters/slateConverters.d.ts

@@ -0,0 +1,55 @@
+export type CustomText = {
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    code?: boolean;
+    retrive?: boolean;
+    strikethrough?: boolean;
+    link?: string;
+};
+export interface BaseElement {
+    type: string;
+    children: (CustomElement | CustomText)[];
+    align?: 'left' | 'center' | 'right';
+}
+export interface ParagraphElement extends BaseElement {
+    type: 'paragraph';
+}
+export interface HeadingOneElement extends BaseElement {
+    type: 'heading-one';
+}
+export interface HeadingTwoElement extends BaseElement {
+    type: 'heading-two';
+}
+export interface HeadingThreeElement extends BaseElement {
+    type: 'heading-three';
+}
+export interface ListElement extends BaseElement {
+    type: 'bulleted-list' | 'numbered-list';
+}
+export interface ListItemElement extends BaseElement {
+    type: 'list-item';
+}
+export interface TableElement extends BaseElement {
+    type: 'table';
+}
+export interface TableRowElement extends BaseElement {
+    type: 'table-row';
+}
+export interface TableCellElement extends BaseElement {
+    type: 'table-cell';
+}
+export interface ImageElement extends BaseElement {
+    type: 'image';
+    url: string;
+}
+export interface CodeBlockElement extends BaseElement {
+    type: 'code-block';
+}
+export interface BlockQuoteElement extends BaseElement {
+    type: 'block-quote';
+}
+export type CustomElement = ParagraphElement | HeadingOneElement | HeadingTwoElement | HeadingThreeElement | ListElement | ListItemElement | TableElement | TableRowElement | TableCellElement | ImageElement | CodeBlockElement | BlockQuoteElement;
+export declare const serializeToMarkdown: (nodes: CustomElement[]) => string;
+export declare const serializeToHtml: (nodes: CustomElement[]) => string;

package/core/events.d.ts

@@ -0,0 +1,61 @@
+import { RichTextEvents, MergedEventsEmit } from './types';
+/**
+ * 合并事件函数，劫持并连接用户层和核心层的事件功能管理
+ * @param userEvents 用户层事件
+ * @param coreEvents 核心层事件
+ * @returns 合并后的事件函数
+ */
+export declare function mergedEventsEmit(userEvents?: RichTextEvents, coreEvents?: RichTextEvents): MergedEventsEmit;
+/**
+ * 创建事件处理器对象
+ * @param mergedEmit 合并的事件函数
+ * @returns 事件处理器对象
+ */
+export declare function createEventHandlers(mergedEmit: MergedEventsEmit): RichTextEvents;
+/**
+ * 防抖事件处理器
+ * @param handler 原始事件处理器
+ * @param delay 延迟时间（毫秒）
+ * @returns 防抖后的事件处理器
+ */
+export declare function debounceEvent<T extends (...args: any[]) => void>(handler: T, delay: number): T;
+/**
+ * 节流事件处理器
+ * @param handler 原始事件处理器
+ * @param delay 延迟时间（毫秒）
+ * @returns 节流后的事件处理器
+ */
+export declare function throttleEvent<T extends (...args: any[]) => void>(handler: T, delay: number): T;
+/**
+ * 事件总线类，用于组件间通信
+ */
+export declare class EventBus {
+    private events;
+    /**
+     * 订阅事件
+     * @param eventName 事件名称
+     * @param handler 事件处理器
+     */
+    on(eventName: string, handler: Function): void;
+    /**
+     * 取消订阅事件
+     * @param eventName 事件名称
+     * @param handler 事件处理器
+     */
+    off(eventName: string, handler: Function): void;
+    /**
+     * 触发事件
+     * @param eventName 事件名称
+     * @param args 事件参数
+     */
+    emit(eventName: string, ...args: any[]): void;
+    /**
+     * 清空所有事件
+     */
+    clear(): void;
+}
+export declare const globalEventBus: EventBus;
+/**
+ * 创建富文本编辑器专用的事件总线
+ */
+export declare function createRichTextEventBus(): EventBus;

package/core/types.d.ts

@@ -0,0 +1,176 @@
+import { default as React } from 'react';
+import { BaseEditor } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { RichTextTheme } from './theme';
+export interface RichTextEditorProps {
+    /** 初始值 */
+    initialValue?: CustomElement[];
+    /** 主题样式 */
+    styles?: RichTextStyles;
+    /** 是否只读 */
+    readOnly?: boolean;
+    /** 占位符文本 */
+    placeholder?: string;
+    /** 最小高度 */
+    minHeight?: string;
+    /** 最大高度 */
+    maxHeight?: string;
+    /** 是否显示工具栏 */
+    showToolbar?: boolean;
+    /** 自定义工具栏 */
+    customToolbar?: React.ReactNode;
+    /** 编辑器变化回调 */
+    onChange?: (value: CustomElement[]) => void;
+    /** 编辑器焦点回调 */
+    onFocus?: () => void;
+    /** 编辑器失焦回调 */
+    onBlur?: () => void;
+    /** 自定义渲染元素 */
+    renderElement?: (props: any) => JSX.Element;
+    /** 自定义渲染叶子节点 */
+    renderLeaf?: (props: any) => JSX.Element;
+    /** 自定义样式 */
+    className?: string;
+    /** 自定义样式对象 */
+    style?: React.CSSProperties;
+}
+export interface RichTextRendererProps {
+    /** 要渲染的内容 */
+    content: CustomElement[] | string;
+    /** 主题样式 */
+    styles?: RichTextStyles;
+    /** 是否显示工具栏 */
+    showToolbar?: boolean;
+    /** 自定义工具栏 */
+    customToolbar?: React.ReactNode;
+    /** 自定义渲染元素 */
+    renderElement?: (props: any) => JSX.Element;
+    /** 自定义渲染叶子节点 */
+    renderLeaf?: (props: any) => JSX.Element;
+    /** 自定义样式 */
+    className?: string;
+    /** 自定义样式对象 */
+    style?: React.CSSProperties;
+}
+export interface MarkdownRendererProps {
+    /** Markdown文本内容 */
+    content: string;
+    /** 主题样式 */
+    styles?: RichTextStyles;
+    /** 是否转换为富文本后渲染 */
+    convertToRichText?: boolean;
+    /** 自定义样式 */
+    className?: string;
+    /** 自定义样式对象 */
+    style?: React.CSSProperties;
+}
+export interface RichTextStyles {
+    theme?: RichTextTheme;
+    mode?: 'light' | 'dark';
+    [key: string]: any;
+}
+export interface RichTextEvents {
+    onChange?: (value: CustomElement[]) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onSelectionChange?: (selection: any) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    onPaste?: (event: React.ClipboardEvent) => void;
+    onDrop?: (event: React.DragEvent) => void;
+}
+export interface ToolbarButton {
+    /** 按钮类型 */
+    type: string;
+    /** 按钮图标 */
+    icon: React.ReactNode;
+    /** 按钮标题 */
+    title: string;
+    /** 是否激活 */
+    isActive?: boolean;
+    /** 点击回调 */
+    onClick: () => void;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+export type CustomText = {
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    code?: boolean;
+    strikethrough?: boolean;
+    link?: string;
+    color?: string;
+    backgroundColor?: string;
+};
+export interface BaseElement {
+    type: string;
+    children: (CustomElement | CustomText)[];
+    align?: 'left' | 'center' | 'right';
+}
+export interface ParagraphElement extends BaseElement {
+    type: 'paragraph';
+}
+export interface HeadingOneElement extends BaseElement {
+    type: 'heading-one';
+}
+export interface HeadingTwoElement extends BaseElement {
+    type: 'heading-two';
+}
+export interface HeadingThreeElement extends BaseElement {
+    type: 'heading-three';
+}
+export interface ListElement extends BaseElement {
+    type: 'bulleted-list' | 'numbered-list';
+}
+export interface ListItemElement extends BaseElement {
+    type: 'list-item';
+}
+export interface TableElement extends BaseElement {
+    type: 'table';
+}
+export interface TableRowElement extends BaseElement {
+    type: 'table-row';
+}
+export interface TableCellElement extends BaseElement {
+    type: 'table-cell';
+    header?: boolean;
+}
+export interface ImageElement extends BaseElement {
+    type: 'image';
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+export interface CodeBlockElement extends BaseElement {
+    type: 'code-block';
+    language?: string;
+}
+export interface BlockQuoteElement extends BaseElement {
+    type: 'block-quote';
+}
+export interface LinkElement extends BaseElement {
+    type: 'link';
+    url: string;
+}
+export type CustomElement = ParagraphElement | HeadingOneElement | HeadingTwoElement | HeadingThreeElement | ListElement | ListItemElement | TableElement | TableRowElement | TableCellElement | ImageElement | CodeBlockElement | BlockQuoteElement | LinkElement;
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}
+export interface AdapterProps {
+    /** 主题样式 */
+    styles?: RichTextStyles;
+    /** 事件回调 */
+    events?: RichTextEvents;
+    /** 自定义组件 */
+    customComponents?: Record<string, React.ComponentType<any>>;
+    /** 其他属性 */
+    [key: string]: any;
+}
+export type MergedEventsEmit = (eventName: string, ...args: any[]) => void;
+export type MergedCustomizeComponents = Record<string, React.ComponentType<any>>;