Custom writer marks in Kirby 4

Plugins
1

I’m trying to create a plugin for adding a custom mark to Kirby’s writer field with the help of the instructions from Kirby’s reference.

window.panel.plugin("my/plugin", {
  writerMarks: {
    highlight: {
      get button() {
        return {
          icon: "palette",
          label: window.panel.$t("color"),
        };
      },

      commands() {
        return () => this.toggle();
      },

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

      get schema() {
        return {
          parseDOM: [{ tag: "mark" }],
          toDOM: () => ["mark", 0],
        };
      },
    },
  },
});

With the given code, a highlight button appears in the panel as expected and text can be highlighted.

1-custom-mark-with-mark-tag
1-custom-mark-with-mark-tag1376×280 17.6 KB

But the text is not displayed on the website and also disappears from the panel field after the page is reloaded.

2-custom-mark-with-mark-tag-after-reloading
2-custom-mark-with-mark-tag-after-reloading1376×280 4.87 KB

Interestingly, it works with tags other than ‘mark’, e.g. with ‘small’ or ‘sub’:

get schema() {
        return {
          parseDOM: [{ tag: "small" }],
          toDOM: () => ["small", 0],
        };
      },

3-custom-mark-with-small-tag
3-custom-mark-with-small-tag1376×280 16 KB

4-custom-mark-with-small-tag-after-reloading
4-custom-mark-with-small-tag-after-reloading1376×280 4.95 KB

Can anyone help?

2

The docs should probably mention this. But “unknown” (to Kirby) tags are filtered out by the sanitizer.
You can allow tags in your plugin’s index.php

<?php 

Kirby\Sane\Html::$allowedTags['mark'] = true;

Kirby::plugin('mark/eg', [
    // ...
]);
3

That did the trick. Thank you very much!