Image
The image
node is used to represent images in the document.
import { defineImage function defineImage(): ImageExtension
} from 'prosekit/extensions/image'
const extension const extension: ImageExtension
= defineImage function defineImage(): ImageExtension
()
Commands
Section titled “Commands”insertImage
Section titled “insertImage”editor const editor: Editor<ImageExtension>
.commands Editor<ImageExtension>.commands: ToCommandAction<{
insertImage: [attrs?: ImageAttrs];
uploadImage: [options: UploadImageOptions];
}>
All
{@link
CommandAction
}
s defined by the editor. .insertImage insertImage: CommandAction
(attrs?: ImageAttrs | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`. ({ src ImageAttrs.src?: string | null | undefined
: 'https://static.photos/200x200' })
uploadImage
Section titled “uploadImage”editor const editor: Editor<ImageExtension>
.commands Editor<ImageExtension>.commands: ToCommandAction<{
insertImage: [attrs?: ImageAttrs];
uploadImage: [options: UploadImageOptions];
}>
All
{@link
CommandAction
}
s defined by the editor. .uploadImage uploadImage: CommandAction
(options: UploadImageOptions) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`. ({
// The file to upload
file UploadImageOptions.file: File
The file that will be uploaded. ,
// Upload the file to a remote server and get the URL
uploader UploadImageOptions.uploader: Uploader<string>
The uploader used to upload the file. It should return a promise that
resolves to the URL of the uploaded image. : async ({ file file: File
The file to be uploaded. }) => {
return await upload const upload: (file: File) => Promise<string>
(file file: File
The file to be uploaded. )
},
})
You can reuse the uploadImage
command when handling paste or drop uploads. For a convenience wrapper that wires it into the editor automatically, use defineImageUploadHandler
.