# MentionInput 组件

支持 @ 提及功能的富文本输入框组件。

## 文件结构

```
MentionInput/
├── index.tsx                 # 主组件入口
├── types.ts                  # TypeScript 类型定义
├── utils.ts                  # 工具函数（文本解析等）
├── useCursorPosition.ts      # 光标位置管理 Hook
├── useMentionInput.ts        # 核心逻辑 Hook（输入处理、提及插入、键盘事件）
├── usePopoverPosition.ts     # 弹出框位置计算和调整 Hook
├── MentionPopover.tsx        # 弹出框组件
└── README.md                 # 本文档
```

## 模块说明

### types.ts
- `MentionOption`: 提及选项类型
- `MentionInputProps`: 组件 Props 类型
- `ParsedSegment`: 文本解析片段类型
- `PopoverPosition`: 弹出框位置类型

### utils.ts
提供工具函数：
- `parseValue()`: 解析 `@{value|label}` 格式文本
- `extractTextFromHTML()`: 从 HTML 提取纯文本
- `shouldShowMentionPopover()`: 判断是否显示提及菜单
- `filterOptions()`: 过滤匹配的选项

### useCursorPosition.ts
管理 contentEditable 元素中的光标位置：
- `getCursorTextPosition()`: 获取光标位置
- `setCursorTextPosition()`: 设置光标位置

### useMentionInput.ts
核心业务逻辑：
- 处理输入事件
- 插入提及
- 键盘事件处理
- 管理弹出框状态

### usePopoverPosition.ts
弹出框位置管理：
- `calculatePopoverPosition()`: 计算初始位置
- `usePopoverPosition()`: 动态调整位置，确保在视口内

### MentionPopover.tsx
弹出框 UI 组件，负责渲染提及选项列表

### index.tsx
主组件，组合所有 hooks 和子组件

## 使用示例

```tsx
import MentionInput, { MentionOption } from './MentionInput';

const options: MentionOption[] = [
  { label: '元芳', value: 'yuanfang' },
  { label: '张三', value: 'zhangsan' },
];

function MyComponent() {
  const [value, setValue] = useState('');

  return (
    <MentionInput
      value={value}
      onChange={setValue}
      onEnter={(val) => console.log('Send:', val)}
      options={options}
      popoverPlacement="auto"
    />
  );
}
```

## 设计原则

1. **关注点分离**：每个模块专注于单一职责
2. **可测试性**：独立的 hooks 和工具函数易于单元测试
3. **可复用性**：hooks 可在其他组件中复用
4. **类型安全**：完整的 TypeScript 类型定义
5. **性能优化**：使用 `useMemoizedFn` 避免不必要的重渲染

