Replacing textarea bold and italic to html tags

Kirby 3 Questions 🤔
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