import { Node } from '@tiptap/core'; /** * Attributes carried by the Image node. */ interface ImageAttributes { /** The image source URL (required). */ src: string | null; /** The alt text for accessibility (optional, defaults to empty string). */ alt: string | null; /** The alignment of the image: 'left', 'center', 'right' (optional, defaults to 'left'). */ alignment: string | null; /** The explicit width of the image in pixels, or null for natural size. */ width: number | null; /** The explicit height of the image in pixels, or null for natural size. */ height: number | null; } /** * Custom TipTap node that renders an image with alignment and resize support. * * This extends TipTap's built-in image functionality by adding: * - Alignment control (left / center / right) * - Explicit width/height attributes for resize persistence * - A React NodeView with interactive resize handles * * The NodeView (HtmlEditorImageNodeView) renders the image with resize vertical bar * when selected. The renderHTML method provides the fallback * output for getHTML() / clipboard / serialisation. * * @example * // Insert a new image * editor.chain().focus().insertContent({ type: 'image', attrs: { src: 'https://example.com/image.jpg', alt: 'Example', alignment: 'center' } }).run(); * * // Update image alignment * editor.chain().focus().updateAttributes('image', { alignment: 'right' }).run(); * * // Delete selected image * editor.chain().focus().deleteNode('image').run(); */ declare const Image: Node, ImageAttributes>; export default Image;