@assistant-ui/react-lexical

语法 丰富文本作曲家 @assistant-ui/react中,有头等舱支持 @- 思维指令芯片。 丢弃 LexicalComposerInput 代替默认的纯文本作曲器,将引用和斜线命令转换为内置芯片,同时保持基本消息格式的干净.

安装

npm install @assistant-ui/react @assistant-ui/react-lexical lexical @lexical/react @lexical/utils @lexical/history @lexical/plain-text

lexical 编辑 @lexical/* 包此软件包的导入为对等依赖: 您的应用程序拥有作曲家和您自己的插件共享的单张Lexical副本, 所以将每个Lexical软件包保存在一个版本上 .

使用量

import { ComposerPrimitive } from "@assistant-ui/react";
import { LexicalComposerInput } from "@assistant-ui/react-lexical";

export function Composer() {
  return (
    <ComposerPrimitive.Root>
      <LexicalComposerInput aria-label="Message" placeholder="Ask anything..." />
      <ComposerPrimitive.Send />
    </ComposerPrimitive.Root>
  );
}

使用 aria-label 或者说 aria-labelledby 以命名可编辑的文本框(不包含任何文本,占位符名称),以及 aria-describedby 用于引用提示或错误文本。 其他HTML道具和转发的参考文献适用于外包装.

对于自定义芯片渲染,通过 a directiveChip 让道具。 指令(例如:. @user, (中文(简体) ), /command)在光标导航、选择和复制/粘贴中作为单一单位生存.

通过自定义 Lexical 插件组件为 children 连接编辑器 useLexicalComposerContext,如粘贴正常化或长度限制.

另见

• @assistant-ui/react-hook-form 将作曲者绑定在一个助手可以读取和填充的字段的表格上.

详细参考资料 助理-ui.com/文件。 。 。 .