Not getting new line after pasting table from outside lexical rich text editor

Question

i am using lexical rich text editor with table and i am facing issue while pasting table from outside. this issue is from library but still am not able to file way that how to achieve it

for ref: new line achieved while creating table like this:

export function TablePlugin({
    cellEditorConfig,
    children,
}: {
    cellEditorConfig: CellEditorConfig;
    children: JSX.Element | Array<JSX.Element>;
}): JSX.Element | null {
    const [editor] = useLexicalComposerContext();
    const cellContext = useContext(CellContext);

    useEffect(() => {
        if (!editor.hasNodes([TableNode])) {
            invariant(false, 'TablePlugin: TableNode is not registered on editor');
        }

        cellContext.set(cellEditorConfig, children);

        return editor.registerCommand<InsertTableCommandPayload>(
            INSERT_TABLE_COMMAND,
            ({ columns, rows, includeHeaders }) => {
                const selection = $getSelection();

                if (!$isRangeSelection(selection)) {
                    return true;
                }

                const focus = selection.focus;
                const focusNode = focus.getNode();

                if (focusNode !== null) {
                    const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);

                    if ($isRootOrShadowRoot(focusNode)) {
                        const target = focusNode.getChildAtIndex(focus.offset);

                        if (target !== null) {
                            target.insertBefore(tableNode);
                        } else {
                            focusNode.append(tableNode);
                        }

                        tableNode.insertBefore($createParagraphNode());
                    } else {
                        const topLevelNode = focusNode.getTopLevelElementOrThrow();
                        topLevelNode.insertAfter(tableNode);
                    }
//inserting new line here
                    tableNode.insertAfter($createParagraphNode());
                    const nodeSelection = $createNodeSelection();
                    nodeSelection.add(tableNode.getKey());
                    $setSelection(nodeSelection);
                }

                return true;
            },
            COMMAND_PRIORITY_EDITOR,
        );
    }, [cellContext, cellEditorConfig, children, editor]);

    return null;
}

but i am not sure how to achieve for copy paste

i have tried to make a plugin like above but not worked for me

Answer 1

git the answer make a custom paste plugin

export default function PasteLogPlugin(): JSX.Element {
    const [editor] = useLexicalComposerContext();

    useEffect(() => {
        return editor.registerCommand(
            PASTE_COMMAND,
            (e: ClipboardEvent) => {
                const { clipboardData } = e;
                const concreteData = clipboardData || window.clipboardData;
                if (!concreteData) return;
            
                const pastedContent = concreteData.getData('text/html'); // Get HTML content
                
                const parsedContent = new DOMParser().parseFromString(pastedContent, 'text/html');
                const nodes = $generateNodesFromDOM(editor, parsedContent);
                const tableNode = nodes[0];
                const selection = $getSelection();
                if (!$isRangeSelection(selection)) {
                    return;
                }
                const focus = selection.focus;
                const focusNode = focus.getNode();
                if (focusNode !== null && $isTableNode(tableNode)) {
                    // focusNode.select();

                    // $insertNodes([...nodes, $createParagraphNode()]);
                    if ($isRootOrShadowRoot(focusNode)) {
                        const target = focusNode.getChildAtIndex(focus.offset);

                        if (target !== null) {
                            target.insertBefore(tableNode);
                        } else {
                            focusNode.append(tableNode);
                        }

                        tableNode.insertBefore($createParagraphNode());
                    } else {
                        const topLevelNode = focusNode.getTopLevelElementOrThrow();
                        topLevelNode.insertAfter(tableNode);
                    }
                    const lastParagraph = $createParagraphNode();
                    tableNode.insertAfter(lastParagraph);
                    const nodeSelection = $createNodeSelection();
                    nodeSelection.add(tableNode.getNextSibling().getKey());
                    $setSelection(nodeSelection);
                } else return false;
                return true;
            },
            COMMAND_PRIORITY_NORMAL,
        );
    }, [editor]);

    return null;
}

and use this plugin inside your editor