@caribeng/ui 22.1.1 → 22.2.0

package/types/caribeng-ui-dynamicdialog.d.ts

@@ -1,14 +1,104 @@
 import * as _angular_core from '@angular/core';
+import { InjectionToken, Type, Injector } from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { Observable } from 'rxjs';
 
+/**
+ * Variante declarativa del diálogo dinámico: un `cb-dialog` con título y
+ * texto, para casos simples. Para abrir **componentes** con datos y recibir un
+ * resultado, usa `CbDialogService.open()`.
+ *
+ * @example
+ * ```html
+ * <cb-dynamic-dialog [(visible)]="visible" header="Detalle" content="Tu solicitud fue enviada." />
+ * ```
+ */
 declare class CbDynamicDialog {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Visibilidad (two-way). */
     readonly visible: _angular_core.ModelSignal<boolean>;
-    readonly header: _angular_core.InputSignal<string>;
+    /** Título. Por defecto, "Diálogo" del idioma activo. */
+    readonly header: _angular_core.InputSignal<string | undefined>;
+    /** Texto del cuerpo (también se puede proyectar contenido). */
     readonly content: _angular_core.InputSignal<string>;
+    /** Se emite al cerrarse. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
-    protected close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDynamicDialog, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDynamicDialog, "cb-dynamic-dialog", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "closed": "closed"; }, never, ["*"], true, never>;
 }
 
-export { CbDynamicDialog };
+/** Opciones de `CbDialogService.open()`. */
+interface CbDynamicDialogConfig<D = unknown> {
+    /** Título del diálogo; si se omite, se usa `ariaLabel` como nombre accesible. */
+    header?: string;
+    /** Datos para el componente abierto (inyéctalos con `CB_DYNAMIC_DIALOG_DATA`). */
+    data?: D;
+    /** Ancho del panel. Por defecto `32rem`. */
+    width?: string;
+    /** Muestra el botón de cerrar. Por defecto `true`. */
+    closable?: boolean;
+    /** Cierra con Escape. Por defecto `true`. */
+    closeOnEscape?: boolean;
+    /** Cierra al hacer clic en el fondo. Por defecto `true`. */
+    dismissableMask?: boolean;
+    /** Nombre accesible cuando no hay `header`. */
+    ariaLabel?: string;
+}
+/** Datos pasados en `config.data`, para inyectar en el componente abierto. */
+declare const CB_DYNAMIC_DIALOG_DATA: InjectionToken<unknown>;
+/**
+ * Referencia a un diálogo abierto con `CbDialogService`. El componente abierto
+ * puede inyectarla para cerrarse devolviendo un resultado.
+ */
+declare class CbDynamicDialogRef<R = unknown> {
+    private readonly dispose;
+    private readonly closed$;
+    private isClosed;
+    /** Emite el resultado (o `undefined` si se cerró sin él) y completa. */
+    readonly onClose: Observable<R | undefined>;
+    /** @internal */
+    constructor(dispose: () => void);
+    /** Cierra el diálogo devolviendo un resultado opcional. */
+    close(result?: R): void;
+}
+/** Contenedor visual del diálogo dinámico (uso interno de CbDialogService). */
+declare class CbDynamicDialogContainer {
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    protected readonly config: CbDynamicDialogConfig<unknown>;
+    protected readonly ref: CbDynamicDialogRef<any>;
+    protected readonly component: Type<unknown>;
+    protected readonly injector: Injector;
+    protected readonly titleId: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDynamicDialogContainer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbDynamicDialogContainer, "cb-dynamic-dialog-container", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Abre componentes dentro de un diálogo modal (como `DialogService` de PrimeNG):
+ * trampa de foco, cierre con Escape y fondo, y devolución del foco al cerrar.
+ *
+ * @example
+ * ```ts
+ * const ref = inject(CbDialogService).open(EditarCliente, {
+ *   header: 'Editar cliente',
+ *   data: { id: 42 },
+ * });
+ * ref.onClose.subscribe((guardado) => { … });
+ *
+ * // Dentro de EditarCliente:
+ * readonly data = inject<{ id: number }>(CB_DYNAMIC_DIALOG_DATA);
+ * readonly ref = inject(CbDynamicDialogRef);
+ * guardar() { this.ref.close(true); }
+ * ```
+ */
+declare class CbDialogService {
+    private readonly overlay;
+    private readonly injector;
+    private readonly document;
+    open<T, D = unknown, R = unknown>(component: Type<T>, config?: CbDynamicDialogConfig<D>): CbDynamicDialogRef<R>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbDialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CbDialogService>;
+}
+
+export { CB_DYNAMIC_DIALOG_DATA, CbDialogService, CbDynamicDialog, CbDynamicDialogContainer, CbDynamicDialogRef };
+export type { CbDynamicDialogConfig };
 //# sourceMappingURL=caribeng-ui-dynamicdialog.d.ts.map

package/types/caribeng-ui-editor.d.ts

@@ -1,26 +1,333 @@
 import * as _caribeng_ui from '@caribeng/ui';
+import { CbTranslation } from '@caribeng/ui';
 import * as _angular_core from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
+interface CbCharGroup {
+    label: (t: CbTranslation) => string;
+    chars: readonly string[];
+}
+
+/** Color de una paleta del editor: valor CSS y nombre traducido. */
+interface CbEditorColor {
+    value: string;
+    label: (t: CbTranslation) => string;
+}
+
+/** Alineación de una imagen: `left`/`right` (flotante, el texto la rodea) o `center` (bloque centrado). */
+type CbImageAlign = 'left' | 'center' | 'right';
+/** Bordes de una tabla: todos, solo líneas horizontales o ninguno. */
+type CbTableBorders = 'all' | 'horizontal' | 'none';
+interface CbSanitizeOptions {
+    /** Permite imágenes (por defecto true). */
+    images?: boolean;
+    /**
+     * Tipografías permitidas (pilas CSS, p. ej. `"'Open Sans', sans-serif"`). Una tipografía
+     * se reconoce por su primer nombre; las demás se quitan. Por defecto, las del editor.
+     */
+    fonts?: readonly string[];
+}
+/** Devuelve el HTML saneado y normalizado; `''` si no hay texto ni imágenes. */
+declare function cbSanitizeHtml(html: string | null | undefined, options?: CbSanitizeOptions): string;
+/** Texto plano del HTML (para contar caracteres o guardar un resumen). */
+declare function cbHtmlToText(html: string | null | undefined): string;
+
+/** Recuadro de recorte en fracciones de la imagen (0–1). */
+interface CbCropRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
+/** Una tipografía del selector: nombre visible y pila CSS que se guarda en el HTML (`''` = predeterminada). */
+interface CbEditorFont {
+    name: string;
+    value: string;
+}
+/** Grupo del selector de tipografía (`<optgroup>`). */
+interface CbEditorFontGroup {
+    label: string | ((t: CbTranslation) => string);
+    fonts: readonly CbEditorFont[];
+}
 /**
- * Editor de CaribeNG: editor de texto enriquecido sin dependencias de terceros,
- * con barra de herramientas accesible (encabezados, formato, listas, cita,
- * alineación, enlaces, deshacer/rehacer) e integración CVA.
+ * Tipografías por defecto, todas libres (Google Fonts). Las "clásicas de Office" son
+ * métricamente compatibles con Arial, Times New Roman y Courier New, y Carlito con Calibri,
+ * así un documento conserva su maquetación.
+ */
+declare const CB_EDITOR_FONTS: readonly CbEditorFontGroup[];
+/** Hoja de Google Fonts con las tipografías por defecto (regular, negrita y sus cursivas). */
+declare const CB_EDITOR_FONTS_HREF: string;
+
+/** Herramientas de la barra; `'|'` es un separador y `'-'` empieza una fila nueva. */
+type CbEditorTool = 'heading' | 'fontFamily' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'subscript' | 'superscript' | 'textColor' | 'highlight' | 'bulletList' | 'orderedList' | 'taskList' | 'indent' | 'outdent' | 'quote' | 'codeBlock' | 'alignment' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'link' | 'image' | 'table' | 'horizontalRule' | 'clear' | 'undo' | 'redo' | 'source' | 'fullscreen' | 'specialChars' | 'findReplace' | '|' | '-';
+/**
+ * Barra por defecto, en dos filas: arriba el texto (bloque, fuente, tamaño, estilos y color);
+ * abajo la estructura (listas, alineación, inserciones, buscar y vistas).
+ */
+declare const CB_EDITOR_DEFAULT_TOOLBAR: readonly CbEditorTool[];
+/** Sube una imagen y devuelve su URL pública (p. ej. a tu servidor o a un bucket). */
+type CbEditorImageUpload = (file: File) => Promise<string>;
+/** Motivo por el que no se insertó una imagen. */
+interface CbEditorImageError {
+    file: File;
+    reason: 'type' | 'size' | 'upload';
+    error?: unknown;
+}
+/** Bloques que se insertan escribiendo `/` (filtrables por nombre o por palabras clave). */
+interface SlashItem {
+    id: string;
+    icon: string;
+    label: (t: CbTranslation) => string;
+    keywords: string;
+}
+interface EditorState {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    code: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    quote: boolean;
+    codeBlock: boolean;
+    subscript: boolean;
+    superscript: boolean;
+    taskList: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+    link: boolean;
+    block: string;
+    fontSize: string;
+    fontFamily: string;
+}
+/**
+ * Editor de CaribeNG: editor de texto enriquecido sin dependencias de terceros.
+ *
+ * - **Valor**: HTML saneado y normalizado (lista blanca de etiquetas, sin scripts,
+ *   eventos ni URLs peligrosas; igual en todos los navegadores; `''` si está vacío).
+ *   El mismo saneado se aplica al cargar un valor y al pegar.
+ * - Barra configurable (`toolbar`) con estado activo, panel de enlaces con
+ *   validación, imágenes con `imageUpload` (o data URL con límite de tamaño),
+ *   pegado limpio desde Word y Google Docs, atajos de escritura (`# `, `* `,
+ *   `1. `, `> `), contador con `maxLength`, vista de HTML y modo `readonly`.
+ * - Integración con Angular Forms (`ControlValueAccessor`).
+ *
+ * @example
+ * ```html
+ * <cb-editor formControlName="descripcion" [maxLength]="2000" [imageUpload]="subirImagen" />
+ * <cb-editor [value]="html" readonly />
+ * ```
  */
 declare class CbEditor implements ControlValueAccessor {
-    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<CbTranslation>;
+    private readonly document;
+    private readonly injector;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** Nombre accesible del área de texto. Por defecto, "Editor de texto" del idioma activo. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Alto mínimo del área de texto. */
     readonly height: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Alto máximo: a partir de él, el área hace scroll (la barra queda fija). Sin él, crece con el contenido. */
+    readonly maxHeight: _angular_core.InputSignal<string | undefined>;
+    /** Muestra el número de palabras y caracteres al pie. */
+    readonly wordCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Muestra el contenido (saneado) sin barra ni edición. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Marca visual y ARIA de estado inválido (también se activa con Angular Forms). */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Herramientas de la barra y su orden (`'|'` separa grupos). */
+    readonly toolbar: _angular_core.InputSignal<readonly CbEditorTool[]>;
+    /** Máximo de caracteres de texto (sin contar las etiquetas). Muestra un contador. */
+    readonly maxLength: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** Permite imágenes (botón, pegar y soltar). */
+    readonly images: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sube la imagen y devuelve su URL; así el HTML guarda una URL y no la imagen.
+     * Sin él, la imagen se inserta como data URL si no supera `maxImageSize`.
+     */
+    readonly imageUpload: _angular_core.InputSignal<CbEditorImageUpload | undefined>;
+    /** Tamaño máximo (bytes) de una imagen insertada como data URL. Por defecto 1 MB. */
+    readonly maxImageSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Pega siempre como texto plano (sin formato). */
+    readonly pastePlainText: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Tipografías del selector, por grupos. La primera opción con valor `''` es la predeterminada. */
+    readonly fonts: _angular_core.InputSignal<readonly CbEditorFontGroup[]>;
+    /**
+     * Hoja de estilos que carga las tipografías (por defecto, Google Fonts). Usa `''` si
+     * las sirves tú (o si tu CSP no permite fuentes externas).
+     */
+    readonly fontsHref: _angular_core.InputSignal<string>;
+    /** Menú flotante con formato rápido al seleccionar texto. */
+    readonly bubbleMenu: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Escribir `/` al inicio de una línea (o tras un espacio) abre un menú para insertar bloques. */
+    readonly slashCommands: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Convierte en enlace las URL (`https://…`, `www.…`) al escribir un espacio después. */
+    readonly autolink: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Corrección tipográfica al escribir: `(c)` → ©, `...` → …, `->` → →, ` -- ` → –, `1/2` → ½. */
+    readonly typography: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** HTML del contenido (saneado y normalizado; `''` si está vacío). */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Una imagen no se pudo insertar (tipo, tamaño o error de subida). */
+    readonly imageError: _angular_core.OutputEmitterRef<CbEditorImageError>;
     /** Estado de validación: inputs manuales + estado de Angular Forms. */
     protected readonly fieldState: _caribeng_ui.CbFieldState;
-    readonly value: _angular_core.ModelSignal<string>;
+    protected readonly surfaceId: string;
+    protected readonly countId: string;
+    protected readonly linkErrorId: string;
     private readonly cvaDisabled;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly state: _angular_core.WritableSignal<EditorState>;
+    protected readonly sourceMode: _angular_core.WritableSignal<boolean>;
+    protected readonly sourceText: _angular_core.WritableSignal<string>;
+    protected readonly message: _angular_core.WritableSignal<string>;
+    protected readonly length: _angular_core.WritableSignal<number>;
+    protected readonly linkPanel: _angular_core.WritableSignal<{
+        url: string;
+        newTab: boolean;
+        editing: boolean;
+    } | null>;
+    protected readonly linkUrl: _angular_core.WritableSignal<string>;
+    protected readonly linkNewTab: _angular_core.WritableSignal<boolean>;
+    protected readonly linkError: _angular_core.WritableSignal<boolean>;
+    protected readonly isEmpty: _angular_core.Signal<boolean>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly countText: _angular_core.Signal<string>;
+    protected readonly words: _angular_core.WritableSignal<number>;
+    protected readonly wordsText: _angular_core.Signal<string>;
+    /** Pie: palabras y caracteres (con `maxLength`, "N de M caracteres"). */
+    protected readonly countLine: _angular_core.Signal<string>;
+    protected readonly fullscreen: _angular_core.WritableSignal<boolean>;
+    protected readonly openMenu: _angular_core.WritableSignal<CbEditorTool | null>;
+    protected readonly lastTextColor: _angular_core.WritableSignal<string>;
+    protected readonly lastHighlight: _angular_core.WritableSignal<string>;
+    protected readonly textColors: readonly CbEditorColor[];
+    protected readonly highlightColors: readonly CbEditorColor[];
+    protected readonly fontSizes: readonly [10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48];
+    protected readonly specialChars: readonly CbCharGroup[];
+    protected readonly bubbleTools: readonly CbEditorTool[];
+    /** Pilas CSS permitidas al sanear (las del selector). */
+    private readonly fontStackList;
+    protected readonly alignments: readonly ("alignLeft" | "alignCenter" | "alignRight" | "alignJustify")[];
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly toolbarItems: _angular_core.Signal<CbEditorTool[]>;
+    /** Filas de la barra (`'-'` empieza una nueva). */
+    protected readonly toolbarRows: _angular_core.Signal<CbEditorTool[][]>;
+    /** Menú flotante de formato: posición respecto al área (encima o debajo de la selección). */
+    protected readonly bubble: _angular_core.WritableSignal<{
+        left: number;
+        top: number;
+        below: boolean;
+    } | null>;
+    /** Se está seleccionando con el ratón (el menú flotante espera a soltar). */
+    protected pointerSelecting: boolean;
+    /** Menú `/`: texto escrito tras la barra, opción activa y posición. */
+    protected readonly slash: _angular_core.WritableSignal<{
+        query: string;
+        active: number;
+        left: number;
+        top: number;
+    } | null>;
+    private slashAnchor;
+    protected readonly slashListId: string;
+    protected readonly slashItems: _angular_core.Signal<SlashItem[]>;
+    /** Buscar y reemplazar. */
+    protected readonly findOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly findQuery: _angular_core.WritableSignal<string>;
+    protected readonly replaceText: _angular_core.WritableSignal<string>;
+    protected readonly findCase: _angular_core.WritableSignal<boolean>;
+    protected readonly findWhole: _angular_core.WritableSignal<boolean>;
+    protected readonly findTotal: _angular_core.WritableSignal<number>;
+    protected readonly findIndex: _angular_core.WritableSignal<number>;
+    /** Aviso tras "Reemplazar todo" (sustituye al contador hasta la siguiente búsqueda). */
+    private readonly findNote;
+    private findRanges;
+    private readonly findInputRef;
+    protected readonly findStatus: _angular_core.Signal<string>;
     private readonly surfaceRef;
     private readonly imageInputRef;
+    private readonly toolbarRef;
+    private readonly linkInputRef;
+    private readonly bodyRef;
+    private readonly tableRowsRef;
+    private readonly tableColsRef;
+    private readonly tableHeaderRef;
+    private readonly altInputRef;
     private savedRange;
+    private editingLink;
+    /** Celda de tabla donde está el cursor (muestra la barra de tabla). */
+    protected readonly tableCell: _angular_core.WritableSignal<HTMLTableCellElement | null>;
+    protected readonly tableHasHeader: _angular_core.Signal<boolean>;
+    protected readonly tablePanel: _angular_core.WritableSignal<boolean>;
+    protected readonly tableHeader: _angular_core.WritableSignal<boolean>;
+    protected readonly pickerRows: number[];
+    protected readonly pickerCols: number[];
+    protected readonly pickerHover: _angular_core.WritableSignal<{
+        r: number;
+        c: number;
+    } | null>;
+    protected readonly pickerFocus: _angular_core.WritableSignal<{
+        r: number;
+        c: number;
+    }>;
+    /** Se incrementa al cambiar los bordes (viven en el DOM de las celdas). */
+    private readonly tableTick;
+    protected readonly tableBorders: _angular_core.Signal<{
+        borders: CbTableBorders;
+        color: string | null;
+    }>;
+    protected readonly borderColors: {
+        value: string;
+        label: (t: CbTranslation) => string;
+    }[];
+    protected readonly crop: _angular_core.WritableSignal<{
+        src: string;
+        rect: CbCropRect;
+        ratio: number | null;
+        natural: {
+            w: number;
+            h: number;
+        };
+        busy: boolean;
+        error: boolean;
+    } | null>;
+    protected readonly cropRatios: {
+        label: string;
+        value: number | null;
+    }[];
+    protected readonly cropCorners: readonly ["nw", "ne", "sw", "se"];
+    protected readonly cropHelpId: string;
+    private readonly cropStageRef;
+    protected readonly cropValueText: _angular_core.Signal<string>;
+    /** Imagen seleccionada con un clic (muestra su barra y el tirador de tamaño). */
+    protected readonly selectedImage: _angular_core.WritableSignal<HTMLImageElement | null>;
+    /** Se incrementa al cambiar la imagen seleccionada (su estilo vive en el DOM, no en una señal). */
+    private readonly imageTick;
+    protected readonly imageState: _angular_core.Signal<{
+        width: string | null;
+        align: CbImageAlign | null;
+    }>;
+    protected readonly imageFrame: _angular_core.WritableSignal<{
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null>;
+    protected readonly altPanel: _angular_core.WritableSignal<boolean>;
+    private resizing;
+    protected readonly imageWidths: string[];
+    protected readonly imageAligns: {
+        align: CbImageAlign | null;
+        icon: string;
+        label: (t: CbTranslation) => string;
+    }[];
+    /** Último HTML emitido o cargado: evita reescribir el DOM (y mover el cursor) con su propio valor. */
+    private lastHtml;
     private onChange;
     private onTouched;
     constructor();
@@ -28,22 +335,188 @@ declare class CbEditor implements ControlValueAccessor {
     registerOnChange(fn: (val: string) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    private tools;
+    /** Deja solo `active` en el orden de tabulación de la barra. */
+    protected setActiveTool(active: HTMLElement | undefined): void;
+    /** Flechas, Inicio y Fin mueven el foco entre las herramientas (de forma circular). */
+    protected onToolbarKeydown(event: KeyboardEvent): void;
+    protected toolIcon(tool: CbEditorTool): string;
+    protected toolLabel(tool: CbEditorTool): string;
+    protected toolKeys(tool: CbEditorTool): string;
+    /** Tooltip: nombre y atajo, p. ej. "Negrita (Ctrl+B)". */
+    protected toolTitle(tool: CbEditorTool): string;
+    protected ariaKeys(tool: CbEditorTool): string | null;
+    protected isMenu(tool: CbEditorTool): boolean;
+    protected groupLabel(group: CbEditorFontGroup): string;
+    /** Icono del botón de un menú: el de la alineación actual, o el de la herramienta. */
+    protected menuIcon(tool: CbEditorTool): string;
+    protected toggleMenu(tool: CbEditorTool): void;
+    /** Flecha abajo, Enter o Espacio en el botón abren el menú y enfocan su primera opción. */
+    protected onMenuTriggerKeydown(event: KeyboardEvent, tool: CbEditorTool): void;
+    /** Flechas (en la paleta, en cuadrícula de 5), Inicio, Fin, Escape y Tab dentro de un menú. */
+    protected onMenuKeydown(event: KeyboardEvent): void;
+    /** Aplica la opción elegida de un menú y lo cierra. */
+    protected applyMenu(tool: CbEditorTool, value: string | null): void;
+    protected pressable(tool: CbEditorTool): boolean;
+    protected isActive(tool: CbEditorTool): boolean;
     /** Evita que el botón robe la selección del área editable. */
     protected hold(event: MouseEvent): void;
-    exec(command: string, value?: string): void;
+    protected run(tool: CbEditorTool): void;
+    exec(command: string, value?: string, css?: boolean): void;
+    /** Ejecuta el comando sin emitir el valor (para retocar el resultado antes). */
+    private command;
     /** Aplica un bloque (encabezado, párrafo o cita). */
     protected format(tag: string): void;
-    /** Inserta un enlace sobre la selección actual. */
-    protected insertLink(): void;
+    /** Quita el formato en línea y vuelve el bloque a párrafo. */
+    protected clearFormat(): void;
+    private selectionRange;
+    /** Color del texto seleccionado; `null` = automático (quita el color). */
+    setTextColor(color: string | null): void;
+    /** Resaltado (color de fondo) del texto seleccionado; `null` lo quita. */
+    setHighlight(color: string | null): void;
+    /** Tamaño de letra de la selección en px (`''` = normal). */
+    setFontSize(value: string): void;
+    /** Tipografía de la selección (pila CSS; `''` = la predeterminada). */
+    setFontFamily(value: string): void;
+    /** Sangría: anida en listas; en párrafos y títulos, margen en pasos de 2rem. */
+    changeIndent(delta: 1 | -1): void;
+    /** Lista de tareas: crea una, convierte la lista actual o la quita. */
+    toggleTaskList(): void;
+    /** Pantalla completa (Escape sale). */
+    toggleFullscreen(): void;
+    /** Envuelve la selección en `<code>` o la saca de él. */
+    private toggleCode;
+    /** Abre el panel de enlace (Ctrl + K); si el cursor está en un enlace, lo edita. */
+    protected openLink(): void;
+    protected closeLink(): void;
+    protected applyLink(event: Event): void;
+    protected removeLink(): void;
     /** Abre el selector de archivos guardando la posición del cursor. */
     protected pickImage(): void;
-    /** Inserta la imagen elegida (como data URL) donde estaba el cursor. */
     protected onImageFile(event: Event): void;
-    protected onSurfaceInput(): void;
+    /** Sube (o lee) la imagen y la inserta donde estaba el cursor. */
+    insertImage(file: File): Promise<void>;
+    protected onPaste(event: ClipboardEvent): void;
+    protected onDrop(event: DragEvent): void;
+    /** Inserta lo pegado: HTML saneado o texto plano, recortado si supera `maxLength`. */
+    private insertClipboard;
+    /** Impide escribir más allá de `maxLength`. */
+    protected onBeforeInput(event: InputEvent): void;
+    protected onSurfaceInput(event?: Event): void;
+    /** Texto (nodo y posición) donde está el cursor, si no es código ni una selección. */
+    private caretText;
+    private setCaret;
+    /** Al escribir un espacio tras una URL, la convierte en enlace. */
+    private autolinkAtCaret;
+    /** Corrección tipográfica del texto recién escrito (`(c)` → ©, `...` → …). */
+    private fixTypography;
+    /** Tras escribir `/` al inicio de una línea o después de un espacio, abre el menú de bloques. */
+    private openSlash;
+    /** Filtra con lo escrito tras la `/`; se cierra si el cursor sale de ahí o se escribe un espacio. */
+    private updateSlash;
+    protected closeSlash(): void;
+    protected slashOptionId(index: number): string;
+    /** Quita la `/` y lo escrito tras ella, y aplica el bloque elegido. */
+    protected applySlash(item: SlashItem): void;
+    /** Flechas, Enter / Tab y Escape mientras el menú `/` está abierto. */
+    private onSlashKeydown;
+    /** Posición del cursor (o de la selección) respecto al área, para colocar menús. */
+    private caretPosition;
+    /** Muestra el menú de formato rápido sobre una selección de texto (o lo oculta). */
+    private updateBubble;
+    /** Una herramienta del menú flotante: la aplica y recoloca el menú. */
+    protected runBubble(tool: CbEditorTool): void;
+    /** Abre el panel (Ctrl + F); el texto seleccionado se usa como búsqueda. */
+    openFind(): void;
+    /** Cierra el panel y deja seleccionada la coincidencia actual en el texto. */
+    closeFind(): void;
+    protected setFindQuery(query: string): void;
+    protected setFindOption(option: 'case' | 'whole'): void;
+    /** Recalcula las coincidencias y marca la actual (`index`, limitado al total). */
+    private refreshFind;
+    /** Siguiente (1) o anterior (-1) coincidencia, de forma circular. */
+    findStep(step: 1 | -1): void;
+    /** Resalta todas las coincidencias y la actual (sin tocar el contenido) y la hace visible. */
+    private paintFind;
+    private clearFindHighlight;
+    /** Reemplaza la coincidencia actual y pasa a la siguiente. */
+    replaceCurrent(): void;
+    /** Reemplaza todas las coincidencias (cada una se puede deshacer con Ctrl + Z). */
+    replaceAllMatches(): void;
+    /** Sustituye el texto de los rangos (del último al primero, para no desplazar los demás). */
+    private replaceRanges;
+    /** Enter: siguiente; Mayús + Enter: anterior (en el campo de reemplazo, reemplaza); Escape: cerrar. */
+    protected onFindKeydown(event: KeyboardEvent): void;
+    /** Atajos de teclado: Ctrl + K enlace; Ctrl + Mayús + 7 / 8 listas; Ctrl + Alt + 0–3 bloques. */
+    protected onSurfaceKeydown(event: KeyboardEvent): void;
+    /**
+     * Formato al escribir (como Markdown): al pulsar espacio tras `#`, `##`, `###`,
+     * `*`, `-`, `1.` o `>` al inicio de un párrafo, se convierte el bloque.
+     */
+    private autoformat;
+    protected openTablePanel(): void;
+    protected closeTablePanel(): void;
+    protected pickerOn(r: number, c: number): boolean;
+    protected tableSizeLabel(r: number, c: number): string;
+    /** Flechas en la cuadrícula de tamaño; Enter inserta. */
+    protected onPickerKeydown(event: KeyboardEvent, r: number, c: number): void;
+    /** Inserta una tabla de filas × columnas con bordes grises (se ven igual fuera del editor). */
+    insertTable(rows: number, cols: number): void;
+    /** Bordes de toda la tabla: todos, solo horizontales o ninguno; y su color. */
+    setTableBorders(borders: CbTableBorders | null, color: string | null): void;
+    /** Acciones de la barra de tabla sobre la celda actual. */
+    protected tableAction(id: string): void;
+    private deleteTable;
+    /** Tab / Mayús + Tab: celda siguiente o anterior; en la última, añade una fila. */
+    private moveCell;
+    /** Pone el cursor al inicio de un elemento. */
+    private placeCaret;
+    protected onSurfaceClick(event: MouseEvent): void;
+    private deselectImage;
+    /** Coloca el marco y el tirador sobre la imagen seleccionada. */
+    protected refreshFrame(): void;
+    protected imageWidthLabel(width: string): string;
+    private applyImageStyle;
+    /** Alineación: en línea (`null`), izquierda o derecha (el texto la rodea) o centrada. */
+    setImageAlign(align: CbImageAlign | null): void;
+    /** Ancho en % o px; `null` vuelve al tamaño original. */
+    setImageWidth(width: string | null): void;
+    protected deleteImage(): void;
+    protected openAlt(): void;
+    protected closeAlt(): void;
+    protected applyAlt(event: Event): void;
+    protected openCrop(): void;
+    protected closeCrop(): void;
+    /** Proporción fija (ancho / alto) o libre (`null`). */
+    setCropRatio(ratio: number | null): void;
+    /** Mueve (`corner` null) o redimensiona el recuadro arrastrando. */
+    protected startCropDrag(event: PointerEvent, corner: 'nw' | 'ne' | 'sw' | 'se' | null): void;
+    /** Flechas: mover un 2 %; Mayús + flechas: cambiar el tamaño desde la esquina inferior derecha; Enter: aplicar. */
+    protected onCropKeydown(event: KeyboardEvent): void;
+    /** Recorta los píxeles y sustituye la imagen (subiéndola con `imageUpload` si lo hay). */
+    applyCrop(): Promise<void>;
+    /** Arrastrar el tirador cambia el ancho (en % del área, para que se adapte a la pantalla). */
+    protected startResize(event: PointerEvent): void;
+    /** Flechas, Inicio y Fin en las barras de tabla e imagen (patrón *toolbar*). */
+    protected onContextKeydown(event: KeyboardEvent): void;
+    private toggleSource;
+    /** Saneado con las opciones del editor (imágenes y tipografías permitidas). */
+    private sanitize;
+    /** Emite el HTML saneado sin tocar el DOM (no se pierde la posición del cursor). */
+    private emit;
     protected onBlur(): void;
+    private textLength;
+    private remaining;
+    private saveSelection;
+    private restoreSelection;
+    private closest;
+    private closestBlock;
+    /** Lee el formato de la selección para marcar las herramientas activas. */
+    private updateState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbEditor, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbEditor, "cb-editor", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbEditor, "cb-editor", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "wordCount": { "alias": "wordCount"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "maxImageSize": { "alias": "maxImageSize"; "required": false; "isSignal": true; }; "pastePlainText": { "alias": "pastePlainText"; "required": false; "isSignal": true; }; "fonts": { "alias": "fonts"; "required": false; "isSignal": true; }; "fontsHref": { "alias": "fontsHref"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "autolink": { "alias": "autolink"; "required": false; "isSignal": true; }; "typography": { "alias": "typography"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "imageError": "imageError"; }, never, never, true, never>;
 }
 
-export { CbEditor };
+export { CB_EDITOR_DEFAULT_TOOLBAR, CB_EDITOR_FONTS, CB_EDITOR_FONTS_HREF, CbEditor, cbHtmlToText, cbSanitizeHtml };
+export type { CbEditorFont, CbEditorFontGroup, CbEditorImageError, CbEditorImageUpload, CbEditorTool, CbSanitizeOptions };
 //# sourceMappingURL=caribeng-ui-editor.d.ts.map