@script-it/json-views-react 0.1.0-beta.1

package/dist/json/html-view.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, Fragment, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { htmlRepeatKeys, JSON_VIEW_PATH_MISSING, resolveHtmlViewBinding, schemaForJsonViewPath } from '@script-it/json-views-core';
+import { useJsonViewsPortalContainer } from '../surface.js';
+import { useAnchoredPosition } from '../lib/use-anchored-position.js';
+import { EditBaseContext } from '../structured-data/edit-base.js';
+import { isLongText } from './long-text.js';
+import { SchemaEditor } from './schema-value.js';
+import { useJsonSourceLiterals } from './source-literals.js';
+import { parseHtmlTemplate } from './html-view/template.js';
+import { NativeHtmlControl } from './html-view/native-control.js';
+const skeleton = `<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'none'; style-src 'unsafe-inline'; img-src data:; font-src 'none'; connect-src 'none'; object-src 'none'; frame-src 'none'; base-uri 'none'; form-action 'none'"><style>body{margin:0;font:14px system-ui;background:var(--jv-background);color:var(--jv-foreground)}*{box-sizing:border-box}jv-field,jv-value{display:inline}button.jv-field{font:inherit;color:inherit;background:transparent;border:0;padding:0;text-align:inherit;cursor:pointer}button.jv-field:hover{outline:1px dashed currentColor}button.jv-field:focus-visible{outline:2px solid currentColor}</style></head><body><div id="mount"></div></body></html>`;
+export function HtmlView({ compiled, view, editing, fillHeight, onCurrentPathChange }) {
+    const frame = useRef(null), editorRef = useRef(null);
+    const [doc, setDoc] = useState(), [error, setError] = useState(''), [height, setHeight] = useState(500);
+    const [selected, setSelected] = useState();
+    const base = useContext(EditBaseContext), literals = useJsonSourceLiterals(), portal = useJsonViewsPortalContainer();
+    const anchorRef = useRef(null);
+    anchorRef.current = selected?.anchor ?? null;
+    // A bound field is laid out by the template, not by a column, so the popup
+    // takes its width from the text it covers instead of a fixed card width.
+    const position = useAnchoredPosition(Boolean(selected), anchorRef, editorRef, 'bottom', 'start', true);
+    const parsed = useMemo(() => {
+        if (!doc)
+            return { nodes: [], warnings: [] };
+        try {
+            return parseHtmlTemplate(doc, view.html ?? '');
+        }
+        catch (cause) {
+            return { nodes: [], warnings: [cause instanceof Error ? cause.message : 'Invalid HTML'] };
+        }
+    }, [doc, view.html]);
+    useEffect(() => { onCurrentPathChange?.(view.sourcePath); }, [view.sourcePath, onCurrentPathChange]);
+    useEffect(() => { setSelected(undefined); setError(''); }, [view.html, view.id]);
+    useEffect(() => {
+        if (!doc)
+            return;
+        const style = doc.createElement('style');
+        style.textContent = view.css ?? '';
+        doc.head.appendChild(style);
+        return () => style.remove();
+    }, [doc, view.css]);
+    useEffect(() => {
+        if (!doc || !frame.current)
+            return;
+        const update = () => {
+            const computed = getComputedStyle(frame.current);
+            for (const name of ['background', 'foreground', 'muted', 'border', 'accent'])
+                doc.documentElement.style.setProperty('--jv-' + name, computed.getPropertyValue('--jv-' + name));
+            doc.documentElement.style.colorScheme = frame.current.closest('[data-json-views-theme]')?.getAttribute('data-json-views-theme') ?? 'light';
+            if (!fillHeight)
+                setHeight(Math.min(2000, Math.max(200, doc.body.scrollHeight)));
+        };
+        update();
+        const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);
+        observer?.observe(doc.body);
+        const themeObserver = new MutationObserver(update);
+        const host = frame.current.closest('[data-json-views-theme]');
+        if (host)
+            themeObserver.observe(host, { attributes: true });
+        return () => { observer?.disconnect(); themeObserver.disconnect(); };
+    }, [doc, fillHeight]);
+    useEffect(() => {
+        if (!selected || !doc)
+            return;
+        const close = (event) => {
+            if (event.type === 'keydown' && event.key !== 'Escape')
+                return;
+            const target = event.target;
+            if (event.type !== 'keydown' && (editorRef.current?.contains(target) || selected.anchor.contains(target) || target.closest?.('[data-radix-popper-content-wrapper], [data-anchored-popup]')))
+                return;
+            setSelected(undefined);
+            if (selected.anchor.isConnected)
+                selected.anchor.focus();
+        };
+        doc.addEventListener('mousedown', close);
+        doc.addEventListener('keydown', close);
+        document.addEventListener('mousedown', close);
+        return () => { doc.removeEventListener('mousedown', close); doc.removeEventListener('keydown', close); document.removeEventListener('mousedown', close); };
+    }, [selected, doc]);
+    let expanded = 0;
+    const warnings = [...parsed.warnings];
+    const resolve = (expression, aliases) => {
+        const result = resolveHtmlViewBinding(compiled.root, expression, aliases, view.sourcePath);
+        if (result.value === JSON_VIEW_PATH_MISSING)
+            throw new Error(`Unresolved binding: ${expression}`);
+        return result;
+    };
+    const render = (nodes, aliases = {}) => nodes.map(node => {
+        if (++expanded > 10000)
+            throw new Error('HTML view exceeds 10,000 expanded nodes');
+        if (!node.tag)
+            return node.text;
+        try {
+            if (node.tag === 'jv-repeat') {
+                const alias = node.attrs.as ?? 'item';
+                if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(alias) || Object.hasOwn(aliases, alias))
+                    throw new Error(`Invalid or duplicate repeat alias: ${alias}`);
+                const resolved = resolve(node.attrs.source ?? '', aliases);
+                if (!Array.isArray(resolved.value))
+                    throw new Error('jv-repeat source must be an array');
+                const keys = htmlRepeatKeys(resolved.value, node.attrs.key);
+                return resolved.value.map((_, index) => _jsx(Fragment, { children: render(node.children, { ...aliases, [alias]: [...resolved.sourcePath, index] }) }, `${node.id}:${keys[index]}`));
+            }
+            const props = { key: node.id };
+            const mapping = { class: 'className', for: 'htmlFor', tabindex: 'tabIndex', readonly: 'readOnly', maxlength: 'maxLength', viewbox: 'viewBox', preserveaspectratio: 'preserveAspectRatio', 'stroke-width': 'strokeWidth', 'text-anchor': 'textAnchor', 'font-size': 'fontSize', 'font-family': 'fontFamily' };
+            for (const [key, value] of Object.entries(node.attrs)) {
+                if (key.startsWith('jv-attr-')) {
+                    const scalar = resolve(value, aliases).value;
+                    if (scalar !== null && typeof scalar === 'object' || typeof scalar === 'string' && /url\s*\(/i.test(scalar))
+                        throw new Error('Attribute bindings require safe scalar values');
+                    props[mapping[key.slice(8)] ?? key.slice(8)] = scalar;
+                }
+                else if (!key.startsWith('jv-') && !['bind', 'source', 'as', 'key', 'value', 'checked'].includes(key))
+                    props[mapping[key] ?? key] = ['disabled', 'readonly'].includes(key) ? true : value;
+            }
+            if (node.tag === 'jv-field' || node.tag === 'jv-value') {
+                const resolved = resolve(node.attrs.bind ?? '', aliases), value = resolved.value;
+                if (value !== null && typeof value === 'object')
+                    throw new Error('Use jv-repeat for arrays and objects');
+                const text = literals(resolved.sourcePath) ?? (value == null ? '—' : String(value));
+                const canEdit = node.tag === 'jv-field' && editing && editing.canReplace?.(resolved.sourcePath) !== false;
+                return _jsx("span", { children: canEdit ? _jsx("button", { className: "jv-field", "aria-label": `Edit ${node.attrs.bind}`, onClick: event => setSelected({ path: resolved.sourcePath, anchor: event.currentTarget, base }), children: text }) : text }, node.id);
+            }
+            if (node.attrs['jv-bind']) {
+                if (node.tag !== 'input' && node.tag !== 'textarea')
+                    throw new Error('jv-bind requires input or textarea');
+                const resolved = resolve(node.attrs['jv-bind'], aliases);
+                return _jsx(NativeHtmlControl, { tag: node.tag, props: props, path: resolved.sourcePath, value: resolved.value, editing: editing, report: setError }, node.id);
+            }
+            if (node.attrs['jv-value']) {
+                if (!['progress', 'meter'].includes(node.tag))
+                    throw new Error('jv-value attribute requires progress or meter');
+                props.value = resolve(node.attrs['jv-value'], aliases).value;
+            }
+            return createElement(node.tag, props, ...render(node.children, aliases));
+        }
+        catch (cause) {
+            if (cause instanceof Error && cause.message.includes('10,000 expanded nodes'))
+                throw cause;
+            const message = `${view.name}, node ${node.id}: ${cause instanceof Error ? cause.message : 'Invalid binding'}`;
+            warnings.push(message);
+            return _jsx("span", { children: "[Binding unavailable]" }, node.id);
+        }
+    });
+    let content;
+    try {
+        content = render(parsed.nodes);
+    }
+    catch (cause) {
+        content = null;
+        warnings.push(cause instanceof Error ? cause.message : 'HTML expansion failed');
+    }
+    const selectedValue = selected ? resolveHtmlViewBinding(compiled.root, '$' + selected.path.map(p => typeof p === 'number' ? `[${p}]` : `['${p.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}']`).join(''), {}, view.sourcePath).value : undefined;
+    const descriptor = selected ? schemaForJsonViewPath(compiled.schema, selected.path)?.descriptor ?? { type: typeof selectedValue === 'number' ? 'number' : typeof selectedValue === 'boolean' ? 'checkbox' : 'text' } : undefined;
+    // Text too long for one line gets the resizable multi-line control, matching
+    // how tables and records present the same value.
+    const editorDescriptor = descriptor?.type === 'text' && isLongText(selectedValue, descriptor) ? { ...descriptor, multiline: true } : descriptor;
+    return _jsxs("div", { className: "flex min-h-0 flex-1 flex-col", "data-id": "jsonView-html-view", children: [(error || warnings.length > 0) && _jsxs("div", { role: "alert", className: "border-b p-2 text-xs", children: [error || warnings.slice(0, 10).join(' · '), error && _jsx("button", { onClick: () => setError(''), className: "ml-2 underline", children: "Dismiss" })] }), _jsx("iframe", { ref: frame, title: view.name, sandbox: "allow-same-origin", srcDoc: skeleton, className: "w-full flex-1 border-0", style: { minHeight: fillHeight ? 200 : height, height: fillHeight ? '100%' : height }, onLoad: event => { setDoc(event.currentTarget.contentDocument ?? undefined); setSelected(undefined); } }), doc?.getElementById('mount') && createPortal(content, doc.getElementById('mount')), selected && editorDescriptor && editing && portal && createPortal(_jsx("div", { ref: editorRef, "data-anchored-popup": true, className: "z-[120] w-80 rounded-md border bg-card p-3 text-card-foreground shadow-lg", style: position, children: _jsx(EditBaseContext.Provider, { value: base, children: _jsx(SchemaEditor, { descriptor: editorDescriptor, disabled: editing.saving, label: String(selected.path.at(-1) ?? 'value'), variant: "default", value: selectedValue, onCancel: () => { const anchor = selected.anchor; setSelected(undefined); if (anchor.isConnected)
+                            anchor.focus(); }, onCommit: async (value) => { if (selected.base !== base)
+                            throw new Error('This document changed outside this editor. Cancel and reopen it before saving.'); await editing.replace(selected.path, value); } }, `${view.id}:${JSON.stringify(selected.path)}`) }) }), portal)] });
+}

package/dist/json/json-content.d.ts

@@ -0,0 +1,61 @@
+/** Format-neutral structured document orchestration with JSON-compatible wrappers. */
+import { type ReactNode } from 'react';
+import { type JsonDocumentSave, type StructuredDocumentAdapter, type ValuePath } from '@script-it/json-views-core';
+import type { UiSize } from '../lib/ui-size.js';
+import type { FileContentEditState } from '../file-content-edit-state.js';
+import { type MetadataPersistence } from '../structured-data/use-metadata-persistence.js';
+import type { JsonViewSchemaExternalWidgetRenderer } from './schema-value.js';
+import type { JsonViewsPresentationState } from '../viewer-state.js';
+export type JsonViewClearBehavior = 'null' | 'remove';
+export type { MetadataPersistence } from '../structured-data/use-metadata-persistence.js';
+export interface ObjectRootConversionRequest {
+    reason: 'save-view' | 'save-schema' | 'save-option-colors' | 'unsupported-csv-value';
+    sourceFormat: 'json-array' | 'csv' | 'json-scalar';
+    proposedFilename: string;
+    convertedSource: string;
+}
+export type MetadataPersistenceRequest = (request: ObjectRootConversionRequest) => void | boolean | Promise<void | boolean>;
+export interface StructuredDataContentProps {
+    content: string;
+    adapter: StructuredDocumentAdapter<unknown>;
+    documentId?: string;
+    revision?: string;
+    theme?: 'light' | 'dark' | 'inherit';
+    portalContainer?: HTMLElement | null;
+    /** Initial visual state, restored on mount or documentId change. Cache separately from JSON metadata. */
+    presentationState?: JsonViewsPresentationState;
+    onPresentationStateChange?: (state: JsonViewsPresentationState) => void;
+    metadata?: unknown;
+    metadataPersistence?: MetadataPersistence;
+    onMetadataChange?: (metadata: Record<string, unknown>) => Promise<void>;
+    onRequestMetadataPersistence?: MetadataPersistenceRequest;
+    /** Use host confirmation when the persistence callback presents its own conversion dialog. */
+    metadataConversionConfirmation?: 'viewer' | 'host';
+    path?: string;
+    uiSize?: UiSize;
+    fillHeight?: boolean;
+    edit?: FileContentEditState;
+    /** Persist visual edits. Omit for a read-only source. Takes precedence over edit.onCommitContent. */
+    onSave?: JsonDocumentSave;
+    isSaving?: boolean;
+    /** Host dirty state displayed in the embedded source toolbar. */
+    isDirty?: boolean;
+    /** Host save error displayed in the embedded source toolbar. */
+    saveError?: string;
+    /** Controlled raw-source mode. Omit to let the embedded frame own its source toggle. */
+    sourceVisible?: boolean;
+    onSourceVisibleChange?: (visible: boolean) => void;
+    clearBehavior?: JsonViewClearBehavior;
+    onDraftRowsChange?: (paths: readonly ValuePath[]) => void;
+    renderMarkdown?: (content: string) => ReactNode;
+    renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;
+    /** @deprecated Use onRequestMetadataPersistence. */
+    allowRootArrayWrapping?: boolean;
+}
+export interface JSONContentProps extends Omit<StructuredDataContentProps, 'adapter'> {
+}
+export interface CSVContentProps extends Omit<StructuredDataContentProps, 'adapter'> {
+}
+export declare function StructuredDataContent(props: StructuredDataContentProps): import("react").JSX.Element;
+export declare function JSONContent(props: JSONContentProps): import("react").JSX.Element;
+export declare function CSVContent(props: CSVContentProps): import("react").JSX.Element;