painapple-code 1.0.0__py3-none-any.whl

painapple_code/static/js/preview/json-tree-menu.js

@@ -0,0 +1,226 @@
+/**
+ * Right-click / long-press context menu for JSON tree nodes.
+ *
+ * The tree is rendered as an HTML string, so the menu can't hold a reference to
+ * the value it was opened on — it resolves the clicked element's
+ * `data-json-path` back through the parsed document (resolveJsonPath). That
+ * keeps the renderer pure and means the same code serves the JSON preview, the
+ * JSONL preview (one document per row) and any future caller.
+ */
+
+import { copyToClipboard, showToast } from '../context-menu.js';
+import { resolveJsonPath, formatJsonPath } from './json-tree.js';
+import S from '../strings.js';
+
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP = 10;
+
+/**
+ * @param {Element} target - the tree root to delegate from ('.json-tree' / '.jsonl-rows')
+ * @param {object} opts
+ * @param {(path: string) => *} opts.getRoot - parsed document a path is rooted in
+ * @param {(text: string) => void} [opts.onSearch] - fill the search box with this text
+ * @param {(path: string, expanded: boolean) => void} [opts.onSetExpanded] - record one node's state
+ * @param {() => void} [opts.onAfterExpand] - called once after a bulk expand/collapse
+ */
+export function bindJsonTreeContextMenu(target, opts = {}) {
+    const open = (x, y, el) => {
+        const node = el?.closest?.('[data-json-path]');
+        if (!node || !target.contains(node)) return false;
+        const items = buildItems(node, target, opts);
+        if (!items.length) return false;
+        const menu = window.app?.contextMenu;
+        if (!menu) return false;
+        menu.show(x, y, items);
+        return true;
+    };
+
+    target.addEventListener('contextmenu', (e) => {
+        // Let the browser's own menu handle a real text selection — that's the
+        // one case where the native "Copy" is more useful than ours.
+        if (!window.getSelection?.().isCollapsed) return;
+        if (open(e.clientX, e.clientY, e.target)) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    });
+
+    // Touch long-press. iOS synthesizes a click after touchend, which would
+    // toggle the node the menu just opened on, so it gets swallowed.
+    let timer = null;
+    let startX = 0;
+    let startY = 0;
+    let fired = false;
+
+    const cancel = () => {
+        clearTimeout(timer);
+        timer = null;
+    };
+
+    target.addEventListener('touchstart', (e) => {
+        if (e.touches.length !== 1) return cancel();
+        const t = e.touches[0];
+        startX = t.clientX;
+        startY = t.clientY;
+        fired = false;
+        const el = e.target;
+        timer = setTimeout(() => {
+            timer = null;
+            fired = open(startX, startY, el);
+        }, LONG_PRESS_MS);
+    }, { passive: true });
+
+    target.addEventListener('touchmove', (e) => {
+        const t = e.touches[0];
+        if (!t) return;
+        if (Math.abs(t.clientX - startX) > LONG_PRESS_SLOP
+            || Math.abs(t.clientY - startY) > LONG_PRESS_SLOP) cancel();
+    }, { passive: true });
+
+    target.addEventListener('touchend', cancel, { passive: true });
+    target.addEventListener('touchcancel', cancel, { passive: true });
+
+    target.addEventListener('click', (e) => {
+        if (!fired) return;
+        fired = false;
+        e.preventDefault();
+        e.stopPropagation();
+    }, { capture: true });
+}
+
+// ─── Menu contents ───────────────────────────────────────────────────────
+
+function buildItems(node, target, opts) {
+    const M = S.preview?.json_menu || {};
+    const path = node.dataset.jsonPath;
+    const root = opts.getRoot?.(path);
+    const resolved = root === undefined ? { found: false } : resolveJsonPath(root, path);
+    const items = [];
+
+    if (resolved.found) {
+        const { value, key } = resolved;
+        const pretty = safeStringify(value);
+        const isScalar = value === null || typeof value !== 'object';
+        // For a string, "value" means the string itself — copying `"foo"` with
+        // the quotes baked in is almost never what you wanted.
+        const plain = typeof value === 'string' ? value
+            : isScalar ? String(value)
+                : pretty;
+
+        items.push({
+            label: M.copy_value || 'Copy value',
+            icon: 'copy',
+            action: () => copy(plain, M.copied_value || 'Value copied'),
+        });
+        if (pretty !== null && pretty !== plain) {
+            items.push({
+                label: M.copy_json || 'Copy as JSON',
+                icon: 'code',
+                action: () => copy(pretty, M.copied_json || 'JSON copied'),
+            });
+        }
+        if (key) {
+            items.push({
+                label: M.copy_key || 'Copy key',
+                action: () => copy(key, M.copied_key || 'Key copied'),
+            });
+            if (isScalar) {
+                items.push({
+                    label: M.copy_pair || 'Copy "key": value',
+                    action: () => copy(`${JSON.stringify(key)}: ${safeStringify(value, 0)}`,
+                        M.copied_pair || 'Entry copied'),
+                });
+            }
+        }
+        items.push({
+            label: M.copy_path || 'Copy path',
+            action: () => copy(formatJsonPath(path), M.copied_path || 'Path copied'),
+        });
+
+        if (isScalar && value !== null && opts.onSearch) {
+            const term = String(value);
+            if (term && term.length <= 200) {
+                items.push({ type: 'separator' });
+                items.push({
+                    label: M.search_value || 'Search for this value',
+                    icon: 'search',
+                    action: () => opts.onSearch(term),
+                });
+            }
+        }
+    }
+
+    // Subtree expand/collapse — only meaningful where there's something to fold.
+    const subtree = node.classList.contains('json-collapsible')
+        ? node
+        : node.querySelector('.json-collapsible');
+    if (subtree) {
+        items.push({ type: 'separator' });
+        items.push({
+            label: M.expand_subtree || 'Expand subtree',
+            icon: 'chevronDown',
+            action: () => setSubtree(node, true, opts),
+        });
+        items.push({
+            label: M.collapse_subtree || 'Collapse subtree',
+            icon: 'chevronRight',
+            action: () => setSubtree(node, false, opts),
+        });
+    }
+
+    if (root !== undefined) {
+        const whole = safeStringify(root);
+        if (whole !== null) {
+            items.push({ type: 'separator' });
+            items.push({
+                label: opts.rootLabel || M.copy_document || 'Copy whole document',
+                icon: 'file',
+                action: () => copy(whole, opts.rootToast || M.copied_document || 'Document copied'),
+            });
+        }
+    }
+
+    return items;
+}
+
+/**
+ * Fold or unfold everything under `node` in one shot: the DOM classes AND the
+ * override records, so the next re-render (any keystroke in the search box)
+ * doesn't undo it.
+ */
+function setSubtree(node, expanded, opts) {
+    const nodes = [];
+    if (node.classList.contains('json-collapsible')) nodes.push(node);
+    nodes.push(...node.querySelectorAll('.json-collapsible'));
+    for (const el of nodes) {
+        el.classList.toggle('expanded', expanded);
+        opts.onSetExpanded?.(el.dataset.jsonPath, expanded);
+    }
+    for (const el of node.querySelectorAll('.json-nested-container')) {
+        const nested = el.querySelector('.json-nested-content');
+        const preview = el.querySelector('.json-string-preview');
+        const btn = el.querySelector('.json-parse-btn');
+        if (!nested) continue;
+        nested.hidden = !expanded;
+        if (preview) preview.hidden = expanded;
+        btn?.classList.toggle('active', expanded);
+        opts.onSetExpanded?.(el.dataset.jsonPath, expanded);
+    }
+    opts.onAfterExpand?.();
+}
+
+/** JSON.stringify that survives circular refs / BigInt rather than throwing mid-menu. */
+function safeStringify(value, indent = 2) {
+    try {
+        const out = JSON.stringify(value, null, indent);
+        return out === undefined ? null : out;
+    } catch (e) {
+        return null;
+    }
+}
+
+function copy(text, toast) {
+    copyToClipboard(text).then(ok => {
+        showToast(ok ? toast : (S.preview?.json_menu?.copy_failed || 'Copy failed'));
+    });
+}

painapple_code/static/js/preview/json-tree-toolbar.js

@@ -0,0 +1,291 @@
+/**
+ * Shared search / expand toolbar for the JSON and JSONL tree previews.
+ *
+ * Both plugins render the same control row and need the same behavior, so it
+ * lives here instead of being copy-pasted twice with two sets of bugs.
+ *
+ * What it owns:
+ * - the query, debounced into a re-render (the tree is a render-to-string
+ *   module, so search *is* a re-render — see json-tree.js)
+ * - match count + prev/next navigation. The tree search used to highlight and
+ *   nothing else: no count, no way to jump, Enter did nothing, and Ctrl+F
+ *   handed you an input with none of the affordances the generic preview
+ *   search bar has.
+ * - caret/focus survival across those re-renders
+ * - expand-all / collapse-all and per-node toggles as *state*, so the next
+ *   keystroke doesn't throw them away
+ *
+ * The count is read back out of the DOM rather than tallied during render:
+ * whatever is highlighted and visible on screen is by definition what "N of M"
+ * has to mean, and there's no second bookkeeping path to drift out of sync.
+ */
+
+import { escapeHtml } from '../utils.js';
+import { collectVisibleMatches } from './json-tree.js';
+import { fns } from './preview-state.js';
+import S from '../strings.js';
+
+const DEBOUNCE_MS = 120;
+
+export function initJsonToolbarState() {
+    return {
+        search: '',
+        // path → explicit expand state from a user toggle, so a re-render (i.e.
+        // every keystroke in the search box) doesn't undo it. Only expand-all /
+        // collapse-all resets the set.
+        overrides: new Map(),
+        // null | 'expand' | 'collapse' — sticky expand-all / collapse-all
+        mode: null,
+        matchIndex: 0,
+    };
+}
+
+/** Tolerate a pluginState that was reset to a bare {} elsewhere. */
+export function normalizeToolbarState(ps) {
+    if (!ps) return initJsonToolbarState();
+    if (typeof ps.search !== 'string') ps.search = '';
+    if (!(ps.overrides instanceof Map)) ps.overrides = new Map();
+    if (ps.mode !== 'expand' && ps.mode !== 'collapse') ps.mode = null;
+    if (typeof ps.matchIndex !== 'number' || ps.matchIndex < 0) ps.matchIndex = 0;
+    return ps;
+}
+
+/** Render options for the tree itself, derived from toolbar state. */
+export function treeOptions(ps, extra = {}) {
+    return {
+        search: (ps.search || '').trim().toLowerCase(),
+        expandAll: ps.mode === 'expand',
+        collapseAll: ps.mode === 'collapse',
+        overrides: ps.overrides,
+        ...extra,
+    };
+}
+
+export function renderJsonToolbar(ps) {
+    const query = (ps.search || '').trim();
+    const hide = query ? '' : ' hidden';
+    const placeholder = S.preview?.json_search_placeholder || 'Search keys and values…';
+
+    return `
+        <div class="json-toolbar">
+            <div class="json-search-wrap">
+                <svg class="json-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="11" cy="11" r="8"/>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                </svg>
+                <input type="text" class="json-search-input" placeholder="${escapeHtml(placeholder)}" value="${escapeHtml(ps.search || '')}" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                <span class="json-search-count"${hide}></span>
+                <button class="json-search-nav" data-action="search-prev" data-tooltip="${escapeHtml(S.preview?.json_search_prev || 'Previous match (Shift+Enter)')}"${hide}>
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>
+                </button>
+                <button class="json-search-nav" data-action="search-next" data-tooltip="${escapeHtml(S.preview?.json_search_next || 'Next match (Enter)')}"${hide}>
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                </button>
+                <button class="json-search-clear" data-action="clear-search" data-tooltip="${escapeHtml(S.preview?.json_search_clear || 'Clear (Escape)')}"${hide}>×</button>
+            </div>
+            <button class="json-ctrl-btn ${ps.mode === 'expand' ? 'active' : ''}" data-action="expand-all" data-tooltip="${escapeHtml(S.preview?.json_expand_all || 'Expand all')}">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+            </button>
+            <button class="json-ctrl-btn ${ps.mode === 'collapse' ? 'active' : ''}" data-action="collapse-all" data-tooltip="${escapeHtml(S.preview?.json_collapse_all || 'Collapse all')}">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>
+            </button>
+        </div>
+    `;
+}
+
+/**
+ * Wire the toolbar. Call once per render from the plugin's setupEvents.
+ *
+ * @param {Element} container - the preview widget container
+ * @param {object} ps - plugin state (see initJsonToolbarState)
+ * @param {object} helpers - plugin helpers ({ rerenderContent })
+ * @param {string} treeSelector - root the matches live under ('.json-tree', '.jsonl-rows')
+ */
+export function bindJsonToolbar(container, ps, helpers, treeSelector) {
+    normalizeToolbarState(ps);
+
+    const refresh = (opts) => refreshMatches(container, ps, treeSelector, opts);
+    const rerender = (scroll) => {
+        const input = liveContainer(container).querySelector('.json-search-input');
+        const focused = input && document.activeElement === input;
+        const selStart = focused ? input.selectionStart : null;
+        const selEnd = focused ? input.selectionEnd : null;
+        helpers.rerenderContent();
+        if (focused) restoreSearchFocus(container, ps, selStart, selEnd);
+        refresh({ scroll });
+    };
+
+    const applyQuery = (value) => {
+        if (value === ps.search) return false;
+        ps.search = value;
+        // New query, new match set — start navigation at the top. Manual
+        // expand/collapse overrides are deliberately KEPT (they outlive a
+        // re-render); auto-reveal outranks them anyway, see resolveExpanded.
+        ps.matchIndex = 0;
+        rerender(true);
+        return true;
+    };
+
+    const searchInput = container.querySelector('.json-search-input');
+    let debounce = null;
+    const flush = () => {
+        clearTimeout(debounce);
+        debounce = null;
+        const input = liveContainer(container).querySelector('.json-search-input');
+        return input ? applyQuery(input.value) : false;
+    };
+
+    if (searchInput) {
+        searchInput.addEventListener('input', () => {
+            clearTimeout(debounce);
+            debounce = setTimeout(flush, DEBOUNCE_MS);
+        });
+
+        searchInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                // Enter straight after typing must search what's in the box,
+                // not what the debounce has committed so far.
+                if (!flush()) navigate(container, ps, treeSelector, e.shiftKey ? -1 : 1);
+            } else if (e.key === 'Escape') {
+                // Don't let Escape bubble out and close the whole preview.
+                e.preventDefault();
+                e.stopPropagation();
+                clearTimeout(debounce);
+                if (searchInput.value) {
+                    searchInput.value = '';
+                    applyQuery('');
+                } else {
+                    searchInput.blur();
+                }
+            }
+        });
+    }
+
+    container.querySelectorAll('.json-ctrl-btn, .json-search-nav, .json-search-clear').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const act = btn.dataset.action;
+            if (act === 'expand-all' || act === 'collapse-all') {
+                // State, not a DOM sweep: the old version toggled classes
+                // directly, so the very next re-render (a keystroke, a poll)
+                // silently undid it.
+                const next = act === 'expand-all' ? 'expand' : 'collapse';
+                ps.mode = ps.mode === next ? null : next;
+                ps.overrides = new Map();
+                rerender(false);
+            } else if (act === 'clear-search') {
+                clearTimeout(debounce);
+                applyQuery('');
+            } else if (act === 'search-prev') {
+                navigate(container, ps, treeSelector, -1);
+            } else if (act === 'search-next') {
+                navigate(container, ps, treeSelector, 1);
+            }
+        });
+    });
+
+    const record = (path, expanded) => {
+        if (path) ps.overrides.set(path, expanded);
+    };
+
+    return {
+        onToggle(path, expanded) {
+            record(path, expanded);
+            // Folding/unfolding changes which matches are on screen.
+            refresh({ scroll: false });
+        },
+        // Batched variant for the context menu's expand/collapse-subtree, which
+        // touches many nodes and wants a single recount at the end.
+        record,
+        refresh,
+        /** Drive the search box from elsewhere (e.g. "Search for this value"). */
+        setQuery(value) {
+            clearTimeout(debounce);
+            const input = liveContainer(container).querySelector('.json-search-input');
+            if (input) input.value = value;
+            if (!applyQuery(value)) refresh({ scroll: true });
+            liveContainer(container).querySelector('.json-search-input')?.focus();
+        },
+    };
+}
+
+// ─── Internal helpers ────────────────────────────────────────────────────
+
+/**
+ * A re-render can swap the container node out from under us (the floating
+ * widget path rebuilds it); fall back to the live instance lookup rather than
+ * writing into a detached tree.
+ */
+function liveContainer(container) {
+    if (container?.isConnected) return container;
+    return fns.findPreviewContainer?.() || container;
+}
+
+function restoreSearchFocus(container, ps, selStart, selEnd) {
+    const apply = (guard) => {
+        const input = liveContainer(container).querySelector('.json-search-input');
+        if (!input) return;
+        // Never clobber a caret the user has moved on with since the re-render.
+        if (guard && input.value !== ps.search) return;
+        if (document.activeElement !== input) input.focus();
+        const end = input.value.length;
+        try {
+            input.setSelectionRange(Math.min(selStart ?? end, end), Math.min(selEnd ?? end, end));
+        } catch (e) { /* input type without selection support */ }
+    };
+    apply(false);
+    requestAnimationFrame(() => apply(true));
+}
+
+function refreshMatches(container, ps, treeSelector, { scroll = false } = {}) {
+    const root = liveContainer(container);
+    const treeRoot = root.querySelector(treeSelector);
+    const matches = collectVisibleMatches(treeRoot);
+    const query = (ps.search || '').trim();
+
+    ps.matchIndex = matches.length
+        ? Math.min(Math.max(ps.matchIndex | 0, 0), matches.length - 1)
+        : 0;
+
+    root.querySelectorAll('.json-match.current').forEach(el => el.classList.remove('current'));
+    const current = matches[ps.matchIndex];
+    if (current) current.classList.add('current');
+
+    const countEl = root.querySelector('.json-search-count');
+    if (countEl) {
+        countEl.hidden = !query;
+        countEl.textContent = matches.length
+            ? `${ps.matchIndex + 1} of ${matches.length}`
+            : (query ? (S.preview?.json_search_no_results || 'No results') : '');
+        countEl.classList.toggle('no-results', !!query && matches.length === 0);
+    }
+    root.querySelectorAll('.json-search-nav').forEach(btn => {
+        btn.hidden = !query;
+        btn.disabled = matches.length === 0;
+    });
+    const clearBtn = root.querySelector('.json-search-clear');
+    if (clearBtn) clearBtn.hidden = !query;
+
+    if (scroll && current) scrollMatchIntoView(root, current);
+    return matches;
+}
+
+function navigate(container, ps, treeSelector, direction) {
+    const matches = refreshMatches(container, ps, treeSelector);
+    if (!matches.length) return;
+    ps.matchIndex = (ps.matchIndex + direction + matches.length) % matches.length;
+    refreshMatches(container, ps, treeSelector, { scroll: true });
+}
+
+/**
+ * Manual scrollTop math rather than scrollIntoView: iOS WKWebView ignores
+ * `block:'center'` on overflow:auto containers, which is the same reason
+ * preview-search.js does it by hand.
+ */
+function scrollMatchIntoView(container, el) {
+    const scroller = container.querySelector('.preview-body') || container;
+    const containerRect = scroller.getBoundingClientRect();
+    const matchRect = el.getBoundingClientRect();
+    const offset = matchRect.top - containerRect.top + scroller.scrollTop;
+    scroller.scrollTop = Math.max(0, offset - scroller.clientHeight / 2 + matchRect.height / 2);
+}