Adding a writer mark that opens a dialog for input

The CMS Questions
1

I want my client to be able to add a tooltip (using tippyjs) to some words in the writer field. For this to work, the selected word should be wrapped in a span with an attribute of data-tippy-content=“value”.

I’m looking for a way to open a dialog for an input of the attribute value. How can I do so? I’ve created a new plugin folder with a index.js

window.panel.plugin("tippymark", {
  writerMarks: {
    tippymark: {
      get button() {
        return {
          icon: "info",
          label: "Add info"
        }
      },

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

      get name() {
        return "tippymark"
      },

      get schema() {
        return {
          parseDOM: [{ tag: "span" }],
          toDOM: () => ["span", { "data-tippy-content": "value" }, 0]
        };
      }
    }
  }
});

Which works in the way that it adds the right attribute to the selected word but there is no way for me to add a value to it. I’ve been going through the docs and am not able to figure out what to do. If there is a better way of going about this I’d also like to know:)

2

You can take a look at the core email mark. You will see it needs a few different commands, not just one default, to differentiate the actions (e.g. opening dialog vs. inserting your markup after submitting the dialog.

The core email mark emits this to open the dialog: kirby/panel/src/components/Forms/Writer/Marks/Email.js at main · getkirby/kirby · GitHub

This you cannot do for yours, but instead you can open a dialog, e.g. like

this.$panel.dialog.open({
	component: "k-form-dialog",
	props: {
		fields: {...},
		value: {...}
	},
	on: {
		cancel: () => this.editor.focus(),
		submit: (values) => {
			this.$panel.dialog.close();
			this.editor.command("yourCommandToAddMarkUpToEditor", values);
		}
	}
});
3

Thanks for your reply Nico. Unfortunetely this seems to be a bit to technical for me to implement. I was hoping it was as easy as creating a blueprint for a page but than for a dialog.

Can you think of different way for me to let the user easily integrate something like this (maybe a different field) that is a bit less advanced?

4

I think a normal textarea field with a custom KirbyTag would be my choice: KirbyTags | Kirby CMS

1 Like
5

Thanks! This solved the problem that I can get them to insert (i: text: VALUE1 info: VALUE2) in the text. That solves the issue but isn’t super intuitive of course… There probably isn’t an easy way to add this to the buttons (similar to the links)?

6

You can add buttons to the textarea via this extension: Textarea buttons | Kirby CMS