Whats the preffered way of storing it in db.

[pranavmappoli]

So once mention has inserted, whats the preffered mode of saving the details in db ?
do we need to keep a separate mention table in db or how this can be done

my requirement is :

1. building a comment box
2. user can mention other user
3. user should able to click in the mention so that it will forward to user profile

[dosubot[bot]]

To store mention data in a database when using the lexical-beautiful-mentions plugin, you can follow these general guidelines:

1. Data Structure: The mention data typically includes a trigger, value, and optional data such as user ID or additional metadata. You can extract this data using the getMentions function provided by the plugin, which returns all mentions used in the editor ^[1].

2. Database Schema:

   • Mentions Table: You can create a separate table for mentions with columns for mention_id, trigger, value, and any additional metadata (e.g., user_id, avatar_url). This allows you to store each mention's details separately.
   • Comments Table: In your comments table, you can store the comment text and a reference to the mentions (e.g., a foreign key or a JSON field containing mention IDs).

3. Integration:

   • When a mention is inserted, extract the mention data and store it in the mentions table.
   • Link the mention to the comment using a foreign key or by storing the mention data directly in the comment record as a JSON object.

4. User Profile Links: To enable clicking on a mention to redirect to a user profile, you can customize the rendering of mentions in the editor. Use a custom component to render mentions as links, as shown in the example below:

const CustomMentionComponent = ({ trigger, value, data }) => {
  const profileUrl = `/user/${data.userId}`; // Assuming 'data' contains 'userId'
  return (
    <a href={profileUrl} style={{ color: 'blue', textDecoration: 'underline' }}>
      {trigger}{value}
    </a>
  );
};

This approach allows you to maintain a clean separation of data and functionality, making it easier to manage and extend your application.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[dosubot[bot]]

To render mentions while fetching data from both the comments and mentions tables, you can follow these steps:

1. Fetch Data: Retrieve the comment text and associated mention data from your database. You can use SQL joins or separate queries to get the necessary information. For example, you might have a query that fetches comments along with their related mentions using a foreign key relationship.

2. Combine Data: Once you have the comment text and mention data, you need to combine them in a format that the Lexical editor can understand. This involves converting the mention data into a format suitable for rendering in the editor.

3. Render in Lexical Editor: Use the lexical-beautiful-mentions plugin to render the mentions within the comment text. You can utilize the BeautifulMentionNode or a custom mention node to display mentions with links to user profiles.

Here's a basic example of how you might set up the rendering:

import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { BeautifulMentionsPlugin, BeautifulMentionNode } from "lexical-beautiful-mentions";

const editorConfig = {
  nodes: [BeautifulMentionNode],
  theme: {
    beautifulMentions: {
      "@": "mention-style",
    },
  },
};

const CommentEditor = ({ commentText, mentions }) => {
  const initialEditorState = () => {
    // Convert comment text and mentions into Lexical nodes
    const root = $getRoot();
    const paragraph = $createParagraphNode();
    paragraph.append(...$convertToMentionNodes(commentText, mentions));
    root.append(paragraph);
  };

  return (
    <LexicalComposer initialConfig={{ ...editorConfig, editorState: initialEditorState }}>
      <RichTextPlugin contentEditable={<div />} placeholder={<div />} />
      <BeautifulMentionsPlugin items={mentions} />
    </LexicalComposer>
  );
};

In this setup:

• initialEditorState: This function initializes the editor state by converting the fetched comment text and mentions into Lexical nodes using $convertToMentionNodes.
• BeautifulMentionsPlugin: This plugin handles the rendering of mentions, allowing you to customize their appearance and behavior.

By following these steps, you can effectively render mentions within comment text using data fetched from both the comments and mentions tables.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[pranavmappoli]

@dosu how to extract mention details from the editor ?

[dosubot[bot]]

To extract mention details from the editor using the lexical-beautiful-mentions plugin, you can use the getMentions function provided by the useBeautifulMentions hook. This function reads the editor state and maps over the mention nodes to extract their details, such as trigger, value, and data.

Here's a code snippet to illustrate how you can use this function:

const getMentions = useCallback(() => {
  return editor.getEditorState().read(() =>
    $findBeautifulMentionNodes(editor).map((node) => {
      const { trigger, value, data } = node.exportJSON();
      return { trigger, value, data };
    }),
  );
}, [editor]);

You can call getMentions() to retrieve an array of objects, each containing the trigger, value, and data of a mention ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[pranavmappoli]

@dosu where we can import the $findBeautifulMentionNodes , share the complete code

[dosubot[bot]]

The $findBeautifulMentionNodes function can be imported from the mention-utils module. Here is the relevant import statement:

import {
  $findBeautifulMentionNodes,
  // other imports...
} from "./mention-utils";

The complete code for its usage is as follows:

const mentions = $findBeautifulMentionNodes(editor);
for (const mention of mentions) {
  const value = mention.getValue();
  const data = mention.getData();
  // only add the mention if it's not already in the list
  if (
    mention.getTrigger() === trigger &&
    (query === null || mention.getValue().startsWith(query)) &&
    opt.every((o) => o.value !== value)
  ) {
    opt.push(new MentionOption(trigger, value, value, data));
  }
}

This code snippet is used within the BeautifulMentionsPlugin to find and process mention nodes in the editor's state. The function $findBeautifulMentionNodes checks if the CustomBeautifulMentionNode is available in the editor and returns nodes of that type; otherwise, it defaults to returning nodes of type BeautifulMentionNode ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}