search

Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.39k stars 316 forks source link

Preview mode is screwed up #352

Open abudhakeer opened 2 years ago

abudhakeer commented 2 years ago

I'm submitting a...

I am building a chrome extension with note taking ability in youtube. This based on vanilla JS and I added the easyMDE by adding the JS and CSS mentioned in installation steps. 

<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

The editor loads smoothly in the youtube (when i click the extension icon) and i can play with all the different markdowns.

Screenshot 2021-09-28 at 12 32 45 PM

But when i toggle to preview mode (toolbars in screenshots contain different icons because i was playing with various options, so ignore it.) the styling is screwed up and especially for bulleted list the dots are seen outside the boundary of the div enclosing textarea. See the attached screenshots for clairty.

When i debugged further i was able to figure out that this behaviour is seen only in YT. May be due to some existing styling done in youtube disturbs styling of easyMDE.

In youtube Screenshot 2021-09-29 at 7 15 38 PM

In a different website Screenshot 2021-09-29 at 7 15 45 PM

abudhakeer commented 2 years ago

I was able to resolve the issue by playing with the easymde.css file.

metapodcod commented 2 years ago

I was able to resolve the issue by playing with the easymde.css file.

how did you solve the problem? i have the same problem