Merge pull request #60 from hunghg255/update-post-upload

docs/extensions/ImageUpload/index.md

@@ -29,3 +29,8 @@ const extensions = [
   }),// [!code ++]
 ];
 ```
+
+## Props
+
+- `upload` - A function that returns a promise that resolves to the image URL.
+- `postUpload` - A function that is called after the image is uploaded. It receives the image URL as an argument.

playground/src/App.tsx

@@ -109,6 +109,9 @@ const extensions = [
         }, 500)
       })
     },
+    postUpload: async (url) => {
+      return url
+    },
   }),
   Video,
   VideoUpload.configure({

src/extensions/ImageUpload/ImageUpload.ts

@@ -13,6 +13,7 @@ import {
 
 export interface ImageUploadOptions {
   upload: (file: File) => Promise<string>
+  postUpload?: (url: string) => Promise<string>
   acceptMimes: string[]
   maxSize: number
 }
@@ -122,6 +123,7 @@ export const ImageUpload = Node.create<ImageUploadOptions>({
     const uploadFn = createImageUpload({
       validateFn: validateFile,
       onUpload: this.options.upload,
+      postUpload: this.options.postUpload,
     })
 
     return [

src/extensions/ImageUpload/components/ImageUploader.tsx

@@ -27,6 +27,7 @@ function ImageUploader(props: any) {
         return true
       },
       onUpload: uploadOptions.upload,
+      postUpload: uploadOptions.postUpload,
     })
     uploadFn([file], props.editor.view, props.getPos())
   }

src/plugins/image-upload.ts

@@ -66,11 +66,12 @@ function findPlaceholder(state: EditorState, id: string): number | null {
 export interface ImageUploadOptions {
   validateFn?: (file: File) => boolean
   onUpload: (file: File) => Promise<string | object>
+  postUpload?: (src: string) => Promise<string>
 }
 
 export type UploadFn = (files: File[], view: EditorView, pos: number) => void
 
-export function createImageUpload({ validateFn, onUpload }: ImageUploadOptions): UploadFn {
+export function createImageUpload({ validateFn, onUpload, postUpload }: ImageUploadOptions): UploadFn {
   return (files, view, pos) => {
     for (const file of files) {
       if (validateFn && !validateFn(file)) {
@@ -90,7 +91,11 @@ export function createImageUpload({ validateFn, onUpload }: ImageUploadOptions):
       view.dispatch(tr)
 
       onUpload(file).then(
-        (src) => {
+        async (src) => {
+          if (postUpload && typeof src === 'string') {
+            src = await postUpload(src)
+          }
+
           const { schema } = view.state
           let placeholderPos = findPlaceholder(view.state, id)
           if (placeholderPos === null) {