phx-react/dist/esm/components/TextEditorV2/nodes/ImageNode.d.ts

PHX REACT

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */
import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
import { DecoratorNode } from 'lexical';
import * as React from 'react';
export interface ImagePayload {
    altText: string;
    caption?: LexicalEditor;
    position?: ImagePosition;
    height?: number;
    key?: NodeKey;
    maxWidth?: number;
    showCaption?: boolean;
    src: string;
    width?: number;
    captionsEnabled?: boolean;
}
export type ImagePosition = 'left' | 'right' | 'center' | undefined;
export type SerializedImageNode = Spread<{
    altText: string;
    caption: SerializedEditor;
    height?: number;
    maxWidth: number;
    position?: ImagePosition;
    showCaption: boolean;
    src: string;
    width?: number;
}, SerializedLexicalNode>;
export declare class ImageNode extends DecoratorNode<React.JSX.Element> {
    __src: string;
    __altText: string;
    __width: 'inherit' | number;
    __height: 'inherit' | number;
    __maxWidth: number;
    __showCaption: boolean;
    __caption: LexicalEditor;
    __position: ImagePosition;
    __captionsEnabled: boolean;
    /**
     * Gets the Lexical node type for image nodes.
     * @returns Image node type.
     */
    static getType(): string;
    /**
     * Clones an existing image node.
     * @param node Image node to clone.
     * @returns Cloned image node.
     */
    static clone(node: ImageNode): ImageNode;
    /**
     * Imports a serialized image node into the editor state.
     * @param serializedNode Serialized image node payload.
     * @returns Hydrated image node.
     */
    static importJSON(serializedNode: SerializedImageNode): ImageNode;
    /**
     * Exports this image node to DOM.
     * @returns DOM export output containing the image wrapper.
     */
    exportDOM(): DOMExportOutput;
    /**
     * Defines DOM import conversions for image elements.
     * @returns DOM conversion map for image imports.
     */
    static importDOM(): DOMConversionMap | null;
    /**
     * Creates an image node instance.
     * @param src Image source URL.
     * @param altText Accessible alt text.
     * @param maxWidth Maximum rendered image width.
     * @param width Initial image width.
     * @param height Initial image height.
     * @param showCaption Whether the caption editor is visible.
     * @param caption Nested caption editor.
     * @param position Image alignment position.
     * @param captionsEnabled Whether captions are enabled.
     * @param key Optional Lexical node key.
     */
    constructor(src: string, altText: string, maxWidth: number, width?: 'inherit' | number, height?: 'inherit' | number, showCaption?: boolean, caption?: LexicalEditor, position?: ImagePosition, captionsEnabled?: boolean, key?: NodeKey);
    /**
     * Serializes this image node.
     * @returns Serialized image node payload.
     */
    exportJSON(): SerializedImageNode;
    /**
     * Updates the stored image dimensions.
     * @param width Next image width.
     * @param height Next image height.
     */
    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
    /**
     * Updates caption visibility for this image.
     * @param showCaption Whether the caption should be shown.
     */
    setShowCaption(showCaption: boolean): void;
    /**
     * Gets the current image alignment position.
     * @returns Current image position.
     */
    getPosition(): ImagePosition;
    /**
     * Updates the image alignment position.
     * @param position Next image position.
     */
    setPosition(position: ImagePosition): void;
    /**
     * Creates the DOM wrapper for this image node.
     * @param config Lexical editor config.
     * @returns Image wrapper element.
     */
    createDOM(config: EditorConfig): HTMLElement;
    /**
     * Updates the DOM wrapper when node state changes.
     * @param prevNode Previous image node state.
     * @param dom Existing image wrapper element.
     * @param config Lexical editor config.
     * @returns False because the existing DOM element is reused.
     */
    updateDOM(prevNode: ImageNode, dom: HTMLElement, config: EditorConfig): false;
    /**
     * Gets the image source URL.
     * @returns Image source URL.
     */
    getSrc(): string;
    /**
     * Gets the image alt text.
     * @returns Image alt text.
     */
    getAltText(): string;
    /**
     * Renders the React decorator for this image node.
     * @returns Image decorator element.
     */
    decorate(): React.JSX.Element;
}
/**
 * Creates and inserts a replacement image node.
 * @param payload Image node creation payload.
 * @returns Created image node.
 */
export declare function $createImageNode({ altText, caption, captionsEnabled, height, key, maxWidth, position, showCaption, src, width, }: ImagePayload): ImageNode;
/**
 * Checks whether a Lexical node is an ImageNode.
 * @param node Node to test.
 * @returns True when the node is an ImageNode.
 */
export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;