fix: improve img load view

Author: drl990114

package.json

@@ -177,6 +177,6 @@
     "svgmoji": "^3.2.0",
     "void-elements": "^3.1.0",
     "yjs": "^13.6.14",
-    "zens": "^0.0.32"
+    "zens": "^0.0.33"
   }
 }

src/editor/extensions/Image/image-nodeview.tsx

@@ -1,5 +1,5 @@
 import type { NodeViewComponentProps } from '@remirror/react'
-import { Image, Popover } from 'zens'
+import { Image as ZensImage, Popover } from 'zens'
 import type { PopoverStore } from 'zens'
 import { ImageToolTips } from './image-tool-tips'
 import { Resizable } from '@/editor/components/Resizable'
@@ -15,7 +15,6 @@ const warningFallBack =
 
 export function ImageNodeView(props: ImageNodeViewProps) {
   const { node, selected, updateAttributes, handleViewImgSrcUrl } = props
-  const [src, setSrc] = useState<string>('')
   const initRef = useRef<() => void>()
   const popoverStore = useRef<PopoverStore>()
   const [open, setOpen] = useState(selected)
@@ -27,30 +26,37 @@ export function ImageNodeView(props: ImageNodeViewProps) {
     setOpen(selected)
   }, [selected])
 
-  useEffect(() => {
-    if (handleViewImgSrcUrl) {
-      handleViewImgSrcUrl(node.attrs.src).then((newSrc) => {
-        setSrc(newSrc)
-      })
-    } else {
-      setSrc(node.attrs.src)
-    }
-  }, [handleViewImgSrcUrl, node.attrs.src])
-
   const handleStoreChange = (store: PopoverStore) => (popoverStore.current = store)
 
-  const Main = src ? (
+  const Main = (
     <Resizable controlInit={(init) => (initRef.current = init)} {...props}>
-      <Image
-        fallback={warningFallBack}
+      <ZensImage
         onLoad={() => initRef.current?.()}
-        preview={false}
+        src={node.attrs.src}
+        imgPromise={(src) => {
+          return new Promise((resolve, reject) => {
+            const makeImageLoad = (targetSrc: string) => {
+              const img = new Image()
+              img.src = targetSrc
+              img.onload = () => {
+                resolve(targetSrc)
+              }
+              img.onerror = () => {
+                reject(warningFallBack)
+              }
+            }
+            if (handleViewImgSrcUrl) {
+              handleViewImgSrcUrl(node.attrs.src).then((newSrc) => {
+                makeImageLoad(newSrc)
+              })
+            } else {
+              makeImageLoad(node.attrs.src)
+            }
+          })
+        }}
         {...node.attrs}
-        src={src}
       />
     </Resizable>
-  ) : (
-    <Image src={warningFallBack} style={{ width: '80px', height: '80px' }} />
   )
 
   if (!open) {
@@ -67,6 +73,8 @@ export function ImageNodeView(props: ImageNodeViewProps) {
       open={open}
       onStoreChange={handleStoreChange}
       toggleOnClick
-    >{Main}</Popover>
+    >
+      {Main}
+    </Popover>
   )
 }

src/playground/content.ts

@@ -22,6 +22,10 @@ The world is almost ruined. None of the remaining  <img src="https://www.gstatic
 console.log('Hello MarkFlowy')
 \`\`\`
 
+- [ ] task 1
+- [ ] task 2
+- [x] task 3
+
 `.trim(),
 ].join("\n")
 

yarn.lock

@@ -10300,10 +10300,10 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-zens@^0.0.32:
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/zens/-/zens-0.0.32.tgz#8b334e7a3fe78a36eecf3c594e780e41d5b45778"
-  integrity sha512-DNTuv/AeOnXNLlq4lSgTwPwRaiyVk27/qyVB5XPwZx2ucKAlv+xqJso/CTeYGNQfLfvoR57NqtagB3XKxVTqZg==
+zens@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/zens/-/zens-0.0.33.tgz#83ddbde88a008fdad320b2f63caeb872c611faaa"
+  integrity sha512-e83RZo2H0QYMVuHXotIevtlbxeyUANs2oYqHB1/ksFbfm7jTf+cQEIej9BRrS3F8z4aus33bpeUhnec10WoqRQ==
   dependencies:
     "@ant-design/icons" "^5.3.7"
     "@ariakit/react" "^0.4.5"