Repository navigation
输入翻译在 contenteditable 里写回:先派发可取消的 beforeinput 让受控编辑器按自己的模型插入,没人接管再走原生插入;圆点跟着编辑宿主的 DOM 变动出现(#656) - #698
Merged
Conversation
…插入;圆点跟着编辑宿主的 DOM 变动出现(#656) Co-Authored-By: zhexuancai-uts <261878103+zhexuancai-uts@users.noreply.github.com>
Co-Authored-By: zhexuancai-uts <261878103+zhexuancai-uts@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
#655 之后圆点能在 contenteditable 里出现,但点下去只把译文弹在提示条里,不写回。直接改
innerHTML也不行:Slack、Discord 这类受控编辑器背后是自己的文档模型,绕过它改 DOM,轻则光标乱跳,重则发出去的是模型里的旧内容或空消息。另外,受控编辑器里打字时圆点不跟着出现。根因
replaceInputText()只会select()加execCommand('insertText'),这是文本框的路径。实测 Chrome 的execCommand不派发beforeinput,而 Slate、Lexical 一类编辑器正是靠beforeinput改模型;对它们执行execCommand,DOM 被直接改掉,模型不知道beforeinput后自己重新渲染,浏览器不再派发input事件,而圆点只听input修复
replaceInputText()改为异步):selectionchange(最多 100ms),让编辑器把选区同步进模型beforeinput:inputType 为 insertText,data是译文,targetRanges是全选范围execCommand('insertText'),进原生撤销栈innerHTMLMutationObserver驱动同步,失焦与停用时断开inputText()、圆点上的在飞标记),没有为 contenteditable 另写一套验证
rich-input.html新增一个受控编辑器#editor,仿 Slate:beforeinput一律拦下,改模型后自己重新渲染selectionchange时同步进模型input-dot.test.ts新增 2 条(编辑宿主的 DOM 变动驱动圆点出现与消失;失焦后不再驱动),修复前红{ inputType: 'insertText', data: 译文 },绕过编辑器的 DOM 变动为 0inputpnpm test114 个文件 1407 条全绿;pnpm typecheck通过;pnpm build通过pnpm test:e2e:core86 过、2 跳过、1 不稳定:TC-E2E-86 是设置页站点规则,与本票无关,重试通过,单独连跑 3 次都过Closes #656