import { EditorState, TextSelection } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema, DOMParser } from "prosemirror-model";
import { schema } from "prosemirror-schema-basic";
import { exampleSetup } from "prosemirror-example-setup";
const mySchema = new Schema({
nodes: schema.spec.nodes,
marks: {
color: {
attrs: {
color: { default: "#333" },
},
parseDOM: [
{
tag: "span",
style: "color",
getAttrs(dom) {
if (dom.style[0] && dom.style[0].indexOf("color") != -1) {
return { color: dom.style.color };
} else {
return false;
}
},
},
],
toDOM(node) {
return [
"span",
{
style: node.attrs.color
? "color:" + node.attrs.color.toString()
: "",
},
0,
];
},
},
},
});
console.log(
DOMParser.fromSchema(mySchema).parse(document.querySelector("#content"))
);
window.view = new EditorView(document.querySelector("#editor"), {
state: EditorState.create({
doc: DOMParser.fromSchema(mySchema).parse(
document.querySelector("#content")
),
plugins: exampleSetup({ schema: mySchema }),
}),
});
setTimeout(() => {
view.dispatch(
view.state.tr.setSelection(TextSelection.create(view.state.tr.doc, 1, 3))
);
view.dispatch(
view.state.tr.addMark(
1,
3,
view.state.schema.marks.color.create({ color: "#3A8BFF" })
)
);
}, 1000);
When I use Chinese composition input in the middle of the text, the cursor position will move to the end.
Reproduce this scenario in Google Chrome.
demo address：https://codesandbox.io/p/devbox/color-composition-demo-forked-9qwqlk?workspaceId=ws_5Wmm9TQabDxXmikFBpq68f
