Selecting a Highlight's text and removing mark when user starts typing

[navadev]

I'm using the Highlight extension to render highlighted text with <mark>. If the user clicks the mark's contents, we select the text. If the user starts typing, remove the mark.

I wrote the following plugin, but I can't help but think that there's an easier way to accomplish this, or I'm doing something wrong (I am new to Tiptap). Any thoughts? I couldn't find anything relevant in the Selection API.

const CustomHighlight = Highlight.extend({
  addOptions() {
    return {
      ...this.parent?.(),
      multicolor: true,
      HTMLAttributes: {
        class: 'my-custom-class',
      },
    }
  },
  addProseMirrorPlugins() {
    const plugin = new Plugin({
      key: new PluginKey('handleHighlightClick'),
      props: {
        handleTextInput: (view, from, to, text) => {
          view.dispatch(view.state.tr.removeMark(from, to, view.state.schema.marks.highlight))
          return false;
        },
        handleClick: (view, pos, event) => {
          const { state } = view
          const node = state.doc.nodeAt(pos)
          if (node && node.marks.some(mark => mark.type.name === 'highlight')) {
            const findNodePosition = (doc, targetNode) => {
              let position = null;
              doc.nodesBetween(0, doc.content.size, (node, pos) => {
                if (node === targetNode) {
                  position = pos;
                  return false; // Stop traversal
                }
              });
              return position;
            };
            const from = findNodePosition(state.doc, node)// Start of node's content
            const to = from + node.nodeSize// End of node's content
            const textSelection = TextSelection.create(state.doc, from, to)
            // Apply the selection
            view.dispatch(state.tr.setSelection(textSelection))
            return true
          }
          return false
        },
      },
    })

    return [plugin]
  },
})