@hone-ui /编辑器
开发专用的可视化编辑器 @hone-ui/react 应用程序。它读取 data-hn-source 属性的
@hone-ui/sx 插件在dev中盖章，并将编辑写回源文件。
使用
import { DevEditor } from '@hone-ui/editor';
// once, near the root
<DevEditor />;
在开发中, Alt+Shift+E 打开编辑模式。悬停勾勒出最近的组件，单击
选择它并打开面板。当编辑模式开启时，页面将忽略单击和其他指针
输入。 Escape 关闭面板，然后是第二个 Escape 退出编辑模式。选择和切换
更改后150毫秒保存到源文件。文本和数字字段保存时，按Enter，
按Escape或离开该字段，因此键入的值只有一个写入和一个撤消步骤。一个箭头键或
数字字段上的微调步骤在150毫秒后保存，就像选择一样。开发服务器自己的热重新加载
重新绘制页面。 DevEditor 呈现 null 除非 process.env.NODE_ENV === 'development'.
第6节列出了静态的每个键 sx 对象。空格键和 borderRadius 得到
数字字段，颜色键，选择的调色板路径加上自由文本，和一个响应对象
每个断点字段。您可以添加和删除密钥。一个 sx 这不是对象字面量，任何
扩展，计算键或非文字值，显示只读。
面板生活在一个阴影根上 <html>，最小外观的CSS内联，所以应用的CSS
永远也达不到。以表达式形式编写的Props显示read-only，并带有“set in code”注释
本地包装器组件显示只读条目。
Ctrl+Z 撤消最后的保存和 Ctrl+Shift+Z (或 Ctrl+Y无论焦点在哪里，都可以重新定位
除非在你自己的应用程序中的文本区或字段中。端点返回与
一个历史记录涵盖了所有元素，直到你离开编辑模式。
撤消将在任何地方撤消最新的编辑，并选择已更改的元素。移动的保存
线条告诉面板的位置，因此其他元素的历史保持正确。当文件更改时
在面板下面（409），面板重新加载元素，显示消息并清除其
历史。如果元素在保存后消失，则面板关闭。
文档页面“可视化编辑器”涵盖了Vite和Next.js的设置。人工智能导航船
@hone-ui/editor/ai/DevEditor.md.
包内容
@hone-ui/editor：DevEditor编辑协议类型(Op，SourceResponse，EditRequest等等)。@hone-ui/editor/server：applyEdit，readElement和reverseOps，重写并读取一个 具有精确范围编辑的JSX元素，并计算撤消编辑的操作，以及createEditorHandler，普通节点(req, res, next)处理程序GET /source和POST /edit。它只应答环回对等体。Vite插件@hone-ui/sx将其安装在/__hone/editor,withSx从Next的环回端口提供它crossOrigin: true。Docker中带有已发布端口的开发服务器会得到一个403，因为它 连接从网桥地址到达，而不是从环回到达。
开发
pnpm test 在Node中运行重写器测试，在Chromium中运行面板测试。 pnpm test:e2e
在一个空闲端口上启动Vite playground，用headless Chromium驱动它并恢复
它编辑的文件。首先构建工作空间(pnpm build)，因为操场使用建造
包。
面板的CSS由 scripts/build-panel-css.mjs 从建筑开始 @hone-ui/react
包中。它之前运行过 build， lint， typecheck 和 test.
面板使用的是本机 select 对于字符串联合。React Aria的选择弹出窗口做门户
到影子根，但选项点击与一个真正的指针还没有注册到那里。