# @hone-ui/editor 中文文档

规范地址：https://npmcn.com/package/%40hone-ui/editor/

版本：0\.2\.0
npm 元数据更新时间：2026-11-01T05:06:30.310Z
中文译文更新时间：2026-11-01T09:03:58.329Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40hone-ui/editor
原文对照：https://npmcn.com/package/%40hone-ui/editor/?lang=original
源码仓库：https://github.com/Visalan-H/ui-library

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：294 kB，34 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，@hone-ui/react ^0\.2\.0，react-aria-components ^1\.21\.0
- 首次发布：2026-10-22T15:56:40.988Z
- 最新版本发布：2026-11-01T05:06:30.115Z
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

开发专用的可视化编辑器：覆盖，面板和源代码重写器。

## 安装

```sh
npm install @hone-ui/editor
```

也可以使用：`pnpm add @hone-ui/editor`、`yarn add @hone-ui/editor`、`bun add @hone-ui/editor`

## README

# @hone-ui /编辑器

开发专用的可视化编辑器 `@hone-ui/react` 应用程序。它读取 `data-hn-source` 属性的 `@hone-ui/sx` 插件在dev中盖章，并将编辑写回源文件。

## 使用

```tsx
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的选择弹出窗口做门户 到影子根，但选项点击与一个真正的指针还没有注册到那里。

## 常见问题

### @hone-ui/editor 是什么？

开发专用的可视化编辑器：覆盖，面板和源代码重写器。

### 如何安装 @hone-ui/editor？

在项目目录运行 npm install @hone-ui/editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、@hone-ui/react（^0\.2\.0）、react-aria-components（^1\.21\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @hone-ui/editor 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @hone-ui/editor 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @hone-ui/editor 可以商用吗？

@hone-ui/editor 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @hone-ui/editor 还在维护吗？

最新版本 0\.2\.0 发布于 2026/11/01（2 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/10/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。