feat: drag and drop image upload

Author: winverse

apps/book-web/package.json

@@ -10,7 +10,7 @@
     "lint": "next lint",
     "codegen": "pnpm env:copy -e development && graphql-codegen-esm --config codegen.ts -r dotenv/config",
     "env:copy": "tsx ./scripts/copyEnv.mts",
-    "create-component": "tsx ./scripts/createComponent.ts",
+    "create-component": "tsx ./scripts/createComponent.mts",
     "ssm": "tsx ./scripts/ssm.mts"
   },
   "dependencies": {

apps/book-web/src/components/ErrorBoundary/ErrorBoundary.module.css

@@ -0,0 +1,2 @@
+.block {
+}

apps/book-web/src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -0,0 +1,8 @@
+import ErrorBoundary from './ErrorBoundary'
+import { render } from '@testing-library/react'
+
+describe('ErrorBoundary', () => {
+  it('renders successfully', () => {
+    render(<ErrorBoundary />)
+  })
+})

apps/book-web/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,41 @@
+import { ErrorBoundaryProps } from 'next/dist/client/components/error-boundary'
+import React from 'react'
+
+type State = { hasError: boolean }
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+
+    // Define a state variable to track whether is an error or not
+    this.state = { hasError: false }
+  }
+  static getDerivedStateFromError(error: any) {
+    // Update state so the next render will show the fallback UI
+
+    return { hasError: true }
+  }
+  componentDidCatch(error: any, errorInfo: any) {
+    // You can use your own error logging service here
+    console.log({ error, errorInfo })
+  }
+  render() {
+    // Check if the error is thrown
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      // return (
+      //   <div>
+      //     <h2>Oops, there is an error!</h2>
+      //     <button type="button" onClick={() => this.setState({ hasError: false })}>
+      //       Try again?
+      //     </button>
+      //   </div>
+      // )
+    }
+
+    // Return children components in case of no error
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

apps/book-web/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary.jsx'

apps/book-web/src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import '@packages/nextra-editor/style.css'
 import '../styles/global.css'
+import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
 
 import type { AppProps } from 'next/app'
 import CoreProvider from '@/provider/CoreProvider'
@@ -11,11 +12,13 @@ type Props = {
 
 const App = ({ Component, pageProps }: Props) => {
   return (
-    <CoreProvider>
-      <HydrationBoundary state={pageProps.dehydratedProps}>
-        <Component {...pageProps} />
-      </HydrationBoundary>
-    </CoreProvider>
+    <ErrorBoundary errorComponent={undefined}>
+      <CoreProvider>
+        <HydrationBoundary state={pageProps.dehydratedProps}>
+          <Component {...pageProps} />
+        </HydrationBoundary>
+      </CoreProvider>
+    </ErrorBoundary>
   )
 }
 

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

@@ -0,0 +1,77 @@
+import { UploadImageArgs } from '@/api/routes/files'
+import { EditorSelection } from '@codemirror/state'
+import { EditorView } from 'codemirror'
+
+export const handleDrop = (
+  event: DragEvent,
+  view: EditorView,
+  upload: (args: UploadImageArgs) => Promise<string>,
+): void => {
+  if (!event.dataTransfer) return
+  if (event.dataTransfer.files.length === 0) return
+
+  event.preventDefault()
+
+  const files = event.dataTransfer?.files
+
+  const itemArray = []
+  for (let i = 0; i < files.length; i++) {
+    itemArray.push(files[i])
+  }
+
+  const tempUrls: string[] = []
+  const images = itemArray
+    .filter((item) => item.type.includes('image'))
+    .map((item) => {
+      const tempUrl = URL.createObjectURL(item)
+      const main = view.state.selection.main
+      let insert = `![]()`
+
+      if (tempUrl) {
+        insert = `![업로드중...](${tempUrl})\n`
+      }
+
+      tempUrls.push(insert)
+      view.dispatch({
+        changes: {
+          from: main.from,
+          to: main.from,
+          insert,
+        },
+      })
+      return item
+    })
+
+  const promises = images.map((item) => upload({ file: item, info: { type: 'book', refId: '' } }))
+
+  Promise.allSettled(promises).then((result) => {
+    let lastCursorPosition = view.state.selection.main.from
+    result.map((image, index) => {
+      if (image.status !== 'fulfilled') return
+      const tempUrl = tempUrls[index]
+      const imageUrl = `![](${image.value})\n`
+
+      // replace temp url to real url
+      const currentContent = view.state.doc.toString()
+      const tempUrlIndex = currentContent.indexOf('![업로드중...]', lastCursorPosition)
+
+      if (tempUrlIndex !== -1) {
+        view.dispatch({
+          changes: {
+            from: tempUrlIndex,
+            to: tempUrlIndex + tempUrl.length,
+            insert: imageUrl,
+          },
+          selection: EditorSelection.cursor(tempUrlIndex + imageUrl.length),
+        })
+
+        lastCursorPosition = tempUrlIndex + imageUrl.length
+      }
+    })
+
+    // 모든 이미지 처리 후 커서를 마지막 이미지 다음으로 이동
+    view.dispatch({
+      selection: EditorSelection.cursor(lastCursorPosition),
+    })
+  })
+}

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

@@ -10,9 +10,8 @@ export const handlePaste = (
   const clipboardData = event.clipboardData
   if (!clipboardData) return
   const text = clipboardData.getData('Text')
-
   if (text) return
-
+  
   event.preventDefault()
 
   const itemArray = []

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

@@ -10,6 +10,7 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
 import { languages } from '@codemirror/language-data'
 import { handlePaste } from '../events/paste'
 import { useUpload } from '@/hooks/use-upload'
+import { handleDrop } from '../events/drop'
 
 type Config = {
   autoFocus?: boolean
@@ -41,9 +42,7 @@ export const useCodemirror = (container: RefObject<HTMLElement>, config: Config
 
   const eventHandlers = EditorView.domEventHandlers({
     paste: (event, view) => handlePaste(event, view, upload),
-    drop: (event, view) => {
-      console.log('envet', event.dataTransfer?.files)
-    },
+    drop: (event, view) => handleDrop(event, view, upload),
   })
 
   const defaultThemeOption = EditorView.theme({

packages/nextra-editor/src/components/markdown-editor/index.tsx

@@ -1,4 +1,3 @@
-import cn from 'clsx'
 import { useRef } from 'react'
 import { useCodemirror } from './hooks/useCodemirror'
 import Toolbar from './toolbar'