Hi everybody,
I’m struggling with what I thought would be simple: adding a custom button to the wonderful kirby-markdown-field by @fabianmichael.
In the readme and in the “extension-examples” directory of the plugin, I can find the exact doc I need, but I think this info might be outdated, regarding some changes in the kirby panel API.
If anybody had any clue on how to adapt this to the new api, that’d be precious.
Thanks.
I dug a step further. Since the Readme and the extension example code seem indeed to be outdated, I tried to mimic what can be found in components/Buttons/Link.js.
NB: my goal is to allow a custom integration of a glossary term + link. In the blueprint, my custom button is declared like this:
buttons:
glossary:
pages:
query: site.find('glossary')
info: "{{ page.title }}"
The plugin index.js
looks like this, but I’m missing something with the endpoints part (when clicking on the button, the dialog shows up, but it’s pages
part returns an error: this.endpoints is undefined
.
get button() {
return {
icon: "document",
label: "Insert Term",
command: () => this.openDialog()
};
},
openDialog() {
const selection = this.editor.view.viewState.state.selection.main;
const contents = this.editor.view.viewState.state.sliceDoc( selection.from, selection.to );
const fields = {
page: {
label: "Page",
type: "pages",
// missing endpoint(s) declaration ?
},
text: {
label: "Term",
type: "text",
placeholder: contents
}
};
this.input.$panel.dialog.open({
component: "k-form-dialog",
props: {
fields: fields
},
on: {
// …
}
});
},
I tried many things without success (and don’t really understand what this endpoints
should be…).
Thanks for any advice.
I didn’t succeed in using a k-form-dialog
, so I switched back to k-link-dialog
, using this:
page: {
label: "Page",
type: "link",
options: ["page"],
help: "Select a Glossary term"
},
Not fully satisfying, since I cannot narrow the subpages search to my “Glossary” children. I leave the question open, in the hope somebody can help me refining this.