| 3 | import { Editable } from './editable' |
| 4 | |
| 5 | export const withInput = <T extends Editor>(editor: T) => { |
| 6 | const e = editor as T & Editable |
| 7 | |
| 8 | e.onInput = (value: string) => { |
| 9 | if (!editor.selection) return |
| 10 | if (Editable.isComposing(editor)) { |
| 11 | const { selection, marks } = editor |
| 12 | let [node, path] = Editor.node(editor, selection) |
| 13 | if (marks) { |
| 14 | // 使用零宽字符绕过slate里面不能插入空字符的问题。组合输入法完成后会删除掉 |
| 15 | const compositionText: CompositionText = { |
| 16 | text: '\u200b', |
| 17 | ...marks, |
| 18 | composition: { |
| 19 | text: value, |
| 20 | offset: 0, |
| 21 | isEmpty: true, |
| 22 | }, |
| 23 | } |
| 24 | Transforms.insertNodes(editor, compositionText) |
| 25 | e.marks = null |
| 26 | } else if (Text.isText(node)) { |
| 27 | const composition = CompositionText.isCompositionText(node) ? node.composition : null |
| 28 | const offset = composition?.offset ?? Range.start(selection).offset |
| 29 | |
| 30 | Transforms.setNodes<CompositionText>( |
| 31 | editor, |
| 32 | { |
| 33 | composition: { |
| 34 | ...composition, |
| 35 | text: value, |
| 36 | offset, |
| 37 | }, |
| 38 | }, |
| 39 | { at: path }, |
| 40 | ) |
| 41 | const point = { path, offset: offset + value.length } |
| 42 | Transforms.select(editor, { |
| 43 | anchor: point, |
| 44 | focus: point, |
| 45 | }) |
| 46 | } |
| 47 | } else { |
| 48 | editor.insertText(value) |
| 49 | } |
| 50 | e.emit('input', value) |
| 51 | } |
| 52 | |
| 53 | e.onBeforeInput = value => { |
| 54 | e.emit('beforeinput', value) |
| 55 | } |
| 56 | |
| 57 | e.onCompositionStart = data => { |
| 58 | if (editor.selection && Range.isExpanded(editor.selection)) { |
| 59 | Editor.deleteFragment(editor) |
| 60 | } |
| 61 | IS_COMPOSING.set(editor, true) |
| 62 | e.emit('compositionstart', data) |