extension-image
package @remirror/extension-image
class ImageExtension
The image extension for placing images into your editor.
TODO -> - Captions https://glitch.com/edit/\#!/pet-figcaption?path=index.js%3A27%3A1 into a preset
TODO => Split this into an image upload extension and image extension. - Add a base64 image
Signature:
export declare class ImageExtension extends NodeExtension<ImageOptions>
Extends: NodeExtension<ImageOptions>
(Some inherited members may not be shown because they are not represented in the documentation.)
property name
Signature:
get name(): "image";
method createNodeSpec
Signature:
createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
Parameters:
| Parameter | Type | Description |
|---|---|---|
| extra | ApplySchemaAttributes | |
| override | NodeSpecOverride |
Returns:
method createNodeViews
Signature:
createNodeViews(): NodeViewMethod | Record<string, NodeViewMethod>;
Returns:
NodeViewMethod | Record<string, NodeViewMethod>
method createPasteRules
Signature:
createPasteRules(): PasteRule[];
Returns:
method createTags
Signature:
createTags(): ("inline" | "media")[];
Returns:
("inline" | "media")[]
method insertImage
Signature:
insertImage(attributes: ImageAttributes, selection?: PrimitiveSelection): CommandFunction;
Parameters:
| Parameter | Type | Description |
|---|---|---|
| attributes | ImageAttributes | |
| selection | PrimitiveSelection | (Optional) |
Returns:
CommandFunction
method uploadImage
Insert an image once the provide promise resolves.
Signature:
uploadImage(value: DelayedPromiseCreator<ImageAttributes>, onElement?: (element: HTMLElement) => void): CommandFunction;
Parameters:
| Parameter | Type | Description |
|---|---|---|
| value | DelayedPromiseCreator<ImageAttributes> | |
| onElement | (element: HTMLElement) => void | (Optional) |
Returns:
CommandFunction
class ResizableImageView
ResizableImageView is a NodeView for image. You can resize the image by dragging the handle over the image.
Signature:
export declare class ResizableImageView extends ResizableNodeView implements NodeView
Extends: ResizableNodeView
Implements: NodeView
(Some inherited members may not be shown because they are not represented in the documentation.)
ResizableImageView.(constructor)
Constructs a new instance of the ResizableImageView class
Signature:
constructor(node: ProsemirrorNode, view: EditorView, getPos: () => number);
Parameters:
| Parameter | Type | Description |
|---|---|---|
| node | ProsemirrorNode | |
| view | EditorView | |
| getPos | () => number |
method createElement
Signature:
createElement({ node }: {
node: ProsemirrorNode;
}): HTMLImageElement;
Parameters:
| Parameter | Type | Description |
|---|---|---|
| { node } | { node: ProsemirrorNode; } |
Returns:
HTMLImageElement
function isImageFileType()
True when the provided file is an image file.
Signature:
export declare function isImageFileType(file: File): boolean;
Parameters:
| Parameter | Type | Description |
|---|---|---|
| file | File |
Returns:
boolean
interface ImageExtensionAttributes
Signature:
export interface ImageExtensionAttributes
property align
Signature:
align?: 'center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start';
property alt
Signature:
alt?: string;
property fileName
The file name used to create the image.
Signature:
fileName?: string;
property height
Signature:
height?: string | number;
property rotate
Signature:
rotate?: string;
property src
Signature:
src: string;
property title
Signature:
title?: string;
property width
Signature:
width?: string | number;
interface ImageOptions
Signature:
export interface ImageOptions
property createPlaceholder
Signature:
createPlaceholder?: (view: EditorView, pos: number) => HTMLElement;
property destroyPlaceholder
Signature:
destroyPlaceholder?: (view: EditorView, element: HTMLElement) => void;
property enableResizing
Enable resizing.
If true, the image node will be rendered by nodeView instead of toDOM.
Signature:
enableResizing?: boolean;
property preferPastedTextContent
When pasting mixed text and image content (usually from Microsoft Office products) the content on the clipboard is either:
a. one large image: containing effectively a screenshot of the original content (an image with text in it). b. HTML content: containing usable text, but images with file protocol URLs (which cannot be resolved due to browser security restrictions).
If true, this will extract the text from the clipboard data, and drop the images. If false, the "screenshot" image will be used and the text will be dropped.
Signature:
preferPastedTextContent?: boolean;
property updatePlaceholder
Signature:
updatePlaceholder?: (view: EditorView, pos: number, element: HTMLElement, progress: number) => void;
property uploadHandler
The upload handler for the image extension.
It receives a list of dropped or pasted files and returns a promise for the attributes which should be used to insert the image into the editor.
Signature:
uploadHandler?: (files: FileWithProgress[]) => DelayedImage[];
type ImageAttributes
Signature:
export type ImageAttributes = ProsemirrorAttributes<ImageExtensionAttributes>;
References: ProsemirrorAttributes, ImageExtensionAttributes