@pilotiq/tiptap 3.19.2 → 4.0.0

package/dist/react/BlockSidePanel.js

@@ -1,338 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { FormFields, parseFormDataToNested, clampPanelWidth as clampPanelWidthShared, useResizableWidth, } from '@pilotiq/pilotiq/react';
-const PANEL_WIDTH_STORAGE_KEY = 'pilotiq.tiptap.sidePanel.width';
-const PANEL_WIDTH_DEFAULT = 320;
-const PANEL_WIDTH_MIN = 240;
-const PANEL_WIDTH_MAX = 600;
-// Keys that point at any tabbable / interactive element inside the panel.
-// Same intent as Filament's focus-trap helper but kept inline — small one-off.
-const FOCUSABLE_SELECTOR = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled]):not([type="hidden"])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])',
-].join(',');
-export function BlockSidePanel({ editor, initialPos, blockType, blocks, onClose, }) {
-    const meta = blocks.find((b) => b.name === blockType);
-    // Live-tracked position of the block we're editing. Starts at the
-    // open-time position; every editor transaction maps it forward so the
-    // panel keeps writing to the same node even as the user types text
-    // elsewhere in the document.
-    const [pos, setPos] = useState(initialPos);
-    const posRef = useRef(initialPos);
-    // Prefilled values seed the form's `defaultValue`s. We re-read once
-    // when the panel opens (and on hard re-mount via key prop); ongoing
-    // edits don't snapshot the doc — the form's uncontrolled inputs hold
-    // their own state until the user closes the panel.
-    const initialValuesRef = useRef(pos !== null ? readBlockData(editor, pos) : {});
-    const asideRef = useRef(null);
-    const formRef = useRef(null);
-    // Width memory — survives panel close/reopen and full reload via
-    // localStorage. The shared `useResizableWidth` hook from
-    // `@pilotiq/pilotiq/react` handles the localStorage round-trip + drag
-    // pipeline; we just bind it to this panel's per-key bounds.
-    const { width, onResizeStart } = useResizableWidth({
-        storageKey: PANEL_WIDTH_STORAGE_KEY,
-        min: PANEL_WIDTH_MIN,
-        max: PANEL_WIDTH_MAX,
-        defaultWidth: PANEL_WIDTH_DEFAULT,
-        edge: 'left',
-    });
-    // Save focus on mount, focus the first focusable inside the panel,
-    // restore previous focus on unmount. Mount-only effect — re-mounting
-    // the panel for a different block (key={pos:blockType}) re-runs this.
-    useEffect(() => {
-        const previouslyFocused = (typeof document !== 'undefined'
-            ? document.activeElement
-            : null);
-        const aside = asideRef.current;
-        if (aside) {
-            const first = aside.querySelector(FOCUSABLE_SELECTOR);
-            first?.focus();
-        }
-        return () => {
-            // Try/catch — the previously focused element may have been removed
-            // (e.g. an editor selection refresh nuked the surrounding NodeView).
-            try {
-                previouslyFocused?.focus?.();
-            }
-            catch { /* noop */ }
-        };
-    }, []);
-    // ESC closes; Tab / Shift+Tab cycles within the panel. Bubble-phase
-    // listener — slash and mention menus' capture-phase ESC handlers fire
-    // first and stopPropagation, so ESC inside an open slash menu only
-    // closes the menu. ESC anywhere else (panel inputs, editor) closes
-    // the panel.
-    useEffect(() => {
-        const onKey = (e) => {
-            if (e.key === 'Escape') {
-                onClose();
-                e.preventDefault();
-                e.stopPropagation();
-                return;
-            }
-            if (e.key !== 'Tab')
-                return;
-            const aside = asideRef.current;
-            if (!aside)
-                return;
-            const active = document.activeElement;
-            if (!active || !aside.contains(active))
-                return;
-            const focusables = Array.from(aside.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => !el.hasAttribute('disabled'));
-            if (focusables.length === 0)
-                return;
-            const first = focusables[0];
-            const last = focusables[focusables.length - 1];
-            if (e.shiftKey && active === first) {
-                e.preventDefault();
-                last.focus();
-            }
-            else if (!e.shiftKey && active === last) {
-                e.preventDefault();
-                first.focus();
-            }
-        };
-        document.addEventListener('keydown', onKey);
-        return () => document.removeEventListener('keydown', onKey);
-    }, [onClose]);
-    useEffect(() => {
-        if (pos === null)
-            return;
-        const handler = ({ transaction }) => {
-            const current = posRef.current;
-            if (current === null)
-                return;
-            const mapped = transaction.mapping.map(current);
-            // The block was deleted — close the panel.
-            const nodeNow = nodeAt(editor, mapped);
-            if (!nodeNow || nodeNow.type.name !== 'pilotiqBlock' || String(nodeNow.attrs['blockType'] ?? '') !== blockType) {
-                posRef.current = null;
-                setPos(null);
-                onClose();
-                return;
-            }
-            posRef.current = mapped;
-            setPos(mapped);
-        };
-        editor.on('transaction', handler);
-        return () => { editor.off('transaction', handler); };
-    }, [editor, blockType, pos, onClose]);
-    const writeBack = useCallback((nextValues) => {
-        const at = posRef.current;
-        if (at === null)
-            return;
-        // ProseMirror's `setNodeMarkup` lives on the transaction, not the
-        // ChainedCommands surface — go through `tr` directly. Pass `null`
-        // for the node-type arg to keep the existing type, just swap attrs.
-        const view = editor.view;
-        const state = editor.state;
-        const tr = state.tr.setNodeMarkup(at, null, { blockType, blockData: nextValues });
-        view.dispatch(tr);
-    }, [editor, blockType]);
-    const handleChange = useCallback(() => {
-        const formEl = formRef.current;
-        if (!formEl || !meta)
-            return;
-        // Snapshot the full form: nested arrays / objects materialize from
-        // dotted-path names (`items.0.title`), JSON-encoded hidden inputs
-        // (TagsInput / KeyValue / FileUpload-multi) sit as JSON strings,
-        // toggle / checkbox hidden inputs sit as `'true' | 'false'`. The
-        // coerce pass below normalizes those to canonical shapes.
-        const raw = parseFormDataToNested(new FormData(formEl));
-        const coerced = coerceBlockValues(raw, meta.schema);
-        writeBack(coerced);
-    }, [meta, writeBack]);
-    if (!meta || pos === null)
-        return null;
-    return (_jsxs("aside", { ref: asideRef, role: "dialog", "aria-label": `Edit ${meta.label}`, style: { width }, className: "absolute top-0 left-full ml-4 max-h-[calc(100vh-2rem)] overflow-y-auto rounded-lg border bg-background shadow-lg z-30", children: [_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize panel", onPointerDown: onResizeStart, className: "absolute left-0 top-0 h-full w-1 cursor-ew-resize hover:bg-border/80" }), _jsxs("header", { className: "sticky top-0 z-10 flex items-center justify-between gap-2 border-b bg-background px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [meta.icon && _jsx("span", { "aria-hidden": "true", children: meta.icon }), _jsx("span", { className: "text-sm font-medium truncate", children: meta.label })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close panel", className: "text-muted-foreground hover:text-foreground text-sm", children: "\u00D7" })] }), _jsx("form", { ref: formRef, onInput: handleChange, onChange: handleChange, onSubmit: (e) => { e.preventDefault(); }, className: "flex flex-col gap-3 px-3 py-3", children: _jsx(FormFields, { elements: meta.schema, values: initialValuesRef.current }) })] }));
-}
-/**
- * Clamp + sanitize a candidate panel width against this panel's bounds
- * (`[PANEL_WIDTH_MIN, PANEL_WIDTH_MAX]`, default `PANEL_WIDTH_DEFAULT`).
- * Thin wrapper around the shared `clampPanelWidth` helper from
- * `@pilotiq/pilotiq/react` — kept exported with the panel-specific
- * defaults baked in so existing tests + downstream callers don't have
- * to plumb the bounds themselves.
- */
-export function clampPanelWidth(value) {
-    return clampPanelWidthShared(value, {
-        min: PANEL_WIDTH_MIN,
-        max: PANEL_WIDTH_MAX,
-        defaultWidth: PANEL_WIDTH_DEFAULT,
-    });
-}
-/**
- * Per-fieldType coerce of a nested values map (built by
- * `parseFormDataToNested`) against the block's schema. Mirrors the
- * server-side `coerceFormValues` at a small subset suitable for the
- * side panel — we only run on top-level block fields plus the immediate
- * children of any Repeater rows / Builder rows.data, which is all the
- * V2 surface needs.
- *
- * Non-coerce passthrough for: text, textarea, select, radio, date,
- * dateTime, email, color, toggleButtons, slug, hidden. (Their wire shape
- * is already a plain string / array of strings.)
- *
- * Coerce branches:
- * - `toggle` / `checkbox`: 'true' / 'false' string → boolean.
- * - `number` / `slider`: parse to Number, null on empty, raw string
- *   passthrough on NaN (so a half-typed value isn't lost).
- * - `tagsInput`: JSON-encoded string → string[].
- * - `checkboxList`: JSON-encoded string OR array → string[].
- * - `keyValue`: JSON-encoded string → Record<string, unknown>.
- * - `fileUpload`: single → URL string passthrough; multiple →
- *   JSON-encoded string → string[].
- * - `repeater`: each row in the array gets recursive coerce against
- *   the field's `template` (the inner field schema definition).
- * - `builder`: each row's `data` gets recursive coerce against the
- *   block matching `row.type` from `field.blocks[]`. Unknown block
- *   types pass through verbatim — the renderer shows a placeholder
- *   and the data round-trips intact across config rollbacks.
- *
- * Exported for unit tests. Pure — no React, no DOM, no editor.
- */
-export function coerceBlockValues(raw, schema) {
-    const out = { ...raw };
-    for (const field of schema) {
-        const name = String(field['name'] ?? '');
-        if (!name)
-            continue;
-        const ft = String(field['fieldType'] ?? 'text');
-        const value = out[name];
-        out[name] = coerceField(value, ft, field);
-    }
-    return out;
-}
-function coerceField(value, ft, field) {
-    switch (ft) {
-        case 'toggle':
-        case 'checkbox':
-            return value === 'true' || value === true;
-        case 'number':
-        case 'slider':
-            return coerceNumber(value);
-        case 'tagsInput':
-            return parseJsonArray(value);
-        case 'checkboxList':
-            return parseJsonArray(value);
-        case 'keyValue':
-            return parseJsonObject(value);
-        case 'fileUpload': {
-            const multiple = Boolean(field['multiple']);
-            if (multiple)
-                return parseJsonArray(value);
-            return typeof value === 'string' ? value : '';
-        }
-        case 'repeater': {
-            if (!Array.isArray(value))
-                return [];
-            const template = field['template'] ?? [];
-            return value.map((row) => {
-                if (!row || typeof row !== 'object')
-                    return {};
-                return coerceBlockValues(row, template);
-            });
-        }
-        case 'builder': {
-            if (!Array.isArray(value))
-                return [];
-            const blockMetas = field['blocks'] ?? [];
-            return value.map((row) => {
-                if (!row || typeof row !== 'object')
-                    return { type: '', data: {} };
-                const r = row;
-                const type = String(r['type'] ?? '');
-                const data = r['data'] ?? {};
-                const block = blockMetas.find((b) => String(b['name'] ?? '') === type);
-                if (!block)
-                    return { type, data };
-                const tpl = block['template'] ?? [];
-                return { type, data: coerceBlockValues(data, tpl) };
-            });
-        }
-        default:
-            return value === undefined ? '' : value;
-    }
-}
-function coerceNumber(value) {
-    if (value === '' || value === null || value === undefined)
-        return null;
-    if (typeof value === 'number')
-        return value;
-    const raw = String(value);
-    if (raw === '')
-        return null;
-    const n = Number(raw);
-    return Number.isNaN(n) ? raw : n;
-}
-function parseJsonArray(value) {
-    if (Array.isArray(value))
-        return value;
-    if (typeof value !== 'string' || value === '')
-        return [];
-    try {
-        const parsed = JSON.parse(value);
-        return Array.isArray(parsed) ? parsed : [];
-    }
-    catch {
-        return [];
-    }
-}
-function parseJsonObject(value) {
-    if (value && typeof value === 'object' && !Array.isArray(value)) {
-        return value;
-    }
-    if (typeof value !== 'string' || value === '')
-        return {};
-    try {
-        const parsed = JSON.parse(value);
-        if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-            return parsed;
-        }
-    }
-    catch { /* fall through */ }
-    return {};
-}
-/**
- * Read the resolved field value for a given input event target. Kept
- * for back-compat — V1 used this in the per-event handler. V2 reads
- * the entire form via `FormData` instead, but this helper still maps
- * cleanly onto a single-input read for testing and is exported.
- *
- * String passthrough for the common case; explicit coercion for
- * booleans and numerics so the round-trip into the node attrs preserves
- * shape.
- */
-export function readBlockFieldValue(target, fieldMeta) {
-    const ft = String(fieldMeta.fieldType ?? 'text');
-    if (ft === 'toggle' || ft === 'checkbox') {
-        return target.checked === true;
-    }
-    if (ft === 'number' || ft === 'slider') {
-        const raw = target.value;
-        if (raw === '')
-            return null;
-        const n = Number(raw);
-        return Number.isNaN(n) ? raw : n;
-    }
-    return target.value;
-}
-function readBlockData(editor, pos) {
-    const node = nodeAt(editor, pos);
-    if (!node)
-        return {};
-    return node.attrs['blockData'] ?? {};
-}
-function nodeAt(editor, pos) {
-    try {
-        return editor.state.doc.nodeAt(pos);
-    }
-    catch {
-        return null;
-    }
-}