Custom writer node works in panel but not on site

Resources Plugins
1

Hi!

I’m trying to add a node for center aligned text.
I’ve gotten it to work as expected in the panel, but on the actual site no tags / classes are added (I tried it both with tags and with adding a class to a

tag).

This is my code

window.panel.plugin("einar/centeralign", {
    writerNodes: {
      center: {
        get button() {
          return {
            icon: "quote",
            label: "Center align"
          };
        },
  
        commands({ type, utils }) {
          return () => utils.toggleWrap(type);
        },
  
        get name() {
          return "center";
        },
  
        get schema() {
          return {
            content: "block+",
            group: "block",
            priority: "51",
            defining: true,
            draggable: false,
            parseDOM: [
              {
                tag: "centeralign"
              }
            ],
            toDOM: () => ["centeralign", 0]
          };
        }
      }
    }
  });

I’m a bit out of my depth here, I’m sure I’m missing something obvious.
Thanks!

2

Please make sure to add your centrealign tag to the list of allowed tags (see Writer marks/nodes | Kirby CMS).

And I think the priority option should be a number, not a string.

3

Hey, thank you!

I thought the allowed tags thing was for tags only and not classes.
But this did it.

4

But you aren’t using classes? But a custom centrealign tag

5

Yeah,
As I mention in the OP I tried both with class and tag, same code except:

            parseDOM: [
              {
                  tag: 'p',
                  getAttrs: (node) => node.classList.contains('centeralign') ? {} : false,
              },
          ],
          toDOM: () => ['p', { class: 'centeralign' }, 0],
          };
        }
      },

Which then worked in the panel, but disappeared on reload and didn’t show on the acutal site. I tried it also after changing priority to a number.

6

Took me a few minutes to realize what’s going wrong. To make it work with a <p> tag and a class:

  1. priority belongs into the parseDOM ruleset:
{
	tag: "p",
	priority: 51,
	getAttrs: (node) =>
		node.classList.contains("centeralign") ? {} : false,
},

otherwise it’s ignored and the default paragraph node will take priority (and your custom node never parsed).

  1. I think for a paragraph tag content: "text*" is the correct one - based on ProseMirror Guide but not 100% sure.
  2. In your command, use utils.setBlockType to make it work correctly with text* I think
commands({ type, utils }) {
	return () => utils.setBlockType(type);
},

With these changes it seems to work for me also with a p.centeralign tag.

7

Thank you so much!