facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.98k stars 1.7k forks source link

[Help] Editor.update skips action depending on the priority #6797

Closed cecibet closed 2 weeks ago

cecibet commented 2 weeks ago

Hi! This code is to reinsert an image after it has deleted and the undo command. It should be placed again in a list of attachments that receives info of the images added on the editor. So I'm capturing the deleted nodes info and creating the node back:

`export default function ImagesPlugin(props) { const [editor] = useLexicalComposerContext(); const { settings: { uploadImageUrl, onUploadImage, onReaddImage, }, } = useSettings();

useEffect(() => {
    if (!editor.hasNodes([ImageNode]))
        throw new Error('ImagesPlugin: ImageNode not registered on editor');

    return mergeRegister(
        editor.registerCommand(
            INSERT_IMAGE_COMMAND,
            ({
                src, reinsert, ...payload
            }) => {
                // Reinsert may be true only when using the drag and drop within the editor.
                if (reinsert) {
                    editor.update(() => {
                        const imageNode = $createImageNode({ ...payload });
                        $insertNodes([imageNode]);
                        if ($isRootOrShadowRoot(imageNode.getParentOrThrow()))
                            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
                    });

                    return true;
                }

                if (uploadImageUrl)
                    new API().post(uploadImageUrl, {
                        imageData: src,
                        fileName: payload.altText,
                    }, {
                        success: (sr) => {
                            editor.update(() => {
                                const imageNode = $createImageNode({
                                    ...payload,
                                    storageKey: sr.data.key,
                                    storageToken: sr.data.storageToken,
                                    sizeString: sr.data.sizeString.replace(/\s+/g, ''),
                                });
                                onUploadImage(sr.data.storageToken, sr.data.key, payload.altText, sr.data.sizeString);
                                $insertNodes([imageNode]);
                                if ($isRootOrShadowRoot(imageNode.getParentOrThrow()))
                                    $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
                            });
                        },
                    });
                else
                    editor.update(() => {
                        const imageNode = $createImageNode({
                            ...payload,
                            src,
                        });
                        $insertNodes([imageNode]);
                        if ($isRootOrShadowRoot(imageNode.getParentOrThrow()))
                            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
                    });

                return true;
            },
            COMMAND_PRIORITY_EDITOR,
        ),
        editor.registerCommand(
            PASTE_COMMAND,
            (files) => onPaste(files, editor),
            COMMAND_PRIORITY_HIGH,
        ),
        editor.registerCommand(
            UNDO_COMMAND,
            () => {
                const ticketKeys = props.ticketAttachments?.map((att) => att.storageKey).filter(Boolean) || [];
                const { undoStack } = props.historyState;
                if (undoStack.length > 0) {
                    const nodes = undoStack.slice(-1)[0].editorState._nodeMap;
                    const currentNodes = Array.from(nodes).filter(([key]) => key !== 'root');
                    currentNodes.forEach(([, nodeValue]) => {
                        if (nodeValue.__type === 'image' && nodeValue.__storageKey != null && !ticketKeys.includes(nodeValue.__storageKey))
                            if (props.createMode)
                                editor.update(() => {
                                    const imageNode = $createImageNode({
                                        storageToken: nodeValue.__storageToken,
                                        storageKey: nodeValue.__storageKey,
                                        altText: nodeValue.__altText,
                                        sizeString: (nodeValue.__sizeString ?? '').replace(/\s+/g, ''),
                                        maxWidth: 500,
                                    });
                                    $insertNodes([imageNode]);
                                    onUploadImage(nodeValue.__storageToken, nodeValue.__storageKey, nodeValue.__altText, nodeValue.__sizeString);
                                    if ($isRootOrShadowRoot(imageNode.getParentOrThrow()))
                                        $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
                                });
                            else
                                onReaddImage(nodeValue.__storageKey);
                    });
                }
            },
            COMMAND_PRIORITY_HIGH,
        ),
        editor.registerCommand(
            REDO_COMMAND,
            () => {
            },
            COMMAND_PRIORITY_HIGH,
        ),
    );
}, [editor, onReaddImage, onUploadImage, props.createMode, props.historyState, props.ticketAttachments, uploadImageUrl]);

return null;

}`

Relevant part is the if block "if (props.createMode)". If I pass a COMMAND_PRIORITY_EDITOR, the imageNode is added back to the editor, but the line "onUploadImage(nodeValue.storageToken, nodeValue.storageKey, nodeValue.altText, nodeValue.sizeString);" is not executed. Using all the other priorities, the line is executed, but the node is not created.

What is changing this behavior? Thanks

etrepum commented 2 weeks ago

This looks like a question rather than an issue, we don't use GitHub issues as a support channel. You can try asking in the discord