diff --git a/.changeset/five-seals-wonder.md b/.changeset/five-seals-wonder.md new file mode 100644 index 000000000..e3b50b864 --- /dev/null +++ b/.changeset/five-seals-wonder.md @@ -0,0 +1,5 @@ +--- +'@plait/common': patch +--- + +invoking onChange asap to avoid blinking on typing chinese(onComposition) diff --git a/packages/common/src/text/text-manage.ts b/packages/common/src/text/text-manage.ts index 8496708c7..29f2c176e 100644 --- a/packages/common/src/text/text-manage.ts +++ b/packages/common/src/text/text-manage.ts @@ -37,7 +37,7 @@ export class TextManage { textComponentRef!: TextComponentRef; - // add debounce to avoid trigger more times(from onChange and onComposition) onChange when user is typing chinese + // add debounce for composition input end and abandon before change in setTimeout period // be going to attract board children are overwritten when fired more times onChange(eg: board is embed in editor) textChange = debounce((data?: TextManageChangeData) => { if (!data) { @@ -82,10 +82,15 @@ export class TextManage { this.editor = editor; }, onComposition: (event: CompositionEvent) => { + if (event.type === 'compositionend') { + return; + } const fakeRoot = buildCompositionData(this.editor, event.data); if (fakeRoot) { const sizeData = this.getSize(fakeRoot.children[0]); - this.textChange(sizeData); + // invoking onChange asap to avoid blinking on typing chinese + this.options.onChange && this.options.onChange({ ...sizeData }); + MERGING.set(this.board, true); } } };