AI Rich Editor

@easyx/ai-rich-editor 是 AI 驱动的「代码编辑 + 实时预览」工作台（重客户端 React 组件）。定位为另一种形态的富文本：只产出可嵌入内容字段的 HTML 片段（fragment），不输出整页文档。

与 @easyx/editor（传统富文本）互补 —— 由对话生成自由 HTML 片段，所见即所得预览。

工作台演示内置回放与真实模型双模式

API 参考 Props、配置项、导出与类型

定位与边界

项	约定
场景	定制化页面（新闻、活动、落地页等）的 HTML 内容生产
输出	fragment-only：只产出内容片段，不提供整页文档模式
防污染	作用域化在应用时刻完成，产物自带 scope 前缀，宿主可直接当 HTML 引入
传输	不持有端点与鉴权知识 —— 接入点由宿主给：已鉴权的 OpenAI 端点 URL，或自定义适配器函数
依赖	peer：`react` / `react-dom`；可选 peer：`mammoth` / `unpdf`（仅 `./parsers` 入口按需加载）。除 React 外不依赖任何 UI 库

特性

对话接入只给协议

传已鉴权的 OpenAI 端点 URL，或自定义适配器函数；包内不持有端点与鉴权。

实时预览

设备档位、脚本开关、刷新与新窗口预览；可选并排代码面板。

片段作用域化

片段内 <style> 选择器自动加前缀，直接嵌入宿主页面不污染全局。

媒体插入

对话与代码面板两条路径，支持上传、网络地址与媒体库。

文档解析

Word / PDF 交给 AI，据此生成新片段或改写现有内容。

版本回退

每条回复即一个完整版本，点历史代码卡片即可回退。

安装

pnpm add @easyx/ai-rich-editor

react / react-dom 为 peer 依赖，需宿主自行安装；其余运行时依赖随包安装。样式编译后内联进 JS，宿主无需单独引入。

快速上手

import { AiRichEditor, DEFAULT_HTML } from '@easyx/ai-rich-editor';
import { useState } from 'react';

export function MyPage() {
  const [html, setHtml] = useState(DEFAULT_HTML);

  return (
    <AiRichEditor
      value={html}
      onChange={setHtml}
      // 已鉴权的 OpenAI 兼容端点；也可传适配器函数接自己的 server function
      chat="/api/ai/chat"
    />
  );
}

chat 传字符串时，包内按 OpenAI Chat Completions 协议请求该端点，请求体固定为 { messages, stream: true }（不带 model，模型与鉴权由端点侧决定）。传函数时，包内只给协议、由宿主自己发请求。详见使用指南。

产物：自带作用域的 HTML 片段

「应用到编辑器」时片段内 <style> 的选择器会被改写为 .{前缀} …，前缀在实例创建时生成一次：

<div class="easyx-rich-content-<实例前缀>">
  <style>.easyx-rich-content-<实例前缀> .hero { … }</style>
  <div class="hero">…</div>
</div>

宿主直接当 HTML 引入即可，端侧零处理：

<div dangerouslySetInnerHTML={{ __html: detail.html }} />

内联样式天然隔离；内置 system 提示词同步约束源头：优先内联样式，确需 <style> 时禁用 body / * / :root / html 等全局选择器。