Link Popover

Floating popover for link actions in the rich text editor, with Edit and Remove buttons, keyboard navigation, and focus management.

AI Integration Quick Reference

{
  "component": "CometChatLinkPopover",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatLinkPopover } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Floating popover for link actions with Edit/Remove buttons, keyboard navigation, and focus management.",
  "cssRootClass": ".cometchat-link-popover",
  "primaryOutput": {
    "prop": "onEdit",
    "type": "(data: CometChatLinkPopoverData) => void"
  },
  "props": {
    "data": {
      "text": { "type": "string", "required": true },
      "url": { "type": "string", "required": true },
      "position": { "type": "{ top: number; left: number }", "required": true }
    },
    "callbacks": {
      "onEdit": "(data: CometChatLinkPopoverData) => void",
      "onRemove": "() => void",
      "onClose": "() => void"
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {
    "CometChatLinkPopoverData": {
      "url": "string",
      "text": "string"
    }
  }
}

Where It Fits

CometChatLinkPopover is a base component used by CometChatMessageComposer when a user clicks on a link in the rich text editor. It provides quick Edit and Remove actions for the selected link.

import { useState } from "react";
import { CometChatLinkPopover } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function RichTextEditor() {
  const [linkPopover, setLinkPopover] = useState<{
    text: string;
    url: string;
    position: { top: number; left: number };
  } | null>(null);

  return (
    <>
      {/* Editor content with link click handler */}
      {linkPopover && (
        <CometChatLinkPopover
          text={linkPopover.text}
          url={linkPopover.url}
          position={linkPopover.position}
          onEdit={({ url, text }) => console.log("Edit:", url, text)}
          onRemove={() => console.log("Remove link")}
          onClose={() => setLinkPopover(null)}
        />
      )}
    </>
  );
}

---

Minimal Render

import { CometChatLinkPopover } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function LinkPopoverDemo() {
  return (
    <CometChatLinkPopover
      text="Example"
      url="https://example.com"
      position={{ top: 200, left: 100 }}
      onEdit={() => {}}
      onRemove={() => {}}
      onClose={() => {}}
    />
  );
}

export default LinkPopoverDemo;

Root CSS class: .cometchat-link-popover

---

Actions and Events

Callback Props

onEdit

Fires when the Edit button is clicked. Receives the link data.

<CometChatLinkPopover
  text="Example"
  url="https://example.com"
  position={{ top: 200, left: 100 }}
  onEdit={({ url, text }) => openEditDialog(url, text)}
  onRemove={() => {}}
  onClose={() => {}}
/>

onRemove

Fires when the Remove button is clicked.

onClose

Fires when the popover should close — triggered by Escape key, Tab key, outside click, or the close button.

---

Keyboard Navigation

Key	Action
Escape	Closes the popover
Tab	Closes the popover
Arrow Down / Right	Moves focus from Edit → Remove (wraps)
Arrow Up / Left	Moves focus from Remove → Edit (wraps)
Enter / Space	Activates the focused button

The Edit button is auto-focused on mount. Focus is restored to the previously focused element on close.

---

CSS Architecture

Key Selectors

Target	Selector
Root	.cometchat-link-popover
Close button	.cometchat-link-popover__close
Title	.cometchat-link-popover__title
URL	.cometchat-link-popover__url
Actions container	.cometchat-link-popover__actions
Edit button	.cometchat-link-popover__button--edit
Remove button	.cometchat-link-popover__button--remove

Customization Matrix

What to change	Where	Property/API	Example
Handle edit action	Component props	onEdit	onEdit={({ url, text }) => ...}
Handle remove action	Component props	onRemove	onRemove={() => ...}
Handle close	Component props	onClose	onClose={() => setVisible(false)}
Set position	Component props	position	position={{ top: 200, left: 100 }}
Change colors	Global CSS	.cometchat-link-popover selectors	Override CSS variables

---

Props

---

text

The link display text shown as the popover title.

Type	string
Required	Yes

---

url

The link URL displayed and opened on click.

Type	string
Required	Yes

---

position

Position of the popover (top/left in px, fixed relative to viewport).

Type	{ top: number; left: number }
Required	Yes

---

onEdit

Callback when the Edit button is clicked.

Type	(data: CometChatLinkPopoverData) => void
Required	Yes

interface CometChatLinkPopoverData {
  url: string;
  text: string;
}

---

onRemove

Callback when the Remove button is clicked.

Type	() => void
Required	Yes

---

onClose

Callback when the popover should close.

Type	() => void
Required	Yes

---

className

Custom CSS class applied to the root element.

Type	string
Default	undefined

---

CSS Selectors

Target	Selector
Root (fixed position)	.cometchat-link-popover
Close button	.cometchat-link-popover__close
Close button hover	.cometchat-link-popover__close:hover
Close button focus	.cometchat-link-popover__close:focus-visible
Title	.cometchat-link-popover__title
URL link	.cometchat-link-popover__url
URL hover	.cometchat-link-popover__url:hover
Actions container	.cometchat-link-popover__actions
Edit button	.cometchat-link-popover__button--edit
Remove button	.cometchat-link-popover__button--remove