@konce-pt/react 0.8.0

package/dist/rich-text/sanitize.js

@@ -0,0 +1,85 @@
+/*
+ * Sanityzacja treści edytora. Kod nie zna Reacta — operuje wyłącznie na DOM, więc gdyby port
+ * Angulara kiedyś sięgnął po wspólny rdzeń, wystarczy przenieść ten plik do osobnej paczki
+ * (jak `@konce-pt/datetime`).
+ */
+/** Znaczniki dopuszczone w treści; pozostałe rozwijamy do dzieci, nie usuwając tekstu. */
+const ALLOWED_TAGS = new Set([
+    'P', 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'B', 'STRONG', 'I', 'EM', 'U', 'S', 'STRIKE',
+    'UL', 'OL', 'LI', 'A', 'SPAN', 'DIV', 'BLOCKQUOTE', 'FONT',
+    'TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR', 'TD', 'TH', 'COLGROUP', 'COL', 'CAPTION',
+]);
+const ALLOWED_STYLES = new Set([
+    'color', 'background-color', 'text-align', 'font-weight', 'font-style', 'text-decoration',
+    'width', 'height', 'border', 'border-color', 'border-width', 'border-style', 'vertical-align',
+]);
+const ALLOWED_ATTRS = new Set(['colspan', 'rowspan', 'span', 'width', 'class', 'target', 'rel', 'title']);
+// Schematy dopuszczone w `href` narzędzia „link"; blocklista byłaby obchodzalna.
+const SAFE_URL_SCHEME = /^(https?:|mailto:|tel:)/i;
+const HAS_URL_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+/** Deklaracje `style` z allowlisty; `null`, gdy nie zostaje nic. */
+function sanitizeStyleAttr(value) {
+    const kept = value
+        .split(';')
+        .map((decl) => decl.trim())
+        .filter((decl) => ALLOWED_STYLES.has(decl.split(':')[0]?.trim().toLowerCase() ?? ''));
+    return kept.length ? kept.join('; ') : null;
+}
+function sanitizeAttribute(el, attr) {
+    const name = attr.name.toLowerCase();
+    if (name.startsWith('on')) {
+        el.removeAttribute(attr.name);
+    }
+    else if (name === 'href' || name === 'src') {
+        // Znaki kontrolne usuwamy przed testem schematu — przeglądarka i tak je pomija przy
+        // parsowaniu URL-a, więc `jav\tascript:` obszedłby samo porównanie napisów.
+        // eslint-disable-next-line no-control-regex
+        if (/^\s*javascript:/i.test(attr.value.replace(/[\x00-\x1f]/g, '')))
+            el.removeAttribute(attr.name);
+    }
+    else if (name === 'style') {
+        const kept = sanitizeStyleAttr(attr.value);
+        if (kept)
+            el.setAttribute('style', kept);
+        else
+            el.removeAttribute('style');
+    }
+    else if (!ALLOWED_ATTRS.has(name) && name !== 'color') {
+        el.removeAttribute(attr.name);
+    }
+}
+/** Tag spoza allowlisty rozwijamy do dzieci; atrybuty czyścimy po kolei. */
+function sanitizeElement(el) {
+    if (!ALLOWED_TAGS.has(el.tagName)) {
+        el.replaceWith(...Array.from(el.childNodes));
+        return;
+    }
+    for (const attr of Array.from(el.attributes))
+        sanitizeAttribute(el, attr);
+}
+/**
+ * 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 function sanitizeHtml(html) {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    for (const el of Array.from(template.content.querySelectorAll('*')))
+        sanitizeElement(el);
+    return template.innerHTML;
+}
+/**
+ * Waliduje URL z narzędzia „link". Brak schematu → dopisujemy `https://`; `#` i `/` przechodzą
+ * bez zmian; schemat spoza allowlisty → `null`, czyli link nie zostaje wstawiony.
+ */
+export function sanitizeUrl(url) {
+    // eslint-disable-next-line no-control-regex
+    const trimmed = url.trim().replace(/[\x00-\x1f]/g, '');
+    if (!trimmed)
+        return null;
+    if (trimmed.startsWith('#') || trimmed.startsWith('/'))
+        return trimmed;
+    if (!HAS_URL_SCHEME.test(trimmed))
+        return `https://${trimmed}`;
+    return SAFE_URL_SCHEME.test(trimmed) ? trimmed : null;
+}

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

@@ -0,0 +1,44 @@
+/** Pozycja komórki w siatce (uwzględnia colspan/rowspan). */
+export type GridPos = Map<HTMLTableCellElement, {
+    r: number;
+    c: number;
+    rowspan: number;
+    colspan: number;
+}>;
+/** Prostokąt siatki: wiersze `r0..r1`, kolumny `c0..c1` (włącznie). */
+export interface Bounds {
+    r0: number;
+    c0: number;
+    r1: number;
+    c1: number;
+}
+/** Klasa znacząca komórki objęte zaznaczeniem prostokątnym. */
+export declare const CELL_SELECTED = "kpt-rt-cell-sel";
+/** Macierz komórek: pozycja w siatce, a nie w DOM — scalona komórka zajmuje kilka pól. */
+export declare function buildGrid(table: HTMLTableElement): {
+    grid: HTMLTableCellElement[][];
+    pos: GridPos;
+};
+/** Komórki leżące w prostokącie siatki; scalona trafia raz, bo to `Set`. */
+export declare function cellsInRegion(grid: HTMLTableCellElement[][], b: Bounds): Set<HTMLTableCellElement>;
+/**
+ * Prostokątne zaznaczenie od komórki-kotwicy do komórki pod kursorem. Granice rosną, aż region
+ * w pełni obejmie scalone komórki na brzegach — inaczej scalanie działałoby na pół komórki.
+ */
+export declare function regionBetween(anchor: HTMLTableCellElement, focus: HTMLTableCellElement): Set<HTMLTableCellElement>;
+/** Równe szerokości kolumn po wstawieniu albo usunięciu kolumny. */
+export declare function normalizeColWidths(table: HTMLTableElement): void;
+/** HTML pustej tabeli o zadanym rozmiarze, z `colgroup` o równych szerokościach. */
+export declare function tableHtml(rows: number, cols: number): string;
+export declare function insertColumn(cell: HTMLTableCellElement, dir: 'left' | 'right'): void;
+export declare function deleteColumn(cell: HTMLTableCellElement): void;
+export declare function insertRow(cell: HTMLTableCellElement, dir: 'above' | 'below'): void;
+export declare function deleteRow(cell: HTMLTableCellElement): void;
+/** Podmienia znacznik komórki `td` ↔ `th`, zachowując atrybuty i treść. */
+export declare function swapCellTag(cell: HTMLTableCellElement, tag: 'td' | 'th'): void;
+export declare function toggleHeaderRow(cell: HTMLTableCellElement): void;
+export declare function toggleHeaderColumn(cell: HTMLTableCellElement): void;
+/** Scala zaznaczone komórki w jedną; treść pozostałych dokleja do górnej-lewej. */
+export declare function mergeCells(cells: HTMLTableCellElement[]): void;
+/** Rozbija scaloną komórkę, uzupełniając brakujące pola siatki pustymi komórkami. */
+export declare function splitCell(cell: HTMLTableCellElement): void;

package/dist/rich-text/tables.js

@@ -0,0 +1,268 @@
+/*
+ * Operacje na tabelach edytora: siatka z uwzględnieniem colspan/rowspan, zaznaczanie prostokątne,
+ * scalanie i dzielenie komórek, wstawianie i usuwanie wierszy i kolumn. Czysty DOM, bez Reacta.
+ */
+/** Klasa znacząca komórki objęte zaznaczeniem prostokątnym. */
+export const CELL_SELECTED = 'kpt-rt-cell-sel';
+/** Macierz komórek: pozycja w siatce, a nie w DOM — scalona komórka zajmuje kilka pól. */
+export function buildGrid(table) {
+    const grid = [];
+    const pos = new Map();
+    Array.from(table.rows).forEach((tr, r) => {
+        grid[r] ??= [];
+        let c = 0;
+        for (const cell of Array.from(tr.cells)) {
+            while (grid[r][c])
+                c++; // pomiń pola zajęte przez rowspan z góry
+            const colspan = cell.colSpan || 1;
+            const rowspan = cell.rowSpan || 1;
+            pos.set(cell, { r, c, rowspan, colspan });
+            for (let dr = 0; dr < rowspan; dr++) {
+                grid[r + dr] ??= [];
+                for (let dc = 0; dc < colspan; dc++)
+                    grid[r + dr][c + dc] = cell;
+            }
+            c += colspan;
+        }
+    });
+    return { grid, pos };
+}
+/** Komórki leżące w prostokącie siatki; scalona trafia raz, bo to `Set`. */
+export function cellsInRegion(grid, b) {
+    const set = new Set();
+    for (let r = b.r0; r <= b.r1; r++) {
+        for (let c = b.c0; c <= b.c1; c++) {
+            const cell = grid[r]?.[c];
+            if (cell)
+                set.add(cell);
+        }
+    }
+    return set;
+}
+/** Jeden przebieg rozszerzania granic o komórki wystające poza region. */
+function growBounds(grid, pos, b) {
+    let changed = false;
+    for (const cell of cellsInRegion(grid, b)) {
+        const p = pos.get(cell);
+        if (p.r < b.r0) {
+            b.r0 = p.r;
+            changed = true;
+        }
+        if (p.c < b.c0) {
+            b.c0 = p.c;
+            changed = true;
+        }
+        if (p.r + p.rowspan - 1 > b.r1) {
+            b.r1 = p.r + p.rowspan - 1;
+            changed = true;
+        }
+        if (p.c + p.colspan - 1 > b.c1) {
+            b.c1 = p.c + p.colspan - 1;
+            changed = true;
+        }
+    }
+    return changed;
+}
+/**
+ * Prostokątne zaznaczenie od komórki-kotwicy do komórki pod kursorem. Granice rosną, aż region
+ * w pełni obejmie scalone komórki na brzegach — inaczej scalanie działałoby na pół komórki.
+ */
+export function regionBetween(anchor, focus) {
+    const table = anchor.closest('table');
+    if (!table)
+        return new Set();
+    const { grid, pos } = buildGrid(table);
+    const a = pos.get(anchor);
+    const f = pos.get(focus);
+    if (!a || !f)
+        return new Set();
+    const bounds = {
+        r0: Math.min(a.r, f.r),
+        c0: Math.min(a.c, f.c),
+        r1: Math.max(a.r + a.rowspan - 1, f.r + f.rowspan - 1),
+        c1: Math.max(a.c + a.colspan - 1, f.c + f.colspan - 1),
+    };
+    while (growBounds(grid, pos, bounds)) {
+        /* granice rosną do skutku */
+    }
+    return cellsInRegion(grid, bounds);
+}
+/** Równe szerokości kolumn po wstawieniu albo usunięciu kolumny. */
+export function normalizeColWidths(table) {
+    const cols = Array.from(table.querySelectorAll('col'));
+    if (!cols.length)
+        return;
+    const width = (100 / cols.length).toFixed(4);
+    for (const col of cols)
+        col.style.width = `${width}%`;
+}
+/** HTML pustej tabeli o zadanym rozmiarze, z `colgroup` o równych szerokościach. */
+export function tableHtml(rows, cols) {
+    const width = (100 / cols).toFixed(4);
+    const colgroup = `<colgroup>${`<col style="width:${width}%">`.repeat(cols)}</colgroup>`;
+    const body = `<tbody>${`<tr>${'<td><br></td>'.repeat(cols)}</tr>`.repeat(rows)}</tbody>`;
+    return `<table class="kpt-rt-table">${colgroup}${body}</table>`;
+}
+export function insertColumn(cell, dir) {
+    const table = cell.closest('table');
+    if (!table)
+        return;
+    const index = cell.cellIndex + (dir === 'right' ? 1 : 0);
+    for (const tr of Array.from(table.rows)) {
+        const td = document.createElement('td');
+        td.innerHTML = '<br>';
+        tr.insertBefore(td, tr.cells[index] ?? null);
+    }
+    const colgroup = table.querySelector('colgroup');
+    if (colgroup) {
+        colgroup.insertBefore(document.createElement('col'), colgroup.children[index] ?? null);
+        normalizeColWidths(table);
+    }
+}
+export function deleteColumn(cell) {
+    const table = cell.closest('table');
+    if (!table)
+        return;
+    const index = cell.cellIndex;
+    // Ostatnia kolumna = cała tabela; usuwamy ją zamiast zostawiać pusty szkielet.
+    if ((table.rows[0]?.cells.length ?? 0) <= 1) {
+        table.remove();
+        return;
+    }
+    for (const tr of Array.from(table.rows))
+        tr.cells[index]?.remove();
+    table.querySelector('colgroup')?.children[index]?.remove();
+    normalizeColWidths(table);
+}
+export function insertRow(cell, dir) {
+    const tr = cell.parentElement;
+    if (!tr)
+        return;
+    const row = document.createElement('tr');
+    row.innerHTML = Array.from({ length: tr.cells.length }, () => '<td><br></td>').join('');
+    tr.parentElement?.insertBefore(row, dir === 'below' ? tr.nextSibling : tr);
+}
+export function deleteRow(cell) {
+    const table = cell.closest('table');
+    const tr = cell.parentElement;
+    if (!table || !tr)
+        return;
+    if (table.rows.length <= 1) {
+        table.remove();
+        return;
+    }
+    tr.remove();
+}
+/** Podmienia znacznik komórki `td` ↔ `th`, zachowując atrybuty i treść. */
+export function swapCellTag(cell, tag) {
+    if (cell.tagName.toLowerCase() === tag)
+        return;
+    const el = document.createElement(tag);
+    for (const attr of Array.from(cell.attributes))
+        el.setAttribute(attr.name, attr.value);
+    el.append(...Array.from(cell.childNodes));
+    cell.replaceWith(el);
+}
+export function toggleHeaderRow(cell) {
+    const tr = cell.parentElement;
+    if (!tr)
+        return;
+    const toHeader = tr.cells[0]?.tagName !== 'TH';
+    for (const c of Array.from(tr.cells))
+        swapCellTag(c, toHeader ? 'th' : 'td');
+}
+export function toggleHeaderColumn(cell) {
+    const table = cell.closest('table');
+    if (!table)
+        return;
+    const index = cell.cellIndex;
+    const toHeader = cell.tagName !== 'TH';
+    for (const tr of Array.from(table.rows)) {
+        const c = tr.cells[index];
+        if (c)
+            swapCellTag(c, toHeader ? 'th' : 'td');
+    }
+}
+/** Scala zaznaczone komórki w jedną; treść pozostałych dokleja do górnej-lewej. */
+export function mergeCells(cells) {
+    if (cells.length < 2)
+        return;
+    const table = cells[0].closest('table');
+    if (!table)
+        return;
+    const { pos } = buildGrid(table);
+    let r0 = Infinity;
+    let c0 = Infinity;
+    let r1 = -1;
+    let c1 = -1;
+    for (const cell of cells) {
+        const p = pos.get(cell);
+        r0 = Math.min(r0, p.r);
+        c0 = Math.min(c0, p.c);
+        r1 = Math.max(r1, p.r + p.rowspan - 1);
+        c1 = Math.max(c1, p.c + p.colspan - 1);
+    }
+    const topLeft = cells.find((cell) => {
+        const p = pos.get(cell);
+        return p.r === r0 && p.c === c0;
+    }) ?? cells[0];
+    for (const cell of cells) {
+        if (cell === topLeft)
+            continue;
+        const html = cell.innerHTML.trim();
+        if (html && html !== '<br>')
+            topLeft.innerHTML += ` ${html}`;
+        cell.remove();
+    }
+    const colspan = c1 - c0 + 1;
+    const rowspan = r1 - r0 + 1;
+    if (colspan > 1)
+        topLeft.colSpan = colspan;
+    else
+        topLeft.removeAttribute('colspan');
+    if (rowspan > 1)
+        topLeft.rowSpan = rowspan;
+    else
+        topLeft.removeAttribute('rowspan');
+}
+/** Komórka w wierszu, przed którą wstawić (pierwsza o origin-col > `gridCol`), albo `null`. */
+function cellBeforeGridCol(row, gridCol, table) {
+    const { pos } = buildGrid(table);
+    for (const cell of Array.from(row.cells)) {
+        const p = pos.get(cell);
+        if (p && p.c > gridCol)
+            return cell;
+    }
+    return null;
+}
+/** Rozbija scaloną komórkę, uzupełniając brakujące pola siatki pustymi komórkami. */
+export function splitCell(cell) {
+    const table = cell.closest('table');
+    if (!table)
+        return;
+    const { pos } = buildGrid(table);
+    const p = pos.get(cell);
+    if (!p || (p.colspan <= 1 && p.rowspan <= 1))
+        return;
+    const tag = cell.tagName.toLowerCase();
+    cell.removeAttribute('colspan');
+    cell.removeAttribute('rowspan');
+    for (let dr = 0; dr < p.rowspan; dr++) {
+        // Origin zostaje w pierwszym wierszu, więc tam brakuje o jedną komórkę mniej.
+        const count = dr === 0 ? p.colspan - 1 : p.colspan;
+        if (count <= 0)
+            continue;
+        const row = table.rows[p.r + dr];
+        if (!row)
+            continue;
+        const before = cellBeforeGridCol(row, p.c, table);
+        for (let i = 0; i < count; i++) {
+            const el = document.createElement(tag);
+            el.innerHTML = '<br>';
+            if (before)
+                before.before(el);
+            else
+                row.append(el);
+        }
+    }
+}

package/dist/roadmap/roadmap.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type KptRoadmapConfig, type KptRoadmapItem, type KptTimeRange } from '@konce-pt/roadmap';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptRoadmapProps<TItem = unknown, TGroup = unknown> extends Omit<ComponentPropsWithRef<'div'>, 'onClick' | 'children'>, KptI18nOverrides {
+    /** Pełna konfiguracja: dane, zoom, zakres i opcje. */
+    config: KptRoadmapConfig<TItem, TGroup>;
+    /** Stała wysokość obszaru przewijania (np. '420px'). Włącza przyklejony nagłówek. */
+    scrollHeight?: string | null;
+    /** Szerokość kolumny etykiet. */
+    labelWidth?: string;
+    /** Szerokość kolumny osi czasu; brak ⇒ wartość zależna od zoomu. */
+    cellWidthPx?: number | null;
+    /** Znacznik „dziś". */
+    showToday?: boolean;
+    /** Renderowanie tylko widocznych wierszy. Warto włączyć od ~100 wierszy. */
+    virtual?: boolean;
+    /** Zwinięte grupy — tryb kontrolowany. */
+    collapsedGroups?: string[];
+    /** Zwinięte grupy na starcie — tryb niekontrolowany. */
+    defaultCollapsedGroups?: string[];
+    onCollapsedGroupsChange?: (ids: string[]) => void;
+    onItemClick?: (item: KptRoadmapItem<TItem>) => void;
+    /** Wywoływane przy każdej zmianie wyliczonego zakresu osi. */
+    onRangeChange?: (range: KptTimeRange) => void;
+}
+/**
+ * Roadmapa — wiersze zadań na poziomej osi czasu (widok typu Gantt).
+ *
+ * Układ opiera się na DOM i `position: sticky` (kolumna etykiet oraz nagłówek),
+ * paski są pozycjonowane procentowo w torze, a zależności rysuje warstwa SVG
+ * rozpięta nad torami. Cała geometria pochodzi z `@konce-pt/roadmap` — tej samej
+ * paczki, z której korzysta port Angulara.
+ *
+ * @example
+ * <KptRoadmap config={{ zoom: 'week', items }} onItemClick={(item) => open(item.id)} />
+ */
+export declare function KptRoadmap<TItem = unknown, TGroup = unknown>({ config, scrollHeight, labelWidth, cellWidthPx, showToday, virtual, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, onItemClick, onRangeChange, locale: localeOverride, dictionary, className, style, ...rest }: Readonly<KptRoadmapProps<TItem, TGroup>>): import("react").JSX.Element;