Replacing textarea bold and italic to html tags

Kirby 3 Questions 🤔
1

Long time ago already solved this in Kirby 2, now looking for way in Kirby 3 to edit and replace provided ** (bold) and * (italic) asterisk symbols in panel textarea editor to html tags:

<b></b> and <i></i>

Im passing content as JSON directly to frontend (React) and text already with html tags would be very useful.

I want on button “B” press that selected text is wrapped with html tag not with double asterisk.

2

Are you using the API or custom endpoints?

3

Using custom endpoints with custom API. One option is to do iteration and replace to html tags before returning API response, but in Kirby2 did it by modify panel text editor function… can not find where to do it in Kirby3

4

What do you mean?

5

So finally got it working - used this plugin GitHub - fabianmichael/kirby-markdown-field: Enhanced markdown editor for Kirby 3, community built.
On its “Footnote” toolbar button base created HtmlBold and HtmlItalic buttons, if anyone interested:

In /site/plugins/markdown-field/src/components/Buttons/HtmlBold.js

import Button from "./Button.js";
import { EditorSelection } from "@codemirror/state";

export default class HtmlBold extends Button {
  get button() {
    return {
      icon: "bold",
      label:
        this.input.$t("markdown.toolbar.button.htmlbold") +
        this.formatKeyName(this.keys()[0]),
      command: this.command,
    };
  }

  keys() {
    return [
      {
        key: "Mod-b",
        run: this.command,
        preventDefault: true,
      },
    ];
  }

  get command() {
    return () =>
      this.editor.dispatch(
        this.editor.state.changeByRange((range) => ({
          changes: [
            { from: range.from, insert: "<bold>" },
            { from: range.to, insert: "</bold>" },
          ],
          range: EditorSelection.range(range.from + 6, range.to + 6),
        }))
      );
  }

  get name() {
    return "htmlbold";
  }
}

In /site/plugins/markdown-field/src/components/MarkdownInput.vue

... all other imports
import Footnote from "./Buttons/Footnote.js";
import HtmlBold from "./Buttons/HtmlBold.js";
import HtmlItalic from "./Buttons/HtmlItalic.js";

...

createToolbarButtons() {
      const available = [
        new Blockquote(),
        ...
        new Footnote(),
        new HtmlBold(),
        new HtmlItalic(),

And similar with HtmlItalic. To be able use these changes its necessary to install node_modules for plugin and each time rebuild plugin (if somethings has changed, but its easy and fast).

And blueprint then looks like this:

fields:
  quote:
    label: Some text area
    type: markdown
    buttons:
      - htmlbold
      - htmlitalic