fix: image via url not working

avitorio · Oct 20, 2023 · 6f227a8 · 6f227a8
1 parent e8d9426
commit 6f227a8
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 67 deletions.
diff --git a/packages/outstatic/src/utils/editor/extensions/SlashCommand.tsx b/packages/outstatic/src/utils/editor/extensions/SlashCommand.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, ReactNode } from 'react'
+import { useState, ReactNode, useEffect } from 'react'
 import { Range, Extension } from '@tiptap/core'
 import { Editor } from '@tiptap/react'
 import Suggestion from '@tiptap/suggestion'
@@ -78,64 +78,19 @@ const CommandList = ({
   range: Range
 }) => {
   const [imageMenu, setImageMenu] = useState(false)
-  const [selectedIndex, setSelectedIndex] = useState(0)
-
-  const selectItem = useCallback(
-    (index: number) => {
-      const item = items[index]
-
-      if (item.title === 'Image') {
-        setImageMenu(true)
-      } else if (item) {
-        command(item)
-      }
-    },
-    [items]
-  )
-
-  useEffect(() => {
-    const navigationKeys = ['ArrowUp', 'ArrowDown', 'Enter']
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (navigationKeys.includes(e.key)) {
-        e.preventDefault()
-        if (e.key === 'ArrowUp') {
-          setSelectedIndex((selectedIndex + items.length - 1) % items.length)
-          return true
-        }
-        if (e.key === 'ArrowDown') {
-          setSelectedIndex((selectedIndex + 1) % items.length)
-          return true
-        }
-        if (e.key === 'Enter') {
-          selectItem(selectedIndex)
-          return true
-        }
-        return false
-      }
-    }
-
-    document.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.removeEventListener('keydown', onKeyDown)
-    }
-  }, [items, selectItem, selectedIndex])
-
-  useEffect(() => {
-    setSelectedIndex(0)
-  }, [items])
 
   return items.length > 0 ? (
     imageMenu ? (
       <ImageCommandList
-        editor={editor as Editor}
+        editor={editor}
         setImageMenu={setImageMenu}
         range={range}
       />
     ) : (
       <BaseCommandList
-        selectedIndex={selectedIndex}
         items={items}
-        selectItem={selectItem}
+        command={command}
+        setImageMenu={setImageMenu}
       />
     )
   ) : null

diff --git a/packages/outstatic/src/utils/editor/utils/slash-command/BaseCommandList.tsx b/packages/outstatic/src/utils/editor/utils/slash-command/BaseCommandList.tsx
@@ -1,18 +1,69 @@
+import { Editor } from '@tiptap/react'
 import {
   CommandItemProps,
   updateScrollView
 } from '../../extensions/SlashCommand'
-import { useLayoutEffect, useRef } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react'
 
 export const BaseCommandList = ({
   items,
-  selectedIndex,
-  selectItem
+  command,
+  setImageMenu
 }: {
   items: CommandItemProps[]
-  selectedIndex: number
-  selectItem: (index: number) => void
+  setImageMenu: (value: boolean) => void
+  command: any
 }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const selectItem = useCallback(
+    (index: number) => {
+      const item = items[index]
+      if (item.title === 'Image') {
+        setImageMenu(true)
+      } else if (item) {
+        command(item)
+      }
+    },
+    [items]
+  )
+
+  useEffect(() => {
+    const navigationKeys = ['ArrowUp', 'ArrowDown', 'Enter']
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (navigationKeys.includes(e.key)) {
+        e.preventDefault()
+        if (e.key === 'ArrowUp') {
+          setSelectedIndex((selectedIndex + items.length - 1) % items.length)
+          return true
+        }
+        if (e.key === 'ArrowDown') {
+          setSelectedIndex((selectedIndex + 1) % items.length)
+          return true
+        }
+        if (e.key === 'Enter') {
+          selectItem(selectedIndex)
+          return true
+        }
+        return false
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [items, selectItem, selectedIndex])
+
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [items])
+
   const commandListContainer = useRef<HTMLDivElement>(null)
 
   useLayoutEffect(() => {

diff --git a/packages/outstatic/src/utils/editor/utils/slash-command/ImageCommandList.tsx b/packages/outstatic/src/utils/editor/utils/slash-command/ImageCommandList.tsx
@@ -96,7 +96,7 @@ const ImageCommandList = ({
   }
 
   useEffect(() => {
-    const navigationKeys = ['ArrowUp', 'ArrowDown', 'Enter']
+    const navigationKeys = ['ArrowUp', 'ArrowDown', 'Enter', 'Escape']
     const onKeyDown = (e: KeyboardEvent) => {
       if (navigationKeys.includes(e.key)) {
         e.preventDefault()
@@ -112,13 +112,19 @@ const ImageCommandList = ({
           if (items[selectedIndex].title === 'Image Upload') {
             addImageFile()
           } else {
-            setShowLink(true)
+            showLink ? addImageUrl() : setShowLink(true)
           }
           return true
         }
         if (e.key === 'Escape') {
-          setImageMenu(false)
-          return false
+          console.log('escape')
+          if (showLink) {
+            setShowLink(false)
+          } else {
+            setImageMenu(false)
+            editor.chain().focus().run()
+          }
+          return true
         }
         return false
       }
@@ -128,7 +134,11 @@ const ImageCommandList = ({
     return () => {
       document.removeEventListener('keydown', onKeyDown)
     }
-  }, [selectedIndex])
+  }, [selectedIndex, showLink])
+
+  useEffect(() => {
+    editor.chain().blur().run()
+  }, [])
 
   useEffect(() => {
     setSelectedIndex(0)
@@ -159,14 +169,6 @@ const ImageCommandList = ({
               placeholder="Insert link here"
               onChange={handleImageInput}
               value={imageUrl}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  addImageUrl()
-                }
-                if (e.key === 'Escape') {
-                  setShowLink(false)
-                }
-              }}
               onFocus={() => setErrors({ ...errors, imageUrl: '' })}
               autoFocus
             />