# mentions-wrapper LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/mentions-wrapper` 的使用方式。

## 模块定位

基于Antd Mentions进行二次封装，可实现输入内关键字整体控制，包括光标移动、关键词删除等

## 导入方式

```ts
import { MentionsWrapper } from '@flatbiz/antd/mentions-wrapper';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `* from ./mentions.jsx`
- `MentionsWrapper` - 基于Antd Mentions进行二次封装，可实现输入内关键字整体控制，包括光标移动、关键词删除等
- `MentionsWrapperRef`
- `MentionsWrapperProps`
- `OverallKeyWordsPosition`
- `getOverallKeyWordsPosition`
- `judgmentCursorInKeyWordsPosition` - 判断光标是否处在关键词位置内

## 依赖的 antd 能力

`Mentions`

## Props / 配置要点

### MentionsWrapperProps

- `value`（可选）：: string
- `onChange`（可选）：: (value?: string) => void
- `prefix`（可选）：: string | string[]；设置列表提示关键字，例如：@、$等
- `onClick`（可选）：: (value?: string) => void
- `onCursorChange`（可选）：: (position: number) => void；光标移动回调
- `options`（可选）：: string[]；输入框内整体关键词列表

## 使用规则与行为

- 设置列表提示关键字，例如：@、$等
- 光标移动回调
- 输入框内整体关键词列表
- 基于Antd Mentions进行二次封装，可实现输入内关键字整体控制，包括光标移动、关键词删除等
- 关键词位置
- 选中关键字/关键字+文字 的情况，直接删除
- 判断光标是否处在关键词位置内

## 基础示例

来自模块 README 的示例：

```tsx
const [value, setValue] = useState<string>();
<MentionsWrapper
  value={value}
  placeholder='请输入'
  onChange={setValue.bind(null)}
  onCursorChange={(position) => {
    console.log('onCursorChange', position);
  }}
/>
```

## README 摘要

MentionWrapper MetionEditor

## 源码索引

- `src/mentions-wrapper/index.ts`
- `src/mentions-wrapper/mentions.tsx`
- `src/mentions-wrapper/readme.md`
- `src/mentions-wrapper/types.ts`
- `src/mentions-wrapper/utils.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/mentions-wrapper` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。