How do I apply custom antd popover card to show comments?

[sazedur-strativ]

I can see all the comments from the side panel of comments. But I want to have a feature to show a popover when I will select a commented text. How can I achieve this?

First ss what i want to achieve and second ss is what I have now.

Code:
`

const CommentedText = memo(function CommentedText({ children, commentThread }) {
return (
<Popover
content={
<Card title="Comments" size="small" style={{ width: 300 }}>
{commentThread.comments.map(comment => (
<div key={comment.id} style={{ marginBottom: 8 }}>
{comment.author}: {comment.content}

))}

}
trigger="click"
placement="top"
className="comment-popover"
>
<span className="comment-highlight" style={{ background: '#fffbe6', cursor: 'pointer', padding: '0 2px' }}>
{children}


);
});

export default function CommentPlugin({ providerFactory }) {
const [editor] = useLexicalComposerContext();
const commentStore = useMemo(() => new CommentStore(editor), [editor]);
const comments = useCommentStore(commentStore);
const markNodeMap = useMemo(() => {
return new Map();
}, []);
const [activeAnchorKey, setActiveAnchorKey] = useState(null);
const [activeIDs, setActiveIDs] = useState([]);
const [showCommentInput, setShowCommentInput] = useState(false);
const [showComments, setShowComments] = useState(false);

useEffect(() => {
return editor.registerDecoratorListener(decorators => {
editor.getEditorState().read(() => {
const rootTextNodes = $getRoot().getAllTextNodes();
for (const node of rootTextNodes) {
if ($isMarkNode(node)) {
const ids = node.getIDs();
if (ids.length > 0) {
const thread = comments.find(t => t.id === ids[0]);
if (thread) {
const key = node.getKey();
const content = node.getTextContent();

            decorators.set(
              key,
              <span key={key} data-lexical-key={key}>
                <CommentedText commentThread={thread}>{content}</CommentedText>
              </span>,
            );
          }
        }
      }
    }
  });
});

}, [editor, comments]);

const cancelAddComment = useCallback(() => {
editor.update(() => {
const selection = $getSelection();
// Restore selection
if (selection !== null) {
selection.dirty = true;
}
});
setShowCommentInput(false);
}, [editor]);

const deleteCommentOrThread = useCallback(
(comment, thread) => {
if (comment.type === 'comment') {
const deletionInfo = commentStore.deleteCommentOrThread(comment, thread);
if (!deletionInfo) {
return;
}
const { markedComment, index } = deletionInfo;
commentStore.addComment(markedComment, thread, index);
} else {
commentStore.deleteCommentOrThread(comment);
// Remove ids from associated marks
const id = thread !== undefined ? thread.id : comment.id;
const markNodeKeys = markNodeMap.get(id);
if (markNodeKeys !== undefined) {
// Do async to avoid causing a React infinite loop
setTimeout(() => {
editor.update(() => {
for (const key of markNodeKeys) {
const node = $getNodeByKey(key);
if ($isMarkNode(node)) {
node.deleteID(id);
if (node.getIDs().length === 0) {
$unwrapMarkNode(node);
}
}
}
});
});
}
}
},
[commentStore, editor, markNodeMap],
);

const submitAddComment = useCallback(
(commentOrThread, isInlineComment, thread, selection) => {
commentStore.addComment(commentOrThread, thread);
if (isInlineComment) {
editor.update(() => {
if ($isRangeSelection(selection)) {
const isBackward = selection.isBackward();
const id = commentOrThread.id;

        // Wrap content in a MarkNode
        $wrapSelectionInMarkNode(selection, isBackward, id);
      }
    });
    setShowCommentInput(false);
  }
},
[commentStore, editor],

);

useEffect(() => {
const changedElems = [];
for (let i = 0; i < activeIDs.length; i++) {
const id = activeIDs[i];
const keys = markNodeMap.get(id);
if (keys !== undefined) {
for (const key of keys) {
const elem = editor.getElementByKey(key);
if (elem !== null) {
elem.classList.add('selected');
changedElems.push(elem);
setShowComments(true);
}
}
}
}
return () => {
for (let i = 0; i < changedElems.length; i++) {
const changedElem = changedElems[i];
changedElem.classList.remove('selected');
}
};
}, [activeIDs, editor, markNodeMap]);

useEffect(() => {
const markNodeKeysToIDs = new Map();

return mergeRegister(
  registerNestedElementResolver(
    editor,
    MarkNode,
    from => {
      return $createMarkNode(from.getIDs());
    },
    (from, to) => {
      // Merge the IDs
      const ids = from.getIDs();
      ids.forEach(id => {
        to.addID(id);
      });
    },
  ),
  editor.registerMutationListener(
    MarkNode,
    mutations => {
      editor.getEditorState().read(() => {
        for (const [key, mutation] of mutations) {
          const node = $getNodeByKey(key);
          let ids = [];

          if (mutation === 'destroyed') {
            ids = markNodeKeysToIDs.get(key) || [];
          } else if ($isMarkNode(node)) {
            ids = node.getIDs();
          }

          for (let i = 0; i < ids.length; i++) {
            const id = ids[i];
            let markNodeKeys = markNodeMap.get(id);
            markNodeKeysToIDs.set(key, ids);

            if (mutation === 'destroyed') {
              if (markNodeKeys !== undefined) {
                markNodeKeys.delete(key);
                if (markNodeKeys.size === 0) {
                  markNodeMap.delete(id);
                }
              }
            } else {
              if (markNodeKeys === undefined) {
                markNodeKeys = new Set();
                markNodeMap.set(id, markNodeKeys);
              }
              if (!markNodeKeys.has(key)) {
                markNodeKeys.add(key);
              }
            }
          }
        }
      });
    },
    { skipInitialization: false },
  ),
  editor.registerUpdateListener(({ editorState, tags }) => {
    editorState.read(() => {
      const selection = $getSelection();
      let hasActiveIds = false;
      let hasAnchorKey = false;

      if ($isRangeSelection(selection)) {
        const anchorNode = selection.anchor.getNode();

        if ($isTextNode(anchorNode)) {
          const commentIDs = $getMarkIDs(anchorNode, selection.anchor.offset);
          if (commentIDs !== null) {
            setActiveIDs(commentIDs);
            hasActiveIds = true;
          }
          if (!selection.isCollapsed()) {
            setActiveAnchorKey(anchorNode.getKey());
            hasAnchorKey = true;
          }
        }
      }
      if (!hasActiveIds) {
        setActiveIDs(_activeIds => (_activeIds.length === 0 ? _activeIds : []));
      }
      if (!hasAnchorKey) {
        setActiveAnchorKey(null);
      }
      if ($isRangeSelection(selection)) {
        setShowCommentInput(false);
      }
    });
  }),
  editor.registerCommand(
    INSERT_INLINE_COMMAND,
    () => {
      const domSelection = getDOMSelection(editor._window);
      if (domSelection !== null) {
        domSelection.removeAllRanges();
      }
      setShowCommentInput(true);
      return true;
    },
    COMMAND_PRIORITY_EDITOR,
  ),
);

}, [editor, markNodeMap]);

const onAddComment = () => {
editor.dispatchCommand(INSERT_INLINE_COMMAND, undefined);
};

return (
<>
{showCommentInput && (

)}
{activeAnchorKey !== null && activeAnchorKey !== undefined && !showCommentInput && (

)}
{
<Button
className={CommentPlugin_ShowCommentsButton ${showComments ? 'active' : ''}}
onClick={() => setShowComments(!showComments)}
title={showComments ? 'Hide Comments' : 'Show Comments'}
>


}
{showComments && (

)}
</>
);
}

`