Keep side by side preview after rerender
HananoshikaYomaru opened this issue · comments
Screen.Recording.2022-03-19.at.3.20.37.PM.mov
<SimpleMDE
value={data}
onChange={(text) => {
onChange(text);
}}
options={{
spellChecker: false,
autofocus: true,
initialValue: entry.defaultValue,
showIcons: ["undo"],
hideIcons: ["fullscreen"],
sideBySideFullscreen: false,
inputStyle: "textarea",
}}
getMdeInstance={(instance) => {
if (instance.codemirror.getWrapperElement().nextSibling)
EasyMDE.toggleSideBySide(instance);
}}
getCodemirrorInstance={(instance) => {}}
/>
I used the above code for the editor. When the input is changed, onChange
function will call setState
and trigger a rerender. However, the side by side preview doesn't persist and I have to toggle it manually. I think there is better to achieve this but I don't know how. Can someone help me a bit.
First of all, try to memoize options and all the props you pass down. E.g. use useMemo
and useCallback
where it's needed.
Otherwise, you'll end up creating a new instance of MDE on each keypress more likely.
If it won't help, go ahead and create Codesanbox with reproduction, I'll take a look what's the problem here.
Cheers.