@tristan2828/ui-foundation 3.16.1 → 3.16.2

package/dist/components/app/milkdown-editor.js

@@ -249,6 +249,8 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         const changes = $prose(() => new Plugin({
             view: () => ({
                 update: (view, previous) => {
+                    if (cancelled)
+                        return;
                     setEditorState(view.state);
                     if (!view.state.doc.eq(previous.doc))
                         emit();
@@ -366,6 +368,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         });
         return () => {
             cancelled = true;
+            setEditorState(null);
             const editor = editorRef.current;
             editorRef.current = null;
             if (editor)
@@ -403,12 +406,18 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         setLinkBox(null);
         editorRef.current?.action((ctx) => ctx.get(editorViewCtx).focus());
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-slot": "rich-text-editor", className: cn('flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { state: editorState, readOnly: readOnly, controls: editableId, onFormat: runFormat })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-slot": "rich-text-editor", className: cn('flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { state: editorState, readOnly: readOnly, 
+                        // Only once the editor is made: until then the editable element,
+                        // and its id, aren't in the page (axe: aria-valid-attr-value).
+                        controls: editorState ? editableId : undefined, onFormat: runFormat })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
                         // Read-only text is muted; the toolbar's buttons say so by being disabled.
                         'has-[[aria-readonly=true]]:text-muted-foreground', 
                         // The same type roles <Markdown> uses, so text reads the same
                         // being edited as being read.
-                        '[&_.ProseMirror]:flex [&_.ProseMirror]:min-h-20 [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', '[&_h3]:type-section-title [&_h4]:type-section-title [&_h5]:type-label [&_h6]:type-label', '[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-1 [&_ul]:pl-6', '[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-1 [&_ol]:pl-6', '[&_li[data-item-type=task]]:-ml-6 [&_li[data-item-type=task]]:flex [&_li[data-item-type=task]]:list-none [&_li[data-item-type=task]]:items-start [&_li[data-item-type=task]]:gap-2', '[&_li[data-item-type=task]>input]:mt-1 [&_li[data-item-type=task]>input]:size-4 [&_li[data-item-type=task]>input]:accent-primary', '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4', '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground', '[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono', '[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:font-mono', '[&_hr]:border-border', '[&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:type-label', 
+                        '[&_.ProseMirror]:flex [&_.ProseMirror]:min-h-20 [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', 
+                        // ProseMirror's own required style (prosemirror-view's CSS): spaces
+                        // as typed, so one at the end of a line isn't kept as &nbsp;.
+                        '[&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words', '[&_h3]:type-section-title [&_h4]:type-section-title [&_h5]:type-label [&_h6]:type-label', '[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-1 [&_ul]:pl-6', '[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-1 [&_ol]:pl-6', '[&_li[data-item-type=task]]:-ml-6 [&_li[data-item-type=task]]:flex [&_li[data-item-type=task]]:list-none [&_li[data-item-type=task]]:items-start [&_li[data-item-type=task]]:gap-2', '[&_li[data-item-type=task]>input]:mt-1 [&_li[data-item-type=task]>input]:size-4 [&_li[data-item-type=task]>input]:accent-primary', '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4', '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground', '[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono', '[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:font-mono', '[&_hr]:border-border', '[&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:type-label', 
                         // Raw HTML from the text: shown as its characters, never as markup.
                         '[&_span[data-type=html]]:rounded [&_span[data-type=html]]:bg-muted [&_span[data-type=html]]:px-1 [&_span[data-type=html]]:font-mono [&_span[data-type=html]]:text-foreground', 
                         // The placeholder, in an empty document only (a decoration).

package/dist/lib/markdown-merge.js

@@ -17,7 +17,11 @@
 //   original's own source; only a changed or new block is written by the
 //   editor (in the document's own bullet and rule marks, `markdownStyle`).
 // - Blocks the editor can't show (a link reference's definition) are kept
-//   where they were.
+//   where they were. A block the editor shows its own way (a table it
+//   padded, marks it nested differently) and that `meaning` still misses is
+//   written as the editor shows it, as long as nothing in it is lost
+//   (`content`): no text, address or image. A block the editor drops part
+//   of (it doesn't show images) is kept as written, and the guard refuses.
 // - Guard: the result must mean exactly what the editor shows. If it
 //   wouldn't (two blocks fusing, say), the merge throws instead of saving
 //   something else; the draft stays on screen.
@@ -30,34 +34,103 @@ function parse(markdown) {
 }
 // Fields that are about how a node was written, not what it means.
 const STYLE_ONLY = new Set(['position', 'data', 'spread', 'label', 'referenceType']);
+// Nodes whose children are inline text: compared as runs of marked text.
+const INLINE_PARENTS = new Set(['paragraph', 'heading', 'tableCell']);
+// A reference link (or image) as the link it stands for, when its
+// definition is in the document.
+function resolved(node, definitions) {
+    if (node.type !== 'linkReference' && node.type !== 'imageReference')
+        return node;
+    const definition = definitions.get(String(node.identifier));
+    if (!definition)
+        return node;
+    return {
+        type: node.type === 'linkReference' ? 'link' : 'image',
+        url: definition.url,
+        title: definition.title ?? null,
+        alt: node.alt,
+        children: node.children,
+    };
+}
+// The mark an inline node puts on its text, or undefined for text itself.
+function markOf(node) {
+    if (node.type === 'strong' || node.type === 'emphasis' || node.type === 'delete')
+        return node.type;
+    if (node.type === 'link')
+        return `link ${JSON.stringify([node.url, node.title ?? null])}`;
+    return undefined;
+}
+// Inline content as what a reader sees: each piece of text (or code, an
+// image, a break) with the set of marks on it, whichever way they were
+// nested. `**[a](u)**` and `[**a**](u)` are the same bold link; a link with
+// no text shows nothing.
+function runs(nodes, definitions, marks = [], out = []) {
+    for (const child of nodes) {
+        const node = resolved(child, definitions);
+        const mark = markOf(node);
+        if (mark) {
+            runs(node.children ?? [], definitions, [...marks, mark], out);
+            continue;
+        }
+        const set = [...new Set(marks)].sort();
+        const last = out.at(-1);
+        if (node.type === 'text' && last?.type === 'text' && JSON.stringify(last.marks) === JSON.stringify(set)) {
+            last.value = String(last.value) + String(node.value);
+        }
+        else {
+            out.push({ ...meaning(node, definitions), marks: set });
+        }
+    }
+    return out;
+}
 // A block's meaning as a comparable string: positions and source style
-// dropped, and a reference link resolved to the link it stands for.
+// dropped, a reference link resolved to the link it stands for, inline
+// marks compared as a set, and a table's rows all as wide as its widest
+// (GFM allows short rows; the editor pads them with empty cells).
 function meaning(node, definitions) {
     if (Array.isArray(node))
         return node.map((child) => meaning(child, definitions));
     if (!node || typeof node !== 'object')
         return node;
-    const md = node;
-    if (md.type === 'linkReference' || md.type === 'imageReference') {
-        const definition = definitions.get(String(md.identifier));
-        if (definition) {
-            return meaning({
-                type: md.type === 'linkReference' ? 'link' : 'image',
-                url: definition.url,
-                title: definition.title ?? null,
-                alt: md.alt,
-                children: md.children,
-            }, definitions);
-        }
-    }
+    const md = resolved(node, definitions);
     const out = {};
     for (const key of Object.keys(md).sort()) {
         if (STYLE_ONLY.has(key))
             continue;
-        out[key] = meaning(md[key], definitions);
+        out[key] = key === 'children' && INLINE_PARENTS.has(md.type) ? runs(md.children ?? [], definitions) : meaning(md[key], definitions);
     }
     if ((md.type === 'link' || md.type === 'image') && out.title === undefined)
         out.title = null;
+    if (md.type === 'table') {
+        const rows = out.children;
+        const width = Math.max(0, ...rows.map((row) => row.children.length));
+        for (const row of rows) {
+            while (row.children.length < width)
+                row.children.push({ children: [], type: 'tableCell' });
+        }
+        const align = out.align ?? [];
+        out.align = Array.from({ length: width }, (_value, index) => align[index] ?? null);
+    }
+    return out;
+}
+// Everything in a block a reader could lose: its text (spacing aside),
+// code, raw HTML, link and image addresses, image alt text, rules and
+// task boxes. Not how any of it is marked or laid out.
+function content(node, definitions) {
+    const md = resolved(node, definitions);
+    let out = '';
+    if (typeof md.value === 'string')
+        out += md.value.replace(/\s+/g, '');
+    if (md.type === 'link' || md.type === 'image')
+        out += `<${String(md.url)}>`;
+    if (md.type === 'image' || md.type === 'imageReference')
+        out += `![${String(md.alt ?? '')}]`;
+    if (md.type === 'thematicBreak')
+        out += '<hr>';
+    if (md.type === 'listItem' && typeof md.checked === 'boolean')
+        out += md.checked ? '[x]' : '[ ]';
+    for (const child of md.children ?? [])
+        out += content(child, definitions);
     return out;
 }
 function blocks(markdown) {
@@ -76,6 +149,7 @@ function blocks(markdown) {
             end,
             source: markdown.slice(start, end),
             key: JSON.stringify(meaning(child, definitions)),
+            content: content(child, definitions),
         };
     });
 }
@@ -104,6 +178,33 @@ function match(from, to) {
     }
     return pairs;
 }
+// The original blocks the editor shows: each matched one, and each run of
+// unmatched ones between two matches that the editor shows its own way,
+// with nothing lost, as the unmatched blocks it has between the same two.
+// Those are written as the editor has them; a definition never is.
+function shownOwnWay(originals, loaded, loadedToOriginal) {
+    const shown = new Set(loadedToOriginal.values());
+    const anchors = [[-1, -1], ...[...loadedToOriginal].map(([to, from]) => [from, to]), [originals.length, loaded.length]];
+    for (let k = 1; k < anchors.length; k++) {
+        const [fromStart, toStart] = anchors[k - 1];
+        const [fromEnd, toEnd] = anchors[k];
+        const unmatched = originals
+            .map((_block, index) => index)
+            .slice(fromStart + 1, fromEnd)
+            .filter((index) => originals[index].type !== 'definition');
+        if (unmatched.length === 0)
+            continue;
+        const before = unmatched.map((index) => originals[index].content).join('');
+        const after = loaded
+            .slice(toStart + 1, toEnd)
+            .map((block) => block.content)
+            .join('');
+        if (before === after)
+            for (const index of unmatched)
+                shown.add(index);
+    }
+    return shown;
+}
 export class MarkdownMergeError extends Error {
     constructor() {
         super("This text can't be saved without changing parts you didn't edit. Undo the last change, or edit it in the form.");
@@ -139,9 +240,9 @@ export function mergeMarkdown(original, baseline, current) {
         const after = sources.slice(index + 1).find((value) => value !== undefined) ?? originals.length;
         return { written: block, at: (before + after) / 2 };
     });
-    // Blocks the editor never showed (definitions): after whatever came
-    // before them in the original.
-    const shown = new Set(loadedToOriginal.values());
+    // Blocks the editor never showed (definitions, and any block it dropped
+    // part of): after whatever came before them in the original.
+    const shown = shownOwnWay(originals, loaded, loadedToOriginal);
     originals.forEach((_block, index) => {
         if (shown.has(index))
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.16.1",
+  "version": "3.16.2",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {