Editor Duplicating #284

Activity

1. jdz321 commented on Jun 15, 2022

   

   jdz321

   on Jun 15, 2022

   More actions

   This issue is caused by a new feature in React18: https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state
   I saw this question for a friend, and solved this way. I simply removed the editor dom, there should be a more appropriate way.

   function App() {
     const editor = useRef()
     const wrapper = useRef()
     const editorWillUnmount = () => {
       editor.current.display.wrapper.remove()
       wrapper.current.hydrated = false
     }
     return (
       <div className="App">
         <CodeMirror
           value='<h1>I ♥ react-codemirror2</h1>'
           ref={wrapper}
           options={{
             mode: 'xml',
             theme: 'material',
             lineNumbers: true
           }}
           onChange={(editor, data, value) => {
           }}
           editorDidMount={(e) => editor.current = e}
           editorWillUnmount={editorWillUnmount}
         />
       </div>
     );
   }

   👍React with 👍10Reacted by WangPeng, wuqinglaoxingxing, Tanmay Jagtap, pooriyapfn, Sabin Pandey, Cláudio Silva, DoneDeal0, Max Shepel, Pradeep and Oleksandr Danylchenko

   🎉React with 🎉3Reacted by WangPeng, Cláudio Silva and Pradeep

   ❤️React with ❤️6Reacted by WangPeng, Cláudio Silva, infu, Ivan Zakharov, Novikov Mikhail and Pradeep
2. undeletable commented on Oct 24, 2023

   

   undeletable

   on Oct 24, 2023

   More actions

   @jdz321 Thanks a lot! This works for me too. I'd like to add a note for the ones who use TypeScript like me: this is not type safe solution, since display and hydrated properties aren't exposed as public properties of the corresponding interfaces. So you'll have either to add type assertions to any for them, or add ignore comment. Sounds dirty, but the whole solution is a hack.
3. bilalesi commented on May 27, 2024

   

   bilalesi

   on May 27, 2024

   More actions

   for anyone looking for TS solutions

             editorDidMount={editorElement => {
               (editorRef as React.MutableRefObject<
                 codemirror.Editor
               >).current = editorElement;
             }}
             editorWillUnmount={() => {
               const editorWrapper = (editorRef as React.MutableRefObject<
                 CodeMirror.Editor
               >).current.getWrapperElement();
               if (editorWrapper) editorWrapper.remove();
               if (wrapperRef.current) {
                 (wrapperRef.current as { hydrated: boolean }).hydrated = false;
               }
             }}

   👍React with 👍3Reacted by SIC, Oleksandr Danylchenko and kik-yogawa