I am wondering how to implement Lexical as an input for a chat app. The issue lies in rendering the message list.
A naive approach would involve creating a common message editor component that wraps Lexical and all necessary plugins, with an editable prop. For the message input component, we would set editable="true", and for each message, editable="false". However, it's clearly suboptimal to have a whole editor instance for each message, especially when there could be hundreds of messages at a time. I haven't tested it yet, but I believe it would be a very resource-intensive approach.
The only alternative I could think of is to prerender HTML on save and store it in the database, but this has several caveats as well. It won't keep up with future editor updates, and there are concerns related to rendering HTML from user input, among other issues.
I believe this problem has likely been solved by someone already, and I would be glad to learn about better solutions.