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

**URL:** <https://discuss.prosemirror.net/t/there-is-a-problem-with-the-creation-of-the-punctuation-completion-plugin/6426>\
**Category:** Uncategorized\
**Created:** [May 15, 2024, 4:28pm UTC](https://discuss.prosemirror.net/t/there-is-a-problem-with-the-creation-of-the-punctuation-completion-plugin/6426 "2024-05-15T16:28:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Halecoder](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/halecoder/32/3928_2.png) [@Halecoder](https://discuss.prosemirror.net/u/Halecoder)\
**Post date:** [May 15, 2024, 4:28pm UTC](https://discuss.prosemirror.net/t/there-is-a-problem-with-the-creation-of-the-punctuation-completion-plugin/6426/1 "2024-05-15T16:28:05Z")

</div>

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

```js
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;
            }

        }
    }
});

```

---

<div class="post-metadata">

**Author:** ![Halecoder](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/halecoder/32/3928_2.png) [@Halecoder](https://discuss.prosemirror.net/u/Halecoder)\
**Post date:** [May 15, 2024, 4:45pm UTC](https://discuss.prosemirror.net/t/there-is-a-problem-with-the-creation-of-the-punctuation-completion-plugin/6426/2 "2024-05-15T16:45:12Z")

</div>

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](https://github.com/Halecoder/Halecoder.github.io/assets/75030331/bdc278f7-6576-4c33-b280-0193a6aeaf1e)

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [May 15, 2024, 5:46pm UTC](https://discuss.prosemirror.net/t/there-is-a-problem-with-the-creation-of-the-punctuation-completion-plugin/6426/3 "2024-05-15T17:46:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Halecoder](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/halecoder/32/3928_2.png) [@Halecoder](https://discuss.prosemirror.net/u/Halecoder)\
**Post date:** [May 16, 2024, 3:06am UTC](https://discuss.prosemirror.net/t/there-is-a-problem-with-the-creation-of-the-punctuation-completion-plugin/6426/4 "2024-05-16T03:06:07Z")

</div>

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

```js
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(); 
             ...
           }
     }
});

```