Thanks, I’ve follwed this as best I could and I nearly have it working but, when I go to apply a node, all the nodes are selected…
My plugin js
panel.plugin('aengustukel/custom-text-nodes', {
writerNodes: {
display1: {
get button() {
return {
icon: 'text',
label: 'Display 1',
};
},
commands({ type, utils }) {
return () => utils.setBlockType(type);
},
get name() {
return 'display1';
},
get schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p.display-1',
},
],
toDOM: () => ['p', { class: 'display-1' }, 0],
};
},
},
display2: {
get button() {
return {
icon: 'text',
label: 'Display 2',
};
},
commands({ type, utils }) {
return () => utils.setBlockType(type);
},
get name() {
return 'display2';
},
get schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p.display-2',
},
],
toDOM: () => ['p', { class: 'display-2' }, 0],
};
},
},
display3: {
get button() {
return {
icon: 'text',
label: 'Display 3',
};
},
commands({ type, utils }) {
return () => utils.setBlockType(type);
},
get name() {
return 'display3';
},
get schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p.display-3',
},
],
toDOM: () => ['p', { class: 'display-3' }, 0],
};
},
},
headline1: {
get button() {
return {
icon: 'text',
label: 'Headline 1',
};
},
commands({ type, utils }) {
return () => utils.setBlockType(type);
},
get name() {
return 'headline1';
},
get schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p.headline-1',
},
],
toDOM: () => ['p', { class: 'headline-1' }, 0],
};
},
},
headline2: {
get button() {
return {
icon: 'text',
label: 'Headline 2',
};
},
commands({ type, utils }) {
return () => utils.setBlockType(type);
},
get name() {
return 'headline2';
},
get schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p.headline-2',
},
],
toDOM: () => ['p', { class: 'headline-2' }, 0],
};
},
},
headline3: {
get button() {
return {
icon: 'text',
label: 'Headline 3',
};
},
commands({ type, utils }) {
return () => utils.setBlockType(type);
},
get name() {
return 'headline3';
},
get schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p.headline-3',
},
],
toDOM: () => ['p', { class: 'headline-3' }, 0],
};
},
},
body1: {
get button() {
return {
icon: 'text',
label: 'Body 1',
};
},
commands({ type, utils }) {
return () => utils.setBlockType(type);
},
get name() {
return 'body1';
},
get schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p.body-1',
},
],
toDOM: () => ['p', { class: 'body-1' }, 0],
};
},
},
body3: {
get button() {
return {
icon: 'text',
label: 'Body 3',
};
},
commands({ type, utils }) {
return () => utils.setBlockType(type);
},
get name() {
return 'body3';
},
get schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p.body-3',
},
],
toDOM: () => ['p', { class: 'body-3' }, 0],
};
},
},
},
});
and php:
Kirby::plugin('aengustukel/custom-text-nodes', [
'options' => [
'allowedTags' => [
'p' => ['class' => true]
],
],
]);
// Allow <p> tags with specific classes
Kirby\Sane\Html::$allowedTags['p'] = [
'class' => true,
];
What happens when I apply a node to a paragraph: