How can I convert a Mark when the tag to be converted as a Mark itself contains information related to other Marks?

[irico3]

When converting the DOM as follows.

<div><strong style="color:red">aaaa</strong></div>

Then, when the following extensions were enabled.

• Color by @tiptap/extension-color
• TextStyle by @tiptap/extension-text-style
• Bold by @tiptap/extension-bold

The result of the conversion is as follows.

<p><strong>aaaa</strong></p>

As you can see, font color is not enabled.
I tried to fix it by extending Bold, Color and TextStyle, but it did not work.
This occurs not only with Bold, but also with other Marks (Underline, Strike, Italic, etc.).

Is there any good solution?
Any advice is welcome!

[guanriyue]

By default, ProseMirror does not perform secondary matching on tags that have already been matched. For example, if a strong tag has been matched to bold, it will not be matched again to textStyle.

Fortunately, ProseMirror provides a solution: by setting consuming to false, you can enable secondary parsing. https://prosemirror.net/docs/ref/#model.GenericParseRule.consuming.

You only need the following code to complete the task:

1. Make textStyle parse all tags with a style attribute, and set consuming to false.
2. Assign a higher priority to textStyle so that it gets parsed first. For instance, for style="font-weight: bold; color: red", if bold is matched first, textStyle won't be parsed. This happens because the Bold extension provided by Tiptap does not set consuming.

const TextStyle = TiptapTextStyle.extend({
  priority: 1000,

  parseHTML() {
    const parent = this.parent?.() || [];

    return [
      ...parent,
      {
        tag: "[style]",
        consuming: false,
      },
    ];
  },
});

The solution above parses a wide range of elements. You can use getAttrs to narrow down the scope. For example, if you don't want td tags to match textStyle, exclude them in getAttrs. Similarly, if you want it to apply only to specific tags, you can achieve that in the same way.

I have tried using StyleParseRule for parsing—it works but has significant limitations. It can only match a single attribute. For instance, when both color and font-family are present, it can only parse one of them (depending on priority). This makes it insufficient as a general solution.

The following CodeSandbox is an example.

https://codesandbox.io/p/sandbox/tj5tvy

[nperez0111]

Great answer @guanriyue!

I think this should probably be a default for TextStyle extension, huh?

[guanriyue]

Yes, I believe this solution is quite versatile. Unfortunately, I don't have the time to submit a PR right now, so it might need you or someone else to handle this.

[nperez0111]

Did so here: #5979