refactor(demo): init editor on specific textarea instead of first in dom

axe312ger · axe312ger · commit d139f0e98f94 · 2019-04-18T20:46:16.000+07:00
diff --git a/packages/demo/src/App.js b/packages/demo/src/App.js
@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
-import editor from '@mdx-live/editor'
+import mdxLiveEditor from '@mdx-live/editor'
 import styled from 'styled-components'
 import '@axe312/easymde/dist/easymde.min.css'
 
@@ -36,11 +36,22 @@ const replacements = {
 }
 
 export default function App() {
-  let easymde
+  const editorRef = useRef(null)
+  const [editor, setEditor] = useState(null)
 
   useEffect(() => {
-    easymde = editor({ components, replacements })
-  }, [easymde])
-
-  return <Textarea id="editor" defaultValue={defaultMarkdownValue} />
+    if (!editor) {
+      setEditor(
+        mdxLiveEditor({
+          components,
+          replacements,
+          easymde: { element: editorRef.current }
+        })
+      )
+    }
+  })
+
+  return (
+    <Textarea ref={editorRef} id="editor" defaultValue={defaultMarkdownValue} />
+  )
 }
