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

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

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
import { COMMAND_PRIORITY_EDITOR, $createParagraphNode, $insertNodes, $isRootOrShadowRoot, createCommand } from 'lexical';
import { useEffect } from 'react';
import { $createImageNode, ImageNode } from './node.js';
/**
 * A command to insert an image. The argument is an {@link ImagePayload}.
 */
export const INSERT_IMAGE_COMMAND = createCommand('INSERT_IMAGE_COMMAND');
/**
 * A Lexical plugin to register the INSERT_IMAGE_COMMAND
 */
export const ImagePlugin = () => {
    const [editor] = useLexicalComposerContext();
    useEffect(() => {
        if (!editor.hasNodes([ImageNode])) {
            throw new Error('ImagesPlugin: ImageNode not registered on editor');
        }
        return mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
            const imageNode = $createImageNode(payload);
            $insertNodes([imageNode]);
            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
                $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
            }
            return true;
        }, COMMAND_PRIORITY_EDITOR));
    }, [editor]);
    return null;
};