feat: Add auto-save functionality to MarkdownEditor

Author: winverse

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

@@ -1,20 +1,89 @@
 import cn from 'clsx'
-import { useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Toolbar } from './toolbar'
 import { useCodemirror } from '@/hooks'
+import { useRouter } from 'next/router'
+import { saveExecute } from './toolbar/commands/save'
+import toast, { ToastOptions } from 'react-hot-toast'
+import { CustomEventDetail } from '@/types'
+import { markdownCustomEventName } from '@/index'
 
 interface MarkdownEditorProps {}
 
 export const MarkdownEditor = ({}: MarkdownEditorProps) => {
+  const router = useRouter()
+  const [isAutoSave, setAutoSave] = useState<boolean>(false)
+  const [isFocus, setIsFocus] = useState<boolean>(false)
   const codemirror = useRef<HTMLDivElement | null>(null)
   const { state, view } = useCodemirror(codemirror, {
     autoFocus: true,
     minHeight: '100%',
     maxHeight: '100%',
   })
 
+  // router 이동시 isFocus 초기화
+  useEffect(() => {
+    if (!isFocus) return
+    setIsFocus(false)
+  }, [router.asPath])
+
+  // 라우터 변경 시 자동 저장
+  useEffect(() => {
+    if (!view) return
+    if (!isFocus) return
+    const handleRouteChange = () => {
+      setAutoSave(true)
+      saveExecute(view)
+    }
+    router.events.on('beforeHistoryChange', handleRouteChange)
+    return () => {
+      router.events.off('beforeHistoryChange', handleRouteChange)
+    }
+  }, [router, view])
+
+  // 저장 되고 나면 toast 메시지
+  useEffect(() => {
+    const updateItemResult = (e: CustomEventInit<CustomEventDetail['updateItemResultEvent']>) => {
+      if (!e.detail) return
+      if (isAutoSave) {
+        setAutoSave(false)
+        return
+      }
+
+      const { result } = e.detail
+
+      const commonOption: ToastOptions = {
+        className: cn('dark:nx-bg-[#333] dark:nx-text-[#f0f0f0]'),
+        style: {
+          fontSize: '17px',
+        },
+        duration: 700,
+      }
+
+      const mapper = {
+        success: () =>
+          toast.success('글이 저장 되었습니다', {
+            position: 'bottom-right',
+            ...commonOption,
+          }),
+        error: () =>
+          toast.error('글 저장에 실패했습니다', {
+            position: 'bottom-right',
+            ...commonOption,
+          }),
+      }
+      mapper[result]()
+    }
+
+    window.addEventListener(markdownCustomEventName.updateItemResultEvent, updateItemResult)
+    return () => {
+      window.removeEventListener(markdownCustomEventName.updateItemResultEvent, updateItemResult)
+    }
+  }, [])
+
   const onClick = () => {
     view?.focus()
+    setIsFocus(true)
   }
 
   return (

packages/markdown-editor/src/components/markdown-editor/toolbar/commands/save.tsx

@@ -47,8 +47,9 @@ export function saveExecute(view: EditorView) {
   if (prevDoc.has(currentUrl) && prevDoc.get(currentUrl) === doc) {
     return
   }
-  prevDoc.set(currentUrl, doc)
 
+  prevDoc.set(currentUrl, doc)
+  console.log('save!')
   const event = new CustomEvent<CustomEventDetail['updateItemEvent']>(
     markdownCustomEventName.updateItemEvent,
     {

packages/markdown-editor/src/hooks/use-auto-save.ts

@@ -7,7 +7,6 @@ import { Main } from './main'
 import { ModalProvider } from '@/contexts/modal'
 import { Potals } from '@/components/potals'
 import { Toaster } from 'react-hot-toast'
-import { EventProvider } from '@/providers'
 
 type NextraDocLayoutProps = NextraThemeLayoutProps & {
   editorValue: string
@@ -17,7 +16,6 @@ export function Layout({ children, editorValue, ...context }: NextraDocLayoutPro
   return (
     <ConfigProvider value={context}>
       <Toaster />
-      <EventProvider />
       <ModalProvider>
         <SidebarProvider>
           <MarkdownEditorProvider value={{ editorValue }}>