Add spaces between Chinese and English

[xiangbanyisheng]

import { Extension } from '@tiptap/core';
import { Plugin, PluginKey } from '@tiptap/pm/state';
import { Decoration, DecorationSet } from '@tiptap/pm/view';
function createWordGapElement() {
const span = document.createElement('i');
span.className = 'word-gap';
span.setAttribute('contenteditable', 'false');
span.innerHTML = '\u2006';
return span;
}
function findWordGaps(doc) {
const decorations = [];
const regex = /([\u4e00-\u9fa5])([a-zA-Z])/g;
const regexRev = /([a-zA-Z])([\u4e00-\u9fa5])/g;
doc.descendants((node, pos) => {
if (!node.isText) return;
let match;
while ((match = regex.exec(node.text)) !== null) {
const deco = Decoration.widget(
pos + match.index + 1,
createWordGapElement(),
{ side: -1 }
);
decorations.push(deco);
}
while ((match = regexRev.exec(node.text)) !== null) {
const deco = Decoration.widget(
pos + match.index + 1,
createWordGapElement(),
{ side: -1 }
);
decorations.push(deco);
}
});
return DecorationSet.create(doc, decorations);
}
export const WordGap = Extension.create({
name: 'wordGap',
addProseMirrorPlugins() {
return [
new Plugin({
key: new PluginKey('wordGap'),
state: {
init(_, { doc }) {
return findWordGaps(doc);
},
apply(transaction, oldState) {
return transaction.docChanged
? findWordGaps(transaction.doc)
: oldState;
},
},
props: {
decorations(state) {
return this.getState(state);
},
},
}),
];
},
});
When I click on the widget, the mouse will focus on the end of the widget, which is exactly what I want. Then I drag and drop the mouse to select the text, while the real purpose is to move the cursor. How can I solve this problem