Markdown block: support HTML in block

[jeherve]

This was originally reported in https://github.com/Automattic/jetpack/issues/11147

Ideally, the block would support inserting content in HTML as well as Markdown, as sometimes folks prefer to use HTML directly, for things that may be difficult or impossible to do with Markdown. In the example below, all links should be converted into links.

[a link](https://wordpress.com). And <a href="https://wordpress.com">a link</a>.

<a href="https://wordpress.com">a link</a>

[derek-shnosh]

Just throwing my support in for this feature; I am currently maintaining two blogs with the same content to determine a preferred platform and this is a major pain-point for me. I strongly prefer writing in MD but have two very common use cases for embedding HTML in the MD block;

1. I am wrapping code blocks in <pre><code> instead of fences ``` for PrismJS syntax highlighting plugin support; e.g. line-highlighting, command-line.
2. I use HTML5 <details> regularly to collapse long code blocks or quasi-relevant snippets.

I maintain my content as static .md files on a private Git server, which provides a few favorable benefits; e.g. backups, offline editing, simplicity of dev environment for theme editing against my content, etc.

[RCowles]

Just noting that this was also reported/requested in 2019865-zen

[phillipjohnston]

Since the markdown block doesn't auto-generate header IDs (#3562) and the underlying library's extras field isn't available, HTML is needed to add anchor links for an internal table of contents.

[spncr]

I spoke to a WordPress.com user and developer who is disappointed that we say we support the markdown-it parser but we don't support inline HTML.

Their thoughts:

So Jetpack Markdown is using the markdown-it parser. This parser has the ability to use inline HTML, however, the markdown-it parser feature is not enabled in Jetpack. Clearly markdown-it supports the feature. How can Wordpress request Jetpack to enable this markdown-it parser feature as described on the Jetpack Markdown Doc Page? Wordpress.com Developers are suffering because a documented feature does not work!

I hope y'all will consider making an update to support inline HTML within the Jetpack Markdown block.

[aletheia7]

Please enable inline HTML in Jetpack by changing html: false to html: true. See https://github.com/Automattic/jetpack/blob/795f8dab3cff198b5111125a041171d2d4a5794e/extensions/blocks/markdown/index.js#L60

[GioLogist]

@aletheia7 Did you confirm that this is the only change needed? Just tried making the changed locally (I edited the compiled editor.js, not the source file) with no luck.

Do you have instructions for the workaround?

[aletheia7]

No.

The above change is located in index.js, not editor.js.

Perhaps your change did not end-up in the browser? Perhaps wordpress is serving an unchanged cached copy? Verify in the browser that html: true and that you have html in the markdown.

[GioLogist]

@aletheia7 Ok so I made the edit you suggested and rebuilt, following the development environment instructions. Now, the only difference I see is an added "Edit as HTML" button

Upon clicking, it shows the HTML output of my markdown

So, I attempt to add some more HTML while in this view

Now, I get an error saying "This block contains unexpected or invalid content"

If I press "resolve" or "convert", it converts the block to a full html block (no more markdown).

---

So the above not working, I tried just entering HTML in the markdown block to see if that's supported now.

I get the same as before (escaped html)

---

So all-in-all, following those instructions only allows me to convert my block to HTML. Not embed HTML in my markdown block.

[GioLogist]

Following up on this, to see if any of the top contributors have any thoughts?

cc @jeherve @georgestephanis @dereksmart

[JohnRDOrazio]

Just a thought: could this perhaps depend on the wp_kses() filter? Maybe HTML elements need to be enabled when going through the filter, using wp_kses_allowed_html() ? Idk just a thought https://github.com/Automattic/jetpack/blob/ca30cfd8b3e519987cbd8f3e4aaf129e0e09c02c/modules/markdown/easy-markdown.php#L429

[0xLun]

Any update about this issue ? I need to add html tag in my markdown but it's impossible. The workaround quoted above doesn't seem to work anymore since jetpack/extensions/blocks/markdown/index.js doesn't exist.