Encoding Dynamic "Values"

[h-jennings]

Thank you for creating this fantastic library! It's really valuable reference material for learning more advance Lexical concepts.

I apologize for my silly question, but I'm new to the Lexical library and still trying to understand the best practices for encoding information. I'm particularly interested in how to handle dynamic values within an @mention component. For example, I see that you're encoding a user's first name as a value. How would you manage the situation if the user changes their first name? Additionally, if I want to include the user's avatar as part of this @mention component, how would I retrieve that information and keep it synchronized with the latest value in the database if they update their avatar or profile photo? I assume that this type of information isn't directly encoded in the data for the rich text editor but is instead reference information, like id, which can be used to retrieve the most up-to-date information from the database. Is this the correct way to think about it? Is it better to encode only information that is unlikely to change?

I also want to expand the @mentions feature to include other elements, such as posts. Titles, which are likely to change more frequently than a user's first name, may not always be in sync with the initial value a user selected. I believe this question applies in that context as well. Thank you in advance!

[dosubot[bot]]

Hey @h-jennings! I'm here to help you out with any questions you have about the Lexical library. Let's dive into solving this together!

To handle dynamic values within an @mention component, such as a user's first name or avatar, you can use the following approach:

1. Data Structure: The BeautifulMentionNode class is used to store mention information. It includes a __value for the mention's value and a __data property for additional data. You can update these using the setValue and setData methods, which allow for dynamic updates ^[1].

2. Dynamic Data Handling: For dynamic data like a user's first name or avatar, it's common to store a reference (e.g., a user ID) rather than the actual data. This way, you can fetch the latest information from your database whenever needed. This approach ensures that you always display the most current data without needing to update the editor's content directly.

3. Retrieving Additional Information: The plugin uses the useMentionLookupService hook to manage search queries and results. This hook can retrieve additional information, such as avatars, by including them in the items or returning them via the onSearch function. The MentionOption objects can store this additional data, allowing you to display it in the mentions menu ^[2].

4. Handling Frequent Changes: For elements like post titles that change frequently, it's best to store a reference (e.g., post ID) and fetch the current title from your database when needed. This ensures that the displayed information is always up-to-date.

By following these practices, you can effectively manage dynamic content in your @mention components, ensuring that the information remains current and synchronized with your database.

To continue talking to Dosu, mention @dosu.