Cursor selection stops when it reaches to custom inline node

Question

I have a signature node like below -

export default Node.create({
  name: "SignatureNode",
  inline: true,
  group: "inline",
  atom: false,

  addAttributes() {
    return {
      content: {
        default: "",
        parseHTML: (el) =>
          el.getAttribute("content") ?? el.getAttribute("data-content"),
      },
      signId: {
        default: "",
        parseHTML: (el) =>
          el.getAttribute("signId") ?? el.getAttribute("data-signId"),
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: "signature-node",
      },
      {
        tag: "div",
        getAttrs: (node) =>
          (node as HTMLElement).classList.contains("signature-node") && null,
      },
    ];
  },
  addCommands() {
    return {
      addSign:
        (options) =>
        ({ chain, state }) => {
          // ...
        },
    };
  },

  renderHTML({ HTMLAttributes }) {
    const div = document.createElement("div");

    // Create app for getting article component html
    const app = createApp(SignatureNode, {
      content: HTMLAttributes.content,
      signId: HTMLAttributes.signId,
    });

    const mounted = app.mount(div);
    const html = mounted.$el;

    // Unmount app for performance
    app.unmount();

    return html;

  },

  addNodeView() {
    return VueNodeViewRenderer(SignatureNodeWrapper);
  },
});

When i try to move my cursor from outer text to custom node it moves perfectly but when move my cursor while selecting some content then it stops at the custom node starting point.

Here is the gif about that -

i have tried adding contenteditable to my NodeViewWrapper and it works somewhat but it snaps the selection cursor to end of the custom node and doesn't select each element inside the custom node.

  <NodeViewWrapper class="node" contenteditable="true">
    <SignatureNode
      :content="node.attrs.content"
      :sign-id="node.attrs.signId"
      :update-attributes="updateAttributes"
    />
  </NodeViewWrapper>