Fix editor initialization

app/editor/demo/live-demo.tsx → app/DemoEditor.tsx

@@ -1,5 +1,4 @@
 'use client'
-import MDXEditor from '@/app/editor'
 import {
   toolbarPlugin,
   KitchenSinkToolbar,
@@ -20,6 +19,7 @@ import {
   diffSourcePlugin,
   markdownShortcutPlugin,
   SandpackConfig,
+  MDXEditor,
 } from '@mdxeditor/editor'
 
 const defaultSnippetContent = `
@@ -68,7 +68,7 @@ const allPlugins = (diffMarkdown: string) => [
   markdownShortcutPlugin(),
 ]
 
-export function LiveDemo({ markdown }: { markdown: string }) {
+export default function DemoEditor({ markdown }: { markdown: string }) {
   return (
     <MDXEditor
       markdown={markdown}

app/homepage-editor.tsx → app/HomepageEditor.tsx

@@ -12,8 +12,8 @@ import {
   listsPlugin,
   codeBlockPlugin,
   codeMirrorPlugin,
+  MDXEditor,
 } from '@mdxeditor/editor'
-import MDXEditor from './editor'
 
 const markdown = `
 Click here to start editing this text.

app/editor/demo/page.tsx

@@ -1,13 +1,15 @@
 import fs from 'fs'
-import { LiveDemo } from './live-demo'
+import dynamic from 'next/dynamic'
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const metadata = {
   title: 'Live demo | MDXEditor',
   description: 'Live demo of MDXEditor, an open-source React component for markdown editing',
 }
 
+const LiveDemoEditor = dynamic(() => import('@/app/DemoEditor'), { ssr: false })
+
 export default function Page() {
   const demoMarkdown = fs.readFileSync('./docs/live-demo-contents.md', 'utf-8')
-  return <LiveDemo markdown={demoMarkdown} />
+  return <LiveDemoEditor markdown={demoMarkdown} />
 }

app/page.tsx

@@ -1,19 +1,21 @@
 import { createElement, JSX } from 'react'
 import { twMerge } from 'tailwind-merge'
-import HomepageEditor from './homepage-editor'
 import SampleCodeBlock from './sample-code-block'
 import { FeatureOverviewItem } from './FeatureOverviewItem'
 import SlashedArrowIcon from './images/slashed_arrow.svg'
 import Image from 'next/image'
 import SandpackScreenshot from './images/sandpack-screenshot.png'
 import AppScreenshot from './images/app-screenshot.png'
+import dynamic from 'next/dynamic'
 
 function twElement<T extends keyof JSX.IntrinsicElements>(elemTagName: T, className: string) {
   return ({ className: classNameProp, ...props }: JSX.IntrinsicElements[T]) => {
     return createElement(elemTagName, { ...props, className: twMerge(className, classNameProp) })
   }
 }
 
+const HomepageEditor = dynamic(() => import('./HomepageEditor'), { ssr: false })
+
 const ActionLinkButton = twElement(
   'a',
   'border-solid border-[1px] rounded-md border-neutral-textContrast px-8 py-3 bg-white font-mono text-sm'