产品要解决的问题
用户需要在 Web 与客户端环境中预览和编辑 PPT。页面既要呈现服务端解析的内容，也要支持细粒度元素操作、异步图片处理和编辑历史恢复。
平台 Web / App WebView协作方式 与服务端解析、实时结果协作
公司项目夸克 · 千问
PPT 预览编辑器
面向夸克与千问的在线 PPT 编辑器。服务端将演示文稿解析为 JSON，前端负责页面渲染、元素编辑与状态同步。
ReactTypeScriptRxJSSlate.jsViteWebSocket
夸克 PPT 编辑器实际界面 · 点击查看大图
项目概览
前端围绕演示文稿的元素模型提供编辑能力，让文字、图片和图形的修改能持续映射回 PPT 页面。
项目能力
在统一的页面与元素模型上完成演示稿编辑，并支持编辑过程中的状态维护。
文字与格式编辑图片、图形与图表页面管理撤销与恢复生成图片插入替换演示文稿导出
我负责的工作
聚焦工具栏复用、图片异步链路与富文本编辑，负责模块从方案到开发落地，并处理移动端编辑边界问题。
搭建适配多种元素的工具栏
独立负责顶部工具栏和元素悬浮工具栏。把按钮展示、状态和事件收敛到配置中，让同一套交互可以根据文字、图片、图形等当前元素切换。
这让工具栏与具体元素解耦，减少重复实现，也让后续增加编辑动作时有清晰的扩展位置。
打通图片生成到画布更新的异步流程
实现本地图片和 AI 生成图片的插入、替换。生成开始时先创建占位元素；收到 WebSocket 结果后更新对应节点，并通过 OP 操作同步编辑状态。
替换图片时保留原元素的位置和尺寸，让异步生成完成后画布布局保持稳定。
完善富文本编辑与移动端体验
参与 Slate.js 富文本编辑，支持字体、字号、列表和对齐等格式，并将文本变化同步到 PPT 元素模型。
针对移动端列表编辑中 Selection 与不可编辑节点冲突的问题，排查并修复删除异常和编辑器失焦。
图片生成与替换链路
先保留画布中的位置和尺寸，再接收异步结果更新元素，降低等待期间的布局跳动。
STEP 01创建占位元素生成开始，画布先显示目标位置。
STEP 02等待异步结果通过 WebSocket 接收生成结果。
STEP 03更新图片节点替换内容，保留元素原有尺寸和位置。
STEP 04同步编辑状态通过 OP 操作同步节点变化。