# @hlang-tech/editor-react 中文文档

规范地址：https://npmcn.com/package/%40hlang-tech/editor-react/

版本：0\.1\.1
npm 元数据更新时间：2026-11-01T05:51:05.959Z
中文译文更新时间：2026-11-01T08:48:07.026Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40hlang-tech/editor-react
原文对照：https://npmcn.com/package/%40hlang-tech/editor-react/?lang=original
项目主页：https://github.com/hlang-tech/hlang/tree/main/packages/editor-react#readme
源码仓库：https://github.com/hlang-tech/hlang

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

- 包体积（解压后）：217 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：1 个
- peer 依赖：react \>=18，react-dom \>=18，@xyflow/react ^12\.0\.0
- 首次发布：2026-11-01T04:18:56.340Z
- 最新版本发布：2026-11-01T05:51:05.687Z
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

Lumen编辑器的hlang: hooks的React绑定，这些hook连接@hlang-org/editor-core到React Flow。

## 安装

```sh
npm install @hlang-tech/editor-react
```

也可以使用：`pnpm add @hlang-tech/editor-react`、`yarn add @hlang-tech/editor-react`、`bun add @hlang-tech/editor-react`

## README

![hlang editor-react](https://raw.githubusercontent.com/hlang-tech/hlang/main/media/brand/packages/editor-react.png)

# @hlang-tech / editor-react

为Lumen （hlang可视化编辑器）绑定React。钩子把无头鱼连在一起 [`@hlang-tech/editor-core`](https://www.npmjs.com/package/@hlang-tech/editor-core) 来 [反应流](https://reactflow.dev/)． 这个包不添加任何样式；设计系统为 [`@hlang-tech/editor-ui`](https://www.npmjs.com/package/@hlang-tech/editor-ui).

[![npm](https://img.shields.io/npm/v/@hlang-tech/editor-react?color=c8ccd4&labelColor=0f1114)](https://www.npmjs.com/package/@hlang-tech/editor-react) [![license](https://img.shields.io/npm/l/@hlang-tech/editor-react?color=c8ccd4&labelColor=0f1114)](https://github.com/hlang-tech/hlang/blob/main/LICENSE)

> **状态:** 0.X，在积极发展中。API可以在任何小版本中更改。

## 安装

```sh
npm install @hlang-tech/editor-react @hlang-tech/editor-core @xyflow/react react react-dom
```

相同的构建发布为 `@hlang-org/editor-react`． 同行依赖性: `react` 和 `react-dom` 18岁或以上； `@xyflow/react` 12.

## 使用

```tsx
import { ReactFlow, ReactFlowProvider } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { createEditorCore } from '@hlang-tech/editor-core';
import { useHlangFlow } from '@hlang-tech/editor-react';

const core = createEditorCore();
// register node descriptors and add nodes...

function Canvas() {
  const flow = useHlangFlow(core);
  return <ReactFlow {...flow} fitView />;
}

export function Editor() {
  return (
    <ReactFlowProvider>
      <Canvas />
    </ReactFlowProvider>
  );
}
```

`useHlangFlow` 返回 `nodes`， `edges`， `onNodesChange`， `onEdgesChange`， `onConnect`, `isValidConnection`． 把它们分散到 `<ReactFlow>`.

## 绑定是如何工作的

-   **方向。** 输出(O)端口是一个React Flow `source` / `sourceHandle`;输入(I)端口是a `target` / `targetHandle`. `isValidConnection` 询问核心的验证器，因此在拖动时拒绝无效链接。
-   **命令。** 连接、删除、移动和重命名作为核心命令执行，因此每个画布编辑都可以撤消。
-   **拖动。** 在拖动节点时，位置在本地更新，并且在拖动结束时提交一个移动命令。撤消和重做画布上的移动节点。
-   **订阅。** 胡克把岩心读透了 `useSyncExternalStore` 并且只在相关核心事件触发时才重新渲染。

## 钩子

| 钩 | 返回 |
| --- | --- |
| `useHlangFlow(core)` | 道具的 `<ReactFlow>`，如上所述。 |
| `useGraphSync(core)` | 模型的当前节点和边。 |
| `useConnect(core)`， `useIsValidConnection(core)` | 连接处理程序和验证回调。 |
| `useNodeChanges`， `useEdgeChanges` | 提交到核心的React流更改处理程序。 |
| `useHistory(core)` | `canUndo`， `canRedo`， `undo`， `redo`. |
| `useSelection(core)` | 选定的节点和边id，带有选择设置器。 |
| `useViewState(core)` | 隐藏和锁定节点标志，带有设置和切换。 |
| `useClipboard(core)` | 复制、剪切、粘贴和复制所选内容，包括系统剪贴板。 |
| `useRename(core)` | 通过命令重命名节点。 |
| `useDiagnostics(core)` | 核心的编辑时诊断，也按节点分组。 |
| `useReconnect(core)` | 将边缘端点移动到另一个端口，并在拖拽节点下查找边缘以进行下拉插入。 |

`EditorProvider` 和 `useEditor` 通过React上下文共享一个核心。映射助手 `toRFNode`， `toRFEdge`， `endpointsFromConnection`, `findPort` 为自定义绑定导出。

来源和文件： [github.com/hlang-tech/hlang](https://github.com/hlang-tech/hlang).

## 许可证

麻省理工学院

## 常见问题

### @hlang-tech/editor-react 是什么？

Lumen编辑器的hlang: hooks的React绑定，这些hook连接@hlang-org/editor-core到React Flow。

### 如何安装 @hlang-tech/editor-react？

在项目目录运行 npm install @hlang-tech/editor-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-dom（\>=18）、@xyflow/react（^12\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @hlang-tech/editor-react 支持 TypeScript 吗？

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

### @hlang-tech/editor-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @hlang-tech/editor-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @hlang-tech/editor-react 可以商用吗？

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

### @hlang-tech/editor-react 还在维护吗？

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