feat: handle error in editor

Author: winverse

apps/book-web/next.config.mjs

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  transpilePackages: ['next-mdx-remote'],
   reactStrictMode: true,
   experimental: {
     serverComponentsExternalPackages: ['shiki', 'vscode-oniguruma'],

apps/book-web/package.json

@@ -27,7 +27,6 @@
     "graphql-tag": "^2.12.6",
     "gray-matter": "^4.0.3",
     "next": "14.2.3",
-    "next-mdx-remote": "4.4.1",
     "react": "^18",
     "react-dom": "^18",
     "rehype-katex": "^7.0.0",

apps/book-web/src/layouts/NextraLayout/NextraLayout.tsx

@@ -1,8 +1,4 @@
-import NextraDocLayout, {
-  CustomEventDetail,
-  mdxCompiler,
-  nextraCustomEventName,
-} from '@packages/nextra-editor'
+import NextraDocLayout, { CustomEventDetail, nextraCustomEventName } from '@packages/nextra-editor'
 import { themeConfig } from './context'
 import { useEffect, useState } from 'react'
 import { BookMetadata, generateBookMetadata, Pages } from '@/lib/generateBookMetadata'

apps/book-web/src/pages/[username]/[bookTitle]/[[...pageUrlSlug]].tsx

@@ -1,8 +1,6 @@
 import NextraLayout from '@/layouts/NextraLayout'
-import { generateBookMetadata } from '@/lib/generateBookMetadata'
 import getPage from '@/prefetch/getPage'
 import getPages from '@/prefetch/getPages'
-import { mdxCompiler } from '@packages/nextra-editor'
 
 import { GetServerSideProps } from 'next'
 

packages/nextra-editor/src/components/markdown-editor/events/paste.ts

@@ -0,0 +1,8 @@
+import { EditorView } from 'codemirror'
+
+export const handlePaste = (event: ClipboardEvent, view: EditorView) => {
+  console.log('paste event')
+  const clipboardData = event.clipboardData
+  if (!clipboardData) return
+  console.log('clipboardData', clipboardData)
+}

packages/nextra-editor/src/components/markdown-editor/hooks/useCodemirror.ts

@@ -8,6 +8,7 @@ import { getEditorStat } from '../lib/getEditorStat'
 import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
 import { languages } from '@codemirror/language-data'
+import { handlePaste } from '../events/paste'
 
 type Config = {
   autoFocus?: boolean
@@ -19,6 +20,10 @@ type Config = {
   maxWidth?: string | null
 }
 
+// EditorView.domEventHandlers({
+//   paste: handlePaste,
+// })
+
 const External = Annotation.define<boolean>()
 
 export const useCodemirror = (container: RefObject<HTMLElement>, config: Config = {}) => {
@@ -75,13 +80,7 @@ export const useCodemirror = (container: RefObject<HTMLElement>, config: Config
     editable: true,
     placeholder: '당신의 이야기를 적어주세요...',
     indentWithTab: true,
-    basicSetup: {
-      // lineNumbers: true,
-      // history: true,
-      // foldGutter: true,
-      // foldKeymap: true,
-      // dropCursor: true,
-    },
+    basicSetup: true,
   })
 
   const extenstions = [
@@ -92,6 +91,7 @@ export const useCodemirror = (container: RefObject<HTMLElement>, config: Config
     ...defaultExtensions,
   ]
 
+  // create state
   useEffect(() => {
     if (container?.current && !state) {
       const stateCurrent = EditorState.create({
@@ -102,12 +102,14 @@ export const useCodemirror = (container: RefObject<HTMLElement>, config: Config
     }
   }, [container, state, value, extenstions])
 
+  // create view
   useEffect(() => {
     if (container?.current && state && !view) {
       const viewCurrent = new EditorView({
         state,
         parent: container.current,
       })
+
       setView(viewCurrent)
     }
 
@@ -118,6 +120,7 @@ export const useCodemirror = (container: RefObject<HTMLElement>, config: Config
     }
   }, [container, state, view])
 
+  // destroy view
   useEffect(
     () => () => {
       if (!view) return

packages/nextra-editor/src/contexts/markdown-editor.tsx

@@ -34,30 +34,34 @@ type Props = {
 }
 
 export const MarkdownEditorProvider = ({ children, value: { editorValue } }: Props) => {
+  const [isError, setIsError] = useState<boolean>(false)
   const [value, setValue] = useState<string>(editorValue)
   const [mdxSource, setMdxSource] = useState<MDXRemoteSerializeResult | null>(null)
   const [stat, setStat] = useState<Statistics | null>(null)
 
   useEffect(() => {
-    setValue(editorValue)
-  }, [editorValue])
+    if (isError) {
+      setIsError(false)
+    }
+  }, [value])
 
   useEffect(() => {
     async function compileSource() {
-      try {
-        const result = await mdxCompiler(value, {
-          onigHostUrl: process.env.NEXT_PUBLIC_CLIENT_HOST,
-        })
-
-        if (!result) return
+      const result = await mdxCompiler(value, {
+        onigHostUrl: process.env.NEXT_PUBLIC_CLIENT_HOST,
+        isError,
+      })
 
-        setMdxSource(result)
-      } catch (error) {
-        console.error('failed mdx compile: ', error)
+      if (!result) {
+        setIsError(true)
+        return
       }
+
+      setMdxSource(result)
     }
+
     compileSource()
-  }, [value])
+  }, [value, isError])
 
   const context: MarkdownEditorContext = {
     value,

packages/nextra-editor/src/mdx-compiler.ts

@@ -1,4 +1,4 @@
-import type { MdxCompilerOptions } from './index'
+import type { MdxCompilerOptions, PageOpts } from './index'
 import { serialize } from 'next-mdx-remote/serialize'
 import grayMatter from 'gray-matter'
 // import { createProcessor } from '@mdx-js/mdx'
@@ -15,7 +15,7 @@ import remarkMath from 'remark-math'
 import remarkReadingTime from 'remark-reading-time'
 import remarkParse from 'remark-parse'
 import rehypeStringify from 'rehype-stringify'
-// import rehypeRaw from 'rehype-raw'
+import rehypeRaw from 'rehype-raw'
 import remarkMdx from 'remark-mdx'
 
 import {
@@ -33,6 +33,8 @@ import {
 // import theme from './theme'
 import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { truthy } from './nextra/utils'
+import { createProcessor } from '@mdx-js/mdx'
+import { ReadingTime, StructurizedData } from './nextra/types'
 
 const clonedRemarkLinkRewrite = remarkLinkRewrite.bind(null as any)
 
@@ -60,26 +62,25 @@ const MARKDOWN_URL_EXTENSION_REGEX = /\.mdx?(?:(?=[#?])|$)/
 
 export const mdxCompiler = async (
   source: string,
-  { defaultShowCopyCode = true, onigHostUrl = '' }: MdxCompilerOptions = {},
+  { defaultShowCopyCode = true, onigHostUrl = '', isError }: MdxCompilerOptions = {},
 ): Promise<MDXRemoteSerializeResult | null> => {
   const { content } = grayMatter(source)
 
   if (!onigHostUrl) {
     throw new Error('onigHostUrl is required')
   }
 
-  try {
-    const onig = await fetch(`${onigHostUrl}/wasm/onig.wasm`)
-    setWasm(onig)
+  const onig = await fetch(`${onigHostUrl}/wasm/onig.wasm`)
+  setWasm(onig)
 
+  try {
     const result = await serialize(content, {
       mdxOptions: {
-        format: 'mdx',
+        format: isError ? 'md' : 'mdx',
         development: false,
         remarkPlugins: (
           [
             remarkParse,
-            remarkMdx,
             // remarkMermaid, // should be before remarkRemoveImports because contains `import { Mermaid } from ...`
             [
               remarkNpm2Yarn, // should be before remarkRemoveImports because contains `import { Tabs as $Tabs, Tab as $Tab } from ...`
@@ -138,7 +139,9 @@ export const mdxCompiler = async (
 
     return result
   } catch (error) {
-    console.log('serialize error', error)
+    if (process.env.NODE_ENV === 'development') {
+      console.log('Failed to compile source', error)
+    }
     return null
   }
 }

packages/nextra-editor/src/types.ts

@@ -64,6 +64,7 @@ export type MdxCompilerOptions = Partial<
     useCachedCompiler?: boolean
     isPageImport?: boolean
     onigHostUrl: string
+    isError?: boolean
   }
 >