fix: code split the source editor

See #10
mdx-editor · Jul 10, 2023 · 01d0f2a · 01d0f2a
1 parent 9c1b0e4
commit 01d0f2a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git a/src/ui/SourceEditor.tsx b/src/ui/SourceEditor.tsx
@@ -0,0 +1,29 @@
+import { markdown as markdownLanguageSupport } from '@codemirror/lang-markdown'
+import type { CodeMirrorRef } from '@codesandbox/sandpack-react/components/CodeEditor/CodeMirror'
+import { SandpackProvider, CodeEditor as TheEditorFromSandpack } from '@codesandbox/sandpack-react'
+import React from 'react'
+import { useEmitterValues, usePublisher } from '../system/EditorSystemComponent'
+
+export const SourceEditor = () => {
+  const [markdown] = useEmitterValues('markdownSourceFromEditor')
+  const updateMarkdown = usePublisher('markdownSourceFromEditor')
+  const codeMirrorRef = React.useRef<CodeMirrorRef>(null)
+
+  return (
+    <div>
+      <React.Suspense fallback={null}>
+        <SandpackProvider>
+          <TheEditorFromSandpack
+            showLineNumbers
+            additionalLanguages={[{ name: 'markdown', extensions: ['md'], language: markdownLanguageSupport() }]}
+            initMode="lazy"
+            filePath={`file.md`}
+            code={markdown}
+            onCodeUpdate={updateMarkdown}
+            ref={codeMirrorRef}
+          />
+        </SandpackProvider>
+      </React.Suspense>
+    </div>
+  )
+}
diff --git a/src/ui/SourcePlugin.tsx b/src/ui/SourcePlugin.tsx
@@ -1,15 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { markdown as markdownLanguageSupport } from '@codemirror/lang-markdown'
-import { SandpackProvider, CodeEditor as TheEditorFromSandpack } from '@codesandbox/sandpack-react'
-import { CodeMirrorRef } from '@codesandbox/sandpack-react/components/CodeEditor/CodeMirror'
 import React from 'react'
 import { Diff, Hunk, parseDiff } from 'react-diff-view'
 import { diffLines, formatLines } from 'unidiff'
-import { useEmitterValues, usePublisher } from '../system/EditorSystemComponent'
+import { useEmitterValues } from '../system/EditorSystemComponent'
 
 import 'react-diff-view/style/index.css'
 
+const SourceEditor = React.lazy(() => import('./SourceEditor').then((module) => ({ default: module.SourceEditor })))
+
 export function DiffViewer({ oldText, newText }: { oldText: string; newText: string }) {
   const diffText = formatLines(diffLines(oldText, newText), { context: 3 })
   if (diffText.trim() === '') return <div>No changes</div>
@@ -38,29 +37,11 @@ export const ViewModeToggler: React.FC<ViewModeProps> = ({ children }) => {
     <div>
       <div style={{ display: viewMode === 'editor' ? 'block' : 'none' }}>{children}</div>
       {viewMode === 'diff' ? <MarkdownDiffView /> : null}
-      {viewMode === 'markdown' ? <SourceEditor /> : null}
-    </div>
-  )
-}
-
-export const SourceEditor = () => {
-  const [markdown] = useEmitterValues('markdownSourceFromEditor')
-  const updateMarkdown = usePublisher('markdownSourceFromEditor')
-  const codeMirrorRef = React.useRef<CodeMirrorRef>(null)
-
-  return (
-    <div>
-      <SandpackProvider>
-        <TheEditorFromSandpack
-          showLineNumbers
-          additionalLanguages={[{ name: 'markdown', extensions: ['md'], language: markdownLanguageSupport() }]}
-          initMode="lazy"
-          filePath={`file.md`}
-          code={markdown}
-          onCodeUpdate={updateMarkdown}
-          ref={codeMirrorRef}
-        />
-      </SandpackProvider>
+      {viewMode === 'markdown' ? (
+        <React.Suspense fallback={null}>
+          <SourceEditor />
+        </React.Suspense>
+      ) : null}
     </div>
   )
 }