Focus Issue on MathLive Integration with Prosemirror

1

I’m integrating MathLive MathfieldElement as an inline node in ProseMirror.

Link: Mathfield Demo · MathLive

The problem is that the MathField focus conflicts with the ProseMirror node focus.

  • When I focus the MathField input, the ProseMirror node selection/focus is removed.

  • ProseMirror focus (ProseMirror-focusednode ProseMirror-selectednode) only works when I right-click the MathField.

  • If I manually set the ProseMirror focus, I can no longer edit the MathField.

I want both to work at the same time:

  • The MathField should remain editable and focused.

  • The ProseMirror node should also stay selected/focused.

get spec(): NodeSpec {
  return {
    group: "inline",
    inline: true,
    leaf: true,
    draggable: true,
    selectable: true,
    focusable: true,
  };
}

commands(schema: MathFieldSchema): CommandConfigurations {
  return {
    insertMathField: this.insertMathFieldCommand(schema)
  };
}

class MathFieldNodeView {
  dom: HTMLElement;
  mathfield: MathfieldElement;

  constructor(node, view, getPos) {
    this.dom = document.createElement("span");

    this.mathfield = new MathfieldElement();
    this.mathfield.value = node.attrs.latex;

    this.dom.appendChild(this.mathfield);

    // Sync MathLive -> ProseMirror
    this.mathfield.addEventListener("input", () => {
      const pos = getPos();

      view.dispatch(
        view.state.tr.setNodeMarkup(pos, undefined, {
          latex: this.mathfield.value
        })
      );
    });
  }
}

Kindly Help me on this issue..

2

Browsers will only focus a single element at a time. So you really cannot, if you focus the MathLive control, keep focus in your ProseMirror editor. You can use CSS to make it look like it is, and handle arrow keys to allow navigation between the two, but focus cannot be shared between them.