[playground] Bug: viewport of image imported from Markdown is way larger than viewport of same inserted image. Imported image then can overflow the editor bounds - instead a horizontal scroller is needed or some other solution, but not image overflowing the editor viewport

[vadimkantorov]

I would expect that the default viewport of an image should be the same, regardless of whether it is inserted from a file upload dialog or from markdown import

1. Insert an image

2. It looks okay:

3. After waiting for 3 minutes for markdown export (not sure why it takes so long - maybe trying to highlight the syntax of the base64 string?):

4. Coming back to visual nodes, image size is now much larger:

---

In my custom editor based on react-rich, the image viewport after markdown import even exceeds the editor viewport:

1. Before the markdown export:

2. After markdown import:

[etrepum]

For whatever reason the default image maxWidth in the playground is 500px but the default image maxWidth when importing from markdown in the playground is 800px. If you change those numbers to match then it should look the same. Markdown doesn't have a standard to serialize the maxWidth so if it the image is manually resized then that information is simply lost. If you want to "preserve" the width with markdown then you'd probably want to do some image processing so that the files are different (or wrap the images in SVGs that can do the resizing).

[vadimkantorov]

For whatever reason the default image maxWidth in the playground is 500px but the default image maxWidth when importing from markdown in the playground is 800px.

Thank you! This explains! What also surprised me is that the markdown-imported image's default width overflew the actual editor's viewport... It should probably instead show a horizontal scrollbar or cut off the overflown image part, but not overimpose the editor bounds.

For reference: here is the offending line with 800px: https://github.com/facebook/lexical/blob/657dc44812239e37f4c8b3571b992afe76f46e1c/packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts#L90