@konce-pt/react 0.11.1 → 0.12.0

package/dist/rich-text/rich-text.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
@@ -8,11 +9,12 @@ import { useKptOverlayContainer } from "../internal/overlay-container.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
-import { sanitizeHtml, sanitizeUrl } from "./sanitize.js";
+import { sanitizeHtml, sanitizeHtmlReport, sanitizeUrl } from "./sanitize.js";
 import { canIndentItem, canOutdentItem, selectedItems, shiftItems } from "./lists.js";
 import { CELL_SELECTED, deleteColumn, deleteRow, insertColumn, insertRow, mergeCells, regionBetween, splitCell, tableHtml, toggleHeaderColumn, toggleHeaderRow, } from "./tables.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
 import { nextRovingIndex } from "../internal/roving.js";
+import { trapTab } from "../internal/calendar-focus.js";
 import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 const ICON = {
     copy: 'copy',
@@ -84,25 +86,21 @@ const GRID_COLS = Array.from({ length: 8 }, (_, i) => i + 1);
  * (Ctrl+Z). Własne komendy wymagałyby własnej historii, czyli przepisania edytora.
  */
 function legacyExec(cmd, value) {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- brak zamiennika, patrz JSDoc
     return document.execCommand(cmd, false, value); // NOSONAR: brak zamiennika, patrz JSDoc
 }
 function legacyState(cmd) {
     try {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated -- brak zamiennika, patrz `legacyExec`
         return document.queryCommandState(cmd); // NOSONAR: brak zamiennika
     }
     catch {
         return false;
     }
 }
-/**
- * Lekki edytor tekstu sformatowanego na `contenteditable`, z konfigurowalnym paskiem sekcji
- * i edycją tabel. Wartością jest HTML.
- *
- * @example
- * <KptRichText value={html} onValueChange={setHtml} />
- * <KptRichText value={html} onValueChange={setHtml} toolbar={[['bold', 'italic'], ['link']]} />
- */
-export function KptRichText({ value, defaultValue = '', onValueChange, toolbar = DEFAULT_TOOLBAR, placeholder = '', maxListLevel = 6, id, ariaLabel = null, required = false, disabled = false, invalid = false, touched, onTouch, mentions = [], mentionLimit = KPT_MENTION_LIMIT, onMention, locale, dictionary, className, ...rest }) {
+export function KptRichText({ value, defaultValue = '', onValueChange, toolbar = DEFAULT_TOOLBAR, placeholder = '', maxListLevel = 6, id, ariaLabel = null, required = false, disabled: disabledProp = false, readOnly = false, invalid = false, touched, onTouch, mentions = [], mentionLimit = KPT_MENTION_LIMIT, onMention, locale, dictionary, className, ...rest }) {
+    /** Edycja zablokowana: wyłączone pole albo tylko do odczytu — narzędzia i skróty nie działają. */
+    const disabled = disabledProp || readOnly;
     /** `contenteditable` nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
     const field = useKptFieldA11y(id, 'kpt-rich-text');
     const { t } = useKptMessages({ locale, dictionary });
@@ -128,6 +126,8 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     const [colorOpen, setColorOpen] = useState(false);
     const [colorKind, setColorKind] = useState('foreColor');
     const [tableOpen, setTableOpen] = useState(false);
+    /** Aktywna opcja listy stylów (aria-activedescendant). */
+    const [styleActive, setStyleActive] = useState(0);
     const [grid, setGrid] = useState({ r: 0, c: 0 });
     const [sourceView, setSourceView] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
@@ -148,7 +148,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     const [currentBlock, setCurrentBlock] = useState('p');
     const [selCount, setSelCount] = useState(0);
     const ctxCell = useRef(null);
-    const canSplitCtx = useRef(false);
+    const [canSplitCtx, setCanSplitCtx] = useState(false);
     const selCells = useRef(new Set());
     const selAnchor = useRef(null);
     const selecting = useRef(false);
@@ -167,13 +167,19 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
      * Zapis z zewnątrz wstawiamy ręcznie, bo `contenteditable` nie może być renderowany przez
      * Reacta — przerysowanie kasowałoby zaznaczenie i pozycję kursora przy każdym znaku.
      * Porównanie z surowym `innerHTML` sprawia, że pisanie w edytorze nie wchodzi w tę gałąź,
-     * więc sanityzacja włącza się wyłącznie przy zapisie z aplikacji albo z trybu HTML.
+     * więc sanityzacja włącza się wyłącznie przy zapisie z aplikacji albo z trybu HTML. Gdy
+     * sanityzator coś usunął, oczyszczona treść wraca też do wartości — inaczej aplikacja dostawałaby
+     * z powrotem niebezpieczny HTML. Sama różnica zapisu (cudzysłowy) wartości nie rusza.
      */
     useEffect(() => {
         const el = editorRef.current;
-        if (el && el.innerHTML !== current)
-            el.innerHTML = sanitizeHtml(current);
-    }, [current, sourceView]);
+        if (!el || el.innerHTML === current)
+            return;
+        const clean = sanitizeHtmlReport(current);
+        el.innerHTML = clean.html;
+        if (clean.changed)
+            setCurrent(clean.html);
+    }, [current, setCurrent, sourceView]);
     const inEditor = useCallback(() => {
         const el = editorRef.current;
         const selection = window.getSelection();
@@ -325,7 +331,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
             if (!(target instanceof Element))
                 return;
             const focus = target.closest('td, th');
-            if (!focus || focus.closest('table') !== selAnchor.current.closest('table'))
+            if (focus?.closest('table') !== selAnchor.current.closest('table'))
                 return;
             if (focus === selAnchor.current && !selecting.current)
                 return;
@@ -571,6 +577,39 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         pushValue();
     };
     // ── Tabele ──
+    const pickStyle = (tag) => {
+        setStyleOpen(false);
+        focusEditor();
+        restoreSelection();
+        legacyExec('formatBlock', `<${tag}>`);
+        pushValue();
+        refreshState();
+    };
+    /** Siatka tabeli z klawiatury: strzałki zmieniają rozmiar (1–8), Enter wstawia, Escape wraca. */
+    const onGridKeyDown = (event) => {
+        const clamp = (n) => Math.min(GRID_ROWS.length, Math.max(1, n));
+        const r = grid.r || 1;
+        const c = grid.c || 1;
+        if (event.key === 'ArrowDown')
+            setGrid({ r: clamp(r + 1), c });
+        else if (event.key === 'ArrowUp')
+            setGrid({ r: clamp(r - 1), c });
+        else if (event.key === 'ArrowRight')
+            setGrid({ r, c: clamp(c + 1) });
+        else if (event.key === 'ArrowLeft')
+            setGrid({ r, c: clamp(c - 1) });
+        else if (event.key === 'Enter' || event.key === ' ')
+            insertTableAt(r, c);
+        else if (event.key === 'Escape') {
+            setTableOpen(false);
+            setGrid({ r: 0, c: 0 });
+            tableAnchor?.focus();
+        }
+        else
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    };
     const insertTableAt = (rows, cols) => {
         setTableOpen(false);
         setGrid({ r: 0, c: 0 });
@@ -608,7 +647,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         const rect = cell.getBoundingClientRect();
         saveSelection();
         ctxCell.current = cell;
-        canSplitCtx.current = (cell.colSpan || 1) > 1 || (cell.rowSpan || 1) > 1;
+        setCanSplitCtx((cell.colSpan || 1) > 1 || (cell.rowSpan || 1) > 1);
         setMenuPoint({ x: rect.left, y: rect.bottom });
         menuFromKeyboard.current = true;
         setMenuOpen(true);
@@ -650,7 +689,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         event.preventDefault();
         saveSelection();
         ctxCell.current = cell;
-        canSplitCtx.current = (cell.colSpan || 1) > 1 || (cell.rowSpan || 1) > 1;
+        setCanSplitCtx((cell.colSpan || 1) > 1 || (cell.rowSpan || 1) > 1);
         setMenuPoint({ x: event.clientX, y: event.clientY });
         setMenuOpen(true);
     };
@@ -738,7 +777,54 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
             return canOutdent;
         return true;
     };
-    const palette = (onPick, customLabel) => (_jsxs("div", { className: "kpt-rich-text__palette", onMouseDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "kpt-rich-text__swatches", children: SWATCHES.map((swatch) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: swatch.color }, "aria-label": t(`richText.swatches.${swatch.name}`), onClick: () => onPick(swatch.color) }, swatch.color))) }), _jsxs("label", { className: "kpt-rich-text__picker", children: [_jsx("span", { children: customLabel }), _jsx("input", { type: "color", onInput: (event) => onPick(event.target.value) })] })] }));
+    /**
+     * Panele narzędzi żyją w nakładce na końcu `<body>` — po zamontowaniu fokus wchodzi do środka,
+     * inaczej Tab musiałby przejść przez całą stronę, żeby do nich dojść (WCAG 2.1.1).
+     */
+    // Refy stabilne (`useCallback`): nowa funkcja przy każdym renderze byłaby wołana od nowa
+    // i przy każdej zmianie stanu edytora zabierałaby fokus z powrotem na początek panelu.
+    const focusPanelOnMount = useCallback((el) => {
+        if (el)
+            requestAnimationFrame(() => el.focus());
+    }, []);
+    const focusSwatchOnMount = useCallback((el) => {
+        if (el)
+            requestAnimationFrame(() => el.querySelector('.kpt-rich-text__swatch')?.focus());
+    }, []);
+    const focusGridOnMount = useCallback((el) => {
+        if (!el)
+            return;
+        setGrid((g) => (g.r === 0 ? { r: 1, c: 1 } : g));
+        requestAnimationFrame(() => el.focus());
+    }, []);
+    /** Paleta: strzałki po próbkach, Tab krąży w panelu, Escape zamyka i oddaje fokus narzędziu. */
+    const onPaletteKeyDown = (event) => {
+        const panel = event.currentTarget;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            setColorOpen(false);
+            if (colorKind === 'cellBg')
+                focusEditor();
+            else
+                (colorKind === 'foreColor' ? foreAnchor : backAnchor)?.focus();
+            return;
+        }
+        if (event.key === 'Tab') {
+            trapTab(panel, event.nativeEvent);
+            return;
+        }
+        const swatches = [...panel.querySelectorAll('.kpt-rich-text__swatch')];
+        const at = swatches.indexOf(document.activeElement);
+        if (at === -1)
+            return;
+        const next = nextRovingIndex(swatches.map(() => false), at, event.key);
+        if (next === null || next === at)
+            return;
+        event.preventDefault();
+        swatches[next].focus();
+    };
+    const paletteContent = (_jsxs("div", { ref: focusSwatchOnMount, className: "kpt-rich-text__palette", role: "group", "aria-label": t(colorKind === 'backColor' ? 'richText.backColor' : 'richText.foreColor'), onMouseDown: (event) => event.preventDefault(), onKeyDown: onPaletteKeyDown, children: [_jsx("div", { className: "kpt-rich-text__swatches", children: SWATCHES.map((swatch) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: swatch.color }, "aria-label": t(`richText.swatches.${swatch.name}`), onClick: () => applyColor(swatch.color) }, swatch.color))) }), _jsxs("label", { className: "kpt-rich-text__picker", children: [_jsx("span", { children: t('richText.paletteCustom') }), _jsx("input", { type: "color", onInput: (event) => applyColor(event.target.value) })] })] }));
     /**
      * Panel otwarty przy dolnej albo prawej krawędzi okna wychodziłby poza ekran — CDK robił to
      * w Angularze sam, tutaj przesuwamy go po zamontowaniu, gdy już znać jego rozmiar.
@@ -791,13 +877,118 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         buttons[next].focus();
     };
     const toolButton = (item) => (_jsx("button", { ...rovingProps(item), ref: item === 'link' ? setLinkAnchor : undefined, "aria-haspopup": item === 'link' ? 'dialog' : undefined, "aria-expanded": item === 'link' ? linkOpen : undefined, type: "button", className: cn('kpt-rich-text__tool', isActive(item) && 'is-active'), "aria-label": t(`richText.${item}`), "aria-pressed": pressed(item), title: t(`richText.${item}`), disabled: disabled || !enabled(item), onMouseDown: (event) => event.preventDefault(), onClick: () => exec(item), children: _jsx(KptIcon, { name: ICON[item] }) }, item));
-    const menuItem = (icon, label, onClick, extra) => (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, className: cn('kpt-rt-menu__item', extra), "aria-disabled": extra === 'is-disabled' || undefined, onClick: onClick, children: [_jsx(KptIcon, { name: icon }), " ", label] }));
-    return (_jsxs("div", { className: cn('kpt-rich-text-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-rich-text', showInvalid && 'kpt-rich-text--invalid', disabled && 'kpt-rich-text--disabled'), children: [_jsx("div", { className: "kpt-rich-text__toolbar", role: "toolbar", "aria-label": t('richText.toolbar'), "aria-controls": field.id, onKeyDown: onToolbarKeyDown, children: sections.map((section, index) => (_jsxs("span", { style: { display: 'contents' }, children: [index > 0 ? _jsx("span", { className: "kpt-rich-text__divider", "aria-hidden": "true" }) : null, section.map((item) => {
+    /**
+     * Akcje menu tabeli po identyfikatorze. Handlery żyją tutaj, a nie jako domknięcia przekazywane
+     * do `menuItem()` — funkcja wołana w renderze nie dostaje wtedy niczego, co czyta refy.
+     */
+    const runTableAction = (action) => {
+        switch (action) {
+            case 'insertLeft': {
+                if (ctxCell.current)
+                    insertColumn(ctxCell.current, 'left');
+                afterTableOp();
+                break;
+            }
+            case 'insertRight': {
+                if (ctxCell.current)
+                    insertColumn(ctxCell.current, 'right');
+                afterTableOp();
+                break;
+            }
+            case 'headerColumn': {
+                if (ctxCell.current)
+                    toggleHeaderColumn(ctxCell.current);
+                ctxCell.current = null; // komórki zostały podmienione
+                afterTableOp();
+                break;
+            }
+            case 'deleteColumn': {
+                if (ctxCell.current)
+                    deleteColumn(ctxCell.current);
+                afterTableOp();
+                break;
+            }
+            case 'insertAbove': {
+                if (ctxCell.current)
+                    insertRow(ctxCell.current, 'above');
+                afterTableOp();
+                break;
+            }
+            case 'insertBelow': {
+                if (ctxCell.current)
+                    insertRow(ctxCell.current, 'below');
+                afterTableOp();
+                break;
+            }
+            case 'headerRow': {
+                if (ctxCell.current)
+                    toggleHeaderRow(ctxCell.current);
+                ctxCell.current = null;
+                afterTableOp();
+                break;
+            }
+            case 'deleteRow': {
+                if (ctxCell.current)
+                    deleteRow(ctxCell.current);
+                afterTableOp();
+                break;
+            }
+            case 'cellBackground': {
+                setMenuOpen(false);
+                setColorKind('cellBg');
+                setColorOpen(true);
+                break;
+            }
+            case 'alignLeft': {
+                for (const cell of activeCells())
+                    cell.style.textAlign = 'left';
+                afterTableOp();
+                break;
+            }
+            case 'alignCenter': {
+                for (const cell of activeCells())
+                    cell.style.textAlign = 'center';
+                afterTableOp();
+                break;
+            }
+            case 'alignRight': {
+                for (const cell of activeCells())
+                    cell.style.textAlign = 'right';
+                afterTableOp();
+                break;
+            }
+            case 'mergeCells': {
+                mergeCells([...selCells.current]);
+                clearCellSelection();
+                afterTableOp();
+                break;
+            }
+            case 'splitCell': {
+                if (ctxCell.current)
+                    splitCell(ctxCell.current);
+                afterTableOp();
+                break;
+            }
+            case 'border': {
+                setMenuOpen(false);
+                setBorderOpen(true);
+                break;
+            }
+            case 'deleteTable': {
+                ctxCell.current?.closest('table')?.remove();
+                afterTableOp();
+                break;
+            }
+        }
+    };
+    const menuItem = (icon, label, action, extra) => (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, className: cn('kpt-rt-menu__item', extra), "aria-disabled": extra === 'is-disabled' || undefined, onClick: () => runTableAction(action), children: [_jsx(KptIcon, { name: icon }), " ", label] }));
+    return (_jsxs("div", { className: cn('kpt-rich-text-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-rich-text', showInvalid && 'kpt-rich-text--invalid', disabledProp && 'kpt-rich-text--disabled'), children: [_jsx("div", { className: "kpt-rich-text__toolbar", role: "toolbar", "aria-label": t('richText.toolbar'), "aria-controls": field.id, onKeyDown: onToolbarKeyDown, children: sections.map((section, index) => (_jsxs("span", { style: { display: 'contents' }, children: [index > 0 ? _jsx("span", { className: "kpt-rich-text__divider", "aria-hidden": "true" }) : null, section.map((item) => {
                                     if (item === 'heading') {
                                         return (_jsxs("button", { ref: setStyleAnchor, ...rovingProps(item), type: "button", className: cn('kpt-rich-text__style', styleOpen && 'is-open'), disabled: disabled, "aria-label": t('richText.heading'), "aria-expanded": styleOpen, title: t('richText.heading'), onMouseDown: (event) => event.preventDefault(), onClick: () => {
                                                 if (disabled)
                                                     return;
                                                 saveSelection();
+                                                setStyleActive(Math.max(0, styleOptions.findIndex((o) => o.tag === currentBlock)));
                                                 setStyleOpen(true);
                                             }, children: [_jsx("span", { children: styleLabel }), _jsx(KptIcon, { name: "chevron-down", className: "kpt-rich-text__style-caret" })] }, item));
                                     }
@@ -814,7 +1005,9 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                                         return (_jsx("button", { ref: setTableAnchor, ...rovingProps(item), type: "button", className: cn('kpt-rich-text__tool', tableOpen && 'is-active'), "aria-label": t('richText.table'), title: t('richText.table'), disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => exec(item), children: _jsx(KptIcon, { name: ICON[item] }) }, item));
                                     }
                                     return toolButton(item);
-                                })] }, index))) }), sourceView ? (_jsx("textarea", { className: "kpt-rich-text__source", value: current, disabled: disabled, spellCheck: false, "aria-label": t('richText.htmlSource'), onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() })) : (_jsx("div", { ref: editorRef, className: "kpt-rich-text__editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, "aria-invalid": showInvalid || undefined, role: "textbox", "aria-multiline": "true", id: field.id, "aria-required": required || undefined, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, onInput: () => {
+                                })] }, index))) }), sourceView ? (_jsx("textarea", { className: "kpt-rich-text__source", value: current, disabled: disabled, spellCheck: false, "aria-label": t('richText.htmlSource'), onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() })) : (_jsx("div", { ref: editorRef, className: "kpt-rich-text__editor", contentEditable: !disabled, 
+                        // Wyłączony edytor (contentEditable=false) wypada z kolejności Tab jak wyłączone pole.
+                        tabIndex: disabled ? -1 : 0, "aria-readonly": readOnly || undefined, suppressContentEditableWarning: true, "data-placeholder": placeholder, "aria-invalid": showInvalid || undefined, role: "textbox", "aria-multiline": "true", id: field.id, "aria-required": required || undefined, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, onInput: () => {
                             pushValue();
                             syncMention();
                         }, onKeyDown: onKeyDown, onPaste: onPaste, onContextMenu: onContextMenu, onMouseDown: onEditorMouseDown, onMouseMove: onEditorMouseMove, onBlur: () => onTouch?.() }))] }), mentionOpen && container
@@ -844,90 +1037,42 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                                 // Panel jest niewidoczny do pierwszego pomiaru — fokus po klatce.
                                 if (el)
                                     requestAnimationFrame(() => el.focus());
-                            }, className: "kpt-rt-link__input", id: `${field.id}-link`, type: "url", inputMode: "url", placeholder: "https://", value: linkDraft, onChange: (event) => setLinkDraft(event.target.value) }), _jsx("button", { type: "submit", className: "kpt-rt-link__apply", children: t('richText.linkApply') })] }) }), _jsx(KptOverlay, { open: styleOpen, anchor: styleAnchor, onClose: () => setStyleOpen(false), offset: 4, children: _jsx("ul", { className: "kpt-rich-text__style-panel", role: "listbox", children: styleOptions.map((option) => (_jsx("li", { className: cn(`kpt-rich-text__style-opt kpt-rich-text__style-opt--${option.tag}`, currentBlock === option.tag && 'is-selected'), role: "option", "aria-selected": currentBlock === option.tag, onClick: () => {
+                            }, className: "kpt-rt-link__input", id: `${field.id}-link`, type: "url", inputMode: "url", placeholder: "https://", value: linkDraft, onChange: (event) => setLinkDraft(event.target.value) }), _jsx("button", { type: "submit", className: "kpt-rt-link__apply", children: t('richText.linkApply') })] }) }), _jsx(KptOverlay, { open: styleOpen, anchor: styleAnchor, onClose: () => setStyleOpen(false), offset: 4, children: _jsx("ul", { ref: focusPanelOnMount, className: "kpt-rich-text__style-panel", role: "listbox", tabIndex: -1, "aria-label": t('richText.heading'), "aria-activedescendant": `${field.id}-style-${styleActive}`, onKeyDown: (event) => {
+                        const count = styleOptions.length;
+                        if (event.key === 'ArrowDown')
+                            setStyleActive((i) => (i + 1) % count);
+                        else if (event.key === 'ArrowUp')
+                            setStyleActive((i) => (i - 1 + count) % count);
+                        else if (event.key === 'Home')
+                            setStyleActive(0);
+                        else if (event.key === 'End')
+                            setStyleActive(count - 1);
+                        else if (event.key === 'Enter' || event.key === ' ')
+                            pickStyle(styleOptions[styleActive].tag);
+                        else if (event.key === 'Escape' || event.key === 'Tab') {
                             setStyleOpen(false);
-                            focusEditor();
-                            restoreSelection();
-                            legacyExec('formatBlock', `<${option.tag}>`);
-                            pushValue();
-                            refreshState();
-                        }, children: option.label }, option.tag))) }) }), _jsx(KptOverlay, { open: colorOpen && colorKind === 'foreColor', anchor: foreAnchor, onClose: () => setColorOpen(false), offset: 4, children: palette(applyColor, t('richText.paletteCustom')) }), _jsx(KptOverlay, { open: colorOpen && colorKind === 'backColor', anchor: backAnchor, onClose: () => setColorOpen(false), offset: 4, children: palette(applyColor, t('richText.paletteCustom')) }), _jsx(KptOverlay, { open: tableOpen, anchor: tableAnchor, onClose: () => {
+                            styleAnchor?.focus();
+                        }
+                        else
+                            return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }, children: styleOptions.map((option, index) => (_jsx("li", { id: `${field.id}-style-${index}`, className: cn(`kpt-rich-text__style-opt kpt-rich-text__style-opt--${option.tag}`, currentBlock === option.tag && 'is-selected', styleActive === index && 'is-active'), role: "option", "aria-selected": currentBlock === option.tag, onClick: () => pickStyle(option.tag), children: option.label }, option.tag))) }) }), _jsx(KptOverlay, { open: colorOpen && colorKind === 'foreColor', anchor: foreAnchor, onClose: () => setColorOpen(false), offset: 4, children: paletteContent }), _jsx(KptOverlay, { open: colorOpen && colorKind === 'backColor', anchor: backAnchor, onClose: () => setColorOpen(false), offset: 4, children: paletteContent }), _jsx(KptOverlay, { open: tableOpen, anchor: tableAnchor, onClose: () => {
                     setTableOpen(false);
                     setGrid({ r: 0, c: 0 });
-                }, offset: 4, children: _jsxs("div", { className: "kpt-rt-grid-pop", onMouseDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "kpt-rt-grid", onMouseLeave: () => setGrid({ r: 0, c: 0 }), children: GRID_ROWS.map((r) => (_jsx("div", { className: "kpt-rt-grid__row", children: GRID_COLS.map((c) => (_jsx("span", { className: cn('kpt-rt-grid__cell', r <= grid.r && c <= grid.c && 'is-on'), onMouseEnter: () => setGrid({ r, c }), onClick: () => insertTableAt(r, c) }, c))) }, r))) }), _jsxs("div", { className: "kpt-rt-grid__label", children: [grid.r, " \u00D7 ", grid.c] })] }) }), menuOpen
+                }, offset: 4, children: _jsxs("div", { className: "kpt-rt-grid-pop", onMouseDown: (event) => event.preventDefault(), children: [_jsx("div", { ref: focusGridOnMount, className: "kpt-rt-grid", role: "group", 
+                            // Jeden przystanek ze strzałkami (rozmiar tabeli) — grupa z własną obsługą klawiatury.
+                            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- patrz wyżej
+                            tabIndex: 0, "aria-label": t('richText.table'), "aria-describedby": `${field.id}-grid-size`, "aria-keyshortcuts": "ArrowUp ArrowDown ArrowLeft ArrowRight Enter Escape", onKeyDown: onGridKeyDown, onMouseLeave: () => setGrid({ r: 0, c: 0 }), children: GRID_ROWS.map((r) => (_jsx("div", { className: "kpt-rt-grid__row", children: GRID_COLS.map((c) => (_jsx("span", { className: cn('kpt-rt-grid__cell', r <= grid.r && c <= grid.c && 'is-on'), onMouseEnter: () => setGrid({ r, c }), onClick: () => insertTableAt(r, c) }, c))) }, r))) }), _jsxs("div", { className: "kpt-rt-grid__label", id: `${field.id}-grid-size`, "aria-live": "polite", children: [grid.r, " \u00D7 ", grid.c] })] }) }), menuOpen
                 ? pointPanel(_jsxs("div", { ref: (el) => {
                         if (el && menuFromKeyboard.current) {
                             menuFromKeyboard.current = false;
                             requestAnimationFrame(() => focusMenuEdge(el, 'first'));
                         }
-                    }, className: "kpt-rt-menu", role: "menu", "aria-label": t('richText.table'), onContextMenu: (event) => event.preventDefault(), onKeyDown: onMenuKeyDown, children: [_jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.column') }), menuItem('plus', t('richText.menu.insertLeft'), () => {
-                            if (ctxCell.current)
-                                insertColumn(ctxCell.current, 'left');
-                            afterTableOp();
-                        }), menuItem('plus', t('richText.menu.insertRight'), () => {
-                            if (ctxCell.current)
-                                insertColumn(ctxCell.current, 'right');
-                            afterTableOp();
-                        }), menuItem('table', t('richText.menu.headerColumn'), () => {
-                            if (ctxCell.current)
-                                toggleHeaderColumn(ctxCell.current);
-                            ctxCell.current = null; // komórki zostały podmienione
-                            afterTableOp();
-                        }), menuItem('trash', t('richText.menu.deleteColumn'), () => {
-                            if (ctxCell.current)
-                                deleteColumn(ctxCell.current);
-                            afterTableOp();
-                        }), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), _jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.row') }), menuItem('plus', t('richText.menu.insertAbove'), () => {
-                            if (ctxCell.current)
-                                insertRow(ctxCell.current, 'above');
-                            afterTableOp();
-                        }), menuItem('plus', t('richText.menu.insertBelow'), () => {
-                            if (ctxCell.current)
-                                insertRow(ctxCell.current, 'below');
-                            afterTableOp();
-                        }), menuItem('table', t('richText.menu.headerRow'), () => {
-                            if (ctxCell.current)
-                                toggleHeaderRow(ctxCell.current);
-                            ctxCell.current = null;
-                            afterTableOp();
-                        }), menuItem('trash', t('richText.menu.deleteRow'), () => {
-                            if (ctxCell.current)
-                                deleteRow(ctxCell.current);
-                            afterTableOp();
-                        }), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), _jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.cell') }), menuItem('palette', t('richText.menu.cellBackground'), () => {
-                            setMenuOpen(false);
-                            setColorKind('cellBg');
-                            setColorOpen(true);
-                        }), menuItem('align-left', t('richText.menu.alignLeft'), () => {
-                            for (const cell of activeCells())
-                                cell.style.textAlign = 'left';
-                            afterTableOp();
-                        }), menuItem('align-center', t('richText.menu.alignCenter'), () => {
-                            for (const cell of activeCells())
-                                cell.style.textAlign = 'center';
-                            afterTableOp();
-                        }), menuItem('align-right', t('richText.menu.alignRight'), () => {
-                            for (const cell of activeCells())
-                                cell.style.textAlign = 'right';
-                            afterTableOp();
-                        }), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('table', t('richText.menu.mergeCells'), () => {
-                            mergeCells([...selCells.current]);
-                            clearCellSelection();
-                            afterTableOp();
-                        }, selCount < 2 ? 'is-disabled' : undefined), menuItem('grip-vertical', t('richText.menu.splitCell'), () => {
-                            if (ctxCell.current)
-                                splitCell(ctxCell.current);
-                            afterTableOp();
-                        }, canSplitCtx.current ? undefined : 'is-disabled'), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('table', t('richText.menu.border'), () => {
-                            setMenuOpen(false);
-                            setBorderOpen(true);
-                        }), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('trash', t('richText.menu.deleteTable'), () => {
-                            ctxCell.current?.closest('table')?.remove();
-                            afterTableOp();
-                        }, 'kpt-rt-menu__item--danger')] }), () => setMenuOpen(false))
+                    }, className: "kpt-rt-menu", role: "menu", tabIndex: -1, "aria-label": t('richText.table'), onContextMenu: (event) => event.preventDefault(), onKeyDown: onMenuKeyDown, children: [_jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.column') }), menuItem('plus', t('richText.menu.insertLeft'), 'insertLeft'), menuItem('plus', t('richText.menu.insertRight'), 'insertRight'), menuItem('table', t('richText.menu.headerColumn'), 'headerColumn'), menuItem('trash', t('richText.menu.deleteColumn'), 'deleteColumn'), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), _jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.row') }), menuItem('plus', t('richText.menu.insertAbove'), 'insertAbove'), menuItem('plus', t('richText.menu.insertBelow'), 'insertBelow'), menuItem('table', t('richText.menu.headerRow'), 'headerRow'), menuItem('trash', t('richText.menu.deleteRow'), 'deleteRow'), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), _jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.cell') }), menuItem('palette', t('richText.menu.cellBackground'), 'cellBackground'), menuItem('align-left', t('richText.menu.alignLeft'), 'alignLeft'), menuItem('align-center', t('richText.menu.alignCenter'), 'alignCenter'), menuItem('align-right', t('richText.menu.alignRight'), 'alignRight'), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('table', t('richText.menu.mergeCells'), 'mergeCells', selCount < 2 ? 'is-disabled' : undefined), menuItem('grip-vertical', t('richText.menu.splitCell'), 'splitCell', canSplitCtx ? undefined : 'is-disabled'), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('table', t('richText.menu.border'), 'border'), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('trash', t('richText.menu.deleteTable'), 'deleteTable', 'kpt-rt-menu__item--danger')] }), () => setMenuOpen(false))
                 : null, borderOpen
                 ? pointPanel(_jsxs("div", { className: "kpt-rt-border", onMouseDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "kpt-rt-border__seg", children: [_jsx("button", { type: "button", className: cn(borderTarget === 'table' && 'is-active'), onClick: () => setBorderTarget('table'), children: t('richText.border.table') }), _jsx("button", { type: "button", className: cn(borderTarget === 'cell' && 'is-active'), onClick: () => setBorderTarget('cell'), children: t('richText.border.cell') })] }), _jsxs("div", { className: "kpt-rt-border__widths", children: [_jsx("button", { type: "button", onClick: () => setBorderWidth('none'), children: t('richText.border.none') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('thin'), children: t('richText.border.thin') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('medium'), children: t('richText.border.medium') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('thick'), children: t('richText.border.thick') })] }), _jsx("div", { className: "kpt-rich-text__swatches", children: SWATCHES.map((swatch) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: swatch.color }, "aria-label": t(`richText.swatches.${swatch.name}`), onClick: () => setBorderColor(swatch.color) }, swatch.color))) }), _jsxs("label", { className: "kpt-rich-text__picker", children: [_jsx("span", { children: t('richText.border.customColor') }), _jsx("input", { type: "color", onInput: (event) => setBorderColor(event.target.value) })] })] }), () => setBorderOpen(false))
                 : null, colorOpen && colorKind === 'cellBg'
-                ? pointPanel(palette(applyColor, t('richText.paletteCustom')), () => setColorOpen(false))
+                ? pointPanel(paletteContent, () => setColorOpen(false))
                 : null] }));
 }

package/dist/rich-text/sanitize.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Czyści HTML i mówi, czy coś usunął. `changed: false` znaczy, że treść była czysta — wtedy
+ * wołający nie musi nadpisywać wartości modelu (serializacja DOM potrafi zmienić zapis, np.
+ * cudzysłowy, bez zmiany treści, a taka różnica nie może brudzić formularza).
+ */
+export declare function sanitizeHtmlReport(html: string): {
+    html: string;
+    changed: boolean;
+};
 /**
  * Czyści HTML wchodzący do edytora. Dotyczy **każdego** zapisu do DOM edytora, nie tylko
  * wklejania: `value` z aplikacji też bywa niezaufane (baza, CMS, inny użytkownik).