Issue when adding decoration only on text nodes which have specific mark and inside current selection

1

Hello,

First of all, thanks a lot for the great lib’

I am encountering an issue at the moment. I want to add a specific class (adding blue border), using plugin & decorations, only on TextNode nodes which have a specific mark and which are inside the current selection. I did the following but it only works in certain cases (see screenshots):

return [
      new Plugin({
        key: new PluginKey("PluginKeyFocus"),
        props: {
          decorations: ({ doc, selection }) => {
            const decorations: Decoration[] = [];

            const { from, to } = selection;
            const activeMarks: { mark: Mark; $pos: ResolvedPos }[] = [];

            doc.descendants((node, pos) => {
              node.marks.forEach((mark) => {
                if (
                  mark.type.name === CustomLink.name &&
                  mark.attrs.id &&
                  mark.attrs.type
                ) {
                  const markRange = getMarkRange(
                    doc.resolve(pos),
                    mark.type,
                    mark.attrs
                  );

                  if (
                    markRange &&
                    markRange.to >= from &&
                    markRange.from <= to
                  ) {
                    activeMarks.push({ mark, $pos: doc.resolve(pos) });
                  }
                }
              });
            });

            activeMarks.forEach(({ mark, $pos }) => {
              const markRange = getMarkRange($pos, mark.type, mark.attrs);
              if (markRange) {
                decorations.push(
                  Decoration.inline(markRange.from, markRange.to, {
                    class: "has-focus",
                  })
                );
              }
            });

            return DecorationSet.create(doc, decorations);
          },
        },
      }),
    ];

It works when only the TextNode with the mark is present: image

Also, it works when there is text after the TextNode with the mark: image

But, if there is text before the TextNode with the mark, it does not work: image

Is this the way to go or am I missing something?

Thank you for the help!

2

What does getMarkRange look like?

3

Sorry, I completely forgot to mention I am using Tiptap. getMarkRange implementation can be found here: getMarkRange

4

Or maybe there is a better way to do this?

5

I’m not sure, but that TipTap code is pretty dodgy. Apart from a completely unused stray call that for some reason is in there, and the pointless array spreads randomly inserted because the developer apparently doesn’t understand readonly arrays, it also returns undefined for the query your code is making, despite there really being a mark at that point. I’m not motivated to debug it further, but I’d write my own routine for this if I were you.

6

Oke, thank you for your time at least!