Implementing a Gmail-like Foldable Content Feature in a React Lexical Editor

Question

I'm working on a project where I'm using React and Lexical to create an email editor similar to Gmail's. I've already completed a Lexical tutorial, implemented styles for H1-H6, added undo/redo functionality, and created a quote block. I have a basic understanding of Lexical's structure.

So far, I've successfully created a feature where, upon clicking a reply button in React, an editing screen opens displaying the date and other information nodes of the email to be replied to, along with a Lexical quote node.

However, I'm struggling to implement a feature similar to Gmail's "..." (ellipsis) that hides and reveals the content of the reply email (quote block) when clicked. I'm not even sure what this feature is commonly called or how to approach its implementation in a React Lexical editor.

I've searched Stack Overflow and found a related question (Is there an open-source JavaScript rich-text editor similar to Gmail's?), but it's 13 years old and doesn't quite match what I'm looking for.

I would greatly appreciate any guidance, examples, or references on how to implement this foldable content feature in a React Lexical editor. Thank you in advance for your help!

What I've tried so far:

1. Completed a Lexical Tutorial: I went through a tutorial on Lexical to get a basic understanding of its structure and functionality.
2. Implemented Basic Features: I added styles for headers (H1-H6), implemented undo/redo functionality, and created a quote block in the Lexical editor.
3. React Reply Button Feature: I successfully created a feature where clicking a reply button in React opens an editing screen displaying the email's information nodes and a Lexical quote node.

What I was expecting to achieve next was the implementation of a Gmail-like foldable content feature. Specifically, I wanted to add an ellipsis ("...") in the editor that, when clicked, would reveal or hide the content of the reply email (quote block). This is similar to how Gmail allows users to expand or collapse quoted text in a reply.

However, I'm unsure how to approach this in a React Lexical editor. I'm looking for guidance on how to implement this feature or any examples that could help me understand the necessary steps.

Answer 1

I've managed to resolve my issue for now. In brief, I assigned appropriate HTML class names to the parts I wanted to hide and used CSS to make them invisible.

Upon closer observation, the ellipsis in Gmail is placed outside the editor's frame, so I also placed a button outside the frame that dynamically changes the style when pressed.

The style is applied to the styledComponent specified in the RichTextPlugin's contentEditable option.

This is a relatively simple approach, but it's working well for me so far, so I'm leaving this here for the record.

I spent a considerable amount of time investigating LexicalComposer's Node state, exportDOM, and other aspects, but for this particular issue, such knowledge was not necessary, and it could be addressed with basic knowledge of React.