RichTextEditorService API Reference

The RichTextEditorService is an Angular service that provides rich text editing capabilities using native browser APIs. It is a lightweight, custom implementation with no external dependencies.

Overview

The service manages rich text editor instances with support for:

Text formatting (bold, italic, underline, strikethrough, code)
Block formatting (code blocks, blockquotes)
Lists (ordered and unordered)
Links with validation
Mentions integration
Undo/redo history
Keyboard shortcuts
Full accessibility support

Installation

The service is provided at root level and automatically available throughout your application:

import { inject } from '@angular/core';
import { RichTextEditorService } from '@cometchat/chat-uikit-angular';

export class MyComponent {
  private editorService = inject(RichTextEditorService);
}

Creating an Editor

`createEditor(config?, element?): RichTextEditor`

Creates a new rich text editor instance. Parameters:

config (optional): Configuration object for the editor
element (optional): DOM element to mount the editor to

Returns: RichTextEditor instance Example:

ngOnInit() {
  this.editor = this.editorService.createEditor({
    placeholder: 'Type your message...',
    autofocus: true,
    onUpdate: (html, text) => {
      console.log('Content changed:', html, text);
    },
    onSelectionUpdate: (formatState) => {
      console.log('Format state:', formatState);
    }
  });
}

Configuration Options

interface RichTextEditorConfig {
  // Display placeholder text when editor is empty
  placeholder?: string;
  
  // Whether the editor is editable
  editable?: boolean;
  
  // Auto-focus behavior: true, false, 'start', 'end', 'all', or position number
  autofocus?: boolean | 'start' | 'end' | 'all' | number;
  
  // Initial HTML content
  content?: string;
  
  // Callback when content changes
  onUpdate?: (html: string, text: string) => void;
  
  // Callback when selection/format state changes
  onSelectionUpdate?: (formatState: RichTextFormatState) => void;
  
  // Callback when editor receives focus
  onFocus?: () => void;
  
  // Callback when editor loses focus
  onBlur?: () => void;
  
  // Mention-related callbacks
  onMentionStart?: (query: string) => void;
  onMentionEnd?: () => void;
  getMentionSuggestions?: (query: string) => Promise<MentionItem[]>;
  onMentionSelect?: (item: MentionItem) => void;
}

Text Formatting

`toggleBold(editor: RichTextEditor): void`

Toggles bold formatting on the selected text or at cursor position. Keyboard Shortcut: Ctrl+B (Windows/Linux) or Cmd+B (Mac) Example:

applyBold() {
  this.editorService.toggleBold(this.editor);
}

`toggleItalic(editor: RichTextEditor): void`

Toggles italic formatting on the selected text or at cursor position. Keyboard Shortcut: Ctrl+I (Windows/Linux) or Cmd+I (Mac)

`toggleUnderline(editor: RichTextEditor): void`

Toggles underline formatting on the selected text or at cursor position. Keyboard Shortcut: Ctrl+U (Windows/Linux) or Cmd+U (Mac)

`toggleStrikethrough(editor: RichTextEditor): void`

Toggles strikethrough formatting on the selected text or at cursor position.

`toggleCode(editor: RichTextEditor): void`

Toggles inline code formatting on the selected text or at cursor position.

Block Formatting

`toggleCodeBlock(editor: RichTextEditor): void`

Toggles code block formatting for the current block or selection.

`toggleBlockquote(editor: RichTextEditor): void`

Toggles blockquote formatting for the current block or selection.

Lists

`toggleOrderedList(editor: RichTextEditor): void`

Toggles ordered (numbered) list formatting. Behavior:

Press Enter to create a new list item
Press Enter twice to exit the list
Press Tab to indent a list item

`toggleBulletList(editor: RichTextEditor): void`

Toggles unordered (bullet) list formatting. Behavior:

Press Enter to create a new list item
Press Enter twice to exit the list
Press Tab to indent a list item

Links

`setLink(editor: RichTextEditor, url: string | null): void`

Sets or removes a link on the selected text. Parameters:

url: The URL to link to, or null to remove the link

Example:

addLink() {
  const url = prompt('Enter URL:');
  if (url) {
    this.editorService.setLink(this.editor, url);
  }
}

removeLink() {
  this.editorService.setLink(this.editor, null);
}

URL Validation:

URLs are validated before insertion
Invalid URLs display an error
URLs without protocol are automatically prefixed with https://

History (Undo/Redo)

`undo(editor: RichTextEditor): boolean`

Undoes the last action in the editor. Keyboard Shortcut: Ctrl+Z (Windows/Linux) or Cmd+Z (Mac) Returns: true if undo was successful, false if nothing to undo

`redo(editor: RichTextEditor): boolean`

Redoes the last undone action in the editor. Keyboard Shortcut: Ctrl+Y or Ctrl+Shift+Z (Windows/Linux) or Cmd+Shift+Z (Mac) Returns: true if redo was successful, false if nothing to redo

`canUndo(editor: RichTextEditor): boolean`

Checks if undo is available. Returns: true if there are actions to undo

`canRedo(editor: RichTextEditor): boolean`

Checks if redo is available. Returns: true if there are actions to redo

Content Management

`getHTML(editor: RichTextEditor): string`

Gets the HTML content from the editor with XSS sanitization. Returns: Sanitized HTML string Example:

const html = this.editorService.getHTML(this.editor);
console.log('HTML:', html);

`getText(editor: RichTextEditor): string`

Gets the plain text content from the editor without formatting. Returns: Plain text string with all HTML tags removed Example:

const text = this.editorService.getText(this.editor);
console.log('Plain text:', text);

`setContent(editor: RichTextEditor, content: string, emitUpdate?: boolean): void`

Sets the HTML content of the editor. Parameters:

content: HTML content to set
emitUpdate (optional): Whether to emit update event (default: false)

`clearContent(editor: RichTextEditor): void`

Clears all content from the editor.

`insertText(editor: RichTextEditor, text: string): void`

Inserts text at the current cursor position.

`deleteRange(editor: RichTextEditor, from: number, to: number): void`

Deletes a range of content from the editor. Parameters:

from: Start position (character offset)
to: End position (character offset)

`isEmpty(editor: RichTextEditor): boolean`

Checks if the editor content is empty. Returns: true if editor is empty

`hasFormatting(editor: RichTextEditor): boolean`

Checks if the content has any rich text formatting. Returns: true if content has formatting beyond plain text

Mentions

`insertMention(editor, id, label, charsToDelete, isSelf?): void`

Inserts a mention at the current cursor position. Parameters:

id: The unique ID of the mentioned user
label: The display name of the mentioned user (without @)
charsToDelete: Number of characters to delete before inserting (e.g., the @ and query text)
isSelf (optional): Whether the mention is for the logged-in user (default: false)

Example:

onMentionSelect(user: CometChat.User) {
  this.editorService.insertMention(
    this.editor,
    user.getUid(),
    user.getName(),
    this.queryLength + 1, // +1 for the @ symbol
    user.getUid() === this.loggedInUser.getUid()
  );
}

`getTextWithMentionFormat(editor: RichTextEditor): string`

Converts editor content to CometChat mention format. Returns: Text with mentions formatted as <@uid:{uid}> Example:

const formattedText = this.editorService.getTextWithMentionFormat(this.editor);
// Output: "Hello <@uid:user123>, how are you?"

`setContentWithMentions(editor, text, mentionedUsers, emitUpdate?): void`

Sets the content of the editor with mentions properly formatted. Parameters:

text: The text content with mention placeholders in format <@uid:name>
mentionedUsers: Array of mentioned users from the message
emitUpdate (optional): Whether to emit update event (default: false)

Example:

// When loading a message with mentions
this.editorService.setContentWithMentions(
  this.editor,
  message.getText(),
  message.getMentionedUsers()
);

`getUniqueMentionUids(editor: RichTextEditor): Set<string>`

Gets the set of unique mention UIDs from the editor content. Returns: Set of unique mention UIDs Example:

const mentionUids = this.editorService.getUniqueMentionUids(this.editor);
console.log('Mentioned users:', Array.from(mentionUids));

Mention Limit: Maximum of 10 unique mentions per message.

Format State

`getFormatState(editor: RichTextEditor): RichTextFormatState`

Gets the current format state for the editor. Returns: Object indicating which formats are currently active

interface RichTextFormatState {
  bold: boolean;
  italic: boolean;
  underline: boolean;
  strikethrough: boolean;
  code: boolean;
  blockquote: boolean;
  codeBlock: boolean;
  orderedList: boolean;
  bulletList: boolean;
  link: boolean;
}

Example:

const formatState = this.editorService.getFormatState(this.editor);
if (formatState.bold) {
  console.log('Bold is active');
}

`formatState` Signal

The service provides a reactive signal for the current format state:

// In your component
formatState = this.editorService.formatState;

// In your template
<button [class.active]="formatState().bold">Bold</button>

`getRichTextMetadata(editor: RichTextEditor): RichTextMetadata`

Gets rich text metadata for a message. Returns: Object with HTML content, plain text, and formatting flag

interface RichTextMetadata {
  html: string;
  plainText: string;
  hasFormatting: boolean;
}

Focus Management

`focus(editor: RichTextEditor, position?): void`

Focuses the editor and optionally positions the cursor. Parameters:

position (optional): Where to place cursor
- 'start': Beginning of content
- 'end': End of content (default)
- 'all': Select all content
- number: Specific character position

Example:

// Focus at end
this.editorService.focus(this.editor);

// Focus at start
this.editorService.focus(this.editor, 'start');

// Select all
this.editorService.focus(this.editor, 'all');

`blur(editor: RichTextEditor): void`

Removes focus from the editor.

Cleanup

`destroyEditor(editor: RichTextEditor): void`

Destroys an editor instance and cleans up all resources. Important: Always call this method when the editor is no longer needed to prevent memory leaks. Example:

ngOnDestroy() {
  if (this.editor) {
    this.editorService.destroyEditor(this.editor);
  }
}

Accessibility

The editor includes full accessibility support:

Tab: Focus editor
Ctrl/Cmd+B: Bold
Ctrl/Cmd+I: Italic
Ctrl/Cmd+U: Underline
Ctrl/Cmd+Z: Undo
Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z: Redo
Enter: New line or list item
Enter (twice in list): Exit list
Tab (in list): Indent
Escape: Close mention popup
Arrow keys: Navigate content

ARIA Support

role="textbox" on contenteditable element
aria-label for editor purpose
aria-multiline="true" for multiline editor
aria-placeholder for placeholder text
aria-live="polite" for format announcements

Formatting changes are announced
Mention insertions are announced
Undo/redo operations are announced

Browser Support

The editor supports modern browsers:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Fallbacks are provided for unsupported browser APIs.

Performance

The editor is optimized for performance:

Typing latency: < 50ms per keystroke (tested with 10,000 characters)
Formatting operations: < 100ms
Initialization: < 50ms
History grouping: Rapid typing is grouped into single undo steps (500ms delay)
Event delegation: Single event listener on contenteditable element
Memory management: Automatic cleanup on destroy

Security

XSS Protection

All HTML output is sanitized to prevent XSS attacks:

Script tags are removed
Event handlers are removed
Dangerous attributes are removed
Only safe HTML tags and attributes are allowed

Content Validation

URLs are validated before link insertion
Mention data is sanitized
Pasted content is sanitized

Scoping for Multiple Instances

RichTextEditorService is provided at the root level (providedIn: 'root'), so all message composers share the same editor configuration by default. If you need different editor configurations for different composers (e.g., a main composer with full formatting vs. a thread composer with minimal options), scope the service to a wrapper component:

@Component({
  selector: 'app-thread-composer',
  standalone: true,
  imports: [CometChatMessageComposerComponent],
  providers: [RichTextEditorService], // Scoped instance
  template: `<cometchat-message-composer [user]="user" [parentMessageId]="parentMessageId"></cometchat-message-composer>`
})
export class ThreadComposerComponent {
  // This is the LOCAL instance, not the root singleton
  private editorService = inject(RichTextEditorService);
}

See CometChatMessageList — Multiple Message Lists with Different Configurations for a complete multi-panel example.

​RichTextEditorService API Reference

​Overview

​Installation

​Creating an Editor

​createEditor(config?, element?): RichTextEditor

​Configuration Options

​Text Formatting

​toggleBold(editor: RichTextEditor): void

​toggleItalic(editor: RichTextEditor): void

​toggleUnderline(editor: RichTextEditor): void

​toggleStrikethrough(editor: RichTextEditor): void

​toggleCode(editor: RichTextEditor): void

​Block Formatting

​toggleCodeBlock(editor: RichTextEditor): void

​toggleBlockquote(editor: RichTextEditor): void

​Lists

​toggleOrderedList(editor: RichTextEditor): void

​toggleBulletList(editor: RichTextEditor): void

​Links

​setLink(editor: RichTextEditor, url: string | null): void

​History (Undo/Redo)

​undo(editor: RichTextEditor): boolean

​redo(editor: RichTextEditor): boolean

​canUndo(editor: RichTextEditor): boolean

​canRedo(editor: RichTextEditor): boolean

​Content Management

​getHTML(editor: RichTextEditor): string

​getText(editor: RichTextEditor): string

​setContent(editor: RichTextEditor, content: string, emitUpdate?: boolean): void

​clearContent(editor: RichTextEditor): void

​insertText(editor: RichTextEditor, text: string): void

​deleteRange(editor: RichTextEditor, from: number, to: number): void

​isEmpty(editor: RichTextEditor): boolean

​hasFormatting(editor: RichTextEditor): boolean

​Mentions

​insertMention(editor, id, label, charsToDelete, isSelf?): void

​getTextWithMentionFormat(editor: RichTextEditor): string

​setContentWithMentions(editor, text, mentionedUsers, emitUpdate?): void

​getUniqueMentionUids(editor: RichTextEditor): Set<string>

​Format State

​getFormatState(editor: RichTextEditor): RichTextFormatState

​formatState Signal

​getRichTextMetadata(editor: RichTextEditor): RichTextMetadata

​Focus Management

​focus(editor: RichTextEditor, position?): void

​blur(editor: RichTextEditor): void

​Cleanup

​destroyEditor(editor: RichTextEditor): void

​Accessibility

​Keyboard Navigation

​ARIA Support

​Screen Reader Support

​Browser Support

​Performance

​Security

​XSS Protection

​Content Validation

​Scoping for Multiple Instances

​See Also

RichTextEditorService API Reference

Overview

Installation

Creating an Editor

`createEditor(config?, element?): RichTextEditor`

Configuration Options

Text Formatting

`toggleBold(editor: RichTextEditor): void`

`toggleItalic(editor: RichTextEditor): void`

`toggleUnderline(editor: RichTextEditor): void`

`toggleStrikethrough(editor: RichTextEditor): void`

`toggleCode(editor: RichTextEditor): void`

Block Formatting

`toggleCodeBlock(editor: RichTextEditor): void`

`toggleBlockquote(editor: RichTextEditor): void`

Lists

`toggleOrderedList(editor: RichTextEditor): void`

`toggleBulletList(editor: RichTextEditor): void`

Links

`setLink(editor: RichTextEditor, url: string | null): void`

History (Undo/Redo)

`undo(editor: RichTextEditor): boolean`

`redo(editor: RichTextEditor): boolean`

`canUndo(editor: RichTextEditor): boolean`

`canRedo(editor: RichTextEditor): boolean`

Content Management

`getHTML(editor: RichTextEditor): string`

`getText(editor: RichTextEditor): string`

`setContent(editor: RichTextEditor, content: string, emitUpdate?: boolean): void`

`clearContent(editor: RichTextEditor): void`

`insertText(editor: RichTextEditor, text: string): void`

`deleteRange(editor: RichTextEditor, from: number, to: number): void`

`isEmpty(editor: RichTextEditor): boolean`

`hasFormatting(editor: RichTextEditor): boolean`

Mentions

`insertMention(editor, id, label, charsToDelete, isSelf?): void`

`getTextWithMentionFormat(editor: RichTextEditor): string`

`setContentWithMentions(editor, text, mentionedUsers, emitUpdate?): void`

`getUniqueMentionUids(editor: RichTextEditor): Set<string>`

Format State

`getFormatState(editor: RichTextEditor): RichTextFormatState`

`formatState` Signal

`getRichTextMetadata(editor: RichTextEditor): RichTextMetadata`

Focus Management

`focus(editor: RichTextEditor, position?): void`

`blur(editor: RichTextEditor): void`

Cleanup

`destroyEditor(editor: RichTextEditor): void`

Accessibility

Keyboard Navigation

ARIA Support

Screen Reader Support

Browser Support

Performance

Security

XSS Protection

Content Validation

Scoping for Multiple Instances

See Also