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

Cursor not showing on editor, can't select text. #127

Open Jorge0117 opened 4 years ago

Jorge0117 commented 4 years ago

Hello, I installed this editor on an angular 8 project. It seems to be working fine, but the cursor is not showing. I also can't select text. It makes it difficult to use the editor correctly. I tried both the master branch and the typescript one, with the same results. I installed it using npm and imported the json to the styles.css file. Do I need to do anything else? Thank you

jlgrau commented 4 years ago

Hello @Jorge0117 Did you find a solution for your Angular integration?

DavidAntaramian commented 4 years ago

I experienced the same issue when trying to setup EasyMDE using Webpack (Elixir Phoenix project). Notably, the "sizing" string (a string of x characters at the top of the textarea) was visible, and the text wasn't properly contained by the boundary of the editor.

The problem ended up being my CSS import. I originally had this:

@import '../node_modules/easymde/src/css/easymde.css';

However, that only imports the CSS specific to EasyMDE; the styling isn't complete because it doesn't contain the CodeMirror CSS. This is what I needed instead:

@import '../node_modules/easymde/dist/easymde.min.css';

That will provide you with the distribution CSS which includes the dependency styles.

A-312 commented 4 years ago

Please add a full simple example to reproduce bugs/wrong behavior.

izzues commented 4 years ago

My case was exactly the same as @DavidAntaramian (Webpack on Phoenix project).

Is it expected that I import the CSS file separately or should import EasyMDE from 'easymde' be enough?

Ionaru commented 4 years ago

You'll need to import the CSS file as well.

izzues commented 4 years ago

Alright, thanks!

Maybe adding this info to the README would prevent confusion in the future.