Custom writer nodes: parseDom doesn't match tags correctly

[Small-Systems]

Description

Theoretically we can add custom nodes to the writer field.
The docs are vague about what kind of tags it is possible to add with a node. It seems that it is not possible to add/use the <p> tag with a custom class. The docs give an example about resolving competing marks, but it seems that with a priority below 50 the custom node (with class) is removed, and anything above 50 results in strange behavior where the node gets moved/mashed/added elsewhere once parsed.

Expected behavior
Select a paragraph and apply custom node. Paragraph should now have the class of the custom node.
When page is refreshed the paragraph should still have the class of the custom node, and other nodes should remain the same.

Screenshots
Applying the custom node here, everything seems ok before saving and refreshing the page:

Once the page is saved and refreshed the custom node gets added to all <p> tags if the priority is set above 50:

To reproduce

Create a custom node plugin:

window.panel.plugin("vuek/extensions", {
  writerNodes: {
    centered: {
      get button() {
        return {
          icon: "text-center",
          label: "Centered Link",
        };
      },

      commands({ type, utils }) {
        return () => utils.toggleWrap(type);
      },

      get name() {
        return "Centered";
      },

      get schema() {
        return {
          content: "block+",
          group: "block",
          draggable: false,
          parseDOM: [
            {
              tag: "p",
              priority: 51,
              getAttrs: () => {
                return {
                  class: "centerLink",
                };
              },
            },
          ],
          toDOM: () => [
            "p",
            {
              class: "centerLink",
            },
            0,
          ],
        };
      },
    },
  },
});

Your setup

4.4.1

Your system (please complete the following information)

• Device: macbook air M2, 2022
• OS: macOS 14.6.1
• Browser: Firefox
• Version: 131.0.3

[distantnative]

Hi @Small-Systems,

Sorry for the altercation reply, it always takes quite a lot of mental space to climb down the intricacies of ProseMirror (which is the library behind the writer field).

Have a look at https://prosemirror.net/docs/ref/#model.TagParseRule which defines what to put inside of parseDom. To me it looks that either tag needs to be a more specific CSS selector, that only selects those tags with your class present (and not all p tags). Or ensuring getAttrs returns false if the tag parsed does not match (so doesn't have your class applied).

The priority above 51 is right. Just that falsely configured parseDom currently grabs every p tag and you need to ensure it only grabs those belonging to your node (those with the specific class).

Hope this helps! (please let me know if it did, maybe we could make that clearer in the docs then)