@longd/layout-ui 0.1.0 → 0.1.2

package/README.md

@@ -1,9 +1,24 @@
 # @longd/layout-ui
 
-A React component library featuring a powerful, feature-rich select component with virtualization, drag-and-drop sorting, grouped options, and intelligent chip overflow management. Built with **Tailwind CSS v4**.
+A React component library featuring a powerful select component, a CAT (Computer-Assisted Translation) rich-text editor with rule-based highlighting, and a quote-detection utility. Built with **Tailwind CSS v4**.
 
 ## Features
 
+- **Virtualized Select** — LayoutSelect with drag-and-drop, virtualization, and custom rendering.
+- **CAT Editor** — Lexical-based rich-text editor with spell-check, glossary/keyword highlighting, tag collapsing, quote detection, link detection, and @mention support.
+- **Detect Quotes** — Standalone utility for scanning text and returning all single/double quote ranges with contraction-aware escaping.
+
+## Demo
+
+- **Full demo site**: https://layout-ui-seven.vercel.app
+- **LayoutSelect component**: https://layout-ui-seven.vercel.app/demo/layout-select
+- **CAT Editor**: https://layout-ui-seven.vercel.app/demo/cat-editor
+- **Detect Quotes**: https://layout-ui-seven.vercel.app/demo/detect-quotes
+
+## LayoutSelect Features
+
+Below are the features for the `LayoutSelect` demo (sourced from `src/data/layout-demos.tsx`):
+
 - **Single & multiple selection** with chip-based display
 - **Virtualized list** via `@tanstack/react-virtual` — handles 10,000+ options smoothly
 - **Drag-and-drop sorting** (flat & grouped) via `@dnd-kit`
@@ -134,8 +149,20 @@ function App() {
 ### Deep import (tree-shaking)
 
 ```tsx
+// LayoutSelect
 import { LayoutSelect } from '@longd/layout-ui/layout/select'
 import type { IOption } from '@longd/layout-ui/layout/select'
+
+// CATEditor
+import { CATEditor } from '@longd/layout-ui/layout/cat-editor'
+import type {
+  CATEditorProps,
+  MooRule,
+} from '@longd/layout-ui/layout/cat-editor'
+
+// Detect Quotes
+import { detectQuotes } from '@longd/layout-ui/utils/detect-quotes'
+import type { QuoteRange } from '@longd/layout-ui/utils/detect-quotes'
 ```
 
 ---
@@ -328,6 +355,235 @@ const [options, setOptions] = useState<IOption[]>(initialOptions)
 
 ---
 
+## CATEditor
+
+A Lexical-based rich-text editor designed for Computer-Assisted Translation workflows. Supports rule-based highlighting with popovers, tag collapsing, smart quote replacement, link detection, and @mention typeahead.
+
+### Quick start
+
+```tsx
+import { CATEditor } from '@longd/layout-ui/layout/cat-editor'
+import type { MooRule, CATEditorRef } from '@longd/layout-ui/layout/cat-editor'
+
+const rules: MooRule[] = [
+  {
+    type: 'spellcheck',
+    validations: [
+      {
+        categoryId: 'spelling',
+        start: 0,
+        end: 5,
+        content: 'Helo',
+        message: 'Possible spelling mistake',
+        shortMessage: 'Spelling',
+        suggestions: [{ value: 'Hello' }],
+      },
+    ],
+  },
+]
+
+function App() {
+  return (
+    <CATEditor
+      initialText="Helo world"
+      rules={rules}
+      onChange={(text) => console.log(text)}
+    />
+  )
+}
+```
+
+### CSS requirement
+
+CATEditor ships its own CSS. When using the deep import, the CSS is imported automatically from the entry point. Make sure your bundler supports CSS imports.
+
+### `<CATEditor>` props
+
+| Prop                   | Type                                            | Default           | Description                                                                |
+| ---------------------- | ----------------------------------------------- | ----------------- | -------------------------------------------------------------------------- |
+| `initialText`          | `string`                                        | `''`              | Initial text content for the editor.                                       |
+| `rules`                | `MooRule[]`                                     | `[]`              | Rules to apply for highlighting.                                           |
+| `onChange`             | `(text: string) => void`                        | —                 | Called when editor content changes.                                        |
+| `onSuggestionApply`    | `(ruleId, suggestion, range, ruleType) => void` | —                 | Called when a spell-check suggestion is applied.                           |
+| `codepointDisplayMap`  | `Record<number, string>`                        | —                 | Custom code-point → display symbol map, merged on top of the built-in map. |
+| `renderPopoverContent` | `PopoverContentRenderer`                        | —                 | Custom renderer for popover content per annotation.                        |
+| `onLinkClick`          | `(url: string) => void`                         | —                 | Called when a link highlight is clicked.                                   |
+| `openLinksOnClick`     | `boolean`                                       | `true`            | Whether clicking a link highlight opens the URL.                           |
+| `onMentionClick`       | `(userId, userName) => void`                    | —                 | Called when a mention node is clicked.                                     |
+| `onMentionInsert`      | `(user: IMentionUser) => void`                  | —                 | Called when a mention is inserted via the typeahead.                       |
+| `mentionSerialize`     | `(id: string) => string`                        | `` `@{${id}}` ``  | Converts a mention ID to model text.                                       |
+| `mentionPattern`       | `RegExp`                                        | `/@\{([^}]+)\}/g` | RegExp to detect mention patterns in pasted/imported text.                 |
+| `renderMentionDOM`     | `MentionDOMRenderer`                            | —                 | Custom DOM renderer for mention nodes.                                     |
+| `placeholder`          | `string`                                        | `'Start typing…'` | Placeholder text.                                                          |
+| `className`            | `string`                                        | —                 | Additional class name for the editor container.                            |
+| `dir`                  | `'ltr' \| 'rtl' \| 'auto'`                      | `'ltr'`           | Text direction.                                                            |
+| `jpFont`               | `boolean`                                       | `false`           | When `true`, applies a Japanese-optimised font stack.                      |
+| `editable`             | `boolean`                                       | `true`            | Whether the editor content is editable.                                    |
+| `readOnlySelectable`   | `boolean`                                       | `false`           | When `editable` is `false`, still allows caret/selection and copy.         |
+| `onKeyDown`            | `(event: KeyboardEvent) => boolean`             | —                 | Custom keydown handler. Return `true` to prevent default handling.         |
+
+### `CATEditorRef` (imperative API)
+
+Access via `ref`:
+
+```tsx
+const editorRef = useRef<CATEditorRef>(null)
+<CATEditor ref={editorRef} ... />
+```
+
+| Method                                      | Description                                         |
+| ------------------------------------------- | --------------------------------------------------- |
+| `insertText(text)`                          | Insert text at the current cursor position.         |
+| `focus()`                                   | Focus the editor.                                   |
+| `getText()`                                 | Get the full plain-text content.                    |
+| `replaceAll(search, replacement)`           | Replace all occurrences. Returns count.             |
+| `flashHighlight(annotationId, durationMs?)` | Flash-highlight elements matching an annotation ID. |
+| `clearFlash()`                              | Remove any active flash highlight.                  |
+
+### Rule types (`MooRule`)
+
+| Type             | Interface          | Description                                                              |
+| ---------------- | ------------------ | ------------------------------------------------------------------------ |
+| `'spellcheck'`   | `ISpellCheckRule`  | Spell-check validations with suggestions.                                |
+| `'glossary'`     | `IKeywordsRule`    | Generic keyword/term highlighting (glossary, LexiQA, TB target, search). |
+| `'special-char'` | `ISpecialCharRule` | Highlight special/invisible characters with popover names.               |
+| `'tag'`          | `ITagRule`         | Detect and optionally collapse HTML tags / placeholders.                 |
+| `'quote'`        | `IQuoteRule`       | Smart quote detection and replacement (uses `detectQuotes` internally).  |
+| `'link'`         | `ILinkRule`        | Detect and highlight URLs.                                               |
+| `'mention'`      | `IMentionRule`     | @mention typeahead with user list.                                       |
+
+### Examples
+
+#### Keyword / glossary highlighting
+
+```tsx
+const rules: MooRule[] = [
+  {
+    type: 'glossary',
+    label: 'tb-target',
+    entries: [
+      { term: 'React', description: 'A JavaScript library for building UIs' },
+      { term: 'Tailwind', pattern: 'tailwind(css)?' },
+    ],
+  },
+]
+```
+
+#### Tag collapsing
+
+```tsx
+const rules: MooRule[] = [
+  {
+    type: 'tag',
+    collapsed: true,
+    collapseScope: 'html-only',
+  },
+]
+```
+
+#### Smart quote replacement
+
+```tsx
+const rules: MooRule[] = [
+  {
+    type: 'quote',
+    singleQuote: { opening: '\u2018', closing: '\u2019' },
+    doubleQuote: { opening: '\u201C', closing: '\u201D' },
+  },
+]
+```
+
+#### @mention typeahead
+
+```tsx
+const rules: MooRule[] = [
+  {
+    type: 'mention',
+    users: [
+      { id: '1', name: 'Alice' },
+      { id: '2', name: 'Bob' },
+    ],
+  },
+]
+```
+
+---
+
+## Detect Quotes
+
+A standalone, framework-agnostic utility for scanning text and returning all single and double quote ranges. Handles nested quotes, backslash escapes, and English contractions (`don't`, `it's`, etc.).
+
+### Quick start
+
+```ts
+import { detectQuotes } from '@longd/layout-ui/utils/detect-quotes'
+
+const result = detectQuotes(`She said "hello" and 'goodbye'`)
+
+// Map keyed by both start and end indices:
+// 10 => { start: 10, end: 16, quoteType: "double", content: "hello", closed: true }
+// 16 => { start: 10, end: 16, quoteType: "double", content: "hello", closed: true }
+// 22 => { start: 22, end: 30, quoteType: "single", content: "goodbye", closed: true }
+// 30 => { start: 22, end: 30, quoteType: "single", content: "goodbye", closed: true }
+```
+
+### `detectQuotes(text, options?)`
+
+Returns a `Map<number, QuoteRange>` keyed by both start and end position indices.
+
+### `QuoteRange`
+
+```ts
+interface QuoteRange {
+  start: number // Index of the opening quote
+  end: number | null // Index of the closing quote (null when unclosed)
+  quoteType: 'single' | 'double'
+  content: string // Text between the quotes
+  closed: boolean // Whether the quote pair is properly closed
+}
+```
+
+### `DetectQuotesOptions`
+
+| Option               | Type                       | Default     | Description                                                                                |
+| -------------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------ |
+| `escapeContractions` | `boolean`                  | `true`      | Skip apostrophes in contractions (`don't`, `it's`).                                        |
+| `escapePatterns`     | `string \| EscapePatterns` | `'english'` | Which contraction patterns to apply. Pass `'english'` or a custom `EscapePatterns` object. |
+| `allowNesting`       | `boolean`                  | `false`     | Allow independent tracking of both quote types (can overlap).                              |
+| `detectInnerQuotes`  | `boolean`                  | `true`      | Detect quotes of the other type inside an already-open quote.                              |
+
+### `BUILTIN_ESCAPE_PATTERNS`
+
+Pre-built contraction patterns for English: `n't`, `'s`, `'re`, `'ve`, `'ll`, `'m`, `'d`.
+
+### Examples
+
+#### With contractions
+
+```ts
+// Apostrophes in "don't" and "it's" are skipped
+const result = detectQuotes(`He said "don't worry, it's fine"`)
+// Only the double-quoted range is detected
+```
+
+#### Nested quotes
+
+```ts
+const result = detectQuotes(`"she told me 'run away' before dawn"`)
+// Detects both the outer double-quoted and inner single-quoted ranges
+```
+
+#### Disable contraction escaping
+
+```ts
+const result = detectQuotes(`it's a 'test'`, {
+  escapeContractions: false,
+})
+// The apostrophe in "it's" is treated as a quote delimiter
+```
+
+---
+
 ## Adding new components
 
 This library is structured for easy expansion. To add a new component:

package/dist/CATEditor-C-b6vybW.d.cts

@@ -0,0 +1,381 @@
+import * as React from 'react';
+import React__default from 'react';
+import { DetectQuotesOptions } from './utils/detect-quotes.cjs';
+import { TextNode, Spread, SerializedTextNode, NodeKey, EditorConfig, DOMExportOutput, DOMConversionMap, LexicalNode } from 'lexical';
+
+interface ISuggestion {
+    value: string;
+}
+interface ISpellCheckValidation {
+    categoryId: string;
+    start: number;
+    end: number;
+    content: string;
+    message: string;
+    shortMessage: string;
+    suggestions: Array<ISuggestion>;
+    dictionaries?: Array<string>;
+}
+interface ISpellCheckRule {
+    type: 'spellcheck';
+    validations: Array<ISpellCheckValidation>;
+}
+interface IKeywordsEntry {
+    /** The term text used for exact string matching and display. */
+    term: string;
+    /** Optional description shown in the popover. */
+    description?: string;
+    /** Optional regex source string.  When provided, it is used for matching
+     *  instead of an exact `term` lookup.  The `g` flag is added automatically.
+     *  Example: `'hello|hi'` matches both "hello" and "hi". */
+    pattern?: string;
+}
+/** Generic term-highlighting rule.
+ *  `label` controls CSS class (`cat-highlight-glossary-{label}`) and badge text.
+ *  Examples: label='lexiqa', label='tb-target', label='search' */
+interface IKeywordsRule {
+    type: 'glossary';
+    label: string;
+    entries: Array<IKeywordsEntry>;
+}
+/** @deprecated Use `IKeywordsEntry` instead. */
+type IGlossaryEntry = IKeywordsEntry;
+/** @deprecated Use `IKeywordsRule` instead. */
+type IGlossaryRule = IKeywordsRule;
+interface ISpecialCharEntry {
+    /** Human-readable name shown in the popover, e.g. "Non-Breaking Space" */
+    name: string;
+    /** Regex that matches one occurrence of this character */
+    pattern: RegExp;
+}
+interface ISpecialCharRule {
+    type: 'special-char';
+    entries: Array<ISpecialCharEntry>;
+}
+interface ITagRule {
+    type: 'tag';
+    /** When true (default), innermost tag pairs are matched first. */
+    detectInner?: boolean;
+    /** When true, tags become atomic (other highlights inside them are
+     *  suppressed) and the CSS collapsed rendering kicks in.
+     *  When false/undefined, tags can be split by search/glossary highlights. */
+    collapsed?: boolean;
+    /** Which tags should be collapsed when `collapsed` is true.
+     *  - `'all'` (default): collapse every matched tag/placeholder.
+     *  - `'html-only'`: only collapse HTML-like tags (`<tag>`, `</tag>`, `<br/>`);
+     *    non-HTML placeholders (e.g. `{{var}}`, `$amount`) stay expanded. */
+    collapseScope?: 'all' | 'html-only';
+    /** Custom regex pattern (source string) for matching tags / placeholders.
+     *  When provided, every match is treated as a standalone tag token
+     *  numbered sequentially (`<1>`, `<2>`, …).
+     *  When omitted, the built-in HTML tag detection with open/close pairing is used.
+     *  @example '<[^>]+>|(\\{\\{[^{}]*\\}\\})|(\\{[^{}]*\\})' */
+    pattern?: string;
+}
+interface IQuoteRuleMapping {
+    opening: string;
+    closing: string;
+}
+interface IQuoteRule {
+    type: 'quote';
+    singleQuote: IQuoteRuleMapping;
+    doubleQuote: IQuoteRuleMapping;
+    /** When `true`, quote replacement is also applied inside HTML tags
+     *  (e.g. attribute values like `href="…"`).  When `false` (the default),
+     *  quotes that fall inside a tag range are suppressed. */
+    detectInTags?: boolean;
+    /** Options forwarded to the `detectQuotes()` utility.
+     *  Allows customising contraction escaping, nesting behaviour, etc. */
+    detectOptions?: DetectQuotesOptions;
+}
+interface ILinkRule {
+    type: 'link';
+    /** Custom regex pattern (source string) for matching URLs.
+     *  When omitted, a built-in pattern matching http/https URLs and
+     *  www-prefixed domains is used. */
+    pattern?: string;
+}
+/** A user that can be mentioned via the @ trigger. */
+interface IMentionUser {
+    id: string;
+    name: string;
+    /** Optional avatar render function. When omitted an initials fallback is shown. */
+    avatar?: () => React__default.ReactNode;
+}
+interface IMentionRule {
+    type: 'mention';
+    /** List of users available for the mention typeahead. */
+    users: Array<IMentionUser>;
+    /** Trigger character, default `@`. */
+    trigger?: string;
+}
+type MooRule = ISpellCheckRule | IKeywordsRule | ISpecialCharRule | ITagRule | IQuoteRule | ILinkRule | IMentionRule;
+interface SpellCheckAnnotation {
+    type: 'spellcheck';
+    id: string;
+    data: ISpellCheckValidation;
+}
+interface KeywordsAnnotation {
+    type: 'glossary';
+    id: string;
+    data: {
+        label: string;
+        term: string;
+        description?: string;
+    };
+}
+/** @deprecated Use `KeywordsAnnotation` instead. */
+type GlossaryAnnotation = KeywordsAnnotation;
+interface SpecialCharAnnotation {
+    type: 'special-char';
+    id: string;
+    data: {
+        name: string;
+        char: string;
+        codePoint: string;
+    };
+}
+interface TagAnnotation {
+    type: 'tag';
+    id: string;
+    data: {
+        tagNumber: number;
+        tagName: string;
+        isClosing: boolean;
+        isSelfClosing: boolean;
+        originalText: string;
+        displayText: string;
+        /** `true` when the tag was classified as HTML (`<tag>`, `</tag>`, `<br/>`). */
+        isHtml: boolean;
+    };
+}
+interface QuoteAnnotation {
+    type: 'quote';
+    id: string;
+    data: {
+        quoteType: 'single' | 'double';
+        position: 'opening' | 'closing';
+        originalChar: string;
+        replacementChar: string;
+    };
+}
+interface LinkAnnotation {
+    type: 'link';
+    id: string;
+    data: {
+        url: string;
+        displayText: string;
+    };
+}
+type RuleAnnotation = SpellCheckAnnotation | KeywordsAnnotation | SpecialCharAnnotation | TagAnnotation | QuoteAnnotation | LinkAnnotation;
+interface RawRange {
+    start: number;
+    end: number;
+    annotation: RuleAnnotation;
+}
+interface HighlightSegment {
+    start: number;
+    end: number;
+    annotations: Array<RuleAnnotation>;
+}
+interface PopoverState {
+    visible: boolean;
+    x: number;
+    y: number;
+    /** Full bounding rect of the hovered highlight element.
+     *  Used by Popper so that flip/shift avoid overlapping the target. */
+    anchorRect?: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+    };
+    ruleIds: Array<string>;
+}
+/** Props passed to the custom popover content renderer.
+ *  Use this to fully replace the built-in popover UI for any annotation. */
+interface PopoverContentRendererProps {
+    annotation: RuleAnnotation;
+    /** Call with a suggestion string to apply it (only relevant for spellcheck) */
+    onSuggestionClick: (suggestion: string) => void;
+}
+/** Render function for custom popover content.
+ *  Return `undefined` / `null` to fall back to the default built-in renderer. */
+type PopoverContentRenderer = (props: PopoverContentRendererProps) => React__default.ReactNode;
+/** Imperative API exposed via `ref` on `<CATEditor>`. */
+interface CATEditorRef {
+    /** Insert text at the current (or last saved) cursor position. */
+    insertText: (text: string) => void;
+    /** Focus the editor. */
+    focus: () => void;
+    /** Get the full plain-text content. */
+    getText: () => string;
+    /** Replace all occurrences of `search` with `replacement` in the editor
+     *  content.  Returns the number of replacements made. */
+    replaceAll: (search: string, replacement: string) => number;
+    /** Temporarily highlight editor elements matching `annotationId` with a
+     *  pink "flash" overlay.  The highlight is automatically removed after
+     *  `durationMs` (default 5 000 ms), when the user edits the text, or
+     *  when `clearFlash` / another `flashHighlight` call is made. */
+    flashHighlight: (annotationId: string, durationMs?: number) => void;
+    /** Remove any active flash highlight immediately. */
+    clearFlash: () => void;
+}
+
+type SerializedMentionNode = Spread<{
+    mentionId: string;
+    mentionName: string;
+}, SerializedTextNode>;
+/** Render function that fills the DOM of a mention node.
+ *  Receives the host `<span>` element, the mentionId, and the display name.
+ *  Return `true` to signal that you handled the rendering;
+ *  return `false` / `undefined` to fall back to the built-in renderer. */
+type MentionDOMRenderer = (element: HTMLSpanElement, mentionId: string, mentionName: string) => boolean | void;
+interface MentionNodeConfig {
+    /** Custom renderer for the mention node DOM content.
+     *  When provided, this function is called every time the mention DOM
+     *  is created or updated.  Return `true` to take over rendering. */
+    renderDOM?: MentionDOMRenderer;
+    /** Converts a mention ID to the model text stored in the editor.
+     *  Default: `` id => `@{${id}}` `` — produces `@{5}`, `@{user_abc}`, etc. */
+    serialize?: (id: string) => string;
+    /** RegExp used to detect mention patterns in pasted / imported text.
+     *  Must contain exactly one capture group that extracts the mention ID.
+     *  The `g` flag is required.
+     *  Default: `/@\{([^}]+)\}/g` — matches `@{5}`, `@{user_abc}`, etc. */
+    pattern?: RegExp;
+}
+/** Configure the global MentionNode behaviour.
+ *  Call this from CATEditor whenever props change. */
+declare function setMentionNodeConfig(config: MentionNodeConfig): void;
+/** Get the model text for a mention with the given ID,
+ *  using the configured `serialize` function (or the default `@{id}`). */
+declare function getMentionModelText(id: string): string;
+/** Get a fresh copy of the mention detection RegExp.
+ *  A new RegExp is returned every time so that `lastIndex` is always 0. */
+declare function getMentionPattern(): RegExp;
+/**
+ * A custom Lexical TextNode that represents a mention.
+ *
+ * **Model text** (what Lexical stores, what `getTextContent()` returns):
+ *   `@{mentionId}` — e.g. `@1`, `@user_abc`.
+ *
+ * **Visible DOM**: `@DisplayName` (+ optional avatar).  The display is
+ * controlled by a configurable renderer — see `setMentionNodeConfig`.
+ *
+ * The node uses "segmented" mode so it behaves as an atomic unit:
+ * backspace removes the whole mention, typing at boundaries creates a
+ * sibling TextNode instead of editing the mention text.
+ */
+declare class MentionNode extends TextNode {
+    __mentionId: string;
+    __mentionName: string;
+    static getType(): string;
+    static clone(node: MentionNode): MentionNode;
+    static importJSON(serializedNode: SerializedMentionNode): MentionNode;
+    constructor(mentionId: string, mentionName: string, text?: string, key?: NodeKey);
+    exportJSON(): SerializedMentionNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: MentionNode, dom: HTMLElement, _config: EditorConfig): boolean;
+    /** Fill the span with visible content (default: @label, or custom). */
+    private _renderInnerDOM;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    isTextEntity(): true;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+}
+declare function $createMentionNode(mentionId: string, mentionName: string, textContent?: string): MentionNode;
+declare function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode;
+
+interface CATEditorProps {
+    /** Initial text content for the editor */
+    initialText?: string;
+    /** Rules to apply for highlighting */
+    rules?: Array<MooRule>;
+    /** Called when editor content changes */
+    onChange?: (text: string) => void;
+    /** Called when a suggestion is applied.
+     *  Provides the ruleId, the replacement text, the original text
+     *  span (start / end / content), and the ruleType so consumers
+     *  can identify which rule triggered the replacement. */
+    onSuggestionApply?: (ruleId: string, suggestion: string, range: {
+        start: number;
+        end: number;
+        content: string;
+    }, ruleType: RuleAnnotation['type']) => void;
+    /** Custom code-point → display symbol map.  Merged on top of the
+     *  built-in `CODEPOINT_DISPLAY_MAP`.  Pass `{ 0x00a0: '⍽' }` to
+     *  override the symbol shown for non-breaking spaces, etc. */
+    codepointDisplayMap?: Record<number, string>;
+    /** Custom renderer for popover content per annotation.
+     *  Return `null`/`undefined` to use the built-in default. */
+    renderPopoverContent?: PopoverContentRenderer;
+    /** Called when a link highlight is clicked.  If not provided, links
+     *  open in a new browser tab via `window.open`. */
+    onLinkClick?: (url: string) => void;
+    /** Whether clicking a link highlight should open the URL.
+     *  When `false`, link clicks are ignored (the click positions the
+     *  cursor in the editor text instead).  Default: `true`. */
+    openLinksOnClick?: boolean;
+    /** Called when a mention node is clicked. */
+    onMentionClick?: (userId: string, userName: string) => void;
+    /** Called when a mention is inserted via the typeahead. */
+    onMentionInsert?: (user: IMentionUser) => void;
+    /** Converts a mention ID to model text.
+     *  Default: `` id => `@{${id}}` `` producing `@{5}`, `@{user_abc}`, etc. */
+    mentionSerialize?: (id: string) => string;
+    /** RegExp to detect mention patterns in pasted / imported text.
+     *  Must have one capture group for the ID and use the `g` flag.
+     *  Default: `/@\{([^}]+)\}/g` */
+    mentionPattern?: RegExp;
+    /** Custom DOM renderer for mention nodes.
+     *  Receives the `<span>` host element, the mentionId and the
+     *  display name.  Return `true` to take over rendering;
+     *  return `false`/`undefined` to use the default `@name` label. */
+    renderMentionDOM?: MentionDOMRenderer;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Additional class name for the editor container */
+    className?: string;
+    /** Text direction.  `'ltr'` (default), `'rtl'`, or `'auto'`. */
+    dir?: 'ltr' | 'rtl' | 'auto';
+    /** Text direction for the highlight popover.  Defaults to `'ltr'` so
+     *  that popover content stays left-to-right even when the editor is
+     *  RTL.  Set to `'rtl'` or `'auto'` if your popover content should
+     *  follow the editor direction, or pass `'inherit'` to use the same
+     *  direction as the editor (`dir` prop). */
+    popoverDir?: 'ltr' | 'rtl' | 'auto' | 'inherit';
+    /** When `true`, applies a Japanese-optimised font stack to the editor. */
+    jpFont?: boolean;
+    /** Whether the editor content is editable.  Default: `true`.
+     *  When `false`, all text mutations are blocked.
+     *  @see readOnlySelectable */
+    editable?: boolean;
+    /** When `editable` is `false` and this is `true`, the editor still
+     *  allows caret placement, range selection and copy — but rejects
+     *  any content changes.  Default: `false`. */
+    readOnlySelectable?: boolean;
+    /** Custom keydown handler.  Called before Lexical processes the event.
+     *  Return `true` to prevent Lexical (and the browser) from handling
+     *  the key.  Useful for intercepting Enter, Tab, Escape, etc.
+     *  @example
+     *  ```tsx
+     *  onKeyDown={(e) => {
+     *    if (e.key === 'Enter' && !e.shiftKey) {
+     *      e.preventDefault()
+     *      handleSubmit()
+     *      return true
+     *    }
+     *    return false
+     *  }}
+     *  ``` */
+    onKeyDown?: (event: KeyboardEvent) => boolean;
+    /** @deprecated Use `editable` instead. */
+    readOnly?: boolean;
+}
+declare const CATEditor: React.ForwardRefExoticComponent<CATEditorProps & React.RefAttributes<CATEditorRef>>;
+
+export { $createMentionNode as $, getMentionPattern as A, setMentionNodeConfig as B, CATEditor as C, type GlossaryAnnotation as G, type HighlightSegment as H, type IKeywordsRule as I, type KeywordsAnnotation as K, type LinkAnnotation as L, type MooRule as M, type PopoverContentRenderer as P, type QuoteAnnotation as Q, type RuleAnnotation as R, type SerializedMentionNode as S, type TagAnnotation as T, type CATEditorProps as a, type CATEditorRef as b, type ILinkRule as c, type IMentionRule as d, type IMentionUser as e, type IQuoteRule as f, type ISpecialCharRule as g, type ISpellCheckRule as h, type ITagRule as i, type PopoverContentRendererProps as j, $isMentionNode as k, type IGlossaryEntry as l, type IGlossaryRule as m, type IKeywordsEntry as n, type IQuoteRuleMapping as o, type ISpecialCharEntry as p, type ISpellCheckValidation as q, type ISuggestion as r, type MentionDOMRenderer as s, MentionNode as t, type MentionNodeConfig as u, type PopoverState as v, type RawRange as w, type SpecialCharAnnotation as x, type SpellCheckAnnotation as y, getMentionModelText as z };