@charcuterie/ui 3.13.0 → 3.14.1

package/src/markdownEditorCodeMirror/livePreviewRanges.test.ts

@@ -277,6 +277,200 @@ describe("toLivePreviewRanges", () => {
         ),
       ).toHaveLength(0)
     })
+
+    /**
+     * The bug that took whole documents down to raw source.
+     *
+     * The closing `]` was read as `openMark.nextSibling`, which is
+     * the bracket only while the link text is plain prose. Any
+     * inline construct in the text becomes that sibling instead, so
+     * the link text measured `[` → the construct's own start:
+     * **zero-length**. `Decoration.mark` rejects an empty range,
+     * the throw destroys the view plugin, and every decoration in
+     * the file goes with it.
+     *
+     * ``[`file.md`](path)`` is not an exotic spelling. It was in
+     * 69 of the 127 Docket task descriptions that had one.
+     *
+     * These assert the range, not a rendering. A whole-document
+     * render would go green on the *quiet* half of this bug — the
+     * cases below that produced a non-empty but wrong mark.
+     */
+    describe("inline markup inside the link text", () => {
+      test.each([
+        ["a code span", "[`file.md`](url)", "`file.md`"],
+        ["strong", "[**bold**](url)", "**bold**"],
+        ["emphasis", "[*thin*](url)", "*thin*"],
+        ["strikethrough", "[~~gone~~](url)", "~~gone~~"],
+        [
+          "a mix, after plain text",
+          "[a *b* `c` **d**](url)",
+          "a *b* `c` **d**",
+        ],
+        [
+          "markup then plain text",
+          "[**b** then more](url)",
+          "**b** then more",
+        ],
+        ["nesting", "[**`both`**](url)", "**`both`**"],
+        ["an escape", "[a\\]b](url)", "a\\]b"],
+        [
+          "an image",
+          "[![alt](a.png)](url)",
+          "![alt](a.png)",
+        ],
+      ])(
+        "spans the whole link text through %s",
+        (_case, text, expected) => {
+          const linkText = toRanges(text).find(
+            (range) =>
+              range.type === "mark" &&
+              range.markKind === "linkText",
+          )
+
+          expect(toTextOf(text, toFound(linkText))).toBe(
+            expected,
+          )
+        },
+      )
+
+      /**
+       * The invariant, swept rather than enumerated.
+       *
+       * Every caret position in the document, in both modes. A
+       * caret changes which constructs are revealed, and reveal
+       * state feeds the same bracket arithmetic — so "the mark is
+       * non-empty with no caret in the file" is a weaker promise
+       * than the one the plugin needs. `Decoration.mark` throws on
+       * an empty range wherever the caret happens to be.
+       */
+      test("emits no empty mark at any caret position, in either mode", () => {
+        const empties: string[] = []
+
+        for (const text of [
+          "see [`file.md`](https://example.com) now",
+          "see [**bold**](https://example.com) now",
+          "[a *b* `c` **d**](https://example.com)",
+          "[![alt](https://example.com/a.png)](https://example.com)",
+          "![`code` alt](https://example.com/a.png)",
+          "[](https://example.com)",
+          "[a\\]b](https://example.com)",
+        ]) {
+          for (const isRawMode of [false, true]) {
+            for (
+              let offset = 0;
+              offset <= text.length;
+              offset += 1
+            ) {
+              for (const range of toRanges(
+                text,
+                atCaret(offset),
+                isRawMode,
+              )) {
+                if (
+                  range.type === "mark" &&
+                  range.from >= range.to
+                ) {
+                  empties.push(
+                    `${text} @${offset} raw=${isRawMode}`,
+                  )
+                }
+              }
+            }
+          }
+        }
+
+        expect(empties).toEqual([])
+      })
+
+      test("never emits an empty mark, whatever the nesting", () => {
+        for (const text of [
+          "[`file.md`](url)",
+          "[**bold**](url)",
+          "[*thin*](url)",
+          "[~~gone~~](url)",
+          "[a *b* `c` **d**](url)",
+          "[**`both`**](url)",
+          "[![alt](a.png)](url)",
+          "[a\\]b](url)",
+        ]) {
+          for (const range of toRanges(text)) {
+            if (range.type === "mark") {
+              // `Mark decorations may not be empty` — the throw
+              // that destroyed the plugin.
+              expect(range.to).toBeGreaterThan(range.from)
+            }
+          }
+        }
+      })
+
+      test("conceals only the brackets, not the text between them", () => {
+        const text =
+          "see [`file.md`](https://example.com) now"
+
+        const concealed = toRanges(text)
+          .filter(
+            (range) =>
+              range.type === "marker" && range.isConcealed,
+          )
+          .map((range) => toTextOf(text, range))
+
+        // The `](url)` run is the point. Before the fix it started
+        // one character after `[` and swallowed the link text
+        // whole, so dropping the empty mark on its own would have
+        // rendered an invisible link rather than a fixed one.
+        expect(concealed).toContain(
+          "](https://example.com)",
+        )
+
+        expect(concealed).not.toContain(
+          "`file.md`](https://example.com)",
+        )
+      })
+
+      test("still carries the URL onto the nested case", () => {
+        const text = "[`file.md`](https://example.com)"
+
+        expect(
+          toRanges(text).find(
+            (range) =>
+              range.type === "mark" &&
+              range.markKind === "linkText",
+          ),
+        ).toMatchObject({ url: "https://example.com" })
+      })
+
+      test("leaves the nested construct's own marks intact", () => {
+        const text = "[`file.md`](https://example.com)"
+
+        expect(
+          toRanges(text).find(
+            (range) =>
+              range.type === "mark" &&
+              range.markKind === "code",
+          ),
+        ).toBeDefined()
+      })
+    })
+
+    /**
+     * `[](url)` has no text, so there is nothing to mark. This is
+     * the *only* empty case — every other one was the bug above,
+     * which is why the guard in `livePreviewRanges` is written as
+     * `openMark.to < closeMark.from` and not as a filter over the
+     * finished list.
+     */
+    test("emits no link-text mark for a link with no text", () => {
+      const text = "[](https://example.com)"
+
+      expect(
+        toRanges(text).filter(
+          (range) =>
+            range.type === "mark" &&
+            range.markKind === "linkText",
+        ),
+      ).toHaveLength(0)
+    })
   })
 
   describe("images", () => {
@@ -306,6 +500,45 @@ describe("toLivePreviewRanges", () => {
         ),
       ).toHaveLength(0)
     })
+
+    /**
+     * The same `nextSibling` mistake, without the crash: an image
+     * emits a replace range over its whole construct, which is
+     * never empty, so a marked-up alt came out as `""` and nothing
+     * threw. `alt` is an attribute rather than a span, so it is
+     * read as plain text — which is what CommonMark says an alt is.
+     */
+    test.each([
+      [
+        "a code span",
+        "![`code` shot](https://example.com/a.png)",
+        "code shot",
+      ],
+      [
+        "strong",
+        "![**bold** shot](https://example.com/a.png)",
+        "bold shot",
+      ],
+      [
+        "a mix",
+        "![*a* `b` **c**](https://example.com/a.png)",
+        "a b c",
+      ],
+      [
+        "an escape",
+        "![a\\]b](https://example.com/a.png)",
+        "a]b",
+      ],
+    ])(
+      "reads the alt text as plain text through %s",
+      (_case, text, expected) => {
+        expect(
+          toRanges(text).find(
+            (range) => range.type === "image",
+          ),
+        ).toMatchObject({ alt: expected })
+      },
+    )
   })
 
   describe("task lists", () => {

package/src/markdownEditorCodeMirror/livePreviewRanges.ts

@@ -49,6 +49,11 @@ import type {
   Tree,
 } from "@lezer/common"
 
+import {
+  toSafeImageUrl,
+  toSafeLinkUrl,
+} from "./safeUrls.ts"
+
 /**
  * A block-level treatment applied to a whole line.
  *
@@ -328,6 +333,115 @@ const toChildNamed = (
   return null
 }
 
+/**
+ * The closing `]` of a `Link` or an `Image`.
+ *
+ * **Not** `openMark.nextSibling`. That sibling is the closing
+ * bracket only while the text between the brackets is plain prose,
+ * because plain prose gets no node of its own. Put any inline
+ * construct in there — ``[`file.md`](path)``, `[**bold**](path)`,
+ * `[~~struck~~](path)` — and the second child is that construct,
+ * so the old walk measured the link text as `[` → the construct's
+ * own start and got a **zero-length** range. CodeMirror rejects an
+ * empty mark decoration (`Mark decorations may not be empty`), the
+ * throw destroys the view plugin, and every decoration in the
+ * document goes with it: the whole file drops to raw source.
+ *
+ * Text *before* the construct failed more quietly and just as
+ * wrongly. `[a *b*](path)` marked `a ` as the link and then
+ * concealed `*b*](path)`, because the concealment marker starts
+ * where this bracket is thought to be.
+ *
+ * The bracket is the first `LinkMark` **child** after the opener. A
+ * nested image's brackets belong to the `Image` node, not to this
+ * one, so a direct-sibling walk steps over `[![alt](a.png)](url)`
+ * without mistaking `![` for the end of the link text.
+ */
+const toCloseMark = (
+  openMark: SyntaxNode | null,
+  text: string,
+): SyntaxNode | null => {
+  for (
+    let sibling = openMark?.nextSibling;
+    sibling;
+    sibling = sibling.nextSibling
+  ) {
+    if (
+      sibling.name === "LinkMark" &&
+      // Redundant against today's parser — the first `LinkMark`
+      // after the opener is always `]`, for a link and an image
+      // alike. It is here to state the contract: this function
+      // returns a **closing bracket**, and it returns nothing
+      // rather than the wrong node if that ever stops holding.
+      text.slice(sibling.from, sibling.to) === "]"
+    ) {
+      return sibling
+    }
+  }
+
+  return null
+}
+
+/**
+ * The syntax spans `toPlainText` drops, gathered depth-first.
+ *
+ * `Escape` contributes only its backslash — `\]` reads as `]`.
+ */
+const toSyntaxSpans = (
+  node: SyntaxNode,
+  spans: { from: number; to: number }[],
+) => {
+  for (
+    let child = node.firstChild;
+    child;
+    child = child.nextSibling
+  ) {
+    if (CONCEALABLE_MARK_NAMES.has(child.name)) {
+      spans.push({ from: child.from, to: child.to })
+    } else if (child.name === "Escape") {
+      spans.push({ from: child.from, to: child.from + 1 })
+    } else {
+      toSyntaxSpans(child, spans)
+    }
+  }
+
+  return spans
+}
+
+/**
+ * What `[from, to)` reads as once its inline syntax is removed.
+ *
+ * An image's `alt` is an attribute rather than a span a reader can
+ * look at, so ``![`code` shot](a.png)`` has to arrive as
+ * `code shot` — never as its own source, and never as the empty
+ * string the old sibling walk produced. CommonMark says the same:
+ * alt is the plain-text rendering of the inline content.
+ *
+ * Tree order is ascending, so the spans need no sort.
+ */
+const toPlainText = (
+  node: SyntaxNode,
+  text: string,
+  from: number,
+  to: number,
+) => {
+  let offset = from
+
+  let plainText = ""
+
+  for (const span of toSyntaxSpans(node, [])) {
+    if (span.from < offset || span.to > to) {
+      continue
+    }
+
+    plainText += text.slice(offset, span.from)
+
+    offset = span.to
+  }
+
+  return plainText + text.slice(offset, to)
+}
+
 /**
  * A heading's `#` run, plus the whitespace after it.
  *
@@ -926,28 +1040,58 @@ const toWalker = ({
 
         const openMark = node.firstChild
 
-        const closeMark = openMark?.nextSibling
+        const closeMark = toCloseMark(openMark, text)
+
+        const safeUrl = urlNode
+          ? toSafeImageUrl(
+              text.slice(urlNode.from, urlNode.to),
+            )
+          : undefined
 
         // An image whose caret is inside it is markup again: you
-        // cannot edit a URL you cannot see.
+        // cannot edit a URL you cannot see. An image whose URL did
+        // not survive `toSafeImageUrl` stays markup **always**,
+        // which is the honest answer for a document this surface
+        // did not write: the reader is shown the source rather than
+        // a broken frame or a silently dropped line.
         if (
           !isRawMode &&
-          urlNode &&
+          safeUrl !== undefined &&
           openMark &&
           closeMark &&
           !isInside(selections, node.from, node.to)
         ) {
           ranges.push({
-            alt: text.slice(openMark.to, closeMark.from),
+            alt: toPlainText(
+              node,
+              text,
+              openMark.to,
+              closeMark.from,
+            ),
             from: node.from,
             to: node.to,
             type: "image",
-            url: text.slice(urlNode.from, urlNode.to),
+            url: safeUrl,
           })
 
           return false
         }
 
+        /**
+         * An image whose URL was refused shows its **whole**
+         * construct, markers and all.
+         *
+         * Not descending is what does it: the `![`, `](` and `)`
+         * would otherwise reach the generic concealment rule below
+         * and vanish, leaving the alt text welded to a URL with no
+         * punctuation between them. This is the same result the
+         * refused-link path gets, by the same reasoning — a reader
+         * shown the source can see what the file tried to do.
+         */
+        if (safeUrl === undefined && !isRawMode) {
+          return false
+        }
+
         return true
       }
 
@@ -964,15 +1108,48 @@ const toWalker = ({
 
         const openMark = node.firstChild
 
-        const closeMark = openMark?.nextSibling
+        const closeMark = toCloseMark(openMark, text)
+
+        const safeUrl = urlNode
+          ? toSafeLinkUrl(
+              text.slice(urlNode.from, urlNode.to),
+            )
+          : undefined
+
+        /**
+         * A link whose URL did not survive the guard is **not a
+         * link at all**, and not a link-coloured span that quietly
+         * does nothing either.
+         *
+         * Returning here skips the `linkText` mark *and* the two
+         * `pushMarker` calls below, so `[click me](javascript:…)`
+         * keeps its brackets, keeps its parentheses and reads as
+         * exactly the characters the file contains. A reader who
+         * can see the trap is better served than one shown a
+         * confident blue word that silently refuses to work.
+         */
+        if (safeUrl === undefined) {
+          return true
+        }
 
-        if (urlNode && openMark && closeMark) {
+        /**
+         * `openMark.to < closeMark.from` is the genuinely-empty
+         * case and only that: `[](url)`, which has no text to mark.
+         * Nested inline markup used to land here too — see
+         * `toCloseMark` — and the guard would have hidden that bug
+         * rather than fixed it, so it stays narrow on purpose.
+         */
+        if (
+          openMark &&
+          closeMark &&
+          openMark.to < closeMark.from
+        ) {
           ranges.push({
             from: openMark.to,
             markKind: "linkText",
             to: closeMark.from,
             type: "mark",
-            url: text.slice(urlNode.from, urlNode.to),
+            url: safeUrl,
           })
         }
 
@@ -998,16 +1175,21 @@ const toWalker = ({
         // paste a link, get a link, with no `[](…)` typed at all.
         const parentName = nodeRef.node.parent?.name
 
+        const safeUrl = toSafeLinkUrl(
+          text.slice(nodeRef.from, nodeRef.to),
+        )
+
         if (
           parentName !== "Link" &&
-          parentName !== "Image"
+          parentName !== "Image" &&
+          safeUrl !== undefined
         ) {
           ranges.push({
             from: nodeRef.from,
             markKind: "autolink",
             to: nodeRef.to,
             type: "mark",
-            url: text.slice(nodeRef.from, nodeRef.to),
+            url: safeUrl,
           })
         } else {
           ranges.push({

package/src/markdownEditorCodeMirror/safeUrls.ts

@@ -0,0 +1,142 @@
+/**
+ * The scheme guard, for markdown this surface did not write.
+ *
+ * `MarkdownView` renders files fetched from a git host, so its
+ * document is hostile input by default. Most of what that usually
+ * means is already answered by construction here: there is no
+ * `innerHTML` anywhere in this subpath, every rendered node is
+ * `createElement` plus `textContent`, and CodeMirror's state holds
+ * the source as *text* — so a `<script>` tag in a fetched README is
+ * literal characters on screen and never a script.
+ *
+ * One thing that construction did not cover, and it was live in the
+ * editor as well: **a URL is taken from the document and used as a
+ * URL.** `[click me](javascript:…)` conceals its markup, paints as a
+ * link, and `window.open` then runs the script in this origin. The
+ * image path is the same shape one step down — `![](…)` writes an
+ * `src` verbatim.
+ *
+ * So every URL crosses this module before it reaches an `href`, an
+ * `src` or `window.open`, in **both** components. It is a defect in
+ * a shape the two share, which makes it a defect in the layer they
+ * share.
+ *
+ * ### An allowlist, and nothing clever
+ *
+ * Denying `javascript:` is the version that has a bug. Browsers
+ * throw tabs and newlines away before they read a scheme, so
+ * `JaVaScript:`, a tab in the middle of the word, and a leading
+ * newline are one URL to a navigation and three different strings to
+ * a blocklist. This normalises the way a browser does, asks what
+ * scheme is left, and accepts only names it recognises. A URL with
+ * **no** scheme is relative and is always fine.
+ */
+
+/**
+ * A scheme, per RFC 3986: a letter, then letters, digits, `+`, `-`
+ * or `.`, then the colon. Anchored, and the character class has no
+ * `/` in it — so `notes/2026:rack.md` is read as the relative path
+ * it is rather than as a `notes/2026` scheme.
+ */
+const SCHEME_PATTERN = /^([a-z][a-z0-9+.-]*):/
+
+/**
+ * `[text](<url with spaces>)` is CommonMark's escape hatch for a URL
+ * that contains a space, and the parser hands the angle brackets
+ * through as part of the `URL` node. They are not part of the URL.
+ */
+const toBareUrl = (url: string) => url.replace(/^<|>$/g, "")
+
+/**
+ * What a browser discards before it looks at a URL: the C0 control
+ * range and the space. Stripping all of it is deliberately *more*
+ * aggressive than the URL standard, which removes only tab and the
+ * two newline characters — erring this way can only turn a URL that
+ * would have been treated as relative into one that is rejected,
+ * which is the harmless direction.
+ */
+const toNormalizedUrl = (url: string) =>
+  toBareUrl(url)
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: matching them is the entire point
+    .replace(/[\u0000-\u0020]/g, "")
+    .toLowerCase()
+
+const toSchemeName = (url: string) =>
+  SCHEME_PATTERN.exec(toNormalizedUrl(url))?.[1]
+
+/**
+ * The schemes a link may carry.
+ *
+ * `mailto:` and `tel:` are here because a README that prints a
+ * contact address is ordinary and neither one can execute. `file:`
+ * is not, because it reads the *reader's* disk.
+ */
+const LINK_SCHEMES = new Set([
+  "http",
+  "https",
+  "mailto",
+  "tel",
+])
+
+/** The schemes an image's `src` may carry, `data:` aside. */
+const IMAGE_SCHEMES = new Set(["http", "https"])
+
+/**
+ * `data:`, allowed for an image type only — which is not the hole it
+ * looks like.
+ *
+ * A `data:image/svg+xml` document loaded through `<img>` is a
+ * replaced element: no script execution, no network, no reach into
+ * the embedding page. That is why it is the one inline format worth
+ * having, and why this repo's own `Avatar` story uses it for a
+ * portrait that needs no fixture file. `data:text/html` is a
+ * different thing entirely and does not match this.
+ */
+const DATA_IMAGE_PATTERN = /^data:image\/[a-z0-9.+-]+[,;]/
+
+/**
+ * The link's URL, or `undefined` when it must not become one.
+ *
+ * A rejected URL is not rewritten and not blanked — the text stays
+ * exactly where the author put it and simply stops being a link.
+ * That is the honest failure: the reader still sees every character
+ * of the source, and can still read the URL itself in the
+ * raw-markdown view, but nothing on the page will navigate to it.
+ */
+export const toSafeLinkUrl = (
+  url: string,
+): string | undefined => {
+  const scheme = toSchemeName(url)
+
+  if (scheme === undefined) {
+    // No scheme at all: a relative path, a `#fragment`, a `?query`,
+    // or a protocol-relative `//host/path`. None of them can name an
+    // executable scheme, so all of them are fine.
+    return toBareUrl(url)
+  }
+
+  return LINK_SCHEMES.has(scheme)
+    ? toBareUrl(url)
+    : undefined
+}
+
+/** The image's `src`, or `undefined` when it must not have one. */
+export const toSafeImageUrl = (
+  url: string,
+): string | undefined => {
+  const scheme = toSchemeName(url)
+
+  if (scheme === undefined) {
+    return toBareUrl(url)
+  }
+
+  if (scheme === "data") {
+    return DATA_IMAGE_PATTERN.test(toNormalizedUrl(url))
+      ? toBareUrl(url)
+      : undefined
+  }
+
+  return IMAGE_SCHEMES.has(scheme)
+    ? toBareUrl(url)
+    : undefined
+}