@script-it/json-views-react 2026.10.27 → 2026.11.42

package/README.md

@@ -319,4 +319,6 @@ The frame inherits `--jv-background`, `--jv-foreground`, `--jv-muted`, `--jv-bor
 
 Limits: HTML and CSS 256 KiB each, template 5,000 nodes / depth 64, expansion 10,000 nodes. Large arbitrary layouts are not virtualized. HTML views do not use built-in columns/filter/sort/group configuration; use another ordinary view to browse the same collection as a table or board.
 
-Examples are bundled as `Examples/HTML Launch.json`, `Examples/HTML Room Plan.json`, and `Examples/HTML Product Sheet.json`.
+App-specific HTML views are bundled in the website’s `App Views` folder.
+
+Set `buttonToEdit={true}` on `JSONContent` or `JsonViewer` to edit Markdown/body fields only through the pencil button at the top right (visible on hover, keyboard focus, and touch devices). The default is `false` for click-to-edit compatibility. The website always enables this behavior.

package/THIRD_PARTY_NOTICES.txt

@@ -3996,7 +3996,7 @@ CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-re2js@2.8.6
+re2js@2.9.1
 ===========
 MIT License
 

package/dist/json/edit-interaction.d.ts

@@ -0,0 +1 @@
+export declare const ButtonToEditContext: import("react").Context<boolean>;

package/dist/json/edit-interaction.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ButtonToEditContext = createContext(false);

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

@@ -49,6 +49,8 @@ export interface StructuredDataContentProps {
     clearBehavior?: JsonViewClearBehavior;
     /** Clamps tall table cells and reveals one on selection (default), or lets rows grow to fit. */
     tableCells?: JsonViewsTableCellOptions;
+    /** Require the hover/focus edit button for Markdown fields instead of clicking their content. Defaults to false. */
+    buttonToEdit?: boolean;
     onDraftRowsChange?: (paths: readonly ValuePath[]) => void;
     renderMarkdown?: (content: string) => ReactNode;
     renderExternalWidget?: JsonViewSchemaExternalWidgetRenderer;

package/dist/json/json-content.js

@@ -64,7 +64,7 @@ export function JSONContent(props) {
 export function CSVContent(props) {
     return _jsx(StructuredDataContent, { ...props, adapter: csvFormat });
 }
-function StructuredDataContentSession({ content, adapter, documentId, revision, metadata, metadataPersistence, presentationState, onMetadataChange, onRequestMetadataPersistence, metadataConversionConfirmation = 'viewer', allowRootArrayWrapping = true, path, uiSize, fillHeight = false, edit, onSave, isSaving, isDirty, saveError, sourceVisible, onSourceVisibleChange, clearBehavior = 'null', tableCells, onDraftRowsChange, renderExternalWidget, renderMarkdown, }) {
+function StructuredDataContentSession({ content, adapter, documentId, revision, metadata, metadataPersistence, presentationState, onMetadataChange, onRequestMetadataPersistence, metadataConversionConfirmation = 'viewer', allowRootArrayWrapping = true, path, uiSize, fillHeight = false, edit, onSave, isSaving, isDirty, saveError, sourceVisible, onSourceVisibleChange, clearBehavior = 'null', buttonToEdit, tableCells, onDraftRowsChange, renderExternalWidget, renderMarkdown, }) {
     const { types } = useJsonViewsRegistries();
     const [editorGeneration, setEditorGeneration] = useState(0);
     const [draftRows, setDraftRows] = useState([]);
@@ -436,5 +436,5 @@ function StructuredDataContentSession({ content, adapter, documentId, revision,
         replace: replaceValue, replaceMany: replaceValues, ...(metadataWritable ? { setOptionColor } : {}), replaceViews,
         removeMany: removeValues, saving: document.saving,
     } : undefined;
-    return (_jsxs(TooltipProvider, { children: [document.error && _jsxs("div", { className: "grid gap-2 px-4 py-2 text-sm", children: [_jsx("p", { role: "alert", className: "text-destructive", children: document.error }), document.dirty && _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { type: "button", disabled: document.saving, className: "rounded-md border border-border px-2 py-1 disabled:opacity-50", onClick: () => { void document.commit((source) => source).catch(() => { }); }, children: "Retry save" }), _jsx("button", { type: "button", disabled: document.saving, className: "rounded-md border border-border px-2 py-1 disabled:opacity-50", onClick: () => { document.reset(); setEditorGeneration((generation) => generation + 1); }, children: "Discard unsaved changes" }), _jsxs("details", { className: "basis-full", children: [_jsx("summary", { children: "Unsaved source" }), _jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap font-mono text-xs", children: document.content })] })] })] }), formatDiagnostics.length > 0 && _jsxs("details", { className: "px-4 py-2 text-sm", children: [_jsx("summary", { children: formatDiagnostics.some((item) => item.severity === 'error') ? 'This document needs repair before structured editing.' : 'Some values require source editing to preserve their exact representation.' }), _jsx(JsonSourceRecovery, { source: document.content, error: formatDiagnostics.map((item) => item.message).join(' '), onCommit: recoveryCommit })] }), _jsx(JsonRendererBoundary, { source: document.content, onCommit: recoveryCommit, children: _jsx(JsonSourceLiteralsProvider, { diagnostics: sourceDiagnostics, children: _jsx(EditBaseContext.Provider, { value: document.acknowledgedContent, children: _jsx(JsonViewer, { compiled: compiled, defaultKey: path?.split('/').pop() || 'root', filePath: documentId ?? path, sourceContent: sourceEditor, sourceVisible: showingSource, onSourceVisibleChange: setShowingSource, tabularRoot: adapter.format === 'csv', editing: editing, onCurrentPathChange: rememberSourcePaths, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, sourceControl: sourceControl, tableCells: tableCells, uiSize: uiSize, fillHeight: fillHeight }) }) }) }, editorGeneration)] }));
+    return (_jsxs(TooltipProvider, { children: [document.error && _jsxs("div", { className: "grid gap-2 px-4 py-2 text-sm", children: [_jsx("p", { role: "alert", className: "text-destructive", children: document.error }), document.dirty && _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { type: "button", disabled: document.saving, className: "rounded-md border border-border px-2 py-1 disabled:opacity-50", onClick: () => { void document.commit((source) => source).catch(() => { }); }, children: "Retry save" }), _jsx("button", { type: "button", disabled: document.saving, className: "rounded-md border border-border px-2 py-1 disabled:opacity-50", onClick: () => { document.reset(); setEditorGeneration((generation) => generation + 1); }, children: "Discard unsaved changes" }), _jsxs("details", { className: "basis-full", children: [_jsx("summary", { children: "Unsaved source" }), _jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap font-mono text-xs", children: document.content })] })] })] }), formatDiagnostics.length > 0 && _jsxs("details", { className: "px-4 py-2 text-sm", children: [_jsx("summary", { children: formatDiagnostics.some((item) => item.severity === 'error') ? 'This document needs repair before structured editing.' : 'Some values require source editing to preserve their exact representation.' }), _jsx(JsonSourceRecovery, { source: document.content, error: formatDiagnostics.map((item) => item.message).join(' '), onCommit: recoveryCommit })] }), _jsx(JsonRendererBoundary, { source: document.content, onCommit: recoveryCommit, children: _jsx(JsonSourceLiteralsProvider, { diagnostics: sourceDiagnostics, children: _jsx(EditBaseContext.Provider, { value: document.acknowledgedContent, children: _jsx(JsonViewer, { compiled: compiled, defaultKey: path?.split('/').pop() || 'root', filePath: documentId ?? path, sourceContent: sourceEditor, sourceVisible: showingSource, onSourceVisibleChange: setShowingSource, tabularRoot: adapter.format === 'csv', editing: editing, onCurrentPathChange: rememberSourcePaths, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, sourceControl: sourceControl, buttonToEdit: buttonToEdit, tableCells: tableCells, uiSize: uiSize, fillHeight: fillHeight }) }) }) }, editorGeneration)] }));
 }

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

@@ -1,3 +1,3 @@
 import { type JsonViewerProps } from './view-types.js';
-export declare function JsonViewer({ compiled, defaultKey, editing, filePath, fillHeight, onCurrentPathChange, renderExternalWidget, renderMarkdown, sourceControl, sourceContent, sourceVisible, onSourceVisibleChange, tableCells, uiSize, viewsEnabled, tabularRoot, }: JsonViewerProps): import("react").JSX.Element;
+export declare function JsonViewer({ compiled, defaultKey, editing, filePath, fillHeight, onCurrentPathChange, renderExternalWidget, renderMarkdown, sourceControl, sourceContent, sourceVisible, onSourceVisibleChange, buttonToEdit, tableCells, uiSize, viewsEnabled, tabularRoot, }: JsonViewerProps): import("react").JSX.Element;
 export type { JsonViewJsonEditing } from './view-types.js';

package/dist/json/json-view.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HtmlView } from './html-view.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Braces, LayoutGrid, Columns3, FileText, Search, Table2 } from 'lucide-react';
+import { ButtonToEditContext } from './edit-interaction.js';
 import { useJsonViewsRegistries } from '../widget-registry.js';
 import { cn } from '../lib/cn.js';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../primitives/tabs.js';
@@ -99,7 +100,7 @@ function ConfiguredView(props) {
     }
     return _jsx(AdaptiveView, { ...props });
 }
-export function JsonViewer({ compiled, defaultKey, editing, filePath, fillHeight = false, onCurrentPathChange, renderExternalWidget, renderMarkdown, sourceControl, sourceContent, sourceVisible, onSourceVisibleChange, tableCells, uiSize, viewsEnabled = true, tabularRoot = false, }) {
+export function JsonViewer({ compiled, defaultKey, editing, filePath, fillHeight = false, onCurrentPathChange, renderExternalWidget, renderMarkdown, sourceControl, sourceContent, sourceVisible, onSourceVisibleChange, buttonToEdit = false, tableCells, uiSize, viewsEnabled = true, tabularRoot = false, }) {
     const { types } = useJsonViewsRegistries();
     const viewerState = useViewerState();
     const firstViewTab = viewsEnabled && compiled.views[0] ? `view:${compiled.views[0].id}` : 'root';
@@ -293,32 +294,32 @@ export function JsonViewer({ compiled, defaultKey, editing, filePath, fillHeight
         if (!query)
             setSearchOpenTab(undefined);
     };
-    return (_jsx(TableCellOptionsContext.Provider, { value: tableCells, children: _jsx(Tabs, { value: selectedTab, onValueChange: (value) => { if (value !== 'source')
-                setActiveTab(value); onSourceVisibleChange?.(value === 'source'); }, className: cn('flex min-h-0 flex-1 flex-col bg-background text-foreground', fillHeight && 'h-full'), children: _jsxs("div", { "data-id": "json-viewer-content", className: cn('flex min-h-0 w-full max-w-none flex-1 flex-col px-3 py-4 sm:px-6 sm:py-5', fillHeight && 'h-full'), children: [hasToolbar && (_jsxs("div", { "data-id": "json-viewer-toolbar", className: "relative flex min-h-8 shrink-0 flex-nowrap items-center gap-x-2", children: [_jsxs("div", { "data-id": "jsonView-toolbar-actions", className: "ml-auto flex h-8 shrink-0 items-center gap-1", children: [selectedTab !== 'source' && searchable && (searchOpen ? (_jsxs("label", { "data-id": "jsonView-search-control", className: "flex h-7 w-44 items-center overflow-hidden rounded-md border border-transparent bg-transparent transition-[width,background-color] focus-within:border-border focus-within:bg-card sm:w-52", children: [_jsx(Search, { className: "mx-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("input", { ref: searchInput, "aria-label": "Search rows", className: "h-full min-w-0 flex-1 bg-transparent pr-2 text-xs outline-none placeholder:text-muted-foreground", value: query, onBlur: closeSearch, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
-                                                    if (event.key === 'Escape') {
-                                                        setQuery('');
-                                                        setSearchOpenTab(undefined);
-                                                    }
-                                                }, placeholder: "Type to search\u2026" })] })) : (_jsx("button", { "data-id": "jsonView-search-button", type: "button", "aria-label": "Search rows", title: "Search", className: "grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: () => setSearchOpenTab(selectedTab), children: _jsx(Search, { className: "h-3.5 w-3.5" }) }))), editing && settingsRawView && (_jsx(JsonViewViewSettings, { hasUnsavedChanges: previewRawView !== undefined, view: previewView ?? settingsView ?? activeView, rawView: activeView.display === 'html' ? activeRawView ?? settingsDraftRawView : settingsDraftRawView, schema: compiled.schema, disabled: editing.saving, saveMode: viewSaveMode, saveUnavailableReason: canPersistViews ? undefined : editing.viewCreationUnavailableReason, unavailableReason: settingsUnavailableReason, onPreview: previewSettings, onSave: saveSettingsView, onDuplicate: declaredView && activeRawView && canPersistViews ? async () => {
-                                            const name = uniqueViewName(`${declaredView.name} copy`, rawViews);
-                                            const id = uniqueViewId(name, rawViews);
-                                            const duplicate = { ...activeRawView, id, name };
-                                            const nextViews = [...rawViews];
-                                            const duplicateIndex = declaredView.declarationIndex + 1;
-                                            nextViews.splice(duplicateIndex, 0, duplicate);
-                                            await persistViews(nextViews, duplicateIndex);
-                                            setActiveTab(`view:${id}`);
-                                        } : undefined, onDelete: declaredView && canPersistViews ? async () => {
-                                            const nextViews = [...rawViews];
-                                            nextViews.splice(declaredView.declarationIndex, 1);
-                                            await persistViews(nextViews);
-                                            setActiveTab('root');
-                                        } : undefined }, typeof settingsDraftRawView.id === 'string' ? settingsDraftRawView.id : '__view_settings__')), sourceControl, _jsx(Diagnostics, { compiled: compiled })] }), (hasTabs || canAddViews || sourceContent) && (_jsxs("div", { "data-id": "jsonView-view-controls", className: "flex min-w-0 flex-1 items-center", children: [canAddViews && _jsx(JsonViewAddView, { align: "start", root: compiled.root, schema: compiled.schema, currentPath: jsonPathForValuePath(currentPath), disabled: editing.saving, onAdd: addView, unavailableReason: addViewUnavailableReason }, "add-view"), (hasTabs || sourceContent) && (_jsxs(TabsList, { "data-id": "jsonView-json-tabs", className: "h-8 min-w-0 flex-initial justify-start gap-0.5 overflow-x-auto overscroll-x-contain rounded-none bg-transparent p-0", children: [compiled.views.map((view) => {
-                                                const Icon = view.display === 'html' ? LayoutGrid : view.display === 'kanban'
-                                                    ? Columns3
-                                                    : isInferredSingleRecord(view) || (view.value !== null && typeof view.value === 'object' && !Array.isArray(view.value) && !isRecordCollection(view.value))
-                                                        ? FileText
-                                                        : Table2;
-                                                return _jsxs(ViewTab, { id: `jsonView-json-tab-${view.id}`, value: `view:${view.id}`, path: slashPath(view), children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), view.name] }, view.id);
-                                            }), _jsxs(ViewTab, { id: "jsonView-json-tab-root", value: "root", path: isInferredSingleRecord(rootView) && !forceTable ? 'Root record' : 'Root table', children: [isInferredSingleRecord(rootView) && !forceTable ? _jsx(FileText, { className: "h-3.5 w-3.5" }) : _jsx(Table2, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "sr-only", children: isInferredSingleRecord(rootView) && !forceTable ? 'Record' : 'Table' })] }), sourceContent && _jsxs(ViewTab, { id: "jsonView-json-tab-source", value: "source", path: "Source", children: [_jsx(Braces, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "sr-only", children: "Source" })] })] }, "view-tabs"))] }))] })), _jsx(TabsContent, { value: selectedTab, className: cn('mt-2 min-w-0', fillHeight && 'flex min-h-0 flex-1 flex-col'), children: selectedTab === 'source' ? sourceContent : _jsx(ConfiguredView, { forceTable: forceTable, compiled: compiled, copyFileName: defaultKey === 'root' ? 'document.json' : defaultKey, editing: editing, filePath: filePath, fillHeight: fillHeight, onCurrentPathChange: rememberCurrentPath, onSaveView: saveColumnView, query: query, rawView: columnRawView, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, uiSize: uiSize, view: renderedView }, selectedTab) })] }) }) }));
+    return (_jsx(ButtonToEditContext.Provider, { value: buttonToEdit, children: _jsx(TableCellOptionsContext.Provider, { value: tableCells, children: _jsx(Tabs, { value: selectedTab, onValueChange: (value) => { if (value !== 'source')
+                    setActiveTab(value); onSourceVisibleChange?.(value === 'source'); }, className: cn('flex min-h-0 flex-1 flex-col bg-background text-foreground', fillHeight && 'h-full'), children: _jsxs("div", { "data-id": "json-viewer-content", className: cn('flex min-h-0 w-full max-w-none flex-1 flex-col px-3 py-4 sm:px-6 sm:py-5', fillHeight && 'h-full'), children: [hasToolbar && (_jsxs("div", { "data-id": "json-viewer-toolbar", className: "relative flex min-h-8 shrink-0 flex-nowrap items-center gap-x-2", children: [_jsxs("div", { "data-id": "jsonView-toolbar-actions", className: "ml-auto flex h-8 shrink-0 items-center gap-1", children: [selectedTab !== 'source' && searchable && (searchOpen ? (_jsxs("label", { "data-id": "jsonView-search-control", className: "flex h-7 w-44 items-center overflow-hidden rounded-md border border-transparent bg-transparent transition-[width,background-color] focus-within:border-border focus-within:bg-card sm:w-52", children: [_jsx(Search, { className: "mx-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("input", { ref: searchInput, "aria-label": "Search rows", className: "h-full min-w-0 flex-1 bg-transparent pr-2 text-xs outline-none placeholder:text-muted-foreground", value: query, onBlur: closeSearch, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                                                        if (event.key === 'Escape') {
+                                                            setQuery('');
+                                                            setSearchOpenTab(undefined);
+                                                        }
+                                                    }, placeholder: "Type to search\u2026" })] })) : (_jsx("button", { "data-id": "jsonView-search-button", type: "button", "aria-label": "Search rows", title: "Search", className: "grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: () => setSearchOpenTab(selectedTab), children: _jsx(Search, { className: "h-3.5 w-3.5" }) }))), editing && settingsRawView && (_jsx(JsonViewViewSettings, { hasUnsavedChanges: previewRawView !== undefined, view: previewView ?? settingsView ?? activeView, rawView: activeView.display === 'html' ? activeRawView ?? settingsDraftRawView : settingsDraftRawView, schema: compiled.schema, disabled: editing.saving, saveMode: viewSaveMode, saveUnavailableReason: canPersistViews ? undefined : editing.viewCreationUnavailableReason, unavailableReason: settingsUnavailableReason, onPreview: previewSettings, onSave: saveSettingsView, onDuplicate: declaredView && activeRawView && canPersistViews ? async () => {
+                                                const name = uniqueViewName(`${declaredView.name} copy`, rawViews);
+                                                const id = uniqueViewId(name, rawViews);
+                                                const duplicate = { ...activeRawView, id, name };
+                                                const nextViews = [...rawViews];
+                                                const duplicateIndex = declaredView.declarationIndex + 1;
+                                                nextViews.splice(duplicateIndex, 0, duplicate);
+                                                await persistViews(nextViews, duplicateIndex);
+                                                setActiveTab(`view:${id}`);
+                                            } : undefined, onDelete: declaredView && canPersistViews ? async () => {
+                                                const nextViews = [...rawViews];
+                                                nextViews.splice(declaredView.declarationIndex, 1);
+                                                await persistViews(nextViews);
+                                                setActiveTab('root');
+                                            } : undefined }, typeof settingsDraftRawView.id === 'string' ? settingsDraftRawView.id : '__view_settings__')), sourceControl, _jsx(Diagnostics, { compiled: compiled })] }), (hasTabs || canAddViews || sourceContent) && (_jsxs("div", { "data-id": "jsonView-view-controls", className: "flex min-w-0 flex-1 items-center", children: [canAddViews && _jsx(JsonViewAddView, { align: "start", root: compiled.root, schema: compiled.schema, currentPath: jsonPathForValuePath(currentPath), disabled: editing.saving, onAdd: addView, unavailableReason: addViewUnavailableReason }, "add-view"), (hasTabs || sourceContent) && (_jsxs(TabsList, { "data-id": "jsonView-json-tabs", className: "h-8 min-w-0 flex-initial justify-start gap-0.5 overflow-x-auto overscroll-x-contain rounded-none bg-transparent p-0", children: [compiled.views.map((view) => {
+                                                    const Icon = view.display === 'html' ? LayoutGrid : view.display === 'kanban'
+                                                        ? Columns3
+                                                        : isInferredSingleRecord(view) || (view.value !== null && typeof view.value === 'object' && !Array.isArray(view.value) && !isRecordCollection(view.value))
+                                                            ? FileText
+                                                            : Table2;
+                                                    return _jsxs(ViewTab, { id: `jsonView-json-tab-${view.id}`, value: `view:${view.id}`, path: slashPath(view), children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), view.name] }, view.id);
+                                                }), _jsxs(ViewTab, { id: "jsonView-json-tab-root", value: "root", path: isInferredSingleRecord(rootView) && !forceTable ? 'Root record' : 'Root table', children: [isInferredSingleRecord(rootView) && !forceTable ? _jsx(FileText, { className: "h-3.5 w-3.5" }) : _jsx(Table2, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "sr-only", children: isInferredSingleRecord(rootView) && !forceTable ? 'Record' : 'Table' })] }), sourceContent && _jsxs(ViewTab, { id: "jsonView-json-tab-source", value: "source", path: "Source", children: [_jsx(Braces, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "sr-only", children: "Source" })] })] }, "view-tabs"))] }))] })), _jsx(TabsContent, { value: selectedTab, className: cn('mt-2 min-w-0', fillHeight && 'flex min-h-0 flex-1 flex-col'), children: selectedTab === 'source' ? sourceContent : _jsx(ConfiguredView, { forceTable: forceTable, compiled: compiled, copyFileName: defaultKey === 'root' ? 'document.json' : defaultKey, editing: editing, filePath: filePath, fillHeight: fillHeight, onCurrentPathChange: rememberCurrentPath, onSaveView: saveColumnView, query: query, rawView: columnRawView, renderExternalWidget: renderExternalWidget, renderMarkdown: renderMarkdown, uiSize: uiSize, view: renderedView }, selectedTab) })] }) }) }) }));
 }

package/dist/json/schema-value.js

@@ -11,6 +11,7 @@ import { JsonSourceNumber, useJsonSourceLiterals, useJsonSourceSubtreeRisk } fro
 import { validateJsonViewSchemaValue } from '@script-it/json-views-core';
 import { useJsonViewsRegistries } from '../widget-registry.js';
 import { useEditBaseChanged } from '../structured-data/edit-base.js';
+import { ButtonToEditContext } from './edit-interaction.js';
 import { HtmlPreview } from './html-preview.js';
 export function withColumnOptionColors(descriptor, values, offset) {
     if (descriptor.type !== 'select' && descriptor.type !== 'multi-select')
@@ -227,6 +228,8 @@ export function SchemaEditor({ descriptor, disabled, label, minHeight, onCancel,
     return fillCell ? _jsx("div", { className: "px-1.5 py-1.5", children: editor }) : editor;
 }
 export function JsonViewSchemaValueCell({ compact = false, descriptor, initiallyEditing = false, label, onClear, onCommit, onOptionColorChange, onOpen, renderExternalWidget, renderMarkdown, saving = false, suppressRequiredValidation = false, variant = 'default', value, sourcePath, }) {
+    const buttonToEdit = useContext(ButtonToEditContext);
+    const markdownButton = buttonToEdit && (descriptor.type === 'markdown' || descriptor.type === 'body');
     const [editing, setEditing] = useState(initiallyEditing);
     const displayRef = useRef(null);
     const [editorMinHeight, setEditorMinHeight] = useState();
@@ -292,11 +295,11 @@ export function JsonViewSchemaValueCell({ compact = false, descriptor, initially
     const linkedValue = typeof value === 'string'
         && (descriptor.type === 'url' || descriptor.type === 'email');
     const interactiveText = ((descriptor.type === 'body' || descriptor.type === 'markdown') && renderMarkdown !== undefined || descriptor.type === 'html') && !compact && typeof value === 'string';
-    const explicitEditAction = linkedValue || descriptor.type === 'html';
+    const explicitEditAction = linkedValue || descriptor.type === 'html' || markdownButton;
     const startEditing = () => {
         preserveLayoutHeight();
         setEditing(true);
     };
     const actions = (_jsxs(_Fragment, { children: [explicitEditAction && editable && _jsx(EditValueAction, { disabled: saving, label: label, onClick: startEditing }), (container || textPreview) && _jsx(ExpandValueButton, { onClick: onOpen })] }));
-    return (_jsx("div", { ref: displayRef, "data-id": "jsonView-schema-value", className: cn('h-full min-w-0', invalid && 'ring-1 ring-inset ring-destructive', !invalid && warning && 'ring-1 ring-inset ring-amber-500'), style: stableLayout && editorMinHeight ? { minHeight: editorMinHeight } : undefined, title: invalid ?? warning, children: _jsx(StructuredValueCellFrame, { actions: explicitEditAction || container || textPreview ? actions : undefined, overlayActions: descriptor.type === 'html' && !compact, activationDisabled: !editable || saving || explicitEditAction, activationLabel: editable && !explicitEditAction ? `Edit ${label}` : undefined, activationRole: interactiveText ? 'group' : 'button', className: variant === 'record-title' ? 'min-h-10 w-fit max-w-full px-1.5 py-1' : stableText ? 'px-0' : undefined, onActivate: editable && !explicitEditAction ? startEditing : undefined, children: stableText ? (_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(JsonViewSchemaValueDisplay, { sourcePath: sourcePath, compact: compact, descriptor: descriptor, value: value, onOpen: onOpen, renderMarkdown: renderMarkdown }), (invalid || warning) && _jsx(AlertTriangle, { "aria-label": invalid ?? warning, className: cn('h-3.5 w-3.5 shrink-0', invalid ? 'text-destructive' : 'text-amber-600 dark:text-amber-300') })] })) : (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(JsonViewSchemaValueDisplay, { sourcePath: sourcePath, compact: compact, descriptor: descriptor, value: value, onOpen: onOpen, renderMarkdown: renderMarkdown }), (invalid || warning) && _jsx(AlertTriangle, { "aria-label": invalid ?? warning, className: cn('h-3.5 w-3.5 shrink-0', invalid ? 'text-destructive' : 'text-amber-600 dark:text-amber-300') })] })) }) }));
+    return (_jsx("div", { ref: displayRef, "data-id": "jsonView-schema-value", className: cn('h-full min-w-0', invalid && 'ring-1 ring-inset ring-destructive', !invalid && warning && 'ring-1 ring-inset ring-amber-500'), style: stableLayout && editorMinHeight ? { minHeight: editorMinHeight } : undefined, title: invalid ?? warning, children: _jsx(StructuredValueCellFrame, { highlightOnHover: descriptor.type !== 'markdown' && descriptor.type !== 'body', actions: explicitEditAction || container || textPreview ? actions : undefined, overlayActions: (descriptor.type === 'html' || markdownButton) && !compact, activationDisabled: !editable || saving || explicitEditAction, activationLabel: editable && !explicitEditAction ? `Edit ${label}` : undefined, activationRole: interactiveText ? 'group' : 'button', className: variant === 'record-title' ? 'min-h-10 w-fit max-w-full px-1.5 py-1' : stableText ? 'px-0' : undefined, onActivate: editable && !explicitEditAction ? startEditing : undefined, children: stableText ? (_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(JsonViewSchemaValueDisplay, { sourcePath: sourcePath, compact: compact, descriptor: descriptor, value: value, onOpen: onOpen, renderMarkdown: renderMarkdown }), (invalid || warning) && _jsx(AlertTriangle, { "aria-label": invalid ?? warning, className: cn('h-3.5 w-3.5 shrink-0', invalid ? 'text-destructive' : 'text-amber-600 dark:text-amber-300') })] })) : (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(JsonViewSchemaValueDisplay, { sourcePath: sourcePath, compact: compact, descriptor: descriptor, value: value, onOpen: onOpen, renderMarkdown: renderMarkdown }), (invalid || warning) && _jsx(AlertTriangle, { "aria-label": invalid ?? warning, className: cn('h-3.5 w-3.5 shrink-0', invalid ? 'text-destructive' : 'text-amber-600 dark:text-amber-300') })] })) }) }));
 }

package/dist/json/table-view.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonToEditContext } from './edit-interaction.js';
 import { isLongText } from './long-text.js';
 import { useJsonSourceLiterals } from './source-literals.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useJsonViewsRegistries } from '../widget-registry.js';
 import { AtomicValueEditor, EditValueAction, StructuredValueCellFrame } from '../structured-data/atomic-value-editor.js';
 import { isEditableAtomicValue } from '../structured-data/atomic-value.js';
@@ -41,6 +42,7 @@ const DATE_FILTER_OPERATORS = [
     { value: 'isNotEmpty', label: 'is not empty' },
 ];
 export function ProjectedTableView({ compiled, editing, filePath, copyFileName, fillHeight, onSaveView, onCurrentPathChange, query, rawView, renderExternalWidget, renderMarkdown, uiSize, view, }) {
+    const buttonToEdit = useContext(ButtonToEditContext);
     const { types } = useJsonViewsRegistries();
     const sourceLiteral = useJsonSourceLiterals();
     const [editPath, setEditPath] = useState();
@@ -290,9 +292,9 @@ export function ProjectedTableView({ compiled, editing, filePath, copyFileName,
                 const openRecordEditor = () => { setEditPath(resolved.sourcePath); setOpenRowPath(row.sourcePath); };
                 // Render before applying the plain-text shortcut. A group preserves
                 // native link interactions without nesting links inside a button.
-                if (renderMarkdown && (descriptor?.type === 'markdown' || descriptor?.type === 'body'))
-                    return (_jsx(StructuredValueCellFrame, { activationLabel: `Open ${displayColumn.label} in record`, activationRole: "group", onActivate: openRecordEditor, actions: editing && editing.canReplace?.(resolved.sourcePath) !== false
-                            ? _jsx(EditValueAction, { label: displayColumn.label, onClick: openRecordEditor })
+                if ((renderMarkdown || buttonToEdit) && (descriptor?.type === 'markdown' || descriptor?.type === 'body'))
+                    return (_jsx(StructuredValueCellFrame, { activationLabel: `Open ${displayColumn.label} in record`, activationRole: "group", onActivate: buttonToEdit ? undefined : openRecordEditor, overlayActions: buttonToEdit, highlightOnHover: false, actions: editing && editing.canReplace?.(resolved.sourcePath) !== false
+                            ? _jsx(EditValueAction, { disabled: editing.saving, label: displayColumn.label, onClick: openRecordEditor })
                             : undefined, children: _jsx("div", { className: "min-w-0 flex-1 break-words pr-2", children: _jsx(JsonViewSchemaValueDisplay, { sourcePath: resolved.sourcePath, descriptor: descriptor, value: value, onOpen: open, renderMarkdown: renderMarkdown }) }) }));
                 return _jsx("button", { type: "button", className: "block h-full w-full min-w-0 truncate px-1.5 py-1 text-left hover:bg-accent focus-visible:ring-1 focus-visible:ring-ring", "aria-label": `Open ${displayColumn.label} in record`, onClick: openRecordEditor, children: value || '—' });
             }

package/dist/json/view-types.d.ts

@@ -41,6 +41,8 @@ export interface JsonViewerProps {
     sourceVisible?: boolean;
     onSourceVisibleChange?: (visible: boolean) => void;
     sourceControl?: ReactNode;
+    /** Require the hover/focus edit button for Markdown fields instead of clicking their content. Defaults to false. */
+    buttonToEdit?: boolean;
     /** Clamps tall table cells and reveals one on selection (default), or lets rows grow to fit. */
     tableCells?: JsonViewsTableCellOptions;
     uiSize?: UiSize;

package/dist/json/viewers/general/general-json-view.js

@@ -156,8 +156,8 @@ export function GeneralJsonView({ breadcrumb, root, defaultKey, initialPath = []
     }
     return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx(NavigationBreadcrumb, { labels: [...(breadcrumb?.ancestors ?? []), ...effectiveHistory.map(({ key }) => key)], onBack: effectiveHistory.length > 1 ? goBack : breadcrumb?.onBack, backLabel: effectiveHistory.length > 1 ? 'Back' : breadcrumb?.backLabel }), _jsx("div", { ref: scrollContainerRef, className: fillHeight
                     ? 'flex min-h-0 flex-1 flex-col overflow-auto overscroll-x-none'
-                    : 'flex-1 overflow-auto overscroll-x-none', onScroll: captureScrollPosition, children: _jsx(GeneralJsonNodeView, { node: currentNode, navigateTo: navigateTo, filePath: filePath, currentPathKey: currentPathKey, currentJsonPath: effectiveCurrent.path, currentLabel: effectiveCurrent.key, renderAsMarkdown: typeof currentNode === 'string'
-                        && schemaForPath?.(effectiveCurrent.path)?.type === 'markdown', getTableCellPosition: (path) => tableCellPositionsRef.current[path], setTableCellPosition: (path, cell) => {
-                        tableCellPositionsRef.current[path] = cell;
-                    }, renderMarkdown: renderMarkdown, uiSize: uiSize, fillHeight: fillHeight, atomicEditing: atomicEditing, schemaForPath: schemaForPath, renderExternalWidget: renderExternalWidget, onVisibleSourcePathsChange: reportVisibleSourcePaths }) })] }));
+                    : 'flex-1 overflow-auto overscroll-x-none', onScroll: captureScrollPosition, children: _jsx("div", { className: currentNode === null || typeof currentNode !== 'object' ? 'mx-auto w-full max-w-2xl px-3 pb-6 sm:px-6' : 'contents', children: _jsx(GeneralJsonNodeView, { node: currentNode, navigateTo: navigateTo, filePath: filePath, currentPathKey: currentPathKey, currentJsonPath: effectiveCurrent.path, currentLabel: effectiveCurrent.key, renderAsMarkdown: typeof currentNode === 'string'
+                            && schemaForPath?.(effectiveCurrent.path)?.type === 'markdown', getTableCellPosition: (path) => tableCellPositionsRef.current[path], setTableCellPosition: (path, cell) => {
+                            tableCellPositionsRef.current[path] = cell;
+                        }, renderMarkdown: renderMarkdown, uiSize: uiSize, fillHeight: fillHeight, atomicEditing: atomicEditing, schemaForPath: schemaForPath, renderExternalWidget: renderExternalWidget, onVisibleSourcePathsChange: reportVisibleSourcePaths }) }) })] }));
 }

package/dist/structured-data/atomic-value-editor.d.ts

@@ -21,7 +21,7 @@ export declare function EditValueAction({ disabled, label, onClick, }: {
     onClick: () => void;
 }): import("react").JSX.Element;
 export declare function AtomicValueEditor({ actions, children, className, editorClassName, enterKey, label, multiline, onCommit, preserveLayout, saving, value, }: AtomicValueEditorProps): import("react").JSX.Element;
-export declare function StructuredValueCellFrame({ activationDisabled, activationLabel, activationRole, actions, children, leading, className, onActivate, overlayActions, }: {
+export declare function StructuredValueCellFrame({ activationDisabled, activationLabel, activationRole, actions, children, leading, className, onActivate, overlayActions, highlightOnHover, }: {
     activationDisabled?: boolean;
     activationLabel?: string;
     /** Use a group when rendered content contains its own interactive descendants. */
@@ -32,5 +32,6 @@ export declare function StructuredValueCellFrame({ activationDisabled, activatio
     className?: string;
     onActivate?: () => void;
     overlayActions?: boolean;
+    highlightOnHover?: boolean;
 }): import("react").JSX.Element;
 export {};

package/dist/structured-data/atomic-value-editor.js

@@ -52,7 +52,7 @@ export function AtomicValueEditor({ actions, children, className, editorClassNam
         ? _jsx("div", { ref: frameRef, "data-id": "atomic-value-editor-frame", className: "h-full min-w-0", style: editorMinHeight ? { minHeight: editorMinHeight } : undefined, children: display })
         : display;
 }
-export function StructuredValueCellFrame({ activationDisabled = false, activationLabel, activationRole = 'button', actions, children, leading, className, onActivate, overlayActions = false, }) {
+export function StructuredValueCellFrame({ activationDisabled = false, activationLabel, activationRole = 'button', actions, children, leading, className, onActivate, overlayActions = false, highlightOnHover = true, }) {
     const fillCell = useContext(StructuredCellFillContext);
     // An editable cell advertises itself with a primary-tinted hover — the
     // neutral accent tone sits on white/card surfaces where it is barely
@@ -64,13 +64,13 @@ export function StructuredValueCellFrame({ activationDisabled = false, activatio
         // Table values use the entire width up to the column divider. The
         // right edge is deliberately flush so clipped content makes the
         // boundary of its column unmistakable.
-        fillCell ? 'h-full items-center rounded-none py-2 pl-3 pr-0' : 'rounded-md px-1.5', onActivate && !activationDisabled
+        fillCell ? 'h-full items-center rounded-none py-2 pl-3 pr-0' : 'rounded-md px-1.5', highlightOnHover && (onActivate && !activationDisabled
             ? fillCell
                 ? 'before:pointer-events-none before:absolute before:inset-y-0 before:-left-5 before:right-0 hover:before:bg-primary/10 dark:hover:before:bg-primary/25'
                 : 'hover:bg-primary/10 dark:hover:bg-primary/25'
             : fillCell
                 ? 'before:pointer-events-none before:absolute before:inset-y-0 before:-left-5 before:right-0 hover:before:bg-accent/70'
-                : 'hover:bg-accent/70', fillCell && onActivate && !activationDisabled && 'cursor-text', className), onClick: (event) => {
+                : 'hover:bg-accent/70'), fillCell && onActivate && !activationDisabled && 'cursor-text', className), onClick: (event) => {
             // The table cell's padding belongs to the same action as its value.
             // Child actions keep their own handlers and must not activate twice.
             if (fillCell && event.target === event.currentTarget && !activationDisabled)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@script-it/json-views-react",
-  "version": "2026.10.27",
+  "version": "2026.11.42",
   "description": "Extensible React viewer and editor for JSON Views",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@script-it/json-views-core": "2026.10.27",
+    "@script-it/json-views-core": "2026.11.42",
     "@tanstack/react-virtual": "3.14.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -60,7 +60,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "typescript": "^5.9.3",
-    "vitest": "4.1.11"
+    "vitest": "4.1.12"
   },
   "repository": {
     "type": "git",