w2know commented 2 years ago

Describe the bug Significant white space appear when the markdown text is in preview/toggle mode.

To Reproduce Steps to reproduce the behavior:

Go to The default editor
Paste the following markdown text:
```
# Markdown Cheat Sheet
```

This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for basic syntax and extended syntax.

Basic Syntax

These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.

Heading

H1

H2

H3

Bold

bold text

Italic

italicized text

Blockquote

blockquote

Ordered List

First item
Second item
Third item

Unordered List

First item
Second item
Third item

Code

code

Horizontal Rule

Link

Markdown Guide

Image

alt text

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Table

Syntax	Description
Header	Title
Paragraph	Text

Fenced Code Block

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Footnote

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.

Heading ID

My Great Heading {#custom-id}

Definition List

term : definition

Strikethrough

~~The world is flat.~~

Task List

[x] Write the press release
[ ] Update the website
[ ] Contact the media

Emoji

That is so funny! :joy:

(See also Copying and Pasting Emoji)

Highlight

I need to highlight these ==very important words==.

Subscript

H~2~O

Superscript

X^2^


4. Click the preview toolbar button.
5. Extra white space appear following the text.

**Screenshots**
If applicable, add screenshots to help explain your problem.

** Version information **
- OS: [e.g. Windows 11]
- Browser: [Firefox]
- EasyMDE version: [v2.16.1]
![Screenshot 2022-03-14 at 16-37-18 EasyMDE Demo](https://user-images.githubusercontent.com/4055958/158135694-8e6bc70f-732b-40a4-a577-365919e81c66.png)

Ionaru commented 2 years ago

This happens because the CodeMirror element determines the size of the editor, not the preview element.

The reverse happens when you enter this markdown, the preview element will be too small and becomes scrollable:

![alt text](https://www.markdownguide.org/assets/images/tux.png)
![alt text](https://www.markdownguide.org/assets/images/tux.png)
![alt text](https://www.markdownguide.org/assets/images/tux.png)
![alt text](https://www.markdownguide.org/assets/images/tux.png)

Unless the extra whitespace is causing problems somewhere, I'm inclined to say that this is intended behaviour for the editor.