@konce-pt/react 0.11.2 → 0.14.0

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

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useCallback, useEffect, useEffectEvent, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -8,17 +9,20 @@ 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 { KptSpeechButton } from "../speech/speech-button.js";
+import { useKptSpeechRecognition } from "../speech/use-speech-recognition.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',
     paste: 'clipboard',
     pasteText: 'clipboard-text',
-    heading: 'code', // nieużywane — „heading" renderuje select
+    heading: 'code', // nieużywane - "heading" renderuje select
     bold: 'bold',
     italic: 'italic',
     underline: 'underline',
@@ -37,8 +41,9 @@ const ICON = {
     table: 'table',
     clear: 'clear-formatting',
     html: 'code',
+    dictate: 'microphone', // nieużywane - "dictate" renderuje KptSpeechButton
 };
-/** Narzędzia zwykłe → komenda `execCommand` (zarazem nazwa dla `queryCommandState`). */
+/** Narzędzia zwykłe -> komenda `execCommand` (zarazem nazwa dla `queryCommandState`). */
 const COMMAND = {
     bold: 'bold',
     italic: 'italic',
@@ -52,7 +57,7 @@ const COMMAND = {
     alignJustify: 'justifyFull',
     clear: 'removeFormat',
 };
-/** Paleta kolorów z nazwami (`richText.swatches.*`) — sam kod szesnastkowy nic czytnikowi nie mówi. */
+/** Paleta kolorów z nazwami (`richText.swatches.*`) - sam kod szesnastkowy nic czytnikowi nie mówi. */
 const SWATCHES = [
     { color: '#000000', name: 'black' },
     { color: '#434343', name: 'darkGray' },
@@ -84,26 +89,22 @@ 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 }) {
-    /** `contenteditable` nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+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, speechLang, speechColor, 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 });
     const container = useKptOverlayContainer();
@@ -111,7 +112,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     const savedRange = useRef(null);
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const showInvalid = invalid && (touched ?? true);
-    // Kotwice narzędzi z panelem — `KptOverlay` przypina panel do konkretnego przycisku.
+    // Kotwice narzędzi z panelem - `KptOverlay` przypina panel do konkretnego przycisku.
     const [styleAnchor, setStyleAnchor] = useState(null);
     const [foreAnchor, setForeAnchor] = useState(null);
     const [backAnchor, setBackAnchor] = useState(null);
@@ -120,25 +121,27 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     /** Okienko adresu linku (zamiast `window.prompt()`) i wpisywany adres. */
     const [linkOpen, setLinkOpen] = useState(false);
     const [linkDraft, setLinkDraft] = useState('');
-    /** Menu tabeli otwarte z klawiatury — po zamontowaniu fokus idzie na pierwszą pozycję. */
+    /** Menu tabeli otwarte z klawiatury - po zamontowaniu fokus idzie na pierwszą pozycję. */
     const menuFromKeyboard = useRef(false);
     const [styleOpen, setStyleOpen] = useState(false);
-    /** Narzędzie, na którym ostatnio stał fokus paska — przystanek Tab przy powrocie. */
+    /** Narzędzie, na którym ostatnio stał fokus paska - przystanek Tab przy powrocie. */
     const [lastTool, setLastTool] = useState(null);
     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);
     const [menuPoint, setMenuPoint] = useState({ x: 0, y: 0 });
-    // ── Wzmianki (`@`) ──
+    // -- Wzmianki (`@`) --
     const [mentionOpen, setMentionOpen] = useState(false);
     const [mentionMatches, setMentionMatches] = useState([]);
     const [mentionActive, setMentionActive] = useState(0);
-    /** Zaczepienie listy w miejscu kursora — punkt, nie element, bo `@` nie ma własnego elementu. */
+    /** Zaczepienie listy w miejscu kursora - punkt, nie element, bo `@` nie ma własnego elementu. */
     const [mentionPoint, setMentionPoint] = useState({ x: 0, y: 0 });
-    /** Węzeł tekstowy i zakres zapytania `@…`, który podmieni wybrana pozycja. */
+    /** Węzeł tekstowy i zakres zapytania `@...`, który podmieni wybrana pozycja. */
     const mentionRange = useRef(null);
     const [borderOpen, setBorderOpen] = useState(false);
     const [borderTarget, setBorderTarget] = useState('table');
@@ -148,7 +151,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);
@@ -158,6 +161,18 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         : Array.isArray(toolbar[0])
             ? toolbar
             : [toolbar];
+    // -- Dyktowanie (narzędzie `dictate`) --
+    // Cel to sam obszar edycji: tekst zatwierdzony wchodzi przez `insertText` w miejsce kursora
+    // (natywne undo, zdarzenie `input` -> wartość), tymczasowy jest nakładką przy kursorze i nie trafia
+    // do HTML-a. Bez narzędzia w pasku kontroler nie tworzy sesji.
+    const hasDictate = sections.some((section) => section.includes('dictate'));
+    const mic = useKptSpeechRecognition({ enabled: hasDictate, target: editorRef, lang: speechLang, disabled });
+    // Widok źródła zdejmuje obszar edycji, a blokada zabrania pisania - dyktowanie przerywamy.
+    const stopDictation = useEffectEvent(() => mic.abort());
+    useEffect(() => {
+        if (sourceView || disabled)
+            stopDictation();
+    }, [sourceView, disabled]);
     const pushValue = useCallback(() => {
         const el = editorRef.current;
         if (el)
@@ -165,21 +180,27 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     }, [setCurrent]);
     /*
      * 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.
+     * 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();
         return !!el && !!selection && selection.rangeCount > 0 && el.contains(selection.anchorNode);
     }, []);
-    /** Tag bloku, w którym stoi kursor — dla selecta stylu; domyślnie paragraf. */
+    /** Tag bloku, w którym stoi kursor - dla selecta stylu; domyślnie paragraf. */
     const blockTag = useCallback(() => {
         let node = window.getSelection()?.anchorNode;
         while (node && node !== editorRef.current) {
@@ -210,19 +231,19 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         selCells.current = new Set();
         setSelCount(0);
     }, []);
-    /** Zamknięcie podpowiedzi — czyści też zapamiętany zakres zapytania. */
+    /** Zamknięcie podpowiedzi - czyści też zapamiętany zakres zapytania. */
     const closeMention = useCallback(() => {
         mentionRange.current = null;
         setMentionMatches([]);
         setMentionOpen(false);
     }, []);
-    /** Punkt pod kursorem — lista podpowiedzi zaczepia się o niego, bo `@` nie ma swojego elementu. */
+    /** Punkt pod kursorem - lista podpowiedzi zaczepia się o niego, bo `@` nie ma swojego elementu. */
     const caretPoint = useCallback((node, offset) => {
         const range = document.createRange();
         range.setStart(node, Math.min(offset, node.length));
         range.collapse(true);
         const rect = range.getBoundingClientRect();
-        // Zwinięty zakres na początku wiersza potrafi dać zerowy prostokąt — wtedy bierzemy
+        // Zwinięty zakres na początku wiersza potrafi dać zerowy prostokąt - wtedy bierzemy
         // krawędź samego edytora, żeby lista nie wylądowała w rogu ekranu.
         if (rect.width === 0 && rect.height === 0) {
             const fallback = editorRef.current?.getBoundingClientRect();
@@ -231,11 +252,11 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         return { x: rect.left, y: rect.bottom };
     }, []);
     /**
-     * Sprawdza, czy kursor stoi w zapytaniu `@…`, i ustawia listę podpowiedzi.
+     * Sprawdza, czy kursor stoi w zapytaniu `@...`, i ustawia listę podpowiedzi.
      *
      * Zapytanie liczymy z **węzła tekstowego**, nie z całego HTML-a: w treści siedzą tagi, a `@`
      * ma widzieć tylko to, co użytkownik naprawdę napisał w tym miejscu. Rozpoznanie zostawiamy
-     * `mentionQuery()` z `@konce-pt/mention` — te same reguły działają w obu portach.
+     * `mentionQuery()` z `@konce-pt/mention` - te same reguły działają w obu portach.
      */
     const syncMention = useCallback(() => {
         if (disabled || !mentions.length) {
@@ -265,10 +286,10 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         setMentionOpen(true);
     }, [caretPoint, closeMention, disabled, mentionLimit, mentions]);
     /**
-     * Wstawia wzmiankę w miejsce zapytania `@…`.
+     * Wstawia wzmiankę w miejsce zapytania `@...`.
      *
      * Wzmianka jest elementem, nie samym tekstem: `data-mention` niesie identyfikator, który
-     * przeżyje zmianę nazwy, a `contenteditable="false"` trzyma ją w jednym kawałku — bez tego
+     * przeżyje zmianę nazwy, a `contenteditable="false"` trzyma ją w jednym kawałku - bez tego
      * kursor wchodziłby w środek nazwiska i psuł zapis. Spacja po wzmiance daje gdzie postawić
      * kursor: bez niej nie da się wyjść poza element, który nie jest edytowalny.
      */
@@ -303,7 +324,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     useEffect(() => {
         const onSelectionChange = () => {
             refreshState();
-            // Kursor może odjechać od `@` także bez pisania (klik, strzałki) — wtedy podpowiedzi
+            // Kursor może odjechać od `@` także bez pisania (klik, strzałki) - wtedy podpowiedzi
             // muszą zniknąć, inaczej Enter wstawiłby wzmiankę w zupełnie innym miejscu.
             syncMention();
         };
@@ -325,7 +346,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;
@@ -368,7 +389,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
             selection.addRange(savedRange.current);
         }
     };
-    // ── Schowek ──
+    // -- Schowek --
     const copySelection = async () => {
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0 || selection.isCollapsed)
@@ -405,7 +426,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
             pushValue();
         }
         catch {
-            /* brak uprawnień albo API — ignorujemy */
+            /* brak uprawnień albo API - ignorujemy */
         }
     };
     const pastePlain = async () => {
@@ -416,10 +437,10 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
             pushValue();
         }
         catch {
-            /* brak uprawnień albo API — ignorujemy */
+            /* brak uprawnień albo API - ignorujemy */
         }
     };
-    // ── Narzędzia ──
+    // -- Narzędzia --
     const exec = (item) => {
         if (disabled)
             return;
@@ -464,7 +485,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     };
     /**
      * Tab: wcięcie w liście, przeskok komórki w tabeli. Poza nimi i na krawędziach zostawiamy Tab
-     * natywny — inaczej edytor byłby pułapką klawiaturową (WCAG 2.1.2).
+     * natywny - inaczej edytor byłby pułapką klawiaturową (WCAG 2.1.2).
      */
     /** Klawiatura listy podpowiedzi; `true` = zdarzenie obsłużone i edytor go już nie zobaczy. */
     const onMentionKeyDown = (event) => {
@@ -525,7 +546,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         const cells = [...table.querySelectorAll('td, th')];
         const next = cells[cells.indexOf(cell) + (event.shiftKey ? -1 : 1)];
         if (!next)
-            return; // koniec tabeli — Tab zostaje natywny
+            return; // koniec tabeli - Tab zostaje natywny
         event.preventDefault();
         const range = document.createRange();
         range.selectNodeContents(next);
@@ -535,7 +556,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         clearCellSelection();
         refreshState();
     };
-    /** Natywne wklejanie — czyścimy treść, żeby nie wnosić śmieci z edytorów tekstu i stron. */
+    /** Natywne wklejanie - czyścimy treść, żeby nie wnosić śmieci z edytorów tekstu i stron. */
     const onPaste = (event) => {
         if (disabled)
             return;
@@ -548,7 +569,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
             legacyExec('insertText', text);
         pushValue();
     };
-    // ── Kolory ──
+    // -- Kolory --
     const activeCells = () => {
         if (selCells.current.size)
             return [...selCells.current];
@@ -570,7 +591,40 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
             legacyExec('backColor', color);
         pushValue();
     };
-    // ── Tabele ──
+    // -- 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 });
@@ -582,7 +636,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     const afterTableOp = () => {
         const fromMenu = !!document.activeElement?.closest('.kpt-rt-menu');
         setMenuOpen(false);
-        // Pozycja wybrana z klawiatury znika razem z menu — fokus wraca do edytora, nie na <body>.
+        // Pozycja wybrana z klawiatury znika razem z menu - fokus wraca do edytora, nie na <body>.
         if (fromMenu)
             focusEditor();
         pushValue();
@@ -598,7 +652,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         if (handleMenuKeydown(event.currentTarget, event.nativeEvent) === 'close')
             closeMenuToEditor();
     };
-    /** Menu tabeli z klawiatury: klawisz menu albo `Shift+F10` w komórce — jak natywne menu kontekstowe. */
+    /** Menu tabeli z klawiatury: klawisz menu albo `Shift+F10` w komórce - jak natywne menu kontekstowe. */
     const openMenuFromKeyboard = () => {
         const node = window.getSelection()?.anchorNode ?? null;
         const el = node instanceof Element ? node : (node?.parentElement ?? null);
@@ -608,13 +662,13 @@ 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);
         return true;
     };
-    /** Okienko adresu zamiast `window.prompt()` — nazwane pole, `Enter` wstawia, `Escape` wraca do tekstu. */
+    /** Okienko adresu zamiast `window.prompt()` - nazwane pole, `Enter` wstawia, `Escape` wraca do tekstu. */
     const openLink = () => {
         if (disabled)
             return;
@@ -650,7 +704,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);
     };
@@ -714,7 +768,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         }
         pushValue();
     };
-    // ── Prezentacja narzędzi ──
+    // -- Prezentacja narzędzi --
     const styleOptions = [
         { tag: 'p', label: t('richText.styleNormal') },
         ...[1, 2, 3, 4, 5, 6].map((level) => ({
@@ -729,18 +783,67 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         const cmd = COMMAND[item];
         return !!cmd && activeCmds.has(cmd);
     };
-    /** `aria-pressed` tylko dla przełączników — wcięcia są akcjami, nie stanem. */
+    /** `aria-pressed` tylko dla przełączników - wcięcia są akcjami, nie stanem. */
     const pressed = (item) => item === 'indent' || item === 'outdent' ? undefined : isActive(item);
     const enabled = (item) => {
         if (item === 'indent')
             return canIndent;
         if (item === 'outdent')
             return canOutdent;
+        if (item === 'dictate')
+            return mic.available && !sourceView;
         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) })] })] }));
     /**
-     * Panel otwarty przy dolnej albo prawej krawędzi okna wychodziłby poza ekran — CDK robił to
+     * 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.
      */
     const clampToViewport = (el) => {
@@ -753,13 +856,13 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         el.style.top = `${top}px`;
     };
     /**
-     * Panel przypięty do punktu kursora — menu tabeli i jego popovery nie mają wyzwalacza, więc
+     * Panel przypięty do punktu kursora - menu tabeli i jego popovery nie mają wyzwalacza, więc
      * nie przechodzą przez `KptOverlay`; pozycję niosą współrzędne kliknięcia, tak jak
      * w `KptContextMenu`.
      */
     const pointPanel = (content, onClose) => {
         if (!container)
-            return null; // render na serwerze — nie ma czego portalować
+            return null; // render na serwerze - nie ma czego portalować
         const layer = { zIndex: 'var(--kpt-z-overlay, 1100)' };
         return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { style: { position: 'fixed', inset: 0, ...layer }, onClick: onClose, onContextMenu: (event) => {
                         event.preventDefault();
@@ -767,37 +870,144 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                     } }), _jsx("div", { ref: clampToViewport, style: { position: 'fixed', left: menuPoint.x, top: menuPoint.y, ...layer }, children: content })] }), container);
     };
     /**
-     * Przystanek Tab paska: ostatnio użyte narzędzie, a gdy jest wyłączone albo go nie ma —
+     * Przystanek Tab paska: ostatnio użyte narzędzie, a gdy jest wyłączone albo go nie ma -
      * pierwsze dostępne. Dzięki temu `Tab` z paska idzie od razu do edytora, a nie przez kilkanaście
      * przycisków.
      */
     const usableTools = sections.flat().filter((item) => !disabled && enabled(item));
     const toolStop = lastTool && usableTools.includes(lastTool) ? lastTool : (usableTools[0] ?? null);
     const rovingProps = (item) => ({ 'data-tool': item, tabIndex: item === toolStop ? 0 : -1 });
-    /** Strzałki po pasku (w RTL odwrócone), `Home`/`End` — skrajne; wyłączone narzędzia są pomijane. */
+    /** Strzałki po pasku (w RTL odwrócone), `Home`/`End` - skrajne; wyłączone narzędzia są pomijane. */
     const onToolbarKeyDown = (event) => {
         const bar = event.currentTarget;
-        const buttons = [...bar.querySelectorAll('[data-tool]')];
+        const tools = [...bar.querySelectorAll('[data-tool]')];
+        // Narzędzie może być komponentem (`dictate` to KptSpeechButton) - fokus dostaje jego przycisk.
+        const buttons = tools.map((tool) => (tool instanceof HTMLButtonElement ? tool : tool.querySelector('button')));
         const current = buttons.indexOf(event.target);
         if (current < 0)
             return;
         const rtl = getComputedStyle(bar).direction === 'rtl';
         const key = rtl && event.key === 'ArrowLeft' ? 'ArrowRight' : rtl && event.key === 'ArrowRight' ? 'ArrowLeft' : event.key;
-        const next = nextRovingIndex(buttons.map((button) => button.disabled), current, key);
+        const next = nextRovingIndex(buttons.map((button) => !button || button.disabled), current, key);
         if (next === null)
             return;
         event.preventDefault();
-        setLastTool(buttons[next].dataset['tool']);
-        buttons[next].focus();
+        setLastTool(tools[next].dataset['tool']);
+        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));
                                     }
@@ -813,8 +1023,15 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                                     if (item === 'table') {
                                         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));
                                     }
+                                    if (item === 'dictate') {
+                                        // `data-tool` na hoście - roving znajduje narzędzie, a fokus dostaje jego przycisk.
+                                        const host = { className: 'kpt-rich-text__dictate', 'data-tool': item };
+                                        return (_jsx(KptSpeechButton, { listeningColor: speechColor, speech: mic, size: "sm", unsupported: "hide", wavePosition: "end", tabIndex: item === toolStop ? 0 : -1, disabled: disabled || sourceView, hostProps: host }, 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
@@ -830,7 +1047,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                             insertMention(item);
                         }, onMouseEnter: () => setMentionActive(index), children: [_jsx("span", { className: "kpt-rt-mentions__label", children: item.label }), item.kind ? _jsx("span", { className: "kpt-rt-mentions__kind", children: item.kind }) : null] }, item.id))) }), container)
                 : null, _jsx(KptOverlay, { open: linkOpen, anchor: linkAnchor, onClose: () => closeLink(false), offset: 4, children: _jsxs("form", { className: "kpt-rt-link", role: "dialog", 
-                    // Bez walidacji przeglądarki: „example.com” jest poprawnym wpisem — `sanitizeUrl` dopisze https://.
+                    // Bez walidacji przeglądarki: "example.com" jest poprawnym wpisem - `sanitizeUrl` dopisze https://.
                     noValidate: true, "aria-label": t('richText.link'), onSubmit: (event) => {
                         event.preventDefault();
                         applyLink();
@@ -841,93 +1058,45 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                         event.stopPropagation();
                         closeLink(true);
                     }, children: [_jsx("label", { className: "kpt-rt-link__label", htmlFor: `${field.id}-link`, children: t('richText.linkPrompt') }), _jsx("input", { ref: (el) => {
-                                // Panel jest niewidoczny do pierwszego pomiaru — fokus po klatce.
+                                // 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, " x ", 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] }));
 }