How to prevent my customized Mark from being selected

1

I create Mark by the tiptap Mark.create({}). I don’t want users to select this Mark. How can I do that? The Mark code is below:

import { Mark, mergeAttributes } from '@tiptap/core';

const TextColor = Mark.create({
  name: 'textColor',
  addOptions() {
    return { HTMLAttributes: {} };
  },

  addAttributes() {
    return {
      attrs: {
        default: { color: 'gray' },
        parseHTML: (element) => element.getAttribute('data-text-color'),
        renderHTML: ({ attrs }) => {
          if (!attrs || !attrs.color) {
            return {};
          }
          const { color, ...leftAttrs } = attrs;
          if (!leftAttrs.style || typeof leftAttrs.style !== 'string') {
            leftAttrs.style = '';
          }
          leftAttrs.style = `color: ${color}; ${leftAttrs.style}`;
          return {
            'data-text-color': color,
            ...leftAttrs,
          };
        },
      },
    };
  },
  parseHTML() {
    return [{ tag: 'span' }];
  },
  renderHTML({ HTMLAttributes }) {
    return [
      'span',
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
      0,
    ];
  },
});

export default TextColor;
2

If you want to avoid selection of the text inside the mark, I think you can use user-select: “none” css.

Idk if that prevents the selection from happening inside prosemirror though (probably does). If it doesn’t, you will probably have to use a node instead and selectable: false in the spec.