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