@konce-pt/react 0.8.0

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

@@ -0,0 +1,654 @@
+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';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+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 { canIndentItem, canOutdentItem, selectedItems, shiftItems } from "./lists.js";
+import { CELL_SELECTED, deleteColumn, deleteRow, insertColumn, insertRow, mergeCells, regionBetween, splitCell, tableHtml, toggleHeaderColumn, toggleHeaderRow, } from "./tables.js";
+const ICON = {
+    copy: 'copy',
+    paste: 'clipboard',
+    pasteText: 'clipboard-text',
+    heading: 'code', // nieużywane — „heading" renderuje select
+    bold: 'bold',
+    italic: 'italic',
+    underline: 'underline',
+    strike: 'strikethrough',
+    ul: 'list',
+    ol: 'list-numbers',
+    indent: 'indent-increase',
+    outdent: 'indent-decrease',
+    foreColor: 'palette',
+    backColor: 'highlight',
+    alignLeft: 'align-left',
+    alignCenter: 'align-center',
+    alignRight: 'align-right',
+    alignJustify: 'align-justified',
+    link: 'link',
+    table: 'table',
+    clear: 'clear-formatting',
+    html: 'code',
+};
+/** Narzędzia zwykłe → komenda `execCommand` (zarazem nazwa dla `queryCommandState`). */
+const COMMAND = {
+    bold: 'bold',
+    italic: 'italic',
+    underline: 'underline',
+    strike: 'strikeThrough',
+    ul: 'insertUnorderedList',
+    ol: 'insertOrderedList',
+    alignLeft: 'justifyLeft',
+    alignCenter: 'justifyCenter',
+    alignRight: 'justifyRight',
+    alignJustify: 'justifyFull',
+    clear: 'removeFormat',
+};
+const SWATCHES = [
+    '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#ffffff',
+    '#e11d48', '#ea580c', '#ca8a04', '#16a34a', '#0891b2', '#2563eb', '#7c3aed',
+];
+const DEFAULT_TOOLBAR = [
+    ['copy', 'paste', 'pasteText'],
+    ['heading', 'bold', 'italic', 'underline', 'strike', 'ul', 'ol', 'indent', 'outdent'],
+    ['foreColor', 'backColor'],
+    ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
+    ['link', 'table', 'clear', 'html'],
+];
+const GRID_ROWS = Array.from({ length: 8 }, (_, i) => i + 1);
+const GRID_COLS = Array.from({ length: 8 }, (_, i) => i + 1);
+/**
+ * Jedyne wywołania `document.execCommand` w komponencie. API jest formalnie wycofane, ale nie ma
+ * zamiennika: to jedyny sposób formatowania trafiający do natywnego stosu cofania przeglądarki
+ * (Ctrl+Z). Własne komendy wymagałyby własnej historii, czyli przepisania edytora.
+ */
+function legacyExec(cmd, value) {
+    return document.execCommand(cmd, false, value); // NOSONAR: brak zamiennika, patrz JSDoc
+}
+function legacyState(cmd) {
+    try {
+        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, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const container = useKptOverlayContainer();
+    const editorRef = useRef(null);
+    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.
+    const [styleAnchor, setStyleAnchor] = useState(null);
+    const [foreAnchor, setForeAnchor] = useState(null);
+    const [backAnchor, setBackAnchor] = useState(null);
+    const [tableAnchor, setTableAnchor] = useState(null);
+    const [styleOpen, setStyleOpen] = useState(false);
+    const [colorOpen, setColorOpen] = useState(false);
+    const [colorKind, setColorKind] = useState('foreColor');
+    const [tableOpen, setTableOpen] = useState(false);
+    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 });
+    const [borderOpen, setBorderOpen] = useState(false);
+    const [borderTarget, setBorderTarget] = useState('table');
+    const [activeCmds, setActiveCmds] = useState(new Set());
+    const [canIndent, setCanIndent] = useState(false);
+    const [canOutdent, setCanOutdent] = useState(false);
+    const [currentBlock, setCurrentBlock] = useState('p');
+    const [selCount, setSelCount] = useState(0);
+    const ctxCell = useRef(null);
+    const canSplitCtx = useRef(false);
+    const selCells = useRef(new Set());
+    const selAnchor = useRef(null);
+    const selecting = useRef(false);
+    const resize = useRef(null);
+    const sections = toolbar.length === 0
+        ? []
+        : Array.isArray(toolbar[0])
+            ? toolbar
+            : [toolbar];
+    const pushValue = useCallback(() => {
+        const el = editorRef.current;
+        if (el)
+            setCurrent(el.innerHTML);
+    }, [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.
+     * 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.
+     */
+    useEffect(() => {
+        const el = editorRef.current;
+        if (el && el.innerHTML !== current)
+            el.innerHTML = sanitizeHtml(current);
+    }, [current, 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. */
+    const blockTag = useCallback(() => {
+        let node = window.getSelection()?.anchorNode;
+        while (node && node !== editorRef.current) {
+            const tag = node.tagName?.toLowerCase();
+            if (tag && /^(h[1-6]|p|blockquote)$/.test(tag))
+                return tag;
+            node = node.parentElement;
+        }
+        return 'p';
+    }, []);
+    const refreshState = useCallback(() => {
+        if (disabled || !inEditor())
+            return;
+        const active = new Set();
+        for (const cmd of Object.values(COMMAND)) {
+            if (cmd && cmd !== 'removeFormat' && legacyState(cmd))
+                active.add(cmd);
+        }
+        setActiveCmds(active);
+        const items = selectedItems(editorRef.current);
+        setCanIndent(items.some((li) => canIndentItem(editorRef.current, li, maxListLevel)));
+        setCanOutdent(items.some((li) => canOutdentItem(li)));
+        setCurrentBlock(blockTag());
+    }, [blockTag, disabled, inEditor, maxListLevel]);
+    const clearCellSelection = useCallback(() => {
+        for (const cell of selCells.current)
+            cell.classList.remove(CELL_SELECTED);
+        selCells.current = new Set();
+        setSelCount(0);
+    }, []);
+    // Stan narzędzi zależy od zaznaczenia, a to zmienia się także poza naszymi zdarzeniami
+    // (myszą, klawiaturą, przez inne okno), więc nasłuchujemy `selectionchange` na dokumencie.
+    useEffect(() => {
+        const onSelectionChange = () => refreshState();
+        document.addEventListener('selectionchange', onSelectionChange);
+        return () => document.removeEventListener('selectionchange', onSelectionChange);
+    }, [refreshState]);
+    // Przeciąganie krawędzi kolumny i zaznaczanie komórek biegną na całym dokumencie: kursor
+    // wyjeżdża poza tabelę praktycznie zawsze.
+    useEffect(() => {
+        const onMove = (event) => {
+            if (resize.current) {
+                const width = Math.max(32, resize.current.startW + (event.clientX - resize.current.startX));
+                resize.current.col.style.width = `${width}px`;
+                return;
+            }
+            if (!selAnchor.current || !(event.buttons & 1))
+                return;
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            const focus = target.closest('td, th');
+            if (!focus || focus.closest('table') !== selAnchor.current.closest('table'))
+                return;
+            if (focus === selAnchor.current && !selecting.current)
+                return;
+            selecting.current = true;
+            event.preventDefault();
+            window.getSelection()?.removeAllRanges();
+            const region = regionBetween(selAnchor.current, focus);
+            clearCellSelection();
+            for (const cell of region)
+                cell.classList.add(CELL_SELECTED);
+            selCells.current = region;
+            setSelCount(region.size);
+        };
+        const onUp = () => {
+            if (resize.current) {
+                resize.current = null;
+                pushValue();
+            }
+            if (selAnchor.current && !selecting.current)
+                clearCellSelection(); // zwykły klik
+            selAnchor.current = null;
+            selecting.current = false;
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        return () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+    }, [clearCellSelection, pushValue]);
+    const focusEditor = () => editorRef.current?.focus();
+    const saveSelection = () => {
+        const selection = window.getSelection();
+        savedRange.current = selection && selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
+    };
+    const restoreSelection = () => {
+        const selection = window.getSelection();
+        if (savedRange.current && selection) {
+            selection.removeAllRanges();
+            selection.addRange(savedRange.current);
+        }
+    };
+    // ── Schowek ──
+    const copySelection = async () => {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0 || selection.isCollapsed)
+            return;
+        const holder = document.createElement('div');
+        holder.append(selection.getRangeAt(0).cloneContents());
+        try {
+            await navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/html': new Blob([holder.innerHTML], { type: 'text/html' }),
+                    'text/plain': new Blob([selection.toString()], { type: 'text/plain' }),
+                }),
+            ]);
+        }
+        catch {
+            legacyExec('copy'); // brak uprawnień albo starsza przeglądarka
+        }
+    };
+    const pasteRich = async () => {
+        try {
+            const items = await navigator.clipboard.read();
+            for (const item of items) {
+                if (item.types.includes('text/html')) {
+                    const html = sanitizeHtml(await (await item.getType('text/html')).text());
+                    focusEditor();
+                    legacyExec('insertHTML', html);
+                    pushValue();
+                    return;
+                }
+            }
+            const text = await navigator.clipboard.readText();
+            focusEditor();
+            legacyExec('insertText', text);
+            pushValue();
+        }
+        catch {
+            /* brak uprawnień albo API — ignorujemy */
+        }
+    };
+    const pastePlain = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            focusEditor();
+            legacyExec('insertText', text);
+            pushValue();
+        }
+        catch {
+            /* brak uprawnień albo API — ignorujemy */
+        }
+    };
+    // ── Narzędzia ──
+    const exec = (item) => {
+        if (disabled)
+            return;
+        if (item === 'html') {
+            setSourceView((v) => !v);
+            return;
+        }
+        if (item === 'table') {
+            saveSelection();
+            setTableOpen(true);
+            return;
+        }
+        focusEditor();
+        switch (item) {
+            case 'link': {
+                const url = window.prompt(t('richText.linkPrompt'));
+                if (url) {
+                    const safe = sanitizeUrl(url);
+                    if (safe)
+                        legacyExec('createLink', safe);
+                }
+                break;
+            }
+            case 'copy':
+                void copySelection();
+                return;
+            case 'paste':
+                void pasteRich();
+                return;
+            case 'pasteText':
+                void pastePlain();
+                return;
+            case 'indent':
+            case 'outdent':
+                if (shiftItems(editorRef.current, item, maxListLevel)) {
+                    pushValue();
+                    refreshState();
+                }
+                return;
+            default: {
+                const cmd = COMMAND[item];
+                if (cmd)
+                    legacyExec(cmd);
+            }
+        }
+        pushValue();
+        refreshState();
+    };
+    /**
+     * 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).
+     */
+    const onKeyDown = (event) => {
+        if (disabled || event.key !== 'Tab' || event.ctrlKey || event.altKey || event.metaKey)
+            return;
+        if (shiftItems(editorRef.current, event.shiftKey ? 'outdent' : 'indent', maxListLevel)) {
+            event.preventDefault();
+            pushValue();
+            refreshState();
+            return;
+        }
+        const node = window.getSelection()?.anchorNode ?? null;
+        const el = node instanceof Element ? node : (node?.parentElement ?? null);
+        const cell = el?.closest('td, th');
+        if (!cell || !editorRef.current?.contains(cell))
+            return;
+        const table = cell.closest('table');
+        if (!table)
+            return;
+        const cells = [...table.querySelectorAll('td, th')];
+        const next = cells[cells.indexOf(cell) + (event.shiftKey ? -1 : 1)];
+        if (!next)
+            return; // koniec tabeli — Tab zostaje natywny
+        event.preventDefault();
+        const range = document.createRange();
+        range.selectNodeContents(next);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        clearCellSelection();
+        refreshState();
+    };
+    /** Natywne wklejanie — czyścimy treść, żeby nie wnosić śmieci z edytorów tekstu i stron. */
+    const onPaste = (event) => {
+        if (disabled)
+            return;
+        const html = event.clipboardData?.getData('text/html');
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        event.preventDefault();
+        if (html)
+            legacyExec('insertHTML', sanitizeHtml(html));
+        else
+            legacyExec('insertText', text);
+        pushValue();
+    };
+    // ── Kolory ──
+    const activeCells = () => {
+        if (selCells.current.size)
+            return [...selCells.current];
+        return ctxCell.current ? [ctxCell.current] : [];
+    };
+    const applyColor = (color) => {
+        setColorOpen(false);
+        if (colorKind === 'cellBg') {
+            for (const cell of activeCells())
+                cell.style.backgroundColor = color;
+            pushValue();
+            return;
+        }
+        focusEditor();
+        restoreSelection();
+        if (colorKind === 'foreColor')
+            legacyExec('foreColor', color);
+        else if (!legacyExec('hiliteColor', color))
+            legacyExec('backColor', color);
+        pushValue();
+    };
+    // ── Tabele ──
+    const insertTableAt = (rows, cols) => {
+        setTableOpen(false);
+        setGrid({ r: 0, c: 0 });
+        focusEditor();
+        restoreSelection();
+        legacyExec('insertHTML', `${tableHtml(rows, cols)}<p><br></p>`);
+        pushValue();
+    };
+    const afterTableOp = () => {
+        setMenuOpen(false);
+        pushValue();
+    };
+    const onContextMenu = (event) => {
+        if (disabled)
+            return;
+        const cell = event.target.closest('td, th');
+        if (!cell || !editorRef.current?.contains(cell))
+            return; // poza tabelą zostaje natywne menu
+        event.preventDefault();
+        ctxCell.current = cell;
+        canSplitCtx.current = (cell.colSpan || 1) > 1 || (cell.rowSpan || 1) > 1;
+        setMenuPoint({ x: event.clientX, y: event.clientY });
+        setMenuOpen(true);
+    };
+    const onEditorMouseDown = (event) => {
+        if (disabled || event.button !== 0)
+            return;
+        const cell = event.target.closest('td, th');
+        if (!cell) {
+            clearCellSelection();
+            return;
+        }
+        const rect = cell.getBoundingClientRect();
+        if (event.clientX >= rect.right - 6) {
+            // Strefa przy prawej krawędzi komórki = zmiana szerokości kolumny.
+            const col = cell.closest('table')?.querySelectorAll('col')[cell.cellIndex];
+            if (col) {
+                event.preventDefault();
+                resize.current = { col, startX: event.clientX, startW: col.getBoundingClientRect().width };
+                return;
+            }
+        }
+        clearCellSelection();
+        selAnchor.current = cell;
+        selecting.current = false;
+    };
+    const onEditorMouseMove = (event) => {
+        const cell = event.target.closest('td, th');
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const near = !!cell && event.clientX >= cell.getBoundingClientRect().right - 6;
+        editor.classList.toggle('is-col-resize', near || !!resize.current);
+    };
+    const borderCells = () => {
+        if (borderTarget === 'cell')
+            return activeCells();
+        const table = ctxCell.current?.closest('table');
+        return table ? Array.from(table.querySelectorAll('td, th')) : [];
+    };
+    const setBorderWidth = (width) => {
+        const px = { thin: '1px', medium: '2px', thick: '3px' };
+        for (const cell of borderCells()) {
+            if (width === 'none') {
+                cell.style.borderStyle = 'none';
+                cell.style.borderWidth = '';
+            }
+            else {
+                cell.style.borderStyle = 'solid';
+                cell.style.borderWidth = px[width];
+            }
+        }
+        pushValue();
+    };
+    const setBorderColor = (color) => {
+        for (const cell of borderCells()) {
+            cell.style.borderColor = color;
+            if (!cell.style.borderStyle || cell.style.borderStyle === 'none')
+                cell.style.borderStyle = 'solid';
+            if (!cell.style.borderWidth)
+                cell.style.borderWidth = '1px';
+        }
+        pushValue();
+    };
+    // ── Prezentacja narzędzi ──
+    const styleOptions = [
+        { tag: 'p', label: t('richText.styleNormal') },
+        ...[1, 2, 3, 4, 5, 6].map((level) => ({
+            tag: `h${level}`,
+            label: t('richText.styleHeading', { level }),
+        })),
+    ];
+    const styleLabel = styleOptions.find((o) => o.tag === currentBlock)?.label ?? t('richText.styleNormal');
+    const isActive = (item) => {
+        if (item === 'html')
+            return sourceView;
+        const cmd = COMMAND[item];
+        return !!cmd && activeCmds.has(cmd);
+    };
+    /** `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;
+        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((color) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: color }, "aria-label": color, onClick: () => onPick(color) }, 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
+     * w Angularze sam, tutaj przesuwamy go po zamontowaniu, gdy już znać jego rozmiar.
+     */
+    const clampToViewport = (el) => {
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const left = Math.max(8, Math.min(menuPoint.x, window.innerWidth - rect.width - 8));
+        const top = Math.max(8, Math.min(menuPoint.y, window.innerHeight - rect.height - 8));
+        el.style.left = `${left}px`;
+        el.style.top = `${top}px`;
+    };
+    /**
+     * 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ć
+        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();
+                        onClose();
+                    } }), _jsx("div", { ref: clampToViewport, style: { position: 'fixed', left: menuPoint.x, top: menuPoint.y, ...layer }, children: content })] }), container);
+    };
+    const toolButton = (item) => (_jsx("button", { 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", className: cn('kpt-rt-menu__item', extra), 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", 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, 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();
+                                                setStyleOpen(true);
+                                            }, children: [_jsx("span", { children: styleLabel }), _jsx(KptIcon, { name: "chevron-down", className: "kpt-rich-text__style-caret" })] }, item));
+                                    }
+                                    if (item === 'foreColor' || item === 'backColor') {
+                                        return (_jsx("button", { ref: item === 'foreColor' ? setForeAnchor : setBackAnchor, type: "button", className: "kpt-rich-text__tool kpt-rich-text__tool--color", "aria-label": t(`richText.${item}`), title: t(`richText.${item}`), disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                                                if (disabled)
+                                                    return;
+                                                saveSelection();
+                                                setColorKind(item);
+                                                setColorOpen(true);
+                                            }, children: _jsx(KptIcon, { name: ICON[item] }) }, item));
+                                    }
+                                    if (item === 'table') {
+                                        return (_jsx("button", { ref: setTableAnchor, 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", onInput: pushValue, onKeyDown: onKeyDown, onPaste: onPaste, onContextMenu: onContextMenu, onMouseDown: onEditorMouseDown, onMouseMove: onEditorMouseMove, onBlur: () => onTouch?.() }))] }), _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: () => {
+                            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: () => {
+                    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
+                ? pointPanel(_jsxs("div", { className: "kpt-rt-menu", onContextMenu: (event) => event.preventDefault(), children: [_jsx("div", { className: "kpt-rt-menu__group", 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" }), _jsx("div", { className: "kpt-rt-menu__group", 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" }), _jsx("div", { className: "kpt-rt-menu__group", 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" }), 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" }), menuItem('table', t('richText.menu.border'), () => {
+                            setMenuOpen(false);
+                            setBorderOpen(true);
+                        }), _jsx("div", { className: "kpt-rt-menu__sep" }), menuItem('trash', t('richText.menu.deleteTable'), () => {
+                            ctxCell.current?.closest('table')?.remove();
+                            afterTableOp();
+                        }, '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((color) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: color }, "aria-label": color, onClick: () => setBorderColor(color) }, 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))
+                : null] }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * 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).
+ */
+export declare function sanitizeHtml(html: string): string;
+/**
+ * Waliduje URL z narzędzia „link". Brak schematu → dopisujemy `https://`; `#` i `/` przechodzą
+ * bez zmian; schemat spoza allowlisty → `null`, czyli link nie zostaje wstawiony.
+ */
+export declare function sanitizeUrl(url: string): string | null;