Skip to content
GitHubDiscord

Image

The image node is used to represent images in the document.

import { defineImagefunction defineImage(): ImageExtension
@public
} from 'prosekit/extensions/image'
const extensionconst extension: ImageExtension = defineImagefunction defineImage(): ImageExtension
@public
()
editorconst 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`.
({ srcImageAttrs.src?: string | null | undefined: 'https://static.photos/200x200' })
editorconst 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 fileUploadImageOptions.file: File
The file that will be uploaded.
,
// Upload the file to a remote server and get the URL uploaderUploadImageOptions.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 ({ filefile: File
The file to be uploaded.
}) => {
return await uploadconst upload: (file: File) => Promise<string>(filefile: 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.