Open kimfucious opened 1 year ago
You can use codesandbox.io
to reproduce your error, I will help you to see.
Let me try... this might take a while.
Hi @jaywcjlove,
I can't seem to reproduce it in CodeSandbox, but stripped out a bunch of stuff like Redux state and some memoized values.
Maybe I'll try to add that back in to see if that's causing it.
I'm rendering the component conditionally, and it is removed from the DOM when the component unmounts.
So far it's a mystery.
Hi, @jaywcjlove.
I've discovered a couple of things:
React, running in dev with Strict Mode enabled, seems to "allow" the duplication, but it's not the root cause.
What I've figured out, by process of elimination, is that this line (from my initial post) is causing it to occur:
const { app } = useAppSelector((state) => state);
useAppSelector
is a hook for Redux.
With that line enabled AND running the app w/o React Strict Mode, the problem only occurs if I navigate away from page and return (using React Router navigate). This adds a second CodeMirrorMerge
element.
If I disable that line AND run the app w/o React Strict Mode, the problem goes away, permanently. The thing is that useAppSelector
is needed by this component as "original" data is coming from Redux state.
Here's a screen capture of the behavior with the useAppSelector
enabled and Strict Mode off.
https://github.com/uiwjs/react-codemirror/assets/26792769/2319ce1b-ef44-4274-b865-3e8c7bbda927
The large space upon return to the merge editor component is caused by the second element being added and the fact that I have set the .cm-mergeView
CSS class with a height of 500px.
I cannot reproduce this in CodeSandbox yet, so I'm assuming there is still something in my code causing the issue.
I don't expect you to try and figure this out, but I'm posting my findings here for future record.
I'm trying to adjust the height of a CodeMirrorMerge.
In reading about how to do this, it seems that the recommended practice is to modify the
.cm-mergeView
CSS class.I did this and noticed that there are multiple
<div>
elements that seem to be duplicate instances.In the below, the highlighted portion represents one of the two instances, and it's empty with a height of ~30px.
The second instance shows what is expected with the text that needs diffing.
One problem around this is that adjusting the height on the
.cm-mergeView
class adjusts the heights on both elements, but the real problem seems to be that there are duplicates.I can't think of anywhere in my code that is creating two codeMerges, but I could very well be doing something wrong.
Any help toward figuring out this issue would be most appreciated.