Lexical Editor - Paste command not pasting correctly

[dev-in-progress]

I am trying to implement a custom paste button in lexical editor to paste all user copied content. But some commands like <mark/> , <pre/> etc are getting lost and only its content is getting pasted and also others loses its classnames and some styles. The styles are preserved when using keyboard shortcuts like Cmd+V, but not through the custom paste button.

Paste.js

function Paste() {
const [editor] = useLexicalComposerContext();

const handlePaste = async () => {
    try {
        const permission = await navigator.permissions.query({ name: 'clipboard-read' });
        if (permission.state === 'denied') {
            alert('Clipboard access denied.');
            return;
        }

        const items = await navigator.clipboard.read();
        const clipboardItem = items[0];
        console.log('items', items);
        const clipboardData = new DataTransfer();

        for (const type of clipboardItem.types) {
            const dataString = await (await clipboardItem.getType(type)).text();
            console.log('each item', type, await clipboardItem.getType(type), dataString);
            clipboardData.setData(type, dataString);
        }

        console.log('final data', clipboardData.getData('text/html'));
        const event = new ClipboardEvent('paste', {
            clipboardData: clipboardData
        });

        editor.dispatchCommand(PASTE_COMMAND, event);

    } catch (err) {
        console.error('Paste failed:', err);
        alert('Unable to paste. Your browser might not support clipboard API.');
    }
};

return (
     <button onClick={handlePaste}/>
  );
}

and copy button looks like this:

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $getSelection, $isRangeSelection, COPY_COMMAND } from 'lexical';

function Copy() {
 const [editor] = useLexicalComposerContext();
 const [canCopy, setCanCopy] = useState(false);

 // Track selection state to toggle button enabled/disabled
 useEffect(() => {
    return editor.registerUpdateListener(({ editorState }) => {
        editorState.read(() => {
            const selection = $getSelection();
            setCanCopy($isRangeSelection(selection) && !selection.isCollapsed());
        });
    });
}, [editor]);

return (
     <button disabled={!canCopy}
            onClick={() => editor.dispatchCommand(COPY_COMMAND, null)}/>
 );
}

Also custom nodes are involved, what’s the recommended way to handle them — especially to serialize them to the clipboard and deserialize them back properly via Lexical? Any suggestions on configuring Lexical’s paste handling to better support rich content and styles would be greatly appreciated.