Using mde.value(newValue) messes up the editor

[mokhosh]

Describe the bug After updated to the latest version, when ever I use mde.value(someNewValue) to change the existing value after initializing the editor, the text jumps down and the caret is in the wrong place and doesn't respond to mouse clicks.

** Version information **

• OS: MacOS
• Browser: Chrome 95
• EasyMDE version: 2.15.0

[Ionaru]

Could not reproduce this bug, mde.value('test') sets the editor correctly to "test" and the editor stays responsive.

Maybe someNewValue has problematic input?

Please provide more information, like a video or screenshots.

Version information

OS: Windows Browser: Chrome 95 EasyMDE version: 2.15.0

[Zignature]

Are you using mde.value(someNewValue) or easyMDE.value(someNewValue)?

I guess the question is for the both of you 😏

[Ionaru]

In both cases I was referring to the variable that holds the EasyMDE instance.

[Log1x]

Sorry for bumping an old issue but I'm running into this when trying to use EasyMDE alongside Alpine.js. I made a Codepen that reproduces the bug.

https://codepen.io/Log1x/pen/MWPoVKN

I've tried refreshing codemirror as well as various settings and nothing seems to prevent the issue from happening.

I tried SimpleMDE as well and it suffers the same issue.

Is there any workaround I could try?

[pankajgarkoti]

+1

Been having this issue everytime I use .value("# some\n## markdown\n") for trying to change the text programmatically. Had the same issue with QuillJS too.

I am trying to use it inside a vue.js component if it matters. The exact error seen in the console is -

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at prepareMeasureForLine (easymde.js?v=50410f66:2594:21)
    at cursorCoords (easymde.js?v=50410f66:2875:29)
    at drawSelectionCursor (easymde.js?v=50410f66:3382:19)
    at prepareSelection (easymde.js?v=50410f66:3373:13)
    at TextareaInput.prepareSelection (easymde.js?v=50410f66:10356:22)
    at endOperation_R2 (easymde.js?v=50410f66:4113:48)
    at endOperations (easymde.js?v=50410f66:4079:11)
    at easymde.js?v=50410f66:4066:13
    at finishOperation (easymde.js?v=50410f66:2223:11)
    at endOperation (easymde.js?v=50410f66:4062:11)

Except for this one very crucial issue, the editor looks fantastic. Right now I am trying to implement a workaround by reinitialising the editor and putting the text in initialValue everytime as this works fine.

[RemiDesgrange]

I use the same trick as @pankajgarkoti but could not track down what was wrong in the value() function. It seems to create a div with top: XXpx where XX depends on the size of the text.

Since initialValue seems to call value() internally, Maybe it's a code mirror bug ? https://github.com/Ionaru/easy-markdown-editor/blob/master/src/js/easymde.js#L1897