feat: custom image preview hook (Fixes #62, Fixes #65)

* feat: add a hook for updating the image source before it's rendered * Prevent double rendering in ImageEditor * Update LexicalImageVisitor to construct HTML without fetching the image
mdx-editor · Sep 6, 2023 · c02f699 · c02f699
1 parent 8355ad9
commit c02f699
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/src/examples/images.tsx b/src/examples/images.tsx
@@ -49,3 +49,23 @@ export function JsxImage() {
     </>
   )
 }
+
+export function ImageWithPreviewHook() {
+  return (
+    <>
+      <MDXEditor
+        markdown={markdownWithHtmlImages}
+        plugins={[
+          imagePlugin({
+            disableImageResize: true,
+            imagePreviewHandler: async (imageSource) => Promise.resolve(`${imageSource}?grayscale`)
+          }),
+          diffSourcePlugin(),
+          jsxPlugin(),
+          toolbarPlugin({ toolbarContents: () => <DiffSourceToggleWrapper>:)</DiffSourceToggleWrapper> })
+        ]}
+        onChange={console.log}
+      />
+    </>
+  )
+}
diff --git a/src/plugins/image/ImageEditor.tsx b/src/plugins/image/ImageEditor.tsx
@@ -67,7 +67,7 @@ function LazyImage({
   return <img className={className || undefined} src={src} title={title} ref={imageRef} draggable="false" width={width} height={height} />
 }
 
-export function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorProps): JSX.Element {
+export function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorProps): JSX.Element | null {
   const imageRef = React.useRef<null | HTMLImageElement>(null)
   const buttonRef = React.useRef<HTMLButtonElement | null>(null)
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)
@@ -76,6 +76,8 @@ export function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorP
   const activeEditorRef = React.useRef<LexicalEditor | null>(null)
   const [isResizing, setIsResizing] = React.useState<boolean>(false)
   const [disableImageResize] = imagePluginHooks.useEmitterValues('disableImageResize')
+  const [imagePreviewHandler] = imagePluginHooks.useEmitterValues('imagePreviewHandler')
+  const [imageSource, setImageSource] = React.useState<string | null>(null)
 
   const onDelete = React.useCallback(
     (payload: KeyboardEvent) => {
@@ -126,6 +128,18 @@ export function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorP
     [editor, setSelected]
   )
 
+  React.useEffect(() => {
+    if (imagePreviewHandler) {
+      const callPreviewHandler = async () => {
+        const updatedSrc = await imagePreviewHandler(src)
+        setImageSource(updatedSrc)
+      }
+      callPreviewHandler().catch(console.error)
+    } else {
+      setImageSource(src)
+    }
+  }, [src, imagePreviewHandler])
+
   React.useEffect(() => {
     let isMounted = true
     const unregister = mergeRegister(
@@ -208,7 +222,8 @@ export function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorP
 
   const draggable = $isNodeSelection(selection)
   const isFocused = isSelected
-  return (
+
+  return imageSource !== null ? (
     <React.Suspense fallback={null}>
       <div className={styles.imageWrapper} data-editor-block-type="image">
         <div draggable={draggable}>
@@ -218,7 +233,7 @@ export function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorP
             className={classNames({
               [styles.focusedImage]: isFocused
             })}
-            src={src}
+            src={imageSource}
             title={title || ''}
             imageRef={imageRef}
           />
@@ -228,5 +243,5 @@ export function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorP
         )}
       </div>
     </React.Suspense>
-  )
+  ) : null
 }
diff --git a/src/plugins/image/LexicalImageVisitor.ts b/src/plugins/image/LexicalImageVisitor.ts
@@ -14,7 +14,7 @@ export const LexicalImageVisitor: LexicalExportVisitor<ImageNode, Mdast.Image> =
       if (lexicalNode.getWidth() !== 'inherit') {
         img.width = lexicalNode.getWidth() as number
       }
-      img.src = lexicalNode.getSrc()
+
       if (lexicalNode.getAltText()) {
         img.alt = lexicalNode.getAltText()
       }
@@ -25,7 +25,7 @@ export const LexicalImageVisitor: LexicalExportVisitor<ImageNode, Mdast.Image> =
 
       actions.appendToParent(mdastParent, {
         type: 'html',
-        value: img.outerHTML.replace(/>$/, '/>')
+        value: img.outerHTML.replace(/>$/, ` src="${lexicalNode.getSrc()}" />`)
       })
     } else {
       actions.appendToParent(mdastParent, {

diff --git a/src/plugins/image/index.ts b/src/plugins/image/index.ts
@@ -29,6 +29,7 @@ import { CAN_USE_DOM } from '../../utils/detectMac'
 export * from './ImageNode'
 
 export type ImageUploadHandler = ((image: File) => Promise<string>) | null
+export type ImagePreviewHandler = ((imageSource: string) => Promise<string>) | null
 
 /** @internal */
 export const imageSystem = system(
@@ -37,6 +38,7 @@ export const imageSystem = system(
     const imageAutocompleteSuggestions = r.node<string[]>([])
     const disableImageResize = r.node<boolean>(false)
     const imageUploadHandler = r.node<ImageUploadHandler>(null)
+    const imagePreviewHandler = r.node<ImagePreviewHandler>(null)
 
     r.sub(r.pipe(insertImage, r.o.withLatestFrom(rootEditor)), ([src, theEditor]) => {
       theEditor?.update(() => {
@@ -123,7 +125,8 @@ export const imageSystem = system(
       imageUploadHandler,
       imageAutocompleteSuggestions,
       disableImageResize,
-      insertImage
+      insertImage,
+      imagePreviewHandler
     }
   },
   [coreSystem]
@@ -133,6 +136,7 @@ interface ImagePluginParams {
   imageUploadHandler?: ImageUploadHandler
   imageAutocompleteSuggestions?: string[]
   disableImageResize?: boolean
+  imagePreviewHandler?: ImagePreviewHandler
 }
 
 export const [
@@ -148,6 +152,7 @@ export const [
     realm.pubKey('imageUploadHandler', params?.imageUploadHandler || null)
     realm.pubKey('imageAutocompleteSuggestions', params?.imageAutocompleteSuggestions || [])
     realm.pubKey('disableImageResize', Boolean(params?.disableImageResize))
+    realm.pubKey('imagePreviewHandler', params?.imagePreviewHandler || null)
   },
 
   init: (realm) => {