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

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

import lexicalComposerContext from '@lexical/react/LexicalComposerContext.js';
import lexicalUtils from '@lexical/utils';
import lexical 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 = lexical.createCommand('INSERT_IMAGE_COMMAND');
/**
 * A Lexical plugin to register the INSERT_IMAGE_COMMAND
 */
export const ImagePlugin = () => {
    const [editor] = lexicalComposerContext.useLexicalComposerContext();
    useEffect(() => {
        if (!editor.hasNodes([ImageNode])) {
            throw new Error('ImagesPlugin: ImageNode not registered on editor');
        }
        return lexicalUtils.mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
            const imageNode = $createImageNode(payload);
            lexical.$insertNodes([imageNode]);
            if (lexical.$isRootOrShadowRoot(imageNode.getParentOrThrow())) {
                lexicalUtils.$wrapNodeInElement(imageNode, lexical.$createParagraphNode).selectEnd();
            }
            return true;
        }, lexical.COMMAND_PRIORITY_EDITOR));
    }, [editor]);
    return null;
};