Markdown and Media embed integration in Drupal 8

(While I was searching for the right place to post this, I found a very similar post about doing this same thing in Drupal 7.)

Goal

To have media embed support when authoring in Markdown with Drupal 8.

Current Scenario

Content is authored in Markdown and uses the Markdown Filter module to render the markup. The site also uses Media Entity module for images/other media and would ideally leverage the Entity Browser module as well.

If a HTML input format is used, this can be done in Drupal 8 with the aforementioned modules along with editor, ckeditor, and entity_embed, and it works great. However, when Markdown is used, this approach no longer works.

Below are the options I have discovered in my search for a solution. I would love feedback that helps us move towards a better media embedding workflow that is documented and can be used as a standardized approach.

SimpleMDE Markdown Editor

This is a great module that makes authoring in Markdown much more enjoyable. It appears that new buttons can be registered through custom code. So perhaps a patch should be submitted to this module, or a submodule created that replicates Entity Embed functionality to create the same markup it generates now or a token with similar functionality.

There is already quite a bit of discussion around images in the issue queue for the plugin, but I doubt this work would be be directly applicable since the goal would be for deeper Media Entity integration.

This approach seems like the best authoring experience. However, it does add an additional dependency for users who currently author Markdown with no WYSIWYG type module.

CKEditor

As mentioned above, CKeditor always adds wrapping paragraph (<p>) tag markup. If it behaved differently, perhaps we could use it to author Markdown. There is a Stackoverflow discussion about this very thing, and a Drupal module that brings this functionality to Drupal. However, the module just allows temporary editing in Markdown via a toggle, and doesn’t actually save the content in Markdown. It also disables other CKEditor buttons while toggled, which includes the Entity Embed button.

These issues seem to rule out CKEditor. Unfortunately, this negates the great functionality that Entity Embed provides, as it is only compatible with CKEditor.

This is another good Stackoverflow thread on the topic that provides some alternative approaches. However none of them seemed to provide the level of polish or functionality I was looking for.

Token

Another option is to simply render Media Entities via a token. The Token module supports Media Entities, but I couldn’t find a way to pass a specific Media Entity ID to the token, so the token was left without context and didn’t work. Additionally, I don’t believe the Token module supports full entity rendering (I could be wrong on this, though). If the Token solution had worked, the Token Filter module could be enabled in conjunction with the Markdown text input format and this would work fine.

If an existing entity token solution cannot be found, we could add token support to the Media Entity module. Alternatively, we could add generic entity token rendering to the Token module. A Media Entity specific approach offers us the ability to define a shorter/simpler token syntax and provide additional options that are media specific.

Neither of these solutions solve the desire for Entity Browser integration. However, I’m sure some suggested token solution could be built to solve this. We could trigger an Entity Browser window, similar to how the Browse Available Tokens buttons works now. Suggested tokens could be placed into the Entity Browser View or the modal could place the token into the body field at the cursor.

Interim Solution

While we try to sort out an approach that works for the community, I implemented a custom filter that converts tokens such as [media:123] to a fully rendered responsive image. The solution is only for images, so it is not a solution for all types of media, but it works for moment.

Next Steps

I would love to hear other use cases that I have not covered here, and learn how others are solving this problem. Once we agree on the scope of the problem, then we can begin deciding on a solution.