@zhin.js/adapter-sandbox 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +187 -0
- package/LICENSE +21 -0
- package/README.md +84 -0
- package/client/RichTextEditor.tsx +359 -0
- package/client/Sandbox.tsx +864 -0
- package/client/index.tsx +11 -0
- package/client/tsconfig.json +19 -0
- package/dist/index.js +5 -0
- package/lib/index.d.ts +54 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +173 -0
- package/lib/index.js.map +1 -0
- package/package.json +65 -0
- package/src/index.ts +235 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
# @zhin.js/adapter-process
|
|
2
|
+
|
|
3
|
+
## 1.0.22
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [3bc5d56]
|
|
8
|
+
- @zhin.js/console@1.0.13
|
|
9
|
+
- zhin.js@1.0.17
|
|
10
|
+
|
|
11
|
+
## 1.0.21
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- zhin.js@1.0.16
|
|
16
|
+
|
|
17
|
+
## 1.0.20
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- f9e75ce: fix: 一致性调整,文档调整
|
|
22
|
+
- f9e75ce: fix: recall,文档统一,mcp,githubnotifiy
|
|
23
|
+
- zhin.js@1.0.15
|
|
24
|
+
|
|
25
|
+
## 1.0.19
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- Updated dependencies [9bc8dc4]
|
|
30
|
+
- @zhin.js/console@1.0.12
|
|
31
|
+
|
|
32
|
+
## 1.0.18
|
|
33
|
+
|
|
34
|
+
### Patch Changes
|
|
35
|
+
|
|
36
|
+
- Updated dependencies [8f75b7f]
|
|
37
|
+
- @zhin.js/console@1.0.11
|
|
38
|
+
|
|
39
|
+
## 1.0.17
|
|
40
|
+
|
|
41
|
+
### Patch Changes
|
|
42
|
+
|
|
43
|
+
- f4a7dd7: fix: force build
|
|
44
|
+
|
|
45
|
+
## 1.0.16
|
|
46
|
+
|
|
47
|
+
### Patch Changes
|
|
48
|
+
|
|
49
|
+
- 547028f: fix: 优化包结构,优化客户端支持
|
|
50
|
+
- Updated dependencies [547028f]
|
|
51
|
+
- @zhin.js/console@1.0.10
|
|
52
|
+
- @zhin.js/types@1.0.5
|
|
53
|
+
- @zhin.js/http@1.0.7
|
|
54
|
+
- zhin.js@1.0.14
|
|
55
|
+
|
|
56
|
+
## 1.0.15
|
|
57
|
+
|
|
58
|
+
### Patch Changes
|
|
59
|
+
|
|
60
|
+
- Updated dependencies [4034b94]
|
|
61
|
+
- @zhin.js/console@1.0.9
|
|
62
|
+
- zhin.js@1.0.13
|
|
63
|
+
|
|
64
|
+
## 1.0.14
|
|
65
|
+
|
|
66
|
+
### Patch Changes
|
|
67
|
+
|
|
68
|
+
- zhin.js@1.0.12
|
|
69
|
+
|
|
70
|
+
## 1.0.13
|
|
71
|
+
|
|
72
|
+
### Patch Changes
|
|
73
|
+
|
|
74
|
+
- zhin.js@1.0.11
|
|
75
|
+
|
|
76
|
+
## 1.0.12
|
|
77
|
+
|
|
78
|
+
### Patch Changes
|
|
79
|
+
|
|
80
|
+
- Updated dependencies [c1a539e]
|
|
81
|
+
- Updated dependencies [c8c3996]
|
|
82
|
+
- @zhin.js/console@1.0.8
|
|
83
|
+
- @zhin.js/types@1.0.4
|
|
84
|
+
- zhin.js@1.0.10
|
|
85
|
+
|
|
86
|
+
## 1.0.11
|
|
87
|
+
|
|
88
|
+
### Patch Changes
|
|
89
|
+
|
|
90
|
+
- Updated dependencies [c490260]
|
|
91
|
+
- @zhin.js/console@1.0.7
|
|
92
|
+
- @zhin.js/client@1.0.5
|
|
93
|
+
- @zhin.js/http@1.0.6
|
|
94
|
+
- zhin.js@1.0.9
|
|
95
|
+
|
|
96
|
+
## 1.0.10
|
|
97
|
+
|
|
98
|
+
### Patch Changes
|
|
99
|
+
|
|
100
|
+
- 551c4d2: fix: 插件支持配置文件读取,优化 test 用例
|
|
101
|
+
- Updated dependencies [551c4d2]
|
|
102
|
+
- @zhin.js/console@1.0.6
|
|
103
|
+
- @zhin.js/types@1.0.3
|
|
104
|
+
- @zhin.js/client@1.0.4
|
|
105
|
+
- zhin.js@1.0.8
|
|
106
|
+
- @zhin.js/http@1.0.5
|
|
107
|
+
|
|
108
|
+
## 1.0.9
|
|
109
|
+
|
|
110
|
+
### Patch Changes
|
|
111
|
+
|
|
112
|
+
- Updated dependencies [47845fb]
|
|
113
|
+
- @zhin.js/console@1.0.5
|
|
114
|
+
- zhin.js@1.0.7
|
|
115
|
+
|
|
116
|
+
## 1.0.8
|
|
117
|
+
|
|
118
|
+
### Patch Changes
|
|
119
|
+
|
|
120
|
+
- Updated dependencies [c2d9047]
|
|
121
|
+
- Updated dependencies [c2d9047]
|
|
122
|
+
- Updated dependencies [b213bbc]
|
|
123
|
+
- @zhin.js/console@1.0.4
|
|
124
|
+
- @zhin.js/client@1.0.3
|
|
125
|
+
- @zhin.js/http@1.0.4
|
|
126
|
+
- zhin.js@1.0.6
|
|
127
|
+
|
|
128
|
+
## 1.0.7
|
|
129
|
+
|
|
130
|
+
### Patch Changes
|
|
131
|
+
|
|
132
|
+
- Updated dependencies [5e2bddc]
|
|
133
|
+
- @zhin.js/console@1.0.3
|
|
134
|
+
|
|
135
|
+
## 1.0.6
|
|
136
|
+
|
|
137
|
+
### Patch Changes
|
|
138
|
+
|
|
139
|
+
- f347667: fix: runtime error
|
|
140
|
+
- Updated dependencies [f347667]
|
|
141
|
+
- @zhin.js/http@1.0.3
|
|
142
|
+
- zhin.js@1.0.5
|
|
143
|
+
|
|
144
|
+
## 1.0.5
|
|
145
|
+
|
|
146
|
+
### Patch Changes
|
|
147
|
+
|
|
148
|
+
- Updated dependencies [d291005]
|
|
149
|
+
- @zhin.js/console@1.0.2
|
|
150
|
+
- @zhin.js/client@1.0.2
|
|
151
|
+
- @zhin.js/http@1.0.2
|
|
152
|
+
|
|
153
|
+
## 1.0.4
|
|
154
|
+
|
|
155
|
+
### Patch Changes
|
|
156
|
+
|
|
157
|
+
- zhin.js@1.0.4
|
|
158
|
+
|
|
159
|
+
## 1.0.3
|
|
160
|
+
|
|
161
|
+
### Patch Changes
|
|
162
|
+
|
|
163
|
+
- 727963c: fix: 修复 sqlite 数据错误;优化 console 展示
|
|
164
|
+
- 89bc676: fix: 类型反射优化
|
|
165
|
+
- Updated dependencies [727963c]
|
|
166
|
+
- Updated dependencies [89bc676]
|
|
167
|
+
- @zhin.js/console@1.0.1
|
|
168
|
+
- @zhin.js/client@1.0.1
|
|
169
|
+
- @zhin.js/types@1.0.2
|
|
170
|
+
- zhin.js@1.0.3
|
|
171
|
+
|
|
172
|
+
## 1.0.2
|
|
173
|
+
|
|
174
|
+
### Patch Changes
|
|
175
|
+
|
|
176
|
+
- Updated dependencies [15fc934]
|
|
177
|
+
- Updated dependencies [3ecd487]
|
|
178
|
+
- @zhin.js/core@1.0.2
|
|
179
|
+
|
|
180
|
+
## 1.0.1
|
|
181
|
+
|
|
182
|
+
### Patch Changes
|
|
183
|
+
|
|
184
|
+
- efdd58a: fix: init
|
|
185
|
+
- Updated dependencies [efdd58a]
|
|
186
|
+
- @zhin.js/core@1.0.1
|
|
187
|
+
- @zhin.js/types@1.0.1
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 凉菜
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# @zhin.js/adapter-process
|
|
2
|
+
|
|
3
|
+
基于进程标准输入输出的 Zhin 机器人适配器,用于命令行环境下的测试和开发。
|
|
4
|
+
|
|
5
|
+
## 功能特性
|
|
6
|
+
|
|
7
|
+
- 🖥️ 命令行交互界面
|
|
8
|
+
- ⌨️ 标准输入输出处理
|
|
9
|
+
- 🧪 测试和开发友好
|
|
10
|
+
- 📝 简单的消息格式
|
|
11
|
+
- 🔄 实时消息处理
|
|
12
|
+
|
|
13
|
+
## 安装
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @zhin.js/adapter-process
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## 配置
|
|
20
|
+
|
|
21
|
+
```javascript
|
|
22
|
+
// zhin.config.ts
|
|
23
|
+
export default {
|
|
24
|
+
bots: [
|
|
25
|
+
{
|
|
26
|
+
context: 'process',
|
|
27
|
+
name: 'console-bot', // 机器人名称
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 使用方式
|
|
34
|
+
|
|
35
|
+
启动后,直接在命令行中输入消息即可:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
$ npm run dev
|
|
39
|
+
> 你好
|
|
40
|
+
[Bot] 收到消息:你好
|
|
41
|
+
[Bot] 回复:Hello World!
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## 消息处理
|
|
45
|
+
|
|
46
|
+
- 监听 `process.stdin` 输入
|
|
47
|
+
- 将输入内容转换为标准消息格式
|
|
48
|
+
- 消息发送只会在日志中显示,不会输出到终端
|
|
49
|
+
|
|
50
|
+
## 消息格式
|
|
51
|
+
|
|
52
|
+
消息对象包含:
|
|
53
|
+
- `id`: 基于时间戳的消息ID
|
|
54
|
+
- `sender.id`: 当前进程PID
|
|
55
|
+
- `sender.name`: 进程标题
|
|
56
|
+
- `channel.id`: 进程PID
|
|
57
|
+
- `channel.type`: 固定为 'private'
|
|
58
|
+
- `content`: 文本消息内容
|
|
59
|
+
- `timestamp`: 消息时间戳
|
|
60
|
+
|
|
61
|
+
## 适用场景
|
|
62
|
+
|
|
63
|
+
- 🧪 插件开发测试
|
|
64
|
+
- 🔍 功能调试
|
|
65
|
+
- 📚 学习和演示
|
|
66
|
+
- 🛠️ 开发环境验证
|
|
67
|
+
|
|
68
|
+
## 依赖项
|
|
69
|
+
|
|
70
|
+
- `zhin.js` - Zhin核心框架
|
|
71
|
+
- Node.js 内置模块
|
|
72
|
+
|
|
73
|
+
## 开发
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
npm run build # 构建
|
|
77
|
+
npm run clean # 清理构建文件
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## 注意事项
|
|
81
|
+
|
|
82
|
+
- 此适配器仅用于开发和测试
|
|
83
|
+
- 不支持图片、文件等复杂消息类型
|
|
84
|
+
- 消息发送仅在日志中显示
|
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
import { useRef, useEffect, forwardRef, useImperativeHandle } from 'react'
|
|
2
|
+
|
|
3
|
+
export interface MessageSegment {
|
|
4
|
+
type: 'text' | 'at' | 'face' | 'image' | 'video' | 'audio' | 'file'
|
|
5
|
+
data: Record<string, any>
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export interface RichTextEditorProps {
|
|
9
|
+
placeholder?: string
|
|
10
|
+
onSend?: (text: string, segments: MessageSegment[]) => void
|
|
11
|
+
onChange?: (text: string, segments: MessageSegment[]) => void
|
|
12
|
+
onAtTrigger?: (show: boolean, searchQuery: string, position?: { top: number; left: number }) => void
|
|
13
|
+
minHeight?: string
|
|
14
|
+
maxHeight?: string
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface RichTextEditorRef {
|
|
18
|
+
focus: () => void
|
|
19
|
+
clear: () => void
|
|
20
|
+
insertFace: (faceId: number) => void
|
|
21
|
+
insertImage: (url: string) => void
|
|
22
|
+
insertAt: (name: string, id?: string) => void
|
|
23
|
+
replaceAtTrigger: (name: string, id?: string) => void
|
|
24
|
+
getContent: () => { text: string; segments: MessageSegment[] }
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>(
|
|
28
|
+
({ placeholder = '输入消息...', onSend, onChange, onAtTrigger, minHeight = '44px', maxHeight = '200px' }, ref) => {
|
|
29
|
+
const editorRef = useRef<HTMLDivElement>(null)
|
|
30
|
+
const atTriggerTextRef = useRef<Text | null>(null)
|
|
31
|
+
|
|
32
|
+
// 解析编辑器内容为文本和消息段
|
|
33
|
+
const parseEditorContent = (): { text: string; segments: MessageSegment[] } => {
|
|
34
|
+
if (!editorRef.current) return { text: '', segments: [] }
|
|
35
|
+
|
|
36
|
+
let text = ''
|
|
37
|
+
const segments: MessageSegment[] = []
|
|
38
|
+
const nodes = Array.from(editorRef.current.childNodes)
|
|
39
|
+
|
|
40
|
+
for (const node of nodes) {
|
|
41
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
42
|
+
const textContent = node.textContent || ''
|
|
43
|
+
if (textContent) {
|
|
44
|
+
text += textContent
|
|
45
|
+
segments.push({ type: 'text', data: { text: textContent } })
|
|
46
|
+
}
|
|
47
|
+
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
|
48
|
+
const el = node as HTMLElement
|
|
49
|
+
|
|
50
|
+
if (el.classList.contains('editor-face')) {
|
|
51
|
+
const faceId = el.dataset.id
|
|
52
|
+
text += `[face:${faceId}]`
|
|
53
|
+
segments.push({ type: 'face', data: { id: Number(faceId) } })
|
|
54
|
+
} else if (el.classList.contains('editor-image')) {
|
|
55
|
+
const imageUrl = el.dataset.url
|
|
56
|
+
text += `[image:${imageUrl}]`
|
|
57
|
+
segments.push({ type: 'image', data: { url: imageUrl } })
|
|
58
|
+
} else if (el.classList.contains('editor-at')) {
|
|
59
|
+
const name = el.dataset.name
|
|
60
|
+
const id = el.dataset.id
|
|
61
|
+
text += `[@${name}]`
|
|
62
|
+
segments.push({ type: 'at', data: { name, qq: id } })
|
|
63
|
+
} else if (el.tagName === 'BR') {
|
|
64
|
+
text += '\n'
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return { text, segments }
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// 插入表情
|
|
73
|
+
const insertFace = (faceId: number) => {
|
|
74
|
+
if (!editorRef.current) return
|
|
75
|
+
|
|
76
|
+
const img = document.createElement('img')
|
|
77
|
+
img.src = `https://face.viki.moe/apng/${faceId}.png`
|
|
78
|
+
img.alt = `[face:${faceId}]`
|
|
79
|
+
img.dataset.type = 'face'
|
|
80
|
+
img.dataset.id = String(faceId)
|
|
81
|
+
img.className = 'editor-face'
|
|
82
|
+
|
|
83
|
+
insertNodeAtCursor(img)
|
|
84
|
+
handleChange()
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// 插入图片
|
|
88
|
+
const insertImage = (url: string) => {
|
|
89
|
+
if (!editorRef.current || !url.trim()) return
|
|
90
|
+
|
|
91
|
+
const img = document.createElement('img')
|
|
92
|
+
img.src = url.trim()
|
|
93
|
+
img.alt = `[image:${url.trim()}]`
|
|
94
|
+
img.dataset.type = 'image'
|
|
95
|
+
img.dataset.url = url.trim()
|
|
96
|
+
img.className = 'editor-image'
|
|
97
|
+
|
|
98
|
+
insertNodeAtCursor(img)
|
|
99
|
+
handleChange()
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// 插入 @ 提及
|
|
103
|
+
const insertAt = (name: string, id?: string) => {
|
|
104
|
+
if (!editorRef.current || !name.trim()) return
|
|
105
|
+
|
|
106
|
+
// 创建 @ 标签容器
|
|
107
|
+
const atBox = document.createElement('span')
|
|
108
|
+
atBox.dataset.type = 'at'
|
|
109
|
+
atBox.dataset.name = name
|
|
110
|
+
if (id) atBox.dataset.id = id
|
|
111
|
+
atBox.className = 'editor-at'
|
|
112
|
+
atBox.contentEditable = 'false' // 不可编辑
|
|
113
|
+
|
|
114
|
+
// 创建 @ 符号
|
|
115
|
+
const atSymbol = document.createElement('span')
|
|
116
|
+
atSymbol.textContent = '@'
|
|
117
|
+
atSymbol.className = 'editor-at-symbol'
|
|
118
|
+
|
|
119
|
+
// 创建名称
|
|
120
|
+
const nameText = document.createElement('span')
|
|
121
|
+
nameText.textContent = name
|
|
122
|
+
nameText.className = 'editor-at-name'
|
|
123
|
+
|
|
124
|
+
atBox.appendChild(atSymbol)
|
|
125
|
+
atBox.appendChild(nameText)
|
|
126
|
+
|
|
127
|
+
insertNodeAtCursor(atBox)
|
|
128
|
+
handleChange()
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// 在光标位置插入节点
|
|
132
|
+
const insertNodeAtCursor = (node: Node) => {
|
|
133
|
+
if (!editorRef.current) return
|
|
134
|
+
|
|
135
|
+
// 先聚焦编辑器
|
|
136
|
+
editorRef.current.focus()
|
|
137
|
+
const selection = window.getSelection()
|
|
138
|
+
if (selection && selection.rangeCount > 0) {
|
|
139
|
+
const range = selection.getRangeAt(0)
|
|
140
|
+
|
|
141
|
+
// 检查光标是否在编辑器内部
|
|
142
|
+
const isInsideEditor = editorRef.current.contains(range.commonAncestorContainer)
|
|
143
|
+
|
|
144
|
+
if (isInsideEditor) {
|
|
145
|
+
// 光标在编辑器内,插入到光标位置
|
|
146
|
+
range.deleteContents()
|
|
147
|
+
range.insertNode(node)
|
|
148
|
+
range.collapse(false)
|
|
149
|
+
selection.removeAllRanges()
|
|
150
|
+
selection.addRange(range)
|
|
151
|
+
} else {
|
|
152
|
+
// 光标不在编辑器内,追加到末尾
|
|
153
|
+
editorRef.current.appendChild(node)
|
|
154
|
+
|
|
155
|
+
// 移动光标到新插入的节点后面
|
|
156
|
+
const newRange = document.createRange()
|
|
157
|
+
newRange.setStartAfter(node)
|
|
158
|
+
newRange.collapse(true)
|
|
159
|
+
selection.removeAllRanges()
|
|
160
|
+
selection.addRange(newRange)
|
|
161
|
+
}
|
|
162
|
+
} else {
|
|
163
|
+
// 没有选区,直接追加到末尾
|
|
164
|
+
editorRef.current.appendChild(node)
|
|
165
|
+
|
|
166
|
+
// 创建新选区并移动光标到末尾
|
|
167
|
+
const selection = window.getSelection()
|
|
168
|
+
if (selection) {
|
|
169
|
+
const newRange = document.createRange()
|
|
170
|
+
newRange.setStartAfter(node)
|
|
171
|
+
newRange.collapse(true)
|
|
172
|
+
selection.removeAllRanges()
|
|
173
|
+
selection.addRange(newRange)
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// 清空编辑器
|
|
180
|
+
const clear = () => {
|
|
181
|
+
if (editorRef.current) {
|
|
182
|
+
editorRef.current.innerHTML = ''
|
|
183
|
+
handleChange()
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// 聚焦编辑器
|
|
188
|
+
const focus = () => {
|
|
189
|
+
editorRef.current?.focus()
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// 获取内容
|
|
193
|
+
const getContent = () => {
|
|
194
|
+
return parseEditorContent()
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// 检测 @ 输入
|
|
198
|
+
const checkAtTrigger = () => {
|
|
199
|
+
if (!editorRef.current || !onAtTrigger) return
|
|
200
|
+
|
|
201
|
+
const selection = window.getSelection()
|
|
202
|
+
if (!selection || selection.rangeCount === 0) {
|
|
203
|
+
onAtTrigger(false, '')
|
|
204
|
+
atTriggerTextRef.current = null
|
|
205
|
+
return
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
const range = selection.getRangeAt(0)
|
|
209
|
+
|
|
210
|
+
// 检查光标是否在编辑器内
|
|
211
|
+
if (!editorRef.current.contains(range.commonAncestorContainer)) {
|
|
212
|
+
onAtTrigger(false, '')
|
|
213
|
+
atTriggerTextRef.current = null
|
|
214
|
+
return
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// 获取光标前的文本节点
|
|
218
|
+
const node = range.startContainer
|
|
219
|
+
if (node.nodeType !== Node.TEXT_NODE) {
|
|
220
|
+
onAtTrigger(false, '')
|
|
221
|
+
atTriggerTextRef.current = null
|
|
222
|
+
return
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
const textNode = node as Text
|
|
226
|
+
const textBeforeCursor = textNode.textContent?.substring(0, range.startOffset) || ''
|
|
227
|
+
|
|
228
|
+
// 查找最近的 @ 符号位置
|
|
229
|
+
const atIndex = textBeforeCursor.lastIndexOf('@')
|
|
230
|
+
|
|
231
|
+
// 检查是否找到 @ 且后面没有空格(表示仍在输入 @提及)
|
|
232
|
+
if (atIndex !== -1) {
|
|
233
|
+
const textAfterAt = textBeforeCursor.substring(atIndex + 1)
|
|
234
|
+
|
|
235
|
+
// 如果 @ 后面有空格,则不触发
|
|
236
|
+
if (textAfterAt.includes(' ') || textAfterAt.includes('\n')) {
|
|
237
|
+
onAtTrigger(false, '')
|
|
238
|
+
atTriggerTextRef.current = null
|
|
239
|
+
return
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
atTriggerTextRef.current = textNode
|
|
243
|
+
|
|
244
|
+
// 计算 @ 位置
|
|
245
|
+
const tempRange = document.createRange()
|
|
246
|
+
tempRange.setStart(textNode, atIndex)
|
|
247
|
+
tempRange.setEnd(textNode, atIndex + 1)
|
|
248
|
+
const rect = tempRange.getBoundingClientRect()
|
|
249
|
+
const editorRect = editorRef.current.getBoundingClientRect()
|
|
250
|
+
|
|
251
|
+
// 传递搜索查询(@ 后面的文本)
|
|
252
|
+
onAtTrigger(true, textAfterAt, {
|
|
253
|
+
top: rect.bottom - editorRect.top,
|
|
254
|
+
left: rect.left - editorRect.left
|
|
255
|
+
})
|
|
256
|
+
} else {
|
|
257
|
+
onAtTrigger(false, '')
|
|
258
|
+
atTriggerTextRef.current = null
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// 处理内容变化
|
|
263
|
+
const handleChange = () => {
|
|
264
|
+
checkAtTrigger()
|
|
265
|
+
|
|
266
|
+
if (onChange) {
|
|
267
|
+
const { text, segments } = parseEditorContent()
|
|
268
|
+
onChange(text, segments)
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// 删除触发的 @ 符号和搜索文本并插入用户
|
|
273
|
+
const replaceAtTrigger = (name: string, id?: string) => {
|
|
274
|
+
if (!atTriggerTextRef.current) return
|
|
275
|
+
|
|
276
|
+
const textNode = atTriggerTextRef.current
|
|
277
|
+
const text = textNode.textContent || ''
|
|
278
|
+
const atIndex = text.lastIndexOf('@')
|
|
279
|
+
|
|
280
|
+
if (atIndex !== -1) {
|
|
281
|
+
// 找到 @ 后面的内容(搜索文本)
|
|
282
|
+
const textAfter = text.substring(atIndex + 1)
|
|
283
|
+
const endIndex = atIndex + 1 + textAfter.split(/[\s\n]/)[0].length
|
|
284
|
+
|
|
285
|
+
// 删除 @ 符号和搜索文本
|
|
286
|
+
const beforeAt = text.substring(0, atIndex)
|
|
287
|
+
const afterSearch = text.substring(endIndex)
|
|
288
|
+
textNode.textContent = beforeAt + afterSearch
|
|
289
|
+
|
|
290
|
+
// 移动光标到删除位置
|
|
291
|
+
const selection = window.getSelection()
|
|
292
|
+
if (selection) {
|
|
293
|
+
const range = document.createRange()
|
|
294
|
+
range.setStart(textNode, atIndex)
|
|
295
|
+
range.collapse(true)
|
|
296
|
+
selection.removeAllRanges()
|
|
297
|
+
selection.addRange(range)
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
atTriggerTextRef.current = null
|
|
302
|
+
insertAt(name, id)
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
// 处理键盘事件
|
|
306
|
+
const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
|
|
307
|
+
if (e.key === 'Enter' && !e.shiftKey) {
|
|
308
|
+
e.preventDefault()
|
|
309
|
+
if (onSend) {
|
|
310
|
+
const { text, segments } = parseEditorContent()
|
|
311
|
+
onSend(text, segments)
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
// 暴露方法给父组件
|
|
317
|
+
useImperativeHandle(ref, () => ({
|
|
318
|
+
focus,
|
|
319
|
+
clear,
|
|
320
|
+
insertFace,
|
|
321
|
+
insertImage,
|
|
322
|
+
insertAt,
|
|
323
|
+
replaceAtTrigger,
|
|
324
|
+
getContent
|
|
325
|
+
}))
|
|
326
|
+
|
|
327
|
+
return (
|
|
328
|
+
<div
|
|
329
|
+
ref={editorRef}
|
|
330
|
+
contentEditable
|
|
331
|
+
suppressContentEditableWarning
|
|
332
|
+
onInput={handleChange}
|
|
333
|
+
onKeyDown={handleKeyDown}
|
|
334
|
+
data-placeholder={placeholder}
|
|
335
|
+
className="rich-text-editor"
|
|
336
|
+
style={{
|
|
337
|
+
width: '100%',
|
|
338
|
+
minHeight,
|
|
339
|
+
maxHeight,
|
|
340
|
+
padding: '0.5rem 0.75rem',
|
|
341
|
+
border: '1px solid var(--gray-6)',
|
|
342
|
+
borderRadius: '6px',
|
|
343
|
+
backgroundColor: 'var(--gray-1)',
|
|
344
|
+
fontSize: 'var(--font-size-2)',
|
|
345
|
+
outline: 'none',
|
|
346
|
+
overflowY: 'auto',
|
|
347
|
+
lineHeight: '1.5',
|
|
348
|
+
wordWrap: 'break-word',
|
|
349
|
+
color: 'var(--gray-12)'
|
|
350
|
+
}}
|
|
351
|
+
/>
|
|
352
|
+
)
|
|
353
|
+
}
|
|
354
|
+
)
|
|
355
|
+
|
|
356
|
+
RichTextEditor.displayName = 'RichTextEditor'
|
|
357
|
+
|
|
358
|
+
export default RichTextEditor
|
|
359
|
+
|