File tree Expand file tree Collapse file tree 4 files changed +28
-4
lines changed
Expand file tree Collapse file tree 4 files changed +28
-4
lines changed Original file line number Diff line number Diff line change @@ -414,3 +414,29 @@ while (start !== -1) {
414414```
415415
416416此外,还有一个重要的问题,通过这种方式处理的` Wrap ` 类型的节点可能会丢失其` wrap-key ` 的值,因为我们在这种情况下选取的内容必然是内部元素而不是完整选取整个元素,这种情况下如果需要特殊处理的话就需要交给插件去做格式化了,需要实现` willSetToClipboard ` 的` Hook ` ,否则作为没有` wrap-key ` 的` pair-key ` 会被` Normalize ` 的规则处理掉。不过通常这种情况不会出现,在选区的情况下我们选择块级内容一般都是文本或者节点内的选区,而只有在工具栏的剪贴板操作时我们需要为其特殊处理。但是对于` Table ` 节点单元格的处理会是比较麻烦的问题,只不过暂时我们还没有将表格的选区融合到编辑器整个选区模块,这块暂时不用考虑。
417+
418+ ## 零宽字符 IME
419+ 通常实现` Void/Embed ` 节点时,我们都需要在` Void ` 节点中实现一个零宽字符,用来处理选区的映射问题。通常我们都需要隐藏其本身显示的位置以隐藏光标,然而在特定条件下这里会存在吞` IME ` 输入的问题。
420+
421+ ``` html
422+ <div contenteditable =" true" ><span contenteditable =" false" style =" background :#eee ;" >Void<span style =" height : 0px ; color : transparent ; position : absolute ;" > ; </span ></span ><span >!</span ></div >
423+ ```
424+
425+ 处理这个问题的方式比较简单,我们只需要将零宽字符的标识放在` EmbedNode ` 之前即可,这样也不会影响到选区的查找。` https://github.com/ianstormtaylor/slate/pull/5685 ` 。此外飞书文档的实现方式也是这样的,` ZeroNode ` 永远在` FakeNode ` 前。
426+
427+ ``` html
428+ <div contenteditable =" true" ><span contenteditable =" false" style =" background :#eee ;" ><span style =" height : 0px ; color : transparent ; position : absolute ;" > ; </span >Void</span ><span >!</span ></div >
429+ ```
430+
431+ ## Void IME
432+ 在这里我还发现了一个很有趣的事情,是关于` ContentEditable ` 以及` IME ` 的交互问题。在` slate ` 的` issue ` 中发现,如果最外层节点是` editable ` 的,然后子节点中某个节点是` not editable ` 的,然后其后续紧接着是` span ` 的文本节点,当前光标位于这两者中间,此时唤醒` IME ` 输入部分内容,如果按着键盘的左键将` IME ` 的编辑向左移动到最后,则会使整个编辑器失去焦点,` IME ` 以及输入的文本也会消失,此时如果在此唤醒` IME ` 则会重新出现之前的文本。这个现象只在` Chromium ` 中存在,在` Firefox/Safari ` 中则表现正常。
433+
434+ ``` html
435+ <div contenteditable =" true" ><span contenteditable =" false" style =" background :#eee ;" >Void</span ><span >!</span ></div >
436+ ```
437+
438+ 这个问题我在` https://github.com/ianstormtaylor/slate/pull/5736 ` 中进行了修复,关键点是外层` span ` 标签有` display:inline-block ` 样式,子` div ` 标签有` contenteditable=false ` 属性。
439+
440+ ``` html
441+ <div contenteditable =" true" ><span contenteditable =" false" style =" background : #eee ; display : inline-block ;" ><div contenteditable =" false" >Void</div ></span ><span >!</span ></div >
442+ ```
Original file line number Diff line number Diff line change 1010<a href =" ./NOTE.md " >NOTE</a >
1111<span >|</span >
1212<a href =" ./TODO.md " >TODO</a >
13- <span >|</span >
14- <a href =" https://github.com/WindrunnerMax/QuillBlocks/blob/master/README.md " >Example</a >
1513</p >
1614
1715基于` slate.js ` 构建的文档编辑器,` slate ` 提供了控制富文本的` core ` ,简单来说他本身并不提供各种富文本编辑功能,所有的富文本功能都需要自己来通过其提供的` API ` 来实现,甚至他的插件机制也需要通过自己来拓展,所以在插件的实现方面就需要自己制定一些策略。在交互与` ui ` 方面对于飞书文档的参考比较多,整体来说坑也是比较多的,尤其是在做交互策略方面,不过做好兜底以后实现基本的文档编辑器功能是没有问题的。
Original file line number Diff line number Diff line change 1111- [x] 斜体
1212- [x] 行内代码块
1313- [x] 快捷键
14- - [x] 快捷键
1514- [x] 有序列表
1615- [x] 无序列表
1716- [x] 分割线
3736- [ ] 多实例` Block ` 化
3837- [ ] 严格模块嵌套规则
3938- [x] 锚点
39+ - [ ] 工具栏配置化
Original file line number Diff line number Diff line change 11{
22 "name" : " doc-editor-light" ,
3- "version" : " 1.1.0 " ,
3+ "version" : " 1.1.1 " ,
44 "scripts" : {
55 "dev" : " pnpm --filter doc-editor-react run dev" ,
66 "build" : " pnpm --filter doc-editor-react run build" ,
You can’t perform that action at this time.
0 commit comments