@charcuterie/ui 3.2.0 → 3.4.0

package/dist/markdownEditorCodeMirror/livePreviewRanges.js

@@ -0,0 +1,345 @@
+/**
+ * Markdown → the ranges a live-preview surface decorates, as pure
+ * tree-in / descriptors-out.
+ *
+ * This is the half of the CodeMirror editor that decides what a
+ * document *looks* like, and it is deliberately the half with no
+ * `@codemirror/view` import in it. Descriptors are plain
+ * `{ from, to, type }` objects; turning them into `Decoration`s is
+ * `livePreview.ts`'s job. The split buys two things:
+ *
+ *  - **These tests run in Node.** `packages/ui`'s Vitest project is
+ *    `.ts`-only and has no DOM, on purpose. A test here parses real
+ *    markdown with the real GFM parser and asserts real offsets —
+ *    no jsdom, no mount, no story.
+ *  - **The runtime stays incremental.** Tests hand in
+ *    `markdownLanguage.parser.parse(text)`; the view hands in
+ *    `syntaxTree(state)`, which CodeMirror has already reparsed
+ *    incrementally. Same function, same offsets, and the expensive
+ *    path is never the one under test.
+ *
+ * ### What separates this from `markdownSpans.ts`
+ *
+ * The sibling `MarkdownEditor` paints *behind* a `<textarea>`, so
+ * every span it emits has to be metric-neutral — same glyph
+ * advances, or the caret shears away from the letters. That is the
+ * constraint this module does **not** have. CodeMirror owns the
+ * caret and reflows around decorations, so a heading can genuinely
+ * be larger, `**` can genuinely be hidden, and an image can
+ * genuinely replace its own markup.
+ *
+ * That is the entire reason this subpath exists, and it is also why
+ * it is a subpath: the capability costs ~176 KB gz of optional peer
+ * and only a consumer that opts in should pay it.
+ *
+ * ### The one invariant
+ *
+ * **Concealment never touches the document.** Every descriptor here
+ * describes a *view* over an unmodified markdown string. Hiding
+ * `**` does not delete it; replacing `![alt](url)` with an image
+ * does not rewrite it. The stored value stays byte-for-byte what
+ * the user typed, which is the same no-HTML-in-the-data guarantee
+ * the textarea version gets structurally — kept here by never
+ * having a serialiser at all.
+ */
+const HEADING_LINE_KINDS = {
+    ATXHeading1: "heading1",
+    ATXHeading2: "heading2",
+    ATXHeading3: "heading3",
+    ATXHeading4: "heading4",
+    ATXHeading5: "heading5",
+    ATXHeading6: "heading6",
+};
+const INLINE_MARK_KINDS = {
+    Emphasis: "emphasis",
+    InlineCode: "code",
+    Strikethrough: "strikethrough",
+    StrongEmphasis: "strong",
+};
+/** Marks that vanish with their construct once the caret leaves. */
+const CONCEALABLE_MARK_NAMES = new Set([
+    "CodeMark",
+    "EmphasisMark",
+    "HeaderMark",
+    "LinkMark",
+    "QuoteMark",
+    "StrikethroughMark",
+]);
+/**
+ * A fence is structure, not noise.
+ *
+ * `CodeMark` covers both `` ` `` and ```` ``` ````, and concealing
+ * the fenced kind leaves a blank line at the top and bottom of the
+ * block where the fence used to be — which reads as a rendering bug
+ * rather than as tidiness. The language tag goes with it, for the
+ * same reason Obsidian keeps it: it is the one part of a code block
+ * that says what the code *is*.
+ */
+const FENCED_CODE_PARENTS = new Set(["FencedCode"]);
+/**
+ * Marks that are always visible, only dimmed.
+ *
+ * Just the list bullet, and the distinction from `QuoteMark` is the
+ * interesting part. A blockquote gets a line decoration — an accent
+ * bar down its inline start — so the `>` is *redundant* once that
+ * bar is drawn, and Obsidian hides it for exactly that reason. A
+ * bullet has no such affordance: hide the `-` and an unordered list
+ * becomes indented prose. Obsidian substitutes a `•` glyph there,
+ * which means choosing a width, and this module has no business
+ * choosing one.
+ *
+ * So the rule is not "block marks persist" — it is **a mark
+ * persists unless something else already says what it said.**
+ */
+const PERSISTENT_MARK_NAMES = new Set(["ListMark"]);
+const isInside = (selections, from, to) => selections.some((selection) => selection.from <= to && selection.to >= from);
+/** The start offset of the line containing `offset`. */
+const toLineStart = (text, offset) => {
+    const previousBreak = text.lastIndexOf("\n", offset - 1);
+    return previousBreak + 1;
+};
+/** The end offset (exclusive of `\n`) of that line. */
+const toLineEnd = (text, offset) => {
+    const nextBreak = text.indexOf("\n", offset);
+    return nextBreak === -1 ? text.length : nextBreak;
+};
+const toChildNamed = (node, name) => {
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+        if (child.name === name) {
+            return child;
+        }
+    }
+    return null;
+};
+/**
+ * A heading's `#` run, plus the whitespace after it.
+ *
+ * Concealing `#` alone would leave the heading text indented by the
+ * space that used to separate them — a ragged left edge that reads
+ * as a bug. The parser hands back only the hashes, so the trailing
+ * run is walked here.
+ */
+const toHeaderMarkEnd = (text, to) => {
+    let end = to;
+    while (end < text.length) {
+        const character = text[end];
+        if (character !== " " && character !== "\t") {
+            break;
+        }
+        end += 1;
+    }
+    return end;
+};
+/**
+ * Every decoration the document wants, in tree order.
+ *
+ * Order is not sorted here on purpose — `Decoration.set(ranges,
+ * true)` sorts, and doing it twice is the sort of thing that looks
+ * free until a document is long.
+ */
+export const toLivePreviewRanges = ({ from, isRawMode = false, selections, text, to, tree, }) => {
+    const ranges = [];
+    const pushMarker = (from, to, isRevealed) => {
+        if (from >= to) {
+            return;
+        }
+        ranges.push({
+            from,
+            isConcealed: !isRawMode && !isRevealed,
+            to,
+            type: "marker",
+        });
+    };
+    tree.iterate({
+        from,
+        to,
+        enter: (nodeRef) => {
+            const { name } = nodeRef;
+            const headingKind = HEADING_LINE_KINDS[name];
+            if (headingKind) {
+                if (!isRawMode) {
+                    const lineStart = toLineStart(text, nodeRef.from);
+                    // Zero-length, at the line start. A line decoration is
+                    // anchored to a position, not a span — give it a real
+                    // range and CodeMirror throws rather than paints.
+                    ranges.push({
+                        from: lineStart,
+                        lineKind: headingKind,
+                        to: lineStart,
+                        type: "line",
+                    });
+                }
+                return true;
+            }
+            if (name === "Blockquote" || name === "FencedCode") {
+                if (!isRawMode) {
+                    // One line decoration per line: CodeMirror anchors a line
+                    // decoration at a line start, so a multi-line block needs
+                    // one per line rather than one spanning range.
+                    for (let offset = toLineStart(text, nodeRef.from); offset < nodeRef.to; offset = toLineEnd(text, offset) + 1) {
+                        ranges.push({
+                            from: offset,
+                            lineKind: name === "Blockquote"
+                                ? "blockquote"
+                                : "code",
+                            to: offset,
+                            type: "line",
+                        });
+                    }
+                }
+                return true;
+            }
+            if (name === "Table") {
+                if (!isRawMode) {
+                    for (let offset = toLineStart(text, nodeRef.from); offset < nodeRef.to; offset = toLineEnd(text, offset) + 1) {
+                        ranges.push({
+                            from: offset,
+                            lineKind: "table",
+                            to: offset,
+                            type: "line",
+                        });
+                    }
+                }
+                return true;
+            }
+            const inlineKind = INLINE_MARK_KINDS[name];
+            if (inlineKind) {
+                ranges.push({
+                    from: nodeRef.from,
+                    markKind: inlineKind,
+                    to: nodeRef.to,
+                    type: "mark",
+                });
+                return true;
+            }
+            if (name === "Image") {
+                const node = nodeRef.node;
+                const urlNode = toChildNamed(node, "URL");
+                const openMark = node.firstChild;
+                const closeMark = openMark?.nextSibling;
+                // An image whose caret is inside it is markup again: you
+                // cannot edit a URL you cannot see.
+                if (!isRawMode &&
+                    urlNode &&
+                    openMark &&
+                    closeMark &&
+                    !isInside(selections, node.from, node.to)) {
+                    ranges.push({
+                        alt: text.slice(openMark.to, closeMark.from),
+                        from: node.from,
+                        to: node.to,
+                        type: "image",
+                        url: text.slice(urlNode.from, urlNode.to),
+                    });
+                    return false;
+                }
+                return true;
+            }
+            if (name === "Link") {
+                const node = nodeRef.node;
+                const urlNode = toChildNamed(node, "URL");
+                const isRevealed = isInside(selections, node.from, node.to);
+                const openMark = node.firstChild;
+                const closeMark = openMark?.nextSibling;
+                if (urlNode && openMark && closeMark) {
+                    ranges.push({
+                        from: openMark.to,
+                        markKind: "linkText",
+                        to: closeMark.from,
+                        type: "mark",
+                        url: text.slice(urlNode.from, urlNode.to),
+                    });
+                }
+                // Children are walked so nested emphasis inside link text
+                // still paints, but the marks are emitted here where the
+                // whole construct's reveal state is known.
+                pushMarker(node.from, openMark?.to ?? node.from, isRevealed);
+                if (closeMark) {
+                    pushMarker(closeMark.from, node.to, isRevealed);
+                }
+                return true;
+            }
+            if (name === "URL") {
+                // A bare URL. GFM's autolink emits a `URL` with no `Link`
+                // parent, which is the whole of gap 2 in Docket's handoff:
+                // paste a link, get a link, with no `[](…)` typed at all.
+                const parentName = nodeRef.node.parent?.name;
+                if (parentName !== "Link" &&
+                    parentName !== "Image") {
+                    ranges.push({
+                        from: nodeRef.from,
+                        markKind: "autolink",
+                        to: nodeRef.to,
+                        type: "mark",
+                        url: text.slice(nodeRef.from, nodeRef.to),
+                    });
+                }
+                else {
+                    ranges.push({
+                        from: nodeRef.from,
+                        markKind: "url",
+                        to: nodeRef.to,
+                        type: "mark",
+                    });
+                }
+                return true;
+            }
+            if (name === "TaskMarker") {
+                const isRevealed = isInside(selections, nodeRef.from, nodeRef.to);
+                if (!isRawMode && !isRevealed) {
+                    ranges.push({
+                        from: nodeRef.from,
+                        isChecked: text[nodeRef.from + 1] !== " ",
+                        label: text
+                            .slice(nodeRef.to, toLineEnd(text, nodeRef.to))
+                            .trim(),
+                        to: nodeRef.to,
+                        type: "task",
+                    });
+                    return false;
+                }
+                pushMarker(nodeRef.from, nodeRef.to, isRevealed);
+                return false;
+            }
+            if (PERSISTENT_MARK_NAMES.has(name)) {
+                pushMarker(nodeRef.from, nodeRef.to, true);
+                return false;
+            }
+            if (name === "TableDelimiter") {
+                pushMarker(nodeRef.from, nodeRef.to, true);
+                return false;
+            }
+            if (name === "CodeInfo") {
+                pushMarker(nodeRef.from, nodeRef.to, true);
+                return false;
+            }
+            if (CONCEALABLE_MARK_NAMES.has(name)) {
+                const parent = nodeRef.node.parent;
+                if (parent &&
+                    FENCED_CODE_PARENTS.has(parent.name)) {
+                    pushMarker(nodeRef.from, nodeRef.to, true);
+                    return false;
+                }
+                // A link's marks were already emitted above, with the
+                // link's own reveal state spanning both sides of the text.
+                // An image's were not — it either replaced itself outright
+                // or fell through to here, where the generic parent-range
+                // rule is already the correct one.
+                if (parent?.name === "Link") {
+                    return false;
+                }
+                const isRevealed = parent
+                    ? isInside(selections, parent.from, parent.to)
+                    : isInside(selections, nodeRef.from, nodeRef.to);
+                const to = name === "HeaderMark"
+                    ? toHeaderMarkEnd(text, nodeRef.to)
+                    : nodeRef.to;
+                pushMarker(nodeRef.from, to, isRevealed);
+                return false;
+            }
+            return true;
+        },
+    });
+    return ranges;
+};
+//# sourceMappingURL=livePreviewRanges.js.map

package/dist/markdownEditorCodeMirror/livePreviewRanges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"livePreviewRanges.js","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/livePreviewRanges.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -19,6 +19,11 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./markdown-editor-codemirror": {
+      "source": "./src/markdownEditorCodeMirror/index.ts",
+      "types": "./dist/markdownEditorCodeMirror/index.d.ts",
+      "default": "./dist/markdownEditorCodeMirror/index.js"
+    },
     "./react-router": {
       "source": "./src/reactRouter/index.ts",
       "types": "./dist/reactRouter/index.d.ts",
@@ -55,16 +60,46 @@
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
+    "@codemirror/commands": "^6",
+    "@codemirror/lang-markdown": "^6",
+    "@codemirror/language": "^6",
+    "@codemirror/state": "^6",
+    "@codemirror/view": "^6",
+    "@lezer/common": "^1",
     "react": ">=19",
     "react-dom": ">=19",
     "react-router": ">=7"
   },
   "peerDependenciesMeta": {
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/lang-markdown": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@lezer/common": {
+      "optional": true
+    },
     "react-router": {
       "optional": true
     }
   },
   "devDependencies": {
+    "@codemirror/commands": "^6",
+    "@codemirror/lang-markdown": "^6",
+    "@codemirror/language": "^6",
+    "@codemirror/state": "^6",
+    "@codemirror/view": "^6",
+    "@lezer/common": "^1",
     "@storybook/react": "^10.3.6",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

package/src/Field/Field.mdx

@@ -27,7 +27,7 @@ in one place and cannot be spelled twice.
 
 <Canvas of={FieldStories.Default} />
 
-`Field` is also how a `Picker` (or `Button`, or `Select`) sits next to
+`Field` is also how a `Picker` (or `Button`, or an app's own control) sits next to
 its label **without butting against the last word**. Those controls are
 flush — no outer margin — on purpose. The stacked `gap-1.5` here is the
 gutter. An inline label + trigger is a row with `gap-*`, not a margin
@@ -40,7 +40,7 @@ on the control. See [Picker](../Picker/Picker.mdx#the-trigger-is-flush--the-pare
 ## The control is a slot
 
 Cloned, not wrapped — the same contract as `Popover`'s trigger. An `<input>`, a
-`<textarea>`, a `Select`, or an app's own control all go in the same hole, and the `id`,
+`<textarea>`, a `Picker`, or an app's own control all go in the same hole, and the `id`,
 `aria-describedby`, `aria-invalid` and `required` are injected onto whatever arrives.
 
 <Canvas of={FieldStories.AllVariants} />

package/src/Field/Field.stories.tsx

@@ -5,7 +5,6 @@ import {
   StoryGrid,
 } from "../board.storyHelpers.tsx"
 import { Picker } from "../Picker/Picker.tsx"
-import { Select } from "../Select/Select.tsx"
 import { Tooltip } from "../Tooltip/Tooltip.tsx"
 import { Field } from "./Field.tsx"
 import { FieldGroup } from "./FieldGroup.tsx"
@@ -84,7 +83,7 @@ export const AdoptsOverlayTriggerId: Story = {
 }
 
 /**
- * The control is a slot, not a hardcoded `<input>` — `Select` goes
+ * The control is a slot, not a hardcoded `<input>` — a `Picker` goes
  * in the same hole, and so does an app's own control. The `id`,
  * `aria-describedby`, `aria-invalid`, and `required` are cloned onto
  * whatever is passed.
@@ -104,13 +103,16 @@ export const AllVariants: Story = {
         </Field>
       </StoryCell>
 
-      <StoryCell label="select">
+      <StoryCell label="picker">
         <Field label="Rip profile">
-          <Select
+          <Picker
+            label="Rip profile"
+            onChange={() => {}}
             options={[
               { label: "Lossless", value: "lossless" },
               { label: "Compressed", value: "compressed" },
             ]}
+            value="lossless"
           />
         </Field>
       </StoryCell>
@@ -305,12 +307,14 @@ export const Group: Story = {
           label="Chapter split"
         >
           <div className="flex gap-2">
-            <Select
+            <Picker
               label="Unit"
+              onChange={() => {}}
               options={[
                 { label: "Chapters", value: "chapters" },
                 { label: "Minutes", value: "minutes" },
               ]}
+              value="chapters"
             />
 
             <input

package/src/Field/Field.test.tsx

@@ -96,6 +96,41 @@ test("the label names the control it points at", async () => {
   await expectNoAxeViolations(canvasElement)
 })
 
+/**
+ * Pins a string coupling that lives in two files.
+ *
+ * `htmlFor` names every **labelable** element — `<input>`,
+ * `<textarea>`, `<select>`, `<button>` — and names a
+ * `div[role="textbox"]` not at all. So a `contenteditable` control
+ * inside a `Field` points `aria-labelledby` at this id instead, and
+ * `MarkdownEditorCodeMirror` builds it as `` `${id}-label` ``.
+ *
+ * Renaming the format here would leave that control with no
+ * accessible name — silently, because the markup still looks right
+ * and the label still renders. Only axe would notice, and only in
+ * the other component's suite.
+ */
+test("the label carries a derivable id for non-labelable controls", async () => {
+  const { canvas } = await mountStory(Default)
+
+  const control = expectAgentDrivable(canvas, {
+    name: "Output directory",
+    role: "textbox",
+  })
+
+  const controlId = control.getAttribute("id")
+
+  await expect(controlId).not.toBeNull()
+
+  const label = document.getElementById(
+    `${controlId}-label`,
+  )
+
+  await expect(label).not.toBeNull()
+
+  await expect(label).toHaveAttribute("for", controlId)
+})
+
 test("a description is announced with the control", async () => {
   const { canvas } = await mountStory(Default)
 
@@ -115,16 +150,18 @@ test("a description is announced with the control", async () => {
   ).toHaveTextContent("Where finished rips are moved.")
 })
 
-test("the slot takes a Select as readily as an input", async () => {
+test("the slot takes a Picker as readily as an input", async () => {
   const { canvas, canvasElement } =
     await mountStory(AllVariants)
 
-  // A native `<select>` reports `role="combobox"`, and it is named
-  // by the same cloned `id`. The slot does not know what it is
-  // holding, which is the contract.
+  // A `Picker` is a `<button>` trigger whose accessible name carries
+  // the current value, and it is named by the same cloned `id`. The
+  // slot does not know what it is holding, which is the contract —
+  // this cell held a native `Select` until that component was
+  // deprecated.
   expectAgentDrivable(canvas, {
-    name: "Rip profile",
-    role: "combobox",
+    name: "Rip profile: Lossless",
+    role: "button",
   })
 
   await expectNoAxeViolations(canvasElement)

package/src/Field/Field.tsx

@@ -12,7 +12,7 @@ export type FieldProps = SlotProps & {
   /**
    * The control. **Cloned, not wrapped** — the same slot contract
    * as `Popover`'s trigger, so a `Field` can go around an `<input>`,
-   * a `<textarea>`, a `Select`, or an app's own control without
+   * a `<textarea>`, a `Picker`, or an app's own control without
    * changing that control's layout.
    */
   children: ReactElement
@@ -183,6 +183,24 @@ export const Field = ({
       <label
         className="font-medium text-content-primary text-sm"
         htmlFor={controlId}
+        /**
+         * `htmlFor` names the control for every **labelable**
+         * element — `<input>`, `<textarea>`, `<select>`, `<button>`
+         * — which is all this component wrapped until a
+         * `contenteditable` arrived. A `div[role="textbox"]` is not
+         * in that list, so `htmlFor` alone leaves it with **no
+         * accessible name at all**, silently: the markup looks
+         * right, the label renders, and axe is the only thing that
+         * notices.
+         *
+         * So the label also carries a derivable id, and such a
+         * control points `aria-labelledby` at it.
+         * `MarkdownEditorCodeMirror` is the first consumer;
+         * `Field.test.tsx` pins the format, because the coupling is
+         * a string convention and a rename here would break a name
+         * over in another file.
+         */
+        id={`${controlId}-label`}
       >
         {label}
 

package/src/MarkdownEditor/MarkdownEditor.tsx

@@ -18,12 +18,14 @@ import {
   indentLines,
   insertLink,
   insertText,
+  isLinkPaste,
   MARKDOWN_LINE_PREFIXES,
   outdentLines,
   toggleHeading,
   toggleInlineMarker,
   toggleLinePrefix,
   toMarkdownImage,
+  wrapSelectionInLink,
 } from "./markdownCommands.ts"
 import type { MarkdownSpanKind } from "./markdownSpans.ts"
 import {
@@ -464,17 +466,41 @@ export const MarkdownEditor = ({
       pasteEvent.clipboardData.files,
     ).filter(isImageFile)
 
-    if (files.length === 0 || !onUploadImage) {
-      // Left to the browser on purpose. A `<textarea>` pastes
-      // `text/plain` and nothing else, so the no-HTML guarantee
-      // needs no code here at all — intercepting the paste to
-      // "sanitise" it would be the version that can have a bug.
+    if (files.length > 0 && onUploadImage) {
+      pasteEvent.preventDefault()
+
+      uploadImages(files)
+
       return
     }
 
-    pasteEvent.preventDefault()
+    const pasted =
+      pasteEvent.clipboardData.getData("text/plain")
 
-    uploadImages(files)
+    const selection = readSelection()
+
+    // A URL pasted over selected text becomes a link, the way it
+    // does in every editor anyone uses. Reading `text/plain` here
+    // is not a hole in the no-HTML guarantee — that flavour is the
+    // only one a `<textarea>` would have taken anyway, and what
+    // goes back in is markdown built by a command.
+    if (
+      isLinkPaste(pasted) &&
+      selection.selectionStart !== selection.selectionEnd
+    ) {
+      pasteEvent.preventDefault()
+
+      applyEdit(
+        wrapSelectionInLink(selection, pasted.trim()),
+      )
+
+      return
+    }
+
+    // Everything else is left to the browser on purpose. A
+    // `<textarea>` pastes `text/plain` and nothing else, so the
+    // no-HTML guarantee needs no code here — intercepting the paste
+    // to "sanitise" it would be the version that can have a bug.
   }
 
   const handleDrop = (