@danielivanov/评论

无头反应提及本地文本区和编辑器集成的建议. 多个触发器,ASync搜索,键盘导航,caret定位,以及可选样式. 需要反应19.

bun add @danielivanov/mention@^0.2.1

import { Mention } from "@danielivanov/mention";
import "@danielivanov/mention/styles.css";

type Person = { id: string; name: string };
const people: Person[] = [{ id: "alice", name: "Alice" }];

export function Composer() {
  return (
    <Mention.Root items={people} getKey={p => p.id} getLabel={p => p.name}>
      <Mention.Input aria-label="Message" name="message" />
      <Mention.Popover aria-label="People">
        <Mention.Loading>Searching…</Mention.Loading>
        <Mention.List<Person>>
          {person => <Mention.Item value={person}>{person.name}</Mention.Item>}
        </Mention.List>
        <Mention.Empty>No people found</Mention.Empty>
      </Mention.Popover>
    </Mention.Root>
  );
}

使用标准 value, (中文(简体) ), onChange, (中文(简体) ), onBlur, (中文(简体) ), onKeyDown,以及 ref 打开道具 Mention.Input。消费者钥匙处理器首先运行,可以防止《参考》的处理. onSelect root是成功插入后的可选通知。 独立 useMention() 钩子登记文本区域时 getInputProps() 被传播.

对于多个触发器, 供应 triggers={{ "@": peopleConfig, "#": channelConfig }} 转到根或使用 useMentionMulti()。每个频道都有 items, (中文(简体) ), getKey, (中文(简体) ), getLabel选择 getInsertText。同步获取器接收 (query, signal); 请求默认取消150 ms. 无法选择过时的结果 .

丰富的编辑器注册 EditorAdapter<T> 与 setEditor()。适配器读取一个文本区域,测量护身符,并使用编辑器自己的交易替换一个范围。 编辑器拥有芯片,格式化,剪贴板数据并撤销. 见可执行文件 表达器 财务报告和审定财务报表 语法 实例,由浏览器测试进行。 其他编辑器集成需要自己的适配器和校验.

文本区保留其本土文本框语义. 丰富的编辑器提供自己的文本框角色和多行状态; 引用添加列表框和活性-选项关系. 自动检查不能证明辅助技术兼容性。 见 无障碍文档 用于测试边界.

运行 bun run build, (中文(简体) ), bun run test,以及 bun run test:e2e 从寄存器根。 规模预算为14 kB gziped,包括Floating UI. 编辑器实例位于已发布的运行时间之外.

名称匹配

默认情况下,空格会结束查询,而数组会使用对大小写不敏感的标签子字符串匹配. 设定 allowSpaces 每个频道的全名,并提供纯度 filter(item, query) 用于本地重音折叠或应用程序专用规则。 Async 获取器结果绕过此过滤器 。 标签,换行,编辑原子总是结束查询. 见 国际投入。 。 。 .