feat: clipboard image upload

Author: winverse

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

@@ -1,8 +1,78 @@
+import { UploadImageArgs } from '@/api/routes/files'
+import { EditorSelection } from '@codemirror/state'
 import { EditorView } from 'codemirror'
 
-export const handlePaste = (event: ClipboardEvent, view: EditorView) => {
-  console.log('paste event')
+export const handlePaste = (
+  event: ClipboardEvent,
+  view: EditorView,
+  upload: (args: UploadImageArgs) => Promise<string>,
+): void => {
   const clipboardData = event.clipboardData
   if (!clipboardData) return
-  console.log('clipboardData', clipboardData)
+  const text = clipboardData.getData('Text')
+
+  if (text) return
+
+  event.preventDefault()
+
+  const itemArray = []
+  for (let i = 0; i < clipboardData.files.length; i++) {
+    itemArray.push(clipboardData.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/hooks/useCodemirror.ts

@@ -9,6 +9,7 @@ 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'
+import { useUpload } from '@/hooks/use-upload'
 
 type Config = {
   autoFocus?: boolean
@@ -20,18 +21,14 @@ type Config = {
   maxWidth?: string | null
 }
 
-// EditorView.domEventHandlers({
-//   paste: handlePaste,
-// })
-
 const External = Annotation.define<boolean>()
 
 export const useCodemirror = (container: RefObject<HTMLElement>, config: Config = {}) => {
   const { theme: currentTheme } = useTheme()
   const { value, setValue, setStat } = useMarkdownEditor()
   const [state, setState] = useState<EditorState | null>(null)
   const [view, setView] = useState<EditorView | null>(null)
-
+  const { upload } = useUpload()
   const {
     autoFocus = true,
     height = null,
@@ -42,6 +39,13 @@ export const useCodemirror = (container: RefObject<HTMLElement>, config: Config
     maxWidth = null,
   } = config
 
+  const eventHandlers = EditorView.domEventHandlers({
+    paste: (event, view) => handlePaste(event, view, upload),
+    drop: (event, view) => {
+      console.log('envet', event.dataTransfer?.files)
+    },
+  })
+
   const defaultThemeOption = EditorView.theme({
     '&': {
       outline: 'none !important',
@@ -88,6 +92,7 @@ export const useCodemirror = (container: RefObject<HTMLElement>, config: Config
     hyperLink,
     updateListener,
     defaultThemeOption,
+    eventHandlers,
     ...defaultExtensions,
   ]
 

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

@@ -47,7 +47,7 @@ const Toolbar = ({ state, view }: Props) => {
     excute(view)
   }
 
-  const onClickImageButton = async () => {
+  const onImageUpload = async () => {
     if (!view || !state) return
     if (uploading) return
     const file = await onClickInput()
@@ -100,7 +100,7 @@ const Toolbar = ({ state, view }: Props) => {
   const commandMapper = (command: Partial<ToolbarCommand>) => {
     switch (command.name) {
       case 'image':
-        onClickImageButton()
+        onImageUpload()
         return
       default:
         onClick(command.execute!)

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

@@ -39,13 +39,15 @@ export const MarkdownEditorProvider = ({ children, value: { editorValue } }: Pro
   const [mdxSource, setMdxSource] = useState<MDXRemoteSerializeResult | null>(null)
   const [stat, setStat] = useState<Statistics | null>(null)
 
+  useEffect(() => {
+    setValue(editorValue)
+  }, [editorValue])
+
   useEffect(() => {
     if (isError) {
       setIsError(false)
     }
-  }, [value])
 
-  useEffect(() => {
     async function compileSource() {
       const result = await mdxCompiler(value, {
         onigHostUrl: process.env.NEXT_PUBLIC_CLIENT_HOST,
@@ -61,7 +63,7 @@ export const MarkdownEditorProvider = ({ children, value: { editorValue } }: Pro
     }
 
     compileSource()
-  }, [value, isError])
+  }, [value])
 
   const context: MarkdownEditorContext = {
     value,