There is a problem with the creation of the punctuation completion plugin

1

I’m making a plugin for punctuation completion, which executes well in English, but there are always some unpredictable problems with Chinese punctuation execution, I guess it’s related to rendering speed? When I make a break point in range.setEndBefore(newQuote); When this line of code, punctuation completion in the Chinese state will be performed very well, I am very confused, can you point it out

const quotes: { [key: string]: string } = {
    "（": "）",
    "【": "】",
    "《": "》",
    "『": "』",
    "“": "”",
    "‘": "’",
    "(": ")",
    "[": "]",
    "「": "」",
    "{": "}",
    '"': '"',
    "'": "'",
    "”": "“",
    "’": "‘"
};
const quotes_reverse = ["”", "’"]; // 左移补全

export const autoPairPunctuationPlugin = new Plugin({
    props: {
        handleDOMEvents: {
             input(view: any, event: any) {
                const quote = quotes[event.data];
                const selection = document.getSelection();
                if (quote && (event.inputType === "insertText" || "insertCompositionText")) {
                    const newQuote = document.createTextNode(quote);
                    const range = selection.getRangeAt(0);
                    const reverse = quotes_reverse.includes(event.data);
                    if (reverse) {
                        const { startContainer, startOffset, endContainer, endOffset } = range;
                        range.setStart(startContainer, startOffset - 1);
                        range.setEnd(endContainer, endOffset - 1);
                    }
                    range.insertNode(newQuote);
                    if (reverse) {
                        range.setStartAfter(newQuote);
                    } else {
                        range.setEndBefore(newQuote);
                    }
                    range.commonAncestorContainer.normalize();
                }
                return true;
            }

        }
    }
});
2

The following is a recording of my operation, you can see that in English, he works very well, but in Chinese, there are always unpredictable symbols, when I hit the breakpoint, it miraculously disappeared, I am very confused, thank you for helping me answer this question

https://github.com/Halecoder/Halecoder.github.io/assets/75030331/bdc278f7-6576-4c33-b280-0193a6aeaf1e

3

Overriding IME input events is not generally supported by browsers. I suspect that has something to do with this issue.

4

Thanks for your answer, I think I have solved it, this is caused by IME problems, because Chinese punctuation is also a process with candidate words, so we need to use compositionend(view: any, event: any) {} for Chinese punctuation input separately for listening processing

export const autoPairPunctuationPlugin = new Plugin({
    props: {
        handleDOMEvents: {
            // only cn
            compositionend(view, event) {
                const quote = quotes[event.data];
                const selection = window.getSelection();
              ....
            },
            // only en
            input(view, event) {
                const quote = quotes[event.data];
                const selection = window.getSelection(); 
             ...
           }
     }
});