search

uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.19k stars 160 forks source link

Textarea and Pre display layer are off by half a line #147

Open fellars opened 3 years ago

fellars commented 3 years ago

Seeing a strange issue where the layers are not in line and showing duplicate data.

See second half of this video: https://www.loom.com/share/2b9a883f95e043508353424e6a2ebdd9

jaywcjlove commented 3 years ago

I may need to test it on Windows Chrome. @fellars

stevemk14ebr commented 3 years ago

I have also seen the behavior around 1:40 where the red underlines are not under the words but instead look like strikethrough and the cursor goes wonky. This has been seen on chrome on mac, as well as firefox on windows.

This occurs after using the textfield for some time and editing text as you'd normally do. I haven't been able to identify which operations cause the issue. Reloading the page usually fixes it. This is with the latest 3.3.6 version

<div id="editor-container" className="row" className="col-12" style={{ height: "100%", width: "100%", userSelect: "none", fontFamily: "Lucida Sans Typewriter", marginTop: "1em" }}>
 {/* subtract header height */}
    <MDEditor height={w_height - 90} value={text} textareaProps={{ spellCheck: true }} onChange={handleTextOnChange} previewOptions={{ transformLinkUri: () => { return "" },
                remarkPlugins,}}/>
jaywcjlove commented 3 years ago

https://codesandbox.io/s/react-md-editor-for-react-147-37n3y?file=/index.js

I don't know how to reproduce it.

@stevemk14ebr

stevemk14ebr commented 3 years ago

yea i understand, it may even be a browser bug for all we know. As far as i can tell you're just using the standard html textarea with spellcheck = true which is where i think this is coming from. If i see it again ill try to debug it live. What's interesting is my application is a redux app, where everything is globally stored, and refreshing the page and restoring state exactly fixes the bug so it's not any kind of weird application state, but rather some other state issue which make me think the browser state is confused internally somehow

stevemk14ebr commented 3 years ago

Hello i think i have a lead. Just now I observed the textarea transition from correct highlighting to off-by-half and then this warning: image

I'm using the components prop to override certain elements with custom react elements. 'Aster' is my child component type and it overrides the render of a special markdown-directive.