The Chinese combined input method encounters cursor error issues

1 
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);

image
image388Ă—140 5.36 KB

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

2

image
image695Ă—743 26.1 KB

If I comment out the operation of obtaining the dom property and directly return { color: “#3A8BFF” }, then this problem is solved. Why is this? Besides, it’s impossible to hardcode a fixed color here.

3

Maybe there’s another CSS property being added? Why use style[0] rather than directly looking at style.color here?

4

imageEven after the modification, the effect will still be unsatisfactory.

5

Your parse rule still confuses StyleParseRule and TagParseRule, and doesn’t type check. If you’re vibe coding this, please don’t expect me to fix the resulting mess. If you’re not, read the docs more closely.

1 Like