I’m effectively creating a markdown note taking application - I decided to use the application for myself yesterday, and I noticed that when my note for a single day (or single instance of a CodeMirror component) got to a certain length, the application of the style to the header component started to flicker on every state update.
Having ripped apart my application down to the bare minimum to replicate it, it appears to be to do with the length of the note and application of custom styles after a certain point.
I removed the line wrapping attribute as the behaviour occurs both with and without it
Any help would be very much appreciated.
PS, I’m completely new to CodeMirror, so go easy on me, and if there are any suggestions on fixes and someone has seen this before, any additional explanation for a beginner would be great. Thanks.
PPS I did see suggestions of applying markdown updates in batches, but I’m going for a real-time update to the formatting as the user enters markdown - which was working great up to this point.
If I try to reproduce this without the React magic, I don’t see the flickering. So my first impulse would be to say this may not be related to the core library.
I believe it was to do with the circular nature of the handleContentChange updating the state of the entryContent which in itself is the initial value of the component.
React appears to handle this OK up until a certain point, then you start to see that behaviour if the entry gets too big.
So the solution I found was to not have the initial value property of the CodeMirror component tied to the method that is updating that value in the onChange event + instead do the following:
Set the initial value property of the CodeMirror component to be whatever you want the initial value to be - passed in on props to the component say.
In the onCreateEditor of CodeMirror initialise a reference (editorViewRef = useRef) hook which allows you to effectively reach into CodeMirror from your React component to get the current text (editorViewRef.current.state.doc.toString()) that has been entered into CodeMirror
In my instance, I’m periodically storing this value to a data store, so ensure you are storing the current CodeMirror text value into wherever the variable is that is read back into the value which is passed as the initial value of the CodeMirror component should you need to perform a full refresh of your page/component.
This decouples the loop that results in a re-render.
So short answer - yes it was some React magic that was causing the issue - I was constantly updating the value that was being passed in to CodeMirror that was causing a re-render - which works OK for smaller notes, but causes that issue as it gets larger.