Custom writer node not working

I am struggling with implementing a custom Writer node in Kirby 4.2.0.

Basically, I am building on the default paragraph node to build a new largeParagraph node. It shows up in the toolbar and I am able to activate it (sort of), but I don’t get any visual confirmation in the panel.

This is myindex.js:

window.panel.plugin('your/plugin', {
	writerNodes: {
		largeParagraph: {
			get button() {
				return {
					id: this.name,
					icon: 'text',
					label: 'Großer Absatz',
					name: this.name,
					separator: true,
				}
			},

			commands({ utils, schema, type }) {
				return {
					largeParagraph: () => {
						if (this.editor.activeNodes.includes('bulletList')) {
							return utils.toggleList(
								schema.nodes.bulletList,
								schema.nodes.listItem
							)
						}

						if (this.editor.activeNodes.includes('orderedList')) {
							return utils.toggleList(
								schema.nodes.orderedList,
								schema.nodes.listItem
							)
						}

						if (this.editor.activeNodes.includes('quote')) {
							return utils.toggleWrap(schema.nodes.quote)
						}

						return utils.setBlockType(type)
					},
				}
			},

			get name() {
				return 'largeParagraph'
			},

			get schema() {
				return {
					content: 'inline*',
					content: 'block+',
					group: 'block',
					draggable: false,
					parseDOM: [
						{
							tag: 'p',
						},
					],
					toDOM: () => ['p', { class: 'large-paragraph' }, 0],
				}
			},
		},
	},
})
1 Like

I think you need to activate the custom css for the panel and include a style that matches the one you’re adding in the plugin. Try this:

1: Ensure your panel.css is included correctly in your Kirby configuration (site/config/config.php):

return [
    'panel' => [
        'css' => 'assets/css/panel.css'
    ]
];
  1. Make sure your panel.css file contains the new style:
.large-paragraph {
    font-size: 150%;
}

The style can be changed to how you want it to appear in the panel.