@script-it/json-views-react 2026.10.29 → 2026.11.44

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/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.29",
+  "version": "2026.11.44",
   "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.29",
+    "@script-it/json-views-core": "2026.11.44",
     "@tanstack/react-virtual": "3.14.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",