canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/fields/MarkdownField.js

@@ -1,32 +1,100 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Suspense, useId, useRef, useCallback, useEffect, useState } from 'react';
-import { Alert, Button, Group, Text, Textarea } from '@mantine/core';
+import React, { Suspense, useId, useRef, useCallback, useEffect, useReducer, useState } from 'react';
+import { Alert, Box, Button, Text, Textarea, useComputedColorScheme } from '@mantine/core';
 import { InsertEntryLink } from './entry-link/index.js';
+import { MARKDOWN_EXPORT_OPTIONS } from './markdown-export-options.js';
+import { createMarkdownFidelityPlugin } from './markdown-fidelity-visitors.js';
 import { MdxImageDialog } from './MdxImageDialog.js';
-import { useApiClient } from '../context/index.js';
+import { createMdxJsxPlugins } from './mdx-jsx-support.js';
+import { useApiClient, useAssetContext } from '../context/index.js';
+import { editorImageSrc } from '../media/editor-image-src.js';
 import { uploadAsset } from '../media/upload-asset.js';
+import { useFieldCommentControl } from '../comments/field-comment-context.js';
 import { FieldDescription, groupDescriptionProps } from './FieldDescription.js';
-const MDXEditorLazy = React.lazy(async () => {
-    const [{ MDXEditor, headingsPlugin, listsPlugin, quotePlugin, thematicBreakPlugin, markdownShortcutPlugin, linkPlugin, linkDialogPlugin, imagePlugin, tablePlugin, toolbarPlugin, codeBlockPlugin, codeMirrorPlugin, BoldItalicUnderlineToggles, BlockTypeSelect, ListsToggle, CreateLink, InsertImage, InsertTable, InsertThematicBreak, CodeToggle, InsertCodeBlock, UndoRedo, Separator, insertMarkdown$, usePublisher, useCellValues, saveImage$, closeImageDialog$, imageDialogState$, }, { mdxJsxPlugins },] = await Promise.all([import('@mdxeditor/editor'), import('./mdx-jsx-support.js')]);
-    const EntryLinkToolbarButton = () => {
+import { FieldLabel } from './FieldLabel.js';
+import { watchToolbarWrap } from './toolbar-wrap.js';
+import { EditorErrorBoundary } from '../components/EditorErrorBoundary.js';
+import { getErrorMessage, sanitizeErrorMessage } from '../../utils/error.js';
+import { forgetRichTextFailure, recallRichTextFailure, rememberRichTextFailure, } from './rich-text-failures.js';
+/** Text formats MDXEditor exports as an HTML tag, with that tag. */
+const TAG_FORMATS = [
+    ['underline', 'u'],
+    ['subscript', 'sub'],
+    ['superscript', 'sup'],
+];
+/** @internal Exported for the round-trip corpus test, which drives exactly this editor. */
+export const MDXEditorLazy = React.lazy(async () => {
+    // MDXEditor's only code import (theme.tsx loads its CSS); see mdx-jsx-support for why.
+    const mdx = await import('@mdxeditor/editor');
+    const { MDXEditor, headingsPlugin, listsPlugin, quotePlugin, thematicBreakPlugin, markdownShortcutPlugin, linkPlugin, linkDialogPlugin, imagePlugin, tablePlugin, toolbarPlugin, codeBlockPlugin, codeMirrorPlugin, BoldItalicUnderlineToggles, BlockTypeSelect, ListsToggle, CreateLink, InsertImage, InsertTable, InsertThematicBreak, CodeToggle, InsertCodeBlock, UndoRedo, Separator, insertMarkdown$, usePublisher, useCellValues, saveImage$, closeImageDialog$, imageDialogState$, activeEditor$, $isImageNode, createRootEditorSubscription$, realmPlugin, Cell, 
+    // MDXEditor's own lexical instance: lexical keeps the active editor state per module, so
+    // a separately resolved copy would throw inside this editor's `read()`.
+    lexical: { $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, FORMAT_TEXT_COMMAND, SET_TEXT_FORMAT_COMMAND, mergeRegister, }, } = mdx;
+    const mdxJsxPlugins = createMdxJsxPlugins(mdx);
+    /** The text formats whose tag the field refuses, kept current as props change. */
+    const refusedFormats$ = Cell([]);
+    const refusedFormats = (htmlTags) => TAG_FORMATS.filter(([, tag]) => htmlTags?.has(tag) === false).map(([format]) => format);
+    /**
+     * Refuses adding a format whose tag the field refuses (toolbar, Cmd+U) and lets removing one
+     * through: Lexical toggles a range off when its selection has the format, and passes a nested
+     * editor's input commands up to the root's. Content is never rewritten: a stored tag stays for
+     * the server's unchanged-field rule, and a pasted one reaches the server, which refuses it.
+     */
+    const tagFormatGuardPlugin = realmPlugin({
+        init(realm, params) {
+            realm.pub(refusedFormats$, refusedFormats(params?.htmlTags));
+            const refused = (format) => realm.getValue(refusedFormats$).includes(format);
+            const guard = (editor) => mergeRegister(editor.registerCommand(FORMAT_TEXT_COMMAND, (format, fromEditor) => {
+                if (!refused(format))
+                    return false;
+                // Lexical formats the dispatching editor's pending selection; inside the root's
+                // update, where this runs for a nested command, `$getSelection()` is the root's.
+                const selection = fromEditor.read('pending', () => $getSelection());
+                return !($isRangeSelection(selection) && selection.hasFormat(format));
+            }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(SET_TEXT_FORMAT_COMMAND, (formats) => Object.entries(formats).some(([format, on]) => on === true && refused(format)), COMMAND_PRIORITY_CRITICAL));
+            realm.pub(createRootEditorSubscription$, guard);
+        },
+        update(realm, params) {
+            realm.pub(refusedFormats$, refusedFormats(params?.htmlTags));
+        },
+    });
+    const markdownFidelityPlugin = createMarkdownFidelityPlugin(mdx);
+    const EntryLinkToolbarButton = ({ onInsert }) => {
         const insertMarkdown = usePublisher(insertMarkdown$);
-        return _jsx(InsertEntryLink, { onInsert: insertMarkdown });
+        return (_jsx(InsertEntryLink, { onInsert: (markdown) => onInsert(() => insertMarkdown(markdown), markdown) }));
     };
     /**
-     * Bridges mdxeditor's realm cells (reachable only once this lazy chunk has
-     * loaded) into MdxImageDialog's plain-props interface, so that component
-     * never imports `@mdxeditor/editor` at runtime — same pattern as
-     * `EntryLinkToolbarButton` above.
+     * Bridges mdxeditor's realm cells (reachable only once this lazy chunk has loaded) into
+     * MdxImageDialog's plain-props interface, so that component never imports `@mdxeditor/editor`
+     * at runtime — same pattern as `EntryLinkToolbarButton` above.
      */
     const MdxImageDialogBridge = () => {
-        const [state] = useCellValues(imageDialogState$);
+        const [state, editor] = useCellValues(imageDialogState$, activeEditor$);
         const saveImage = usePublisher(saveImage$);
         const closeImageDialog = usePublisher(closeImageDialog$);
-        return _jsx(MdxImageDialog, { state: state, onSave: saveImage, onClose: closeImageDialog });
+        // With an `imagePreviewHandler`, MDXEditor seeds an edit dialog with the src the node was
+        // first rendered with, not its current one, so saving after a src change would revert it.
+        // Read the node's live src from the same editor `saveImage$` writes through.
+        const liveState = React.useMemo(() => {
+            if (state.type !== 'editing' || !editor)
+                return state;
+            const src = editor.getEditorState().read(() => {
+                const node = $getNodeByKey(state.nodeKey);
+                return $isImageNode(node) ? node.getSrc() : undefined;
+            });
+            return src === undefined
+                ? state
+                : { ...state, initialValues: { ...state.initialValues, src } };
+        }, [state, editor]);
+        return _jsx(MdxImageDialog, { state: liveState, onSave: saveImage, onClose: closeImageDialog });
     };
-    const WrappedEditor = ({ markdown, onChange, onError, editorRef, imageUploadHandler }) => {
-        return (_jsx(MDXEditor, { ref: editorRef, markdown: markdown, onChange: onChange, onError: onError, plugins: [
+    const WrappedEditor = ({ markdown, onChange, onError, onInsert, editorRef, imageUploadHandler, imagePreviewHandler, htmlTags, readOnly, contentLabel, dark, }) => {
+        const underline = htmlTags?.has('u') ?? true;
+        const translation = (key, defaultValue, interpolations = {}) => key === 'contentArea.editableMarkdown' && contentLabel
+            ? contentLabel
+            : Object.entries(interpolations).reduce((text, [name, v]) => text.replaceAll(`{{${name}}}`, String(v)), defaultValue);
+        return (_jsx(MDXEditor, { ref: editorRef, className: dark ? 'dark-theme' : undefined, markdown: markdown, readOnly: readOnly, translation: translation, onChange: onChange, onError: onError, toMarkdownOptions: MARKDOWN_EXPORT_OPTIONS, plugins: [
                 headingsPlugin(),
                 listsPlugin(),
                 quotePlugin(),
@@ -34,9 +102,17 @@ const MDXEditorLazy = React.lazy(async () => {
                 markdownShortcutPlugin(),
                 linkPlugin(),
                 linkDialogPlugin(),
-                imagePlugin({ imageUploadHandler, ImageDialog: MdxImageDialogBridge }),
+                imagePlugin({
+                    imageUploadHandler,
+                    imagePreviewHandler,
+                    ImageDialog: MdxImageDialogBridge,
+                    // A resized image exports as `<img>`.
+                    disableImageResize: htmlTags?.has('img') === false,
+                }),
                 tablePlugin(),
                 ...mdxJsxPlugins(),
+                markdownFidelityPlugin(),
+                tagFormatGuardPlugin({ htmlTags }),
                 codeBlockPlugin({ defaultCodeBlockLanguage: '' }),
                 codeMirrorPlugin({
                     codeBlockLanguages: {
@@ -54,25 +130,46 @@ const MDXEditorLazy = React.lazy(async () => {
                         markdown: 'Markdown',
                     },
                 }),
-                toolbarPlugin({
-                    toolbarContents: () => (_jsxs(_Fragment, { children: [_jsx(UndoRedo, {}), _jsx(Separator, {}), _jsx(BoldItalicUnderlineToggles, {}), _jsx(CodeToggle, {}), _jsx(Separator, {}), _jsx(BlockTypeSelect, {}), _jsx(Separator, {}), _jsx(ListsToggle, {}), _jsx(Separator, {}), _jsx(CreateLink, {}), _jsx(EntryLinkToolbarButton, {}), _jsx(InsertImage, {}), _jsx(InsertTable, {}), _jsx(InsertThematicBreak, {}), _jsx(InsertCodeBlock, {})] })),
-                }),
+                // MDXEditor's readOnly blocks only the toolbar's pointer events; its buttons still take the
+                // keyboard, and their commands edit the document.
+                // It reads plugins once, so the editor's key remounts it when `readOnly` changes.
+                ...(readOnly
+                    ? []
+                    : [
+                        toolbarPlugin({
+                            toolbarClassName: 'canopy-mdx-toolbar',
+                            toolbarContents: () => (_jsxs(_Fragment, { children: [_jsx(UndoRedo, {}), _jsx(Separator, {}), _jsx(BoldItalicUnderlineToggles, { options: underline ? undefined : ['Bold', 'Italic'] }), _jsx(CodeToggle, {}), _jsx(Separator, {}), _jsx(BlockTypeSelect, {}), _jsx(Separator, {}), _jsx(ListsToggle, {}), _jsx(Separator, {}), _jsx(CreateLink, {}), _jsx(EntryLinkToolbarButton, { onInsert: onInsert }), _jsx(InsertImage, {}), _jsx(InsertTable, {}), _jsx(InsertThematicBreak, {}), _jsx(InsertCodeBlock, {})] })),
+                        }),
+                    ]),
             ], contentEditableClassName: "canopy-mdx-content" }));
     };
     return { default: WrappedEditor };
 });
 const editorWrapperStyle = {
-    background: '#fff',
-    border: '1px solid var(--mantine-color-gray-4, #ced4da)',
+    background: 'var(--mantine-color-body)',
+    border: '1px solid var(--canopy-input-border)',
     borderRadius: 'var(--mantine-radius-sm, 4px)',
     overflow: 'hidden',
 };
 /**
  * Mantine's global CSS reset strips styles from semantic HTML elements.
- * Restore them inside the MDXEditor content area so formatting is visible.
+ * Restore them inside the MDXEditor content area so formatting is visible. The toolbar wraps
+ * rather than scrolling sideways (`toolbar-wrap.ts` hides a separator left at a row's edge).
+ * MDXEditor's dark theme leaves its page background white, so editor and popups take tokens; in
+ * dark mode its drop shadow vanishes over a subtle panel, so popups take a dropdown's border.
+ * Its popups portal into `<body>` at z-index 2, under the editor shell; they take the layer between
+ * the shell and Mantine's drawers and modals, so a drawer or modal still covers them.
  */
 const EditorContentStyles = () => (_jsx("style", { children: `
     .canopy-mdx-content { min-height: 120px; padding: 8px 12px; }
+    .mdxeditor .canopy-mdx-toolbar { flex-wrap: wrap; overflow-x: visible; }
+    .mdxeditor { --basePageBg: var(--mantine-color-body); }
+    .mdxeditor-popup-container { --basePageBg: var(--canopy-surface-subtle); }
+    body > .mdxeditor-popup-container { z-index: calc(var(--mantine-z-index-modal) - 1); }
+    [data-mantine-color-scheme='dark'] .mdxeditor-popup-container :is([data-radix-popper-content-wrapper] > *, [role='dialog']) {
+      border: 1px solid var(--mantine-color-default-border);
+    }
+    .canopy-mdx-toolbar [data-placeholder] > span:first-child { color: var(--mantine-color-placeholder); }
     .canopy-mdx-content ul { list-style-type: disc; padding-left: 1.5em; margin: 0.5em 0; }
     .canopy-mdx-content ol { list-style-type: decimal; padding-left: 1.5em; margin: 0.5em 0; }
     .canopy-mdx-content ul ul { list-style-type: circle; }
@@ -85,17 +182,17 @@ const EditorContentStyles = () => (_jsx("style", { children: `
     .canopy-mdx-content h5 { font-size: 0.83em; font-weight: 600; margin: 1.67em 0; }
     .canopy-mdx-content h6 { font-size: 0.67em; font-weight: 600; margin: 2.33em 0; }
     .canopy-mdx-content blockquote {
-      border-left: 3px solid var(--mantine-color-gray-4, #ced4da);
+      border-left: 3px solid var(--mantine-color-default-border);
       padding-left: 1em;
       margin: 0.5em 0;
-      color: var(--mantine-color-gray-7, #495057);
+      color: inherit;
     }
-    .canopy-mdx-content hr { border: none; border-top: 1px solid var(--mantine-color-gray-4, #ced4da); margin: 1em 0; }
+    .canopy-mdx-content hr { border: none; border-top: 1px solid var(--mantine-color-default-border); margin: 1em 0; }
     .canopy-mdx-content p { margin: 0.75em 0; }
-    .canopy-mdx-content a { color: var(--mantine-color-blue-6, #228be6); text-decoration: underline; }
+    .canopy-mdx-content a { color: var(--mantine-color-anchor); text-decoration: underline; }
     .canopy-mdx-content img { max-width: 100%; height: auto; }
     .canopy-mdx-content .canopy-mdx-jsx {
-      border: 1px dashed var(--mantine-color-gray-4, #ced4da);
+      border: 1px dashed var(--mantine-color-default-border);
       border-radius: 4px;
       padding: 2px 8px;
       margin: 0.5em 0;
@@ -104,18 +201,50 @@ const EditorContentStyles = () => (_jsx("style", { children: `
     .canopy-mdx-content .canopy-mdx-jsx-tag {
       font-family: var(--mantine-font-family-monospace, monospace);
       font-size: 0.8em;
-      color: var(--mantine-color-gray-6, #868e96);
+      color: var(--mantine-color-dimmed);
     }
   ` }));
-const FallbackTextarea = ({ value, onChange, }) => (_jsx(Textarea, { value: value, onChange: (e) => onChange(e.currentTarget.value), placeholder: "Loading markdown editor...", autosize: true, minRows: 6, size: "sm", readOnly: true }));
-export const MarkdownField = ({ id, label, description, value, onChange, dataCanopyField, }) => {
+const FallbackTextarea = ({ value }) => (_jsx(Textarea, { value: value, placeholder: "Loading markdown editor...", autosize: true, minRows: 6, size: "sm", readOnly: true }));
+/** The textarea over a markdown value; `failure` is why the rich-text editor could not open it. */
+export const MarkdownSourceEditor = ({ label, value, onChange, failure, readOnly = false }) => (_jsxs(_Fragment, { children: [failure !== undefined && (_jsxs(Alert, { color: "yellow", variant: "light", mb: "xs", "data-testid": "markdown-source-fallback", children: [_jsx(Text, { size: "sm", children: readOnly
+                        ? "This content couldn't be opened in the visual editor, so it is shown as text."
+                        : "This content couldn't be opened in the visual editor. You can still edit the text and save." }), _jsx(Text, { size: "xs", c: "dimmed", mt: 4, children: failure })] })), _jsx(Textarea, { value: value, readOnly: readOnly, onChange: (e) => {
+                if (!readOnly)
+                    onChange(e.currentTarget.value);
+            }, "aria-label": label ? `${label} (source)` : 'Markdown source', "data-testid": "markdown-source-editor", autosize: true, minRows: 10, size: "sm", styles: { input: { fontFamily: 'var(--mantine-font-family-monospace)' } } })] }));
+export const MarkdownField = ({ id, label, description, value, onChange, dataCanopyField, htmlTags, readOnly = false, }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
+    const commentControl = useFieldCommentControl(dataCanopyField);
     const editorRef = useRef(null);
     const lastExternalValue = useRef(value);
     const lastRejectedSource = useRef(null);
+    const pendingInsert = useRef(null);
     const apiClient = useApiClient();
-    const [mode, setMode] = useState({ kind: 'rich' });
+    const [sourceChosen, setSourceChosen] = useState(false);
+    // Text this field's author edited in the fallback, which stays in source with the reason.
+    const [editedFallback, setEditedFallback] = useState(null);
+    const [, rerender] = useReducer((n) => n + 1, 0);
+    const [rejectedInsert, setRejectedInsert] = useState(null);
+    const [editorGeneration, setEditorGeneration] = useState(0);
+    const rootRef = useRef(null);
+    const dark = useComputedColorScheme('light') === 'dark';
+    useEffect(() => {
+        const root = rootRef.current;
+        return root ? watchToolbarWrap(root, '.canopy-mdx-toolbar') : undefined;
+    }, []);
+    // A read-only content area stays reachable by keyboard, like the read-only inputs beside it.
+    // Lexical drops it from the tab order once it is not editable, and mounts it after this runs.
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!readOnly || !root)
+            return;
+        const focusable = () => root.querySelector('.canopy-mdx-content')?.setAttribute('tabindex', '0');
+        focusable();
+        const observer = new MutationObserver(focusable);
+        observer.observe(root, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [readOnly]);
     // Drives both MDXEditor's drag/drop/paste upload and the custom image
     // dialog's Upload tab via the same presign/finalize-or-proxied pipeline
     // (media/upload-asset.ts). Memoized on the API client (itself memoized by
@@ -124,6 +253,9 @@ export const MarkdownField = ({ id, label, description, value, onChange, dataCan
         const asset = await uploadAsset(apiClient, file);
         return asset.src;
     }, [apiClient]);
+    // MDXEditor displays each body image at whatever this resolves; the markdown keeps its src.
+    const { baseUrl: assetBaseUrl } = useAssetContext();
+    const imagePreviewHandler = useCallback(async (src) => editorImageSrc(src, assetBaseUrl), [assetBaseUrl]);
     // Sync external value changes into the editor, recording them even while none
     // is mounted, so a later return to an earlier value is still a change.
     useEffect(() => {
@@ -133,34 +265,79 @@ export const MarkdownField = ({ id, label, description, value, onChange, dataCan
         editorRef.current?.setMarkdown(value);
     }, [value]);
     const emitChange = useCallback((newValue) => {
+        if (readOnly)
+            return;
         lastExternalValue.current = newValue;
+        setRejectedInsert(null);
         onChange(newValue);
-    }, [onChange]);
+    }, [onChange, readOnly]);
     // Dropped: MDXEditor's re-serialization of the document it was mounted with
     // (flagged `initialMarkdownNormalize`; it would mark an unedited entry
-    // modified), and inserted markdown it rejected, which it reports as the
-    // whole document.
+    // modified), and inserted markdown it rejected, which it emits as if that
+    // snippet were the whole document.
     const handleEditorChange = useCallback((newValue, initialMarkdownNormalize) => {
         if (initialMarkdownNormalize || newValue === lastRejectedSource.current)
             return;
         emitChange(newValue);
     }, [emitChange]);
+    // MDXEditor reports a rejected insert synchronously, inside insertMarkdown
+    // (with no selection it imports nothing, and reports nothing).
+    const handleInsert = useCallback((insert, markdown) => {
+        pendingInsert.current = markdown;
+        try {
+            insert();
+        }
+        finally {
+            pendingInsert.current = null;
+        }
+    }, []);
+    // A value the rich-text editor failed on opens as source, whether MDXEditor rejected it or
+    // crashed rendering it; rich-text-failures.ts holds the record for the session. Text edited
+    // from there stays in source in this field only, so it marks no other field.
+    const failure = recallRichTextFailure(value) ??
+        (editedFallback?.value === value ? editedFallback.reason : undefined);
+    const showSource = sourceChosen || failure !== undefined;
     // MDXEditor can report the error while rendering (it imports as it is
-    // created), hence the microtask. The rejected document is this render's
-    // `value`: MDXEditor is created from it, and gets this handler again before
-    // the sync effect hands it a later value.
+    // created), hence the microtask. Any rejection outside an insert is the
+    // document, this render's `value`: MDXEditor is created from it, and gets
+    // this handler again before the sync effect hands it a later value. `source`
+    // can't identify it, because MDXEditor trims the document it mounts with.
+    // Either way MDXEditor emits no further edits until an import succeeds, so a
+    // rejected insert remounts it from the unchanged document.
     const handleEditorError = useCallback(({ error, source }) => {
         lastRejectedSource.current = source;
-        queueMicrotask(() => setMode({ kind: 'source', reason: error, failedValue: value }));
+        const isInsert = pendingInsert.current !== null && source === pendingInsert.current;
+        queueMicrotask(() => {
+            if (isInsert) {
+                setRejectedInsert(error);
+                setEditorGeneration((n) => n + 1);
+            }
+            else {
+                rememberRichTextFailure(value, error);
+                rerender();
+            }
+        });
+    }, [value]);
+    const handleEditorCrash = useCallback(({ error }) => {
+        rememberRichTextFailure(value, sanitizeErrorMessage(getErrorMessage(error)));
+        rerender();
     }, [value]);
     // Edits in the fallback stay in it: the edited text is no more likely to load.
-    const handleSourceChange = useCallback((newValue) => {
-        setMode((current) => current.kind === 'source' && current.reason !== null
-            ? { ...current, failedValue: newValue }
-            : current);
+    const handleSourceChange = (newValue) => {
+        if (failure !== undefined)
+            setEditedFallback({ value: newValue, reason: failure });
         emitChange(newValue);
-    }, [emitChange]);
-    // A fallback holds only for the value MDXEditor rejected.
-    const showSource = mode.kind === 'source' && (mode.reason === null || mode.failedValue === value);
-    return (_jsxs("div", { id: inputId, "data-canopy-field": dataCanopyField, className: "canopy-markdown-field", ...groupDescriptionProps(inputId, description), children: [_jsxs(Group, { justify: "space-between", align: "flex-end", mb: 4, wrap: "nowrap", children: [label ? (_jsx(Text, { size: "sm", fw: 500, children: label })) : (_jsx("span", {})), _jsx(Button, { variant: "subtle", size: "compact-xs", "data-testid": "markdown-mode-toggle", onClick: () => setMode(showSource ? { kind: 'rich' } : { kind: 'source', reason: null }), children: showSource ? 'Rich text' : 'Edit source' })] }), _jsx(FieldDescription, { baseId: inputId, description: description }), _jsx(EditorContentStyles, {}), showSource ? (_jsxs(_Fragment, { children: [mode.kind === 'source' && mode.reason !== null && (_jsxs(Alert, { color: "yellow", variant: "light", mb: "xs", "data-testid": "markdown-source-fallback", children: [_jsx(Text, { size: "sm", children: "The rich-text editor can't show this content, so it is open as source. Your edits here are saved as usual." }), _jsx(Text, { size: "xs", c: "dimmed", mt: 4, children: mode.reason })] })), _jsx(Textarea, { value: value, onChange: (e) => handleSourceChange(e.currentTarget.value), "aria-label": label ? `${label} (source)` : 'Markdown source', "data-testid": "markdown-source-editor", autosize: true, minRows: 10, size: "sm", styles: { input: { fontFamily: 'var(--mantine-font-family-monospace)' } } })] })) : (_jsx("div", { style: editorWrapperStyle, children: _jsx(Suspense, { fallback: _jsx(FallbackTextarea, { value: value, onChange: onChange }), children: _jsx(MDXEditorLazy, { markdown: value, onChange: handleEditorChange, onError: handleEditorError, editorRef: editorRef, imageUploadHandler: imageUploadHandler }) }) }))] }));
+    };
+    const toggleMode = () => {
+        if (!showSource) {
+            setSourceChosen(true);
+            return;
+        }
+        // Asking for rich text tries the editor again on a value it failed on.
+        forgetRichTextFailure(value);
+        setEditedFallback(null);
+        setSourceChosen(false);
+        rerender();
+    };
+    return (_jsxs("div", { ref: rootRef, id: inputId, "data-canopy-field": dataCanopyField, className: "canopy-markdown-field", ...groupDescriptionProps(inputId, description), children: [_jsx(Box, { mb: 4, children: _jsx(FieldLabel, { label: label, commentControl: commentControl, actions: !readOnly && (_jsx(Button, { variant: "subtle", size: "compact-xs", "data-testid": "markdown-mode-toggle", onClick: toggleMode, children: showSource ? 'Rich text' : 'Edit source' })) }) }), _jsx(FieldDescription, { baseId: inputId, description: description }), _jsx(EditorContentStyles, {}), showSource ? (_jsx(MarkdownSourceEditor, { label: label, value: value, onChange: handleSourceChange, failure: failure, readOnly: readOnly })) : (_jsxs("div", { style: editorWrapperStyle, children: [rejectedInsert !== null && (_jsxs(Alert, { color: "yellow", variant: "light", mb: "xs", withCloseButton: true, onClose: () => setRejectedInsert(null), "data-testid": "markdown-insert-rejected", children: [_jsx(Text, { size: "sm", children: "The rich-text editor can't show what was inserted, so nothing was added." }), _jsx(Text, { size: "xs", c: "dimmed", mt: 4, children: rejectedInsert })] })), _jsx(EditorErrorBoundary, { context: { boundary: 'rich-text', fieldPath: dataCanopyField }, fallback: () => null, onCaught: handleEditorCrash, children: _jsx(Suspense, { fallback: _jsx(FallbackTextarea, { value: value }), children: _jsx(MDXEditorLazy, { markdown: value, onChange: handleEditorChange, onError: handleEditorError, onInsert: handleInsert, editorRef: editorRef, imageUploadHandler: imageUploadHandler, imagePreviewHandler: imagePreviewHandler, htmlTags: htmlTags, readOnly: readOnly, contentLabel: label, dark: dark }, `${editorGeneration}-${readOnly}`) }) })] }))] }));
 };

package/dist/editor/fields/MdxImageDialog.js

@@ -67,5 +67,5 @@ export const MdxImageDialog = ({ state, onSave, onClose }) => {
                         if (next)
                             setTab(next);
                     }, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "upload", "data-testid": "mdx-image-dialog-tab-upload", children: "Upload" }), _jsx(Tabs.Tab, { value: "library", "data-testid": "mdx-image-dialog-tab-library", children: "From library" }), _jsx(Tabs.Tab, { value: "url", "data-testid": "mdx-image-dialog-tab-url", children: "By URL" })] }), _jsx(Tabs.Panel, { value: "upload", pt: "sm", children: _jsxs(Stack, { gap: "xs", children: [_jsx(Dropzone, { onDrop: (files) => void handleDrop(files), onReject: handleReject, maxSize: MAX_UPLOAD_BYTES, accept: ACCEPTED_IMAGE_MIME_TYPES, loading: upload.uploading, multiple: false, "data-testid": "mdx-image-dialog-dropzone", children: _jsxs(Group, { justify: "center", gap: "xs", py: "sm", style: { pointerEvents: 'none' }, children: [_jsx(IconUpload, { size: 20 }), _jsx(Text, { size: "sm", children: "Drop an image here, or click to browse" })] }) }), upload.uploading &&
-                                        (upload.progress !== null ? (_jsx(Progress, { value: upload.progress * 100, size: "sm" })) : (_jsx(Progress, { value: 100, size: "sm", animated: true }))), (upload.error || dropError) && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", children: upload.error || dropError }))] }) }), _jsx(Tabs.Panel, { value: "library", pt: "sm", children: _jsx("div", { style: { height: LIBRARY_PANEL_HEIGHT }, children: _jsx(MediaLibraryBody, { opened: tab === 'library', mode: "picker", onSelect: handlePickFromLibrary }) }) }), _jsx(Tabs.Panel, { value: "url", pt: "sm", children: _jsxs(Stack, { gap: "xs", children: [_jsx(TextInput, { label: "Image URL", placeholder: "https://example.com/image.png", value: urlValue, onChange: (event) => setUrlValue(event.currentTarget.value), "data-testid": "mdx-image-dialog-url" }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { onClick: handleUrlSubmit, disabled: !urlValue.trim(), "data-testid": "mdx-image-dialog-url-submit", children: "Insert" }) })] }) })] }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }) })] }) }));
+                                        (upload.progress !== null ? (_jsx(Progress, { value: upload.progress * 100, size: "sm" })) : (_jsx(Progress, { value: 100, size: "sm", animated: true }))), (upload.error || dropError) && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", children: upload.error || dropError }))] }) }), _jsx(Tabs.Panel, { value: "library", pt: "sm", children: _jsx("div", { style: { height: LIBRARY_PANEL_HEIGHT }, children: _jsx(MediaLibraryBody, { opened: tab === 'library', mode: "picker", onSelect: handlePickFromLibrary }) }) }), _jsx(Tabs.Panel, { value: "url", pt: "sm", children: _jsxs(Stack, { gap: "xs", children: [_jsx(TextInput, { label: "Image URL", placeholder: "https://example.com/image.png", value: urlValue, onChange: (event) => setUrlValue(event.currentTarget.value), "data-testid": "mdx-image-dialog-url" }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { size: "sm", onClick: handleUrlSubmit, disabled: !urlValue.trim(), "data-testid": "mdx-image-dialog-url-submit", children: "Insert" }) })] }) })] }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "default", onClick: onClose, children: "Cancel" }) })] }) }));
 };

package/dist/editor/fields/NumberField.d.ts

@@ -6,6 +6,8 @@ export interface NumberFieldProps {
     value: number | undefined;
     onChange: (value: number | undefined) => void;
     dataCanopyField?: string;
+    /** Shows the value without accepting edits. */
+    readOnly?: boolean;
 }
 /**
  * Editor for `type: 'number'` fields.

package/dist/editor/fields/NumberField.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId, useState } from 'react';
 import { NumberInput } from '@mantine/core';
+import { LabelledInput } from './FieldLabel.js';
 /**
  * The numeric meaning of whatever Mantine last reported, or `undefined` for
  * "not filled in" / not yet a number (`''`, a lone `'-'`).
@@ -27,15 +28,17 @@ const toNumericValue = (raw) => {
  * would silently store `0.5` after the second keystroke. See
  * NumberField.test.tsx's keystroke matrix.
  */
-export const NumberField = ({ id, label, description, value, onChange, dataCanopyField, }) => {
+export const NumberField = ({ id, label, description, value, onChange, dataCanopyField, readOnly = false, }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const [inputValue, setInputValue] = useState(value ?? '');
     // Shows the in-progress text only while it still matches the parent's
     // value; once the parent's value diverges (load, discard, reload), that value wins.
     const displayValue = toNumericValue(inputValue) === value ? inputValue : (value ?? '');
-    return (_jsx(NumberInput, { id: inputId, label: label, description: description, value: displayValue, size: "sm", onChange: (next) => {
-            setInputValue(next);
-            onChange(toNumericValue(next));
-        }, "data-canopy-field": dataCanopyField }));
+    return (_jsx(LabelledInput, { label: label, inputId: inputId, canopyPath: dataCanopyField, children: _jsx(NumberInput, { id: inputId, description: description, value: displayValue, size: "sm", readOnly: readOnly, onChange: (next) => {
+                if (readOnly)
+                    return;
+                setInputValue(next);
+                onChange(toNumericValue(next));
+            }, "data-canopy-field": dataCanopyField }) }));
 };

package/dist/editor/fields/NumberListField.d.ts

@@ -6,6 +6,8 @@ export interface NumberListFieldProps {
     value: number[];
     onChange: (value: number[]) => void;
     dataCanopyField?: string;
+    /** Shows the value without accepting edits. */
+    readOnly?: boolean;
 }
 /**
  * Editor for `type: 'number', list: true` fields.

package/dist/editor/fields/NumberListField.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId, useState } from 'react';
 import { TagsInput } from '@mantine/core';
+import { LabelledInput } from './FieldLabel.js';
 /**
  * A tag is a number only if it is non-blank AND parses finitely.
  *
@@ -27,23 +28,25 @@ const parseTag = (tag) => {
  * on Enter indistinguishably from being accepted, with nothing to tell a
  * typo from a broken field — so rejected text is named in the error slot.
  */
-export const NumberListField = ({ id, label, description, value, onChange, dataCanopyField, }) => {
+export const NumberListField = ({ id, label, description, value, onChange, dataCanopyField, readOnly = false, }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const [rejected, setRejected] = useState([]);
-    return (_jsx(TagsInput, { id: inputId, label: label, description: description, value: value.map(String), size: "sm", error: rejected.length > 0
-            ? `Not ${rejected.length === 1 ? 'a number' : 'numbers'}: ${rejected.join(', ')}`
-            : undefined, onChange: (next) => {
-            const parsed = [];
-            const dropped = [];
-            for (const tag of next) {
-                const num = parseTag(tag);
-                if (num === undefined)
-                    dropped.push(tag);
-                else
-                    parsed.push(num);
-            }
-            setRejected(dropped);
-            onChange(parsed);
-        }, splitChars: [], allowDuplicates: true, "data-canopy-field": dataCanopyField }));
+    return (_jsx(LabelledInput, { label: label, inputId: inputId, canopyPath: dataCanopyField, children: _jsx(TagsInput, { id: inputId, description: description, value: value.map(String), size: "sm", error: rejected.length > 0
+                ? `Not ${rejected.length === 1 ? 'a number' : 'numbers'}: ${rejected.join(', ')}`
+                : undefined, readOnly: readOnly, onChange: (next) => {
+                if (readOnly)
+                    return;
+                const parsed = [];
+                const dropped = [];
+                for (const tag of next) {
+                    const num = parseTag(tag);
+                    if (num === undefined)
+                        dropped.push(tag);
+                    else
+                        parsed.push(num);
+                }
+                setRejected(dropped);
+                onChange(parsed);
+            }, splitChars: [], allowDuplicates: true, "data-canopy-field": dataCanopyField }) }));
 };

package/dist/editor/fields/ObjectField.d.ts

@@ -3,6 +3,7 @@ import type { FieldConfig } from '../../config/index.js';
 export type RenderField = (field: FieldConfig, value: unknown, onChange: (v: unknown) => void, path: Array<string | number>) => React.ReactNode;
 export interface ObjectFieldProps {
     label?: string;
+    required?: boolean;
     description?: string;
     fields: FieldConfig[];
     value: Record<string, unknown> | undefined;
@@ -10,13 +11,7 @@ export interface ObjectFieldProps {
     renderField: RenderField;
     path: Array<string | number>;
     dataCanopyField?: string;
-    /**
-     * When set, shows a "Clear" affordance that resets this field to unset
-     * (`undefined`) — used by `FormRenderer.tsx`'s non-list `case 'object'` so
-     * a required child can't strand the field present-but-invalid with no way
-     * back to "not filled in". Omitted for object-list items, which remove via
-     * the list's own per-item button.
-     */
+    /** Set, shows a gray "Clear" resetting the field to `undefined`; omitted for list items. */
     onRemove?: () => void;
 }
 export declare const ObjectField: React.FC<ObjectFieldProps>;

package/dist/editor/fields/ObjectField.js

@@ -1,12 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
-import { Button, Group, Paper, Stack, Text } from '@mantine/core';
+import { Button, Paper, Stack } from '@mantine/core';
+import { isPlainRecord } from '../../validation/field-traversal.js';
 import { formatCanopyPath } from '../canopy-path.js';
-import { FieldDescription, groupDescriptionProps } from './FieldDescription.js';
-export const ObjectField = ({ label, description, fields, value, onChange, renderField, path, dataCanopyField, onRemove, }) => {
-    const current = value ?? {};
+import { useFieldCommentControl } from '../comments/field-comment-context.js';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { groupDescriptionProps } from './FieldDescription.js';
+import { FieldLabel } from './FieldLabel.js';
+export const ObjectField = ({ label, required, description, fields, value, onChange, renderField, path, dataCanopyField, onRemove, }) => {
+    const current = isPlainRecord(value) ? value : {};
     const descriptionBaseId = useId();
-    return (_jsx(Paper, { withBorder: true, radius: "md", p: "md", bg: "gray.0", "data-canopy-field": dataCanopyField ?? formatCanopyPath(path), shadow: "xs", ...groupDescriptionProps(descriptionBaseId, description), children: _jsxs(Stack, { gap: "sm", children: [(label || onRemove) && (_jsxs(Group, { justify: "space-between", children: [label && (_jsx(Text, { size: "xs", fw: 700, c: "neutral.8", children: label })), onRemove && (_jsx(Button, { size: "xs", variant: "subtle", color: "red", onClick: onRemove, children: "Clear" }))] })), _jsx(FieldDescription, { baseId: descriptionBaseId, description: description }), _jsx(Stack, { gap: "sm", children: fields.map((field) => {
+    const commentControl = useFieldCommentControl(dataCanopyField ?? formatCanopyPath(path));
+    return (_jsx(Paper, { withBorder: true, p: "md", bg: "var(--canopy-surface-subtle)", "data-canopy-field": dataCanopyField ?? formatCanopyPath(path), shadow: "xs", ...groupDescriptionProps(descriptionBaseId, description), role: "group", "aria-label": label, "data-removal-focus": true, tabIndex: -1, children: _jsxs(Stack, { gap: "sm", children: [_jsx(FieldLabel, { label: label, required: required, description: description, descriptionBaseId: descriptionBaseId, commentControl: commentControl, actions: onRemove && (_jsx(Button, { variant: "subtle", color: "gray", "aria-label": label ? `${EDITOR_ACTIONS.clear} "${label}"` : undefined, onClick: (event) => {
+                            // The button goes with the value, so focus moves to the object, not the page.
+                            const field = event.currentTarget.closest('[data-removal-focus]');
+                            onRemove();
+                            field?.focus();
+                        }, children: EDITOR_ACTIONS.clear })) }), _jsx(Stack, { gap: "sm", children: fields.map((field) => {
                         const fieldPath = [...path, field.name];
                         return (_jsx("div", { children: renderField(field, current[field.name], (next) => onChange({ ...current, [field.name]: next }), fieldPath) }, formatCanopyPath(fieldPath)));
                     }) })] }) }));

package/dist/editor/fields/ObjectListField.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { ObjectFieldConfig } from '../../config/index.js';
+import type { RenderField } from './ObjectField.js';
+export interface ObjectListFieldProps {
+    /** Base for the description's id. */
+    id: string;
+    label: string;
+    field: ObjectFieldConfig;
+    items: Record<string, unknown>[];
+    /** One stable React key per item, from `useListItemKeys`. */
+    itemKeys: string[];
+    onChange: (next: Record<string, unknown>[]) => void;
+    renderField: RenderField;
+    path: Array<string | number>;
+    /** The list's canopy path, which picks its comment control. */
+    canopyPath: string;
+    readOnly: boolean;
+    /** Names the entry being edited; another entry starts with the default rows open. */
+    resetKey: string;
+    /** True when a field inside item `index` has a validation error. */
+    hasErrors?: (index: number) => boolean;
+    /** Called after Remove takes item `index` out, so the caller can offer Undo. */
+    onRemoved?: (index: number, item: Record<string, unknown>) => void;
+}
+/**
+ * A `list: true` object field: one collapsible row per item, titled from the item's content,
+ * holding the item's fields directly rather than in a second card.
+ */
+export declare const ObjectListField: React.FC<ObjectListFieldProps>;