Lexical/React - Post Quote Plugin

[ElBambu]

Hello i'm building a forum like platofmr and i chosed lexical as text editor so far i configured everything nicely, and build a couple of custom plugins but i can't seem to find a solution for a quote plugin i'm trying to build

I used the image plugin on the playground as base idea since i saw it has a nested composer which is what i need i guess...

this is my code though i don't think it's the correct way to do it

export interface QuotePayload {
    userId: string;
    username: string;
    postId: string;
    postContent?: LexicalEditor,
    key?: NodeKey;

}
export type SerializedPostQuoteNode = Spread<
    {
        userId: string;
        username: string;
        postId: string;
        postContent: SerializedEditor
        version: 1;
        type: "post-quote"
    },
    SerializedLexicalNode
>;

function converQuoteElement(domNode: HTMLElement): null | DOMConversionOutput {
    if (domNode instanceof HTMLDivElement) {
        const userId = domNode.dataset.userid ?? '';
        const username = domNode.dataset.username ?? '';
        const postId = domNode.dataset.postid ?? '';
        const node = $createPostQuoteNode({ userId, username, postId });
        return { node };
    }
    return null;
}



export class PostQuoteNode extends DecoratorNode<JSX.Element> {
    __userId: string;
    __username: string;
    __postId: string;
    __postContent: LexicalEditor;

    static getType(): string {
        return 'post-quote';
    }
    static clone(node: PostQuoteNode): PostQuoteNode {
        return new PostQuoteNode(
            node.__userId,
            node.__username,
            node.__postId,
            node.__postContent,
            node.__key,
        );
    }


    static importJSON(serializedNode: SerializedPostQuoteNode): PostQuoteNode {
        const { postId, userId, username, postContent } =
            serializedNode;
        const node = $createPostQuoteNode({
            postId, userId, username
        });
        const nestedEditor = node.__postContent;
        const editorState = nestedEditor.parseEditorState(postContent.editorState);

        if (!editorState.isEmpty()) {
            nestedEditor.setEditorState(editorState);
        }
        return node;
    }

    exportDOM(): DOMExportOutput {
        const element = document.createElement('div');
        element.setAttribute('data-userid', this.__userId);
        element.setAttribute('data-username', this.__username);
        element.setAttribute('data-postid', this.__postId);
        return { element };
    }

    static importDOM(): DOMConversionMap | null {
        return {
            div: (node: Node) => ({
                conversion: converQuoteElement,
                priority: 0,
            }),
        };
    }

    constructor(
        userId: string,
        username: string,
        postId: string,
        postContent?: LexicalEditor,
        key?: NodeKey,
    ) {
        super(key);
        this.__userId = userId;
        this.__username = username;
        this.__postId = postId;
        this.__postContent = postContent || createEditor();
        console.log({ username })
    }

    exportJSON(): SerializedPostQuoteNode {
        return {
            userId: this.getUserId(),
            postContent: this.__postContent.toJSON(),
            username: this.getUsername(),
            postId: this.getPostId(),
            version: 1,
            type: "post-quote",
        };
    }

    updateDOM(): false {
        return false;
    }

    getUserId(): string {
        return this.__userId;
    }
    getUsername(): string {
        return this.__username;
    }
    getPostId(): string {
        return this.__postId;
    }

    createDOM(config: EditorConfig): HTMLElement {
        const span = document.createElement('div');
        const theme = config.theme;
        const className = theme.quotePost;
        if (className !== undefined) {
            span.className = className;
        }
        return span;
    }

    decorate(): JSX.Element {
        return <QuoteComponent nodeKey={this.getKey()} postId={this.__postId} postContent={this.__postContent} userId={this.__userId} username={this.__username} />
    }

}

and this is the base decorated component

function QuoteComponent({
    userId,
    username,
    postId,
    postContent,
    nodeKey
}: {
    userId: string;
    username: string;
    postContent: LexicalEditor;
    nodeKey: NodeKey;
    postId: string;
}): JSX.Element {
    const postEditor = createEditor({ editorState: postContent as any })
    console.log({ postEditor })
    return (
        <>
            <div>
                <h1>{username}</h1>
            </div>
            <div className="image-caption-container">
                <LexicalNestedComposer initialEditor={postEditor}>
                    <RichTextPlugin
                        contentEditable={<LexicalContentEditable />}
                        placeholder={""}
                        initialEditorState={postContent as any}
                    />
                </LexicalNestedComposer>
            </div>
        </>
    );
}

what i think i'm failing is the fact that i have to pass a LexicalEditor payload in the post content in fact it gives me some errors when he tries to initialize the nestedComposer like he can't find the theme of undefined or something like that but now that i think about it the post i'm quoting has been serialized to html, in a previous version i tried to do it by converting a previously serialized post in html to lexical nodes and it worked but i couldnt manage to have the quote it editable ( which it's a feature i want since maybe u want to quote only parts of a post ) so i assume i need to use this LexicalNestedComposer somehow

can someone give me a tip ?