Custom HTML Tags for Portion Marking

1

Hello :wave:

I am using KendoUI’s Editor to create a custom tool to portion mark selected parts of text with a flag. For example, if I have the following text:

Editor sample content is cool stuff

I want to be able to select any portion of that text, click a button, and flag it like this:

Editor sample content is (A) cool stuff

with the HTML looking like this structure:

<p>Editor sample content is <pm classification='A'>(A) cool stuff</pm></p>

I’m having some issues with the ProseMirror part. I have written my node spec for the portion mark tag and I am able to select text and hit the button, which creates my tag, but nukes the text and creates an empty tag.

editor

Node spec:

export const portionMarkNodeSpec = {
  content: 'inline*',
  group: 'block',
  marks: '_',
  draggable: true,
  attrs: { type: { default: 'A' } },
  parseDOM: [
    {
      tag: 'pm[classification]',
      getAttrs: (dom) => {
        let classification = dom.getAttribute('classification');
        return portionMarks.indexOf(classification) > -1
          ? { classification }
          : false;
      },
    },
    0,
  ],
  toDOM: (node) => {
    return [
      'pm',
      {
        classification: node.attrs.type,
        class: 'portion-mark',
      },
      0,
    ];
  },

};

Handler for button:

const handleClick = () => {
    const { state } = view;
    const content = state.schema.text(`(${settings.attrs.type}) `);
    return EditorUtils.insertNode(view, nodeType.createAndFill(settings.attrs, content)); 
  };

NOTE: The settings and nodeType variables come from outside this function, but inside the component.

I’m just not sure how to grab and wrap the text, similar to how the other formatting tools work (Bold, Italics, etc). I would also like to wrap the mark itself (The (A) in this case) in its own tag so as to set its contenteditable attribute to false so it cannot be changed.

Code: StackBlitz

Any assistance would be greatly appreciated!