@cometchat/chat-uikit-react 6.3.12 → 6.4.0

package/dist/types/utils/HtmlToMarkdown.d.ts

@@ -0,0 +1,52 @@
+/**
+ * HTML to Markdown Converter
+ *
+ * Converts rich text HTML from the message composer to markdown
+ * for storage and transmission.
+ *
+ * Conversion rules:
+ * - <b>, <strong> → **text**
+ * - <i>, <em> → _text_
+ * - <s>, <strike>, <del> → ~~text~~
+ * - <u> → <u>text</u> (HTML-style underline)
+ * - <code> (not in pre) → `text`
+ * - <pre><code> → ```text```
+ * - <blockquote> → > text
+ * - <a href="url">text</a> → [text](url)
+ * - <ol><li> → 1. text
+ * - <ul><li> → • text
+ */
+/**
+ * Convert HTML string to markdown
+ */
+export declare function htmlToMarkdown(html: string): string;
+/**
+ * Remove escape backslashes from markdown text before sending.
+ * Preserves literal markdown characters that were escaped by the user.
+ *
+ * Rules:
+ * - Single backslash before markdown character: remove backslash, keep character
+ * - Even number of backslashes: keep half of them (they escape each other)
+ * - Odd number of backslashes: keep (n-1)/2 backslashes, last one escapes the markdown char
+ *
+ * Examples:
+ * - \* → *
+ * - \\* → \*
+ * - \\\* → \*
+ * - \\\\* → \\*
+ *
+ * @param text - Markdown text that may contain escape sequences
+ * @returns Text with escape backslashes removed
+ */
+export declare function removeEscapeBackslashes(text: string): string;
+/**
+ * Clean up markdown output
+ * - Remove excessive newlines
+ * - Trim whitespace
+ */
+export declare function cleanMarkdown(markdown: string): string;
+/**
+ * Convert HTML to clean markdown
+ * Removes escape backslashes before sending (Requirement 12.2)
+ */
+export declare function convertHtmlToMarkdown(html: string): string;

package/dist/types/utils/MarkdownPatternDetector.d.ts

@@ -0,0 +1,108 @@
+/**
+ * MarkdownPatternDetector - Utility for detecting and validating markdown syntax patterns
+ * in contenteditable elements for automatic conversion to rich text formatting.
+ */
+/**
+ * Represents a markdown pattern definition
+ */
+export interface MarkdownPattern {
+    type: 'bold' | 'italic' | 'underline' | 'strikethrough' | 'codeInline' | 'codeBlock' | 'link';
+    openDelimiter: string;
+    closeDelimiter: string;
+    priority: number;
+    /** If true, use custom detection logic instead of standard delimiter matching */
+    customDetection?: boolean;
+}
+/**
+ * Represents a detected markdown pattern match
+ */
+export interface PatternMatch {
+    pattern: MarkdownPattern;
+    startOffset: number;
+    endOffset: number;
+    contentStart: number;
+    contentEnd: number;
+    content: string;
+    linkUrl?: string;
+}
+/**
+ * Context information for pattern detection
+ */
+export interface DetectionContext {
+    text: string;
+    cursorOffset: number;
+    triggerChar: string;
+    scopeStart: number;
+    scopeEnd: number;
+}
+/**
+ * Supported markdown patterns ordered by priority (highest first)
+ */
+export declare const MARKDOWN_PATTERNS: MarkdownPattern[];
+/**
+ * Map of trigger characters to their associated patterns for efficient lookup
+ */
+export declare const TRIGGER_CHARS: Record<string, MarkdownPattern[]>;
+/**
+ * Detects markdown patterns in text at cursor position
+ *
+ * @param context - Detection context with text, cursor position, and scope boundaries
+ * @returns PatternMatch if valid pattern found, null otherwise
+ */
+export declare function detectMarkdownPattern(context: DetectionContext): PatternMatch | null;
+/**
+ * Validates that a pattern match is properly formed
+ *
+ * @param match - Pattern match to validate
+ * @param context - Detection context
+ * @returns true if pattern is valid, false otherwise
+ */
+export declare function validatePattern(match: PatternMatch, context: DetectionContext): boolean;
+/**
+ * Checks if a position in text is within an escape sequence
+ *
+ * @param text - Full text content
+ * @param position - Position to check
+ * @returns true if position is escaped, false otherwise
+ */
+export declare function isEscaped(text: string, position: number): boolean;
+/**
+ * Finds scope boundaries (paragraph/block element) for pattern matching
+ *
+ * @param element - Container element
+ * @param cursorNode - Current cursor node
+ * @param cursorOffset - Current cursor offset
+ * @returns Object with start and end offsets of the scope
+ */
+export declare function findScopeBoundaries(element: HTMLElement, cursorNode: Node, cursorOffset: number): {
+    start: number;
+    end: number;
+};
+/**
+ * Checks if the cursor is currently inside a mention element.
+ * Mention elements use `<span class="cometchat-mentions">`.
+ *
+ * @param cursorNode - The DOM node where the cursor is positioned
+ * @param containerElement - The contenteditable container element
+ * @returns true if cursor is inside a mention span, false otherwise
+ */
+export declare function isCursorInsideMention(cursorNode: Node, containerElement: HTMLElement): boolean;
+/**
+ * Checks if the cursor is currently inside a link (anchor) element.
+ *
+ * @param cursorNode - The DOM node where the cursor is positioned
+ * @param containerElement - The contenteditable container element
+ * @returns true if cursor is inside an <a> element, false otherwise
+ */
+export declare function isCursorInsideLink(cursorNode: Node, containerElement: HTMLElement): boolean;
+/**
+ * Checks if a pattern match spans across a mention or link element boundary.
+ * This prevents markdown patterns from being matched when the opening delimiter
+ * is outside a mention/link and the closing delimiter is inside (or vice versa).
+ *
+ * @param containerElement - The contenteditable container element
+ * @param startOffset - Text offset of the pattern start (opening delimiter)
+ * @param endOffset - Text offset of the pattern end (closing delimiter)
+ * @returns true if the pattern crosses a mention or link boundary, false otherwise
+ */
+export declare function patternCrossesMentionOrLink(containerElement: HTMLElement, startOffset: number, endOffset: number): boolean;

package/dist/types/utils/MessageUtils.d.ts

@@ -29,6 +29,12 @@ export declare class MessageUtils {
      * @returns {JSX.Element} The default view for moderated messages.
      */
     getModeratedMessageBottomView(): JSX.Element;
+    /**
+     * Retrieves the bottom view for permission denied messages
+     *
+     * @returns {JSX.Element} The default view for permission denied messages.
+     */
+    getPermissionDeniedMessageBottomView(): JSX.Element;
     /**
      * Retrieves the bubble wrapper for a message based on the provided template.
      *

package/dist/types/utils/RichTextFormatting.d.ts

@@ -0,0 +1,143 @@
+export type FormatType = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'link' | 'orderedList' | 'unorderedList' | 'blockquote' | 'codeInline' | 'codeBlock';
+/**
+ * Creates a rich text formatting utility bound to a specific document context
+ * Supports iframe embedding by accepting document/window from IframeContext
+ */
+export declare function createRichTextFormatter(getDocument: () => Document, getWindow: () => Window): {
+    getSelection: () => Selection | null;
+    saveSelection: () => Range | null;
+    restoreSelection: (range: Range | null) => void;
+    hasSelection: () => boolean;
+    getSelectedText: (savedRange?: Range | null) => string;
+    isFormatted: (formatType: FormatType, containerElement: HTMLElement) => boolean;
+    isFormattingModeActive: () => boolean;
+    getActiveFormats: (containerElement: HTMLElement) => FormatType[];
+    getActiveFormattingModes: () => FormatType[];
+    findFormattingAncestor: () => HTMLElement | null;
+    applyFormat: () => void;
+    removeFormat: () => void;
+    toggleFormat: (formatType: FormatType, containerElement: HTMLElement) => void;
+    toggleFormattingMode: () => void;
+    toggleBold: (containerElement: HTMLElement) => void;
+    toggleItalic: (containerElement: HTMLElement) => void;
+    toggleUnderline: (containerElement: HTMLElement) => void;
+    toggleStrikethrough: (containerElement: HTMLElement) => void;
+    insertLink: (url: string, displayText: string | undefined, containerElement: HTMLElement) => void;
+    updateLink: (url: string, displayText: string | undefined, containerElement: HTMLElement) => void;
+    removeLink: (containerElement: HTMLElement) => void;
+    isInsideLink: (containerElement: HTMLElement) => boolean;
+    toggleOrderedList: (containerElement: HTMLElement) => void;
+    toggleUnorderedList: (containerElement: HTMLElement) => void;
+    fixOrderedListContinuation: (containerElement: HTMLElement) => void;
+    isInsideList: (listType: "orderedList" | "unorderedList", containerElement: HTMLElement) => HTMLElement | null;
+    isInsideAnyList: (containerElement: HTMLElement) => HTMLElement | null;
+    getCurrentListItem: (containerElement: HTMLElement) => HTMLLIElement | null;
+    isCurrentListItemEmpty: (containerElement: HTMLElement) => boolean;
+    isCursorAtListItemStart: (containerElement: HTMLElement) => boolean;
+    handleListBackspace: (containerElement: HTMLElement) => boolean;
+    handleListEnter: (containerElement: HTMLElement) => boolean;
+    handleListTab: (containerElement: HTMLElement, shiftKey: boolean) => boolean;
+    handleCodeBlockEnter: (containerElement: HTMLElement) => boolean;
+    handleCodeBlockBackspace: (containerElement: HTMLElement) => boolean;
+    handleAutoListTrigger: (containerElement: HTMLElement) => "orderedList" | "unorderedList" | null;
+    applyListInlineStyles: (containerElement: HTMLElement) => void;
+    toggleBlockquote: (containerElement: HTMLElement) => void;
+    isInsideBlockquote: (containerElement: HTMLElement) => HTMLElement | null;
+    toggleCodeInline: (containerElement: HTMLElement) => void;
+    toggleCodeBlock: (containerElement: HTMLElement) => void;
+    isInsideCodeInline: (containerElement: HTMLElement) => HTMLElement | null;
+    isInsideCodeBlock: (containerElement: HTMLElement) => HTMLElement | null;
+    handleInlineCodePreservation: (containerElement: HTMLElement, wasInsideInlineCode: boolean) => void;
+    clearFormattingModes: () => void;
+    resetFontContext: (containerElement?: HTMLElement) => void;
+    handleKeyboardShortcut: (event: KeyboardEvent, containerElement: HTMLElement) => boolean;
+    handleArrowKeyInCode: (event: KeyboardEvent, containerElement: HTMLElement) => boolean;
+    getPlainText: (htmlContent: string) => string;
+    normalizeHtml: (htmlContent: string) => string;
+    trimRichTextWhitespace: (html: string | null | undefined) => string;
+    handleMarkdownShortcuts: (containerElement: HTMLElement, onBeforeConversion?: () => void) => boolean;
+    clearPendingFormats: () => void;
+    getPendingFormats: () => FormatType[];
+    getTextOffsetAtCursor: (containerElement: HTMLElement) => number;
+    setCursorByTextOffset: (containerElement: HTMLElement, offset: number) => void;
+    convertMarkdownToFormat: (containerElement: HTMLElement, startOffset: number, endOffset: number, contentStart: number, contentEnd: number, formatType: FormatType, linkUrl?: string) => void;
+    positionCursorAfterFormat: (containerElement: HTMLElement, formattedNode: Node) => void;
+    applyMarkdownConversion: (containerElement: HTMLElement, match: {
+        startOffset: number;
+        endOffset: number;
+        contentStart: number;
+        contentEnd: number;
+        linkUrl?: string;
+    }, formatType: FormatType) => void;
+};
+/**
+ * React hook for rich text formatting
+ */
+export declare function useRichTextFormatting(getDocument: () => Document, getWindow: () => Window): {
+    getSelection: () => Selection | null;
+    saveSelection: () => Range | null;
+    restoreSelection: (range: Range | null) => void;
+    hasSelection: () => boolean;
+    getSelectedText: (savedRange?: Range | null) => string;
+    isFormatted: (formatType: FormatType, containerElement: HTMLElement) => boolean;
+    isFormattingModeActive: () => boolean;
+    getActiveFormats: (containerElement: HTMLElement) => FormatType[];
+    getActiveFormattingModes: () => FormatType[];
+    findFormattingAncestor: () => HTMLElement | null;
+    applyFormat: () => void;
+    removeFormat: () => void;
+    toggleFormat: (formatType: FormatType, containerElement: HTMLElement) => void;
+    toggleFormattingMode: () => void;
+    toggleBold: (containerElement: HTMLElement) => void;
+    toggleItalic: (containerElement: HTMLElement) => void;
+    toggleUnderline: (containerElement: HTMLElement) => void;
+    toggleStrikethrough: (containerElement: HTMLElement) => void;
+    insertLink: (url: string, displayText: string | undefined, containerElement: HTMLElement) => void;
+    updateLink: (url: string, displayText: string | undefined, containerElement: HTMLElement) => void;
+    removeLink: (containerElement: HTMLElement) => void;
+    isInsideLink: (containerElement: HTMLElement) => boolean;
+    toggleOrderedList: (containerElement: HTMLElement) => void;
+    toggleUnorderedList: (containerElement: HTMLElement) => void;
+    fixOrderedListContinuation: (containerElement: HTMLElement) => void;
+    isInsideList: (listType: "orderedList" | "unorderedList", containerElement: HTMLElement) => HTMLElement | null;
+    isInsideAnyList: (containerElement: HTMLElement) => HTMLElement | null;
+    getCurrentListItem: (containerElement: HTMLElement) => HTMLLIElement | null;
+    isCurrentListItemEmpty: (containerElement: HTMLElement) => boolean;
+    isCursorAtListItemStart: (containerElement: HTMLElement) => boolean;
+    handleListBackspace: (containerElement: HTMLElement) => boolean;
+    handleListEnter: (containerElement: HTMLElement) => boolean;
+    handleListTab: (containerElement: HTMLElement, shiftKey: boolean) => boolean;
+    handleCodeBlockEnter: (containerElement: HTMLElement) => boolean;
+    handleCodeBlockBackspace: (containerElement: HTMLElement) => boolean;
+    handleAutoListTrigger: (containerElement: HTMLElement) => "orderedList" | "unorderedList" | null;
+    applyListInlineStyles: (containerElement: HTMLElement) => void;
+    toggleBlockquote: (containerElement: HTMLElement) => void;
+    isInsideBlockquote: (containerElement: HTMLElement) => HTMLElement | null;
+    toggleCodeInline: (containerElement: HTMLElement) => void;
+    toggleCodeBlock: (containerElement: HTMLElement) => void;
+    isInsideCodeInline: (containerElement: HTMLElement) => HTMLElement | null;
+    isInsideCodeBlock: (containerElement: HTMLElement) => HTMLElement | null;
+    handleInlineCodePreservation: (containerElement: HTMLElement, wasInsideInlineCode: boolean) => void;
+    clearFormattingModes: () => void;
+    resetFontContext: (containerElement?: HTMLElement) => void;
+    handleKeyboardShortcut: (event: KeyboardEvent, containerElement: HTMLElement) => boolean;
+    handleArrowKeyInCode: (event: KeyboardEvent, containerElement: HTMLElement) => boolean;
+    getPlainText: (htmlContent: string) => string;
+    normalizeHtml: (htmlContent: string) => string;
+    trimRichTextWhitespace: (html: string | null | undefined) => string;
+    handleMarkdownShortcuts: (containerElement: HTMLElement, onBeforeConversion?: () => void) => boolean;
+    clearPendingFormats: () => void;
+    getPendingFormats: () => FormatType[];
+    getTextOffsetAtCursor: (containerElement: HTMLElement) => number;
+    setCursorByTextOffset: (containerElement: HTMLElement, offset: number) => void;
+    convertMarkdownToFormat: (containerElement: HTMLElement, startOffset: number, endOffset: number, contentStart: number, contentEnd: number, formatType: FormatType, linkUrl?: string) => void;
+    positionCursorAfterFormat: (containerElement: HTMLElement, formattedNode: Node) => void;
+    applyMarkdownConversion: (containerElement: HTMLElement, match: {
+        startOffset: number;
+        endOffset: number;
+        contentStart: number;
+        contentEnd: number;
+        linkUrl?: string;
+    }, formatType: FormatType) => void;
+};
+export default useRichTextFormatting;

package/dist/types/utils/util.d.ts

@@ -32,7 +32,7 @@ export declare function isSafari(): boolean;
  */
 export declare function isURL(text: string): boolean;
 export declare function getThemeVariable(name: string): string;
-export declare function getThemeMode(): "dark" | "light";
+export declare function getThemeMode(): "light" | "dark";
 /**
  * Function to convert audio forat from webm to wav
  * @param file

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "6.3.12",
+  "version": "6.4.0",
   "description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
   "author": "CometChat",
   "exports": {
@@ -8,7 +8,7 @@
     "./css-variables.css": "./dist/styles/css-variables.css"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "^4.1.7",
+    "@cometchat/chat-sdk-javascript": "^4.1.8",
     "@rollup/plugin-json": "^6.1.0",
     "rxjs": "^7.8.1",
     "react-markdown": "^10.1.0",

package/dist/types/utils/useSecureMedia.d.ts

@@ -1,19 +0,0 @@
-export interface UseSecureMediaResult {
-    resolvedUrl: string | null;
-    isLoading: boolean;
-    error: Error | null;
-}
-/**
- * Checks whether the given URL requires secure presigned access.
- */
-export declare function requiresSecureMediaAccess(url: string): boolean;
-/**
- * Resolves a media URL to a presigned URL if secure access is required, else returns as-is.
- * For imperative/non-hook contexts (downloads, WaveSurfer load, etc.).
- */
-export declare function resolveSecureUrl(url: string): Promise<string>;
-/**
- * React hook that resolves a media URL to a presigned URL if secure access is required.
- * Handles cancellation on unmount/url change.
- */
-export declare function useSecureMedia(url: string | null): UseSecureMediaResult;