@mkljczk/lexical-remark/lib/extensions/image/node.js

This package contains Markdown helpers and functionality for Lexical using remark-parse.

import { jsx as _jsx } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-use-before-define */
import { isHTMLElement } from '@lexical/utils';
import { $applyNodeReplacement, DecoratorNode } from 'lexical';
import { lazy, Suspense } from 'react';
const ImageComponent = lazy(() => import('./component.js'));
/**
 * A Lexical node to represent an image
 */
export class ImageNode extends DecoratorNode {
    __src;
    __altText;
    __width;
    __height;
    static getType() {
        return 'image';
    }
    static clone(node) {
        return new ImageNode(node.__src, node.__altText, node.__width, node.__height, node.__key);
    }
    static importJSON(serializedNode) {
        const { altText, height, src, width } = serializedNode;
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        return $createImageNode({
            altText,
            height,
            src,
            width,
        });
    }
    static importDOM() {
        return {
            img: (node) => ({
                conversion: (domNode) => {
                    const altText = isHTMLElement(domNode) ? domNode.getAttribute('alt') ?? '' : '';
                    const src = isHTMLElement(domNode) ? domNode.getAttribute('src') ?? '' : '';
                    return { node: $createImageNode({ altText, src }) };
                },
                priority: 1,
            }),
        };
    }
    exportDOM() {
        const element = document.createElement('img');
        element.setAttribute('src', this.__src);
        element.setAttribute('alt', this.__altText);
        element.setAttribute('width', this.__width.toString());
        element.setAttribute('height', this.__height.toString());
        return { element };
    }
    constructor(src, altText, width, height, key) {
        super(key);
        this.__src = src;
        this.__altText = altText;
        this.__width = width || 'inherit';
        this.__height = height || 'inherit';
    }
    exportJSON() {
        return {
            altText: this.getAltText(),
            height: this.__height === 'inherit' ? 0 : this.__height,
            src: this.getSrc(),
            type: 'image',
            version: 1,
            width: this.__width === 'inherit' ? 0 : this.__width,
        };
    }
    createDOM(config) {
        const span = document.createElement('span');
        const theme = config.theme;
        const className = theme.image;
        if (className !== undefined) {
            span.className = className;
        }
        return span;
    }
    updateDOM() {
        return false;
    }
    /**
     * Returns the image source url
     */
    getSrc() {
        return this.__src;
    }
    /**
     * Returns the alt text of the image
     */
    getAltText() {
        return this.__altText;
    }
    decorate() {
        return (_jsx(Suspense, { fallback: null, children: _jsx(ImageComponent, { altText: this.__altText, height: this.__height, nodeKey: this.getKey(), src: this.__src, width: this.__width }) }));
    }
}
/**
 * Creates an Image node from image props
 *
 * @returns An Image node
 */
export function $createImageNode({ altText, height, key, src, width }) {
    return $applyNodeReplacement(new ImageNode(src, altText, width, height, key));
}
/**
 * A typeguard function to assert on an Image node
 *
 * @param node A Lexical node
 * @returns true if the node is an Image node, otherwise false
 */
export function $isImageNode(node) {
    return node instanceof ImageNode;
}