Textarea and Pre display layer are off by half a line

[fellars]

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]

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

[stevemk14ebr]

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]

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

I don't know how to reproduce it.

@stevemk14ebr

[stevemk14ebr]

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]

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:

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.