tiptap-extension-resize-image
Version:
A tiptap image resizing extension for React, Vue, Next, and VanillaJS. Additionally, it can align the image position.
49 lines • 1.88 kB
TypeScript
import { Node as ProseMirrorNode } from '@tiptap/pm/model';
import { ImageElements, ResizeLimits } from '../types';
interface NodeViewContext {
node: any;
editor: any;
view: any;
getPos: (() => number) | undefined;
}
export declare class ImageNodeView {
protected context: NodeViewContext;
protected elements: ImageElements;
private inline;
private resizeLimits;
private unsubscribeDocumentClick;
private handleContainerClick;
private handleDocumentClick;
constructor(context: NodeViewContext, inline: boolean, resizeLimits?: ResizeLimits);
protected createElements(): ImageElements;
protected clearContainerBorder: () => void;
protected dispatchNodeView: () => void;
private removeResizeElements;
protected setupImageAttributes(): void;
protected setupDOMStructure(): void;
/**
* Applies min/max width limits to the container and image.
* Enforces configured limits on initial render and when container style is re-applied.
*/
protected applyResizeLimits(): void;
private createPositionController;
private createResizeHandler;
protected setupContainerClick(): void;
protected setupContentClick(): void;
protected destroy: () => void;
/**
* Reuses the existing DOM when ProseMirror replaces the underlying node
* (e.g. on resize/alignment commits or external attr updates). Without
* this hook ProseMirror would destroy and recreate the NodeView on every
* setNodeMarkup, causing the <img> to reload, listeners to be re-bound,
* and any open resize UI to vanish mid-interaction.
*/
protected update: (node: ProseMirrorNode) => boolean;
initialize(): {
dom: HTMLElement;
update?: (node: ProseMirrorNode) => boolean;
destroy?: () => void;
};
}
export {};
//# sourceMappingURL=image-node-view.d.ts.map