Link Dialog

Dialog for adding and editing hyperlinks in the rich text editor, with text and URL inputs, validation, and focus trapping.

AI Integration Quick Reference

{
  "component": "CometChatLinkDialog",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatLinkDialog } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Dialog for adding/editing hyperlinks with text and URL inputs, validation, URL normalization, and focus trapping.",
  "cssRootClass": ".cometchat-link-dialog",
  "primaryOutput": {
    "prop": "onSave",
    "type": "(data: CometChatLinkDialogData) => void"
  },
  "props": {
    "data": {
      "mode": { "type": "'add' | 'edit'", "default": "'add'" },
      "initialText": { "type": "string", "default": "''" },
      "initialUrl": { "type": "string", "default": "''" },
      "selectedText": { "type": "string", "default": "''" }
    },
    "callbacks": {
      "onSave": "(data: CometChatLinkDialogData) => void",
      "onCancel": "() => void"
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {
    "CometChatLinkDialogData": {
      "text": "string",
      "url": "string"
    }
  }
}

Where It Fits

CometChatLinkDialog is a base component used by CometChatMessageComposer when a user wants to add or edit a hyperlink in the rich text editor. It works alongside CometChatLinkPopover — the popover’s Edit button opens this dialog, and the popover’s Remove button removes the link directly.

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

function MessageComposer() {
  const [showDialog, setShowDialog] = useState(false);

  return (
    <>
      <button onClick={() => setShowDialog(true)}>Add Link</button>
      {showDialog && (
        <CometChatLinkDialog
          mode="add"
          onSave={({ text, url }) => {
            console.log("Insert link:", text, url);
            setShowDialog(false);
          }}
          onCancel={() => setShowDialog(false)}
        />
      )}
    </>
  );
}

---

Minimal Render

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

function LinkDialogDemo() {
  return (
    <CometChatLinkDialog
      mode="add"
      onSave={({ text, url }) => console.log(text, url)}
      onCancel={() => console.log("cancelled")}
    />
  );
}

export default LinkDialogDemo;

Root CSS class: .cometchat-link-dialog

---

Display Logic

Mode	Title	Text input	URL input	Save enabled
'add'	Add Link	Empty (or selectedText)	Empty (or initialUrl)	When URL is non-empty
'edit'	Edit Link	Pre-filled (initialText)	Pre-filled (initialUrl)	When changes are made

URL normalization: if the URL doesn’t have a protocol (https://, http://, mailto:), https:// is automatically prepended on save.

---

Actions and Events

Callback Props

onSave

Fires when Save is clicked with valid data. Receives the normalized link data.

<CometChatLinkDialog
  mode="add"
  onSave={({ text, url }) => insertLink(text, url)}
  onCancel={() => {}}
/>

onCancel

Fires when Cancel is clicked or Escape is pressed.

---

Keyboard Navigation

Key	Action
Escape	Closes the dialog (calls onCancel)
Enter	Submits the form (when pressed in an input field)
Tab	Cycles focus within the dialog (focus trap)
Shift+Tab	Cycles focus backward within the dialog

Focus order: Text input → URL input → Cancel → Save → (wraps to Text input).

The appropriate input is auto-focused on mount: text input in add mode (when empty), URL input in edit mode.

---

Common Patterns

Add mode

import { CometChatLinkDialog } from "@cometchat/chat-uikit-react";

function AddLink() {
  return (
    <CometChatLinkDialog
      mode="add"
      onSave={({ text, url }) => console.log(text, url)}
      onCancel={() => {}}
    />
  );
}

Edit mode

import { CometChatLinkDialog } from "@cometchat/chat-uikit-react";

function EditLink() {
  return (
    <CometChatLinkDialog
      mode="edit"
      initialText="CometChat Docs"
      initialUrl="https://www.cometchat.com/docs"
      onSave={({ text, url }) => console.log(text, url)}
      onCancel={() => {}}
    />
  );
}

Add mode with selected text

import { CometChatLinkDialog } from "@cometchat/chat-uikit-react";

function AddLinkWithSelection() {
  return (
    <CometChatLinkDialog
      mode="add"
      selectedText="Visit Example"
      initialUrl="https://example.com"
      onSave={({ text, url }) => console.log(text, url)}
      onCancel={() => {}}
    />
  );
}

---

CSS Architecture

Key Selectors

Target	Selector
Root	.cometchat-link-dialog
Title	.cometchat-link-dialog__title
Inputs container	.cometchat-link-dialog__inputs
Input group	.cometchat-link-dialog__input-group
Label	.cometchat-link-dialog__label
Input field	.cometchat-link-dialog__input
Input focus	.cometchat-link-dialog__input:focus
Input error	.cometchat-link-dialog__input[aria-invalid="true"]
Error message	.cometchat-link-dialog__error
Button group	.cometchat-link-dialog__button-group
Cancel wrapper	.cometchat-link-dialog__button-group-cancel
Save wrapper	.cometchat-link-dialog__button-group-save

---

Props

---

mode

Dialog mode — 'add' for new links, 'edit' for existing links.

Type	'add' | 'edit'
Default	'add'

---

initialText

Initial text value for the text input.

Type	string
Default	''

---

initialUrl

Initial URL value for the URL input.

Type	string
Default	''

---

selectedText

Selected text from the editor, used as default text in add mode.

Type	string
Default	''

---

onSave

Callback when Save is clicked with valid data.

Type	(data: CometChatLinkDialogData) => void
Required	Yes

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

---

onCancel

Callback when Cancel is clicked or Escape is pressed.

Type	() => void
Required	Yes

---

className

Custom CSS class applied to the root element.

Type	string
Default	undefined