Enhancement: Improving Image resulting code in the Markdown parsing library

[SirLouen]

Impacted plugin

None / Other

What

Images doesn't have any width limitations

How

We have introduced the markdown parsing library in our synced handbooks (as part of the whole integration), and it seems that the resulting HTML for the images, when the images are too big, tend to break the page

Example

Ideally, the markdown parser should add at least a max-width:100% and maybe, a object-fit:contain to avoid this unnecessary overflows.

[SirLouen]

I've been digging into this problem.

The problem here is that the Michelf markdown extra library has not been updated since 1.2.8. It's currently in 2.0. Since 1.3 they introduced the attributes, where we could use a syntax like {.class} which technically could solve this directly from Markdown (like ![alt text](image-url){style="max-width:100%"}

Any possibilities of upgrading the https://github.com/Automattic/jetpack/blob/70757f7258d68f9f81f6831aff59e5a19c8e5ec5/projects/plugins/jetpack/_inc/lib/markdown/extra.php

To match the latest version?
https://github.com/michelf/php-markdown/blob/lib/Michelf/MarkdownExtra.php

The problem obviously, is that there will be major breaking changes. the original class Markdown_Parser now implements visibility in their methods and I wonder in which ways this library is being used at this moment. Probably this is the reason of why it got stuck in 1.2.8 and never upgraded into 1.3.

Maybe we can manually implement the attributes changes in the code, although, given that the library is being actively maintained, I don't understand why not keeping it up to the latest version.

[jeherve]

Unfortunately, the package now requires PHP 7.4 or later, while the Jetpack plugin is still compatible down to PHP 7.2, to match the PHP requirements set by Core. We consequently cannot upgrade without any risks.

Ideally, the markdown parser should add at least a max-width:100% and maybe, a object-fit:contain to avoid this unnecessary overflows.

Instead of adding inline styles or a class to each individual image, wouldn't it be better to handle this problem in the theme, for all images at once? Would you be able to add default styles to all images within the post content, so they don't overflow from the parent container?
Images that do have a custom CSS class (like alignment classes) would then overwrite those default styles. I believe that's how most WordPress themes handle the display of images today.