TinyMCE editor events and transformation APIs

[danielbachhuber]

One of the plugins I help create is Tasty Links, which automatically adds links around specific keywords. For example, here is Gutenberg automatically linked to wordpress.org/gutenberg:

If you click on a Tasty Link, a custom preview toolbar (based on editor.wp._createToolbar) appears:

Notably, this isn't the standard WordPress link UX. The previewed Tasty Links look like links because of a custom editor stylesheet. In reality, they're <span> stripped on save:

If I click the "Remove" icon in the preview toolbar, then the <span> is replaced with a HTML comment that is persisted on save:

Here's the corresponding JavaScript for my TinyMCE plugin.

In order to recreate the same Tasty Links UX in Gutenberg, I think all I need is:

• Ability to bind to a click event within Gutenberg.
• editor.dom equivalent (which supports select(), addClass(), removeClass(), etc).

Related #4658

[danielbachhuber]

@azaozz @iseulde Could I get your thoughts on ^ when you have a moment?

[ellatrix]

I'm not entirely sure what you're trying to create. So far I understand:

• You type some words.
• One keyword that has been typed should be recognised and wrapped in a link?
• The link should be editable? Or it it fixed?
• What does the span do? What should be output on the front-end?

[danielbachhuber]

I'm not entirely sure what you're trying to create.

The product launched, so there's more detail available here. In a nutshell, the plugin automatically adds links around specific keywords on the frontend. But in the backend, rather than render the links themselves, the plugin creates a link-like UX around <span> in the editor.

Taking a step back towards Gutenberg, what seems to be missing are APIs equivalent to TinyMCE.activeEditor and TinyMCE.dom.DOMUtils.

Related #3688

[ellatrix]

I'm hesitant to let plugins use TinyMCE APIs because this might all change. We'll have to create something here to would enable you to create a similar experience. How about adding the links in the content before it loads in the editor? Why does it have to be a span? Just trying to understand it better.

[danielbachhuber]

It has to be a <span> to avoid standard editor behavior around <a>. Specifically, if the <span> preview is removed:

Then a HTML comment is added:

I'm hesitant to let plugins use TinyMCE APIs because this might all change.

I'm not suggesting we use TinyMCE APIs directly. A reasonable alternative would be to expose named Gutenberg APIs whose underlying implementation can change.

More so though, I'd love to get up to speed on any existing conversation that's been had on this topic.

[ellatrix]

Okay. It would almost seem ideal if it followed the normal link behaviour where the link would be added on text input only. Then when the user removes it, it just would no longer show up. Might not be what you want though. Not sure atm how else this would be possible without a huge amount of code.

Related: #771.

[mtias]

Closing to focus on #3688.

[gziolo]

We have just landed Format API with #10068. It allows registering any format you need. We are still working on a way to give better control which control can be displayed for a given block and documentation. It should be all ready early next week.

I think that most of the functionality described here can be recreated with new API, I'm only not quite sure about HTML comment.

[danielbachhuber]

@gziolo @iseulde The HTML I need to target is this:

<span class="tasty-link" data-tasty-link-href="https://www.bobsredmill.com/">Bob's Red Mill</span>

Is it possible to registerFormat() for span.tasty-link?

[ellatrix]

@danielbachhuber you can now target it with tagName: 'span' and className: 'tasty-link'. See #11488. Do you need anything else?

[danielbachhuber]

@iseulde Should be good now, thanks!