Custom marks with pop-up

Plugins
1

Hi,

I’m trying to implement a custom mark for the writer field using the new extension API. I can get the “highlight” example working fine, but I can’t reproduce the “link” or “email” marks. I can’t get a pop-up to show up, say, to enter a URL or an email, even if I copy-paste the default implementation.

Am I missing a piece of documentation?

Thanks.

1 Like
2

I am trying to do a similar thing:

In order to create inline Buttons in a writer field I want to add a custom mark. The goal for me is to have a mark wich adds a span element with a class around the selected text. Following the Docs this works fine.

The problem is that I need two different Marks (Filter A / Filter B). If I create two custom marks wich both create a span (with different classes), all marked text ends up being the first mark in the plugin. I guess this has to do with the priority definition of the parseDOM (Discussed here: Classes added by Custom Nodes are stripped out of the Writer field when refreshing the page/ProseMirror re-rendering the Writer · Issue #6587 · getkirby/kirby · GitHub).

So my idea for a solution is to create a custom mark wich creates a span but let me select a class name in a Popup. Similar to the link mark.

I found a similar topic but so far without a solution: Custom writer mark, open custom link dialog

Any hints wich part of the custom mark creates the popup, any directions? I am quite new to custom marks.

3

The link mark emits the link event from the command. This event is then picked up by a global event handler in the Writer component. This event handler opens the dialog and triggers another ProseMirror command to update the mark with the result of the dialog.

Since you need a custom dialog, you cannot use the link event. Instead, you can copy the this.$panel.dialog.open() code to your mark implementation directly and adapt it to your needs.

If your marks only differ by the class name, you could alternatively also adapt your parseDOM rules so each mark only grabs the instances it should. The link mark is a good example for such custom selectors.