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: FileThe 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: FileThe file to be uploaded. }) => {
return await upload const upload: (file: File) => Promise<string> (file file: FileThe 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.