react-quill富文本 中文输入法触发change问题

使用的富文本是编辑器 react-quill

需求：

点击按钮插入自定义颜色文字，然后手动输入为正常颜色。

问题：

quill组件把带颜色的字体创建个dom, 临近的文字都会整合进一个dom中，导致输入的文字和插入的带颜色 都统一成一个颜色了。

中文输入拼音阶段就开始触发change事件，在转换文本时会把拼音和汉字混杂出现，结果不正确。

解决方案：

绑定compositionstart，compositionend 事件，可监听到非直接输入的输入法输入状态，结束时机准确。

设置个状态，通过判断状态区分 中/英文输入法区别，正确处理逻辑。

// 设置个状态，表示当前是否是非直接输入法输入(如中文，有拼音阶段)
let editorIsChineseStatus = false
useEffect(() => {
    const editorDom = document.querySelector('.ql-editor')
     if (!editorDom) return
    editorDom.addEventListener('compositionstart',function () {
        // 当前是非直接输入法输入
            editorIsChineseStatus = true
       },
       false
    )
    editorDom?.addEventListener('compositionend',function (e) {
              // 非直接输入法输入结束
              editorIsChineseStatus = false
              // 处理逻辑
            todo()
         },
          false
    )
 
}, [])
const editorChange = () => {
    // 直接输入法输入(英文，可直接输入)
    if (!editorIsChineseStatus) {
        // 处理英文输入逻辑
        todo2()
    }
}