@charcuterie/ui 3.17.0 → 3.19.1

package/src/markdownEditorCodeMirror/livePreviewRanges.ts

@@ -225,6 +225,26 @@ export type ToLivePreviewRangesOptions = {
    * the toggle is to see the markup, not to lose the highlighting.
    */
   isRawMode?: boolean
+  /**
+   * Re-point a link before it becomes an `href`.
+   *
+   * The document's own URL goes through `toSafeLinkUrl` first, so
+   * what arrives here has already been refused if it named an
+   * executable scheme. What comes BACK is the consumer's own string
+   * and is used as given — an app that returns a route is trusted
+   * about its own routes.
+   *
+   * Return `undefined` to leave the link alone, which is also what
+   * omitting this does. **Links only**: an image's `src` is not
+   * offered, because a consumer that maps a document path to a page
+   * URL would turn a working image into a broken one.
+   *
+   * The case it exists for: a relative path in a fetched or imported
+   * document. `[the runbook](../docs/runbook.md)` resolves against
+   * the page the reader is on, which is the consuming app, and lands
+   * on nothing. Only the app knows what that path means.
+   */
+  resolveUrl?: (url: string) => string | undefined
   selections: readonly LivePreviewSelection[]
   text: string
   to?: number
@@ -912,13 +932,27 @@ const isTableRendered = ({
  */
 const toWalker = ({
   isRawMode,
+  resolveUrl,
   selections,
   text,
 }: {
   isRawMode: boolean
+  resolveUrl:
+    | ((url: string) => string | undefined)
+    | undefined
   selections: readonly LivePreviewSelection[]
   text: string
 }) => {
+  /**
+   * The consumer's answer, or the document's own URL.
+   *
+   * Applied at the two places a LINK's URL is pushed, and nowhere
+   * else, so every downstream consumer — the anchor's `href`, the
+   * span the editor opens from, a link inside a table cell — gets
+   * the same answer without knowing this exists.
+   */
+  const toHref = (url: string) => resolveUrl?.(url) ?? url
+
   const toEnter = (ranges: LivePreviewRange[]) => {
     const pushMarker = (
       from: number,
@@ -1149,7 +1183,7 @@ const toWalker = ({
             markKind: "linkText",
             to: closeMark.from,
             type: "mark",
-            url: safeUrl,
+            url: toHref(safeUrl),
           })
         }
 
@@ -1189,7 +1223,7 @@ const toWalker = ({
             markKind: "autolink",
             to: nodeRef.to,
             type: "mark",
-            url: safeUrl,
+            url: toHref(safeUrl),
           })
         } else {
           ranges.push({
@@ -1316,6 +1350,7 @@ const toWalker = ({
 export const toLivePreviewRanges = ({
   from,
   isRawMode = false,
+  resolveUrl,
   selections,
   text,
   to,
@@ -1326,9 +1361,12 @@ export const toLivePreviewRanges = ({
   tree.iterate({
     from,
     to,
-    enter: toWalker({ isRawMode, selections, text })(
-      ranges,
-    ),
+    enter: toWalker({
+      isRawMode,
+      resolveUrl,
+      selections,
+      text,
+    })(ranges),
   })
 
   return ranges
@@ -1361,6 +1399,7 @@ const TABLE_CONTAINER_NAMES = new Set([
  */
 export const toLivePreviewTableRanges = ({
   isRawMode = false,
+  resolveUrl,
   selections,
   text,
   tree,
@@ -1370,7 +1409,12 @@ export const toLivePreviewTableRanges = ({
 >): LivePreviewTableRange[] => {
   const ranges: LivePreviewTableRange[] = []
 
-  const toEnter = toWalker({ isRawMode, selections, text })
+  const toEnter = toWalker({
+    isRawMode,
+    resolveUrl,
+    selections,
+    text,
+  })
 
   tree.iterate({
     enter: (nodeRef) => {

package/src/sourceRules.test.ts

@@ -613,6 +613,15 @@ const ENTRY_POINT_RUNTIMES: Record<
     // and stays the default.
     "./markdown-editor-codemirror": [
       "@charcuterie/logic",
+      // The editor's toolbar renders a `Menu`, and every panel row now
+      // asks `usePanelItemSize` whether the window is short enough to
+      // step down — which is a `matchMedia` read, and `matchMedia` is
+      // behind this subpath by the same rule that keeps it out of
+      // `@charcuterie/logic`'s main entry. The main `ui` entry already
+      // reached it (`ColorSchemeSwitcher`); this one now does too. It is
+      // ~1 KB of feature-detected wrapper, not a runtime the subpath
+      // exists to keep out — that is the `@codemirror/*` set below.
+      "@charcuterie/logic/browser",
       "@charcuterie/tokens",
       "@codemirror/commands",
       "@codemirror/lang-markdown",

package/src/viewport.testHelpers.ts

@@ -12,10 +12,15 @@ import { page } from "@vitest/browser/context"
  * fails intermittently — which is the worst possible property for
  * the one gate that says the shell does not scroll sideways.
  *
- * Polling `innerWidth` is the honest wait: it is the same number
- * the media queries and the layout resolved against, so when it
- * matches, the thing under test really is at the width the test
- * claims.
+ * Polling `innerWidth`/`innerHeight` is the honest wait: they are the
+ * same numbers the media queries and the layout resolved against, so
+ * when they match, the thing under test really is at the size the
+ * test claims.
+ *
+ * **Height counts too**, and it did not used to. A panel row's size
+ * steps down under `(height <= 40rem)` (`usePanelItemSize`), so a test
+ * that shrinks only the height would have raced the resize with
+ * nothing to wait on and measured the tall rows about half the time.
  */
 export const setViewport = async ({
   height,
@@ -28,10 +33,13 @@ export const setViewport = async ({
 
   const deadline = Date.now() + 2000
 
-  while (globalThis.innerWidth !== width) {
+  while (
+    globalThis.innerWidth !== width ||
+    globalThis.innerHeight !== height
+  ) {
     if (Date.now() > deadline) {
       throw new Error(
-        `The viewport never reached ${width}px — it is ${globalThis.innerWidth}px. Every width assertion after this point would be measuring the wrong page.`,
+        `The viewport never reached ${width}x${height}px — it is ${globalThis.innerWidth}x${globalThis.innerHeight}px. Every size assertion after this point would be measuring the wrong page.`,
       )
     }
 
@@ -45,3 +53,10 @@ export const setViewport = async ({
 export const PHONE = { height: 844, width: 390 }
 
 export const DESKTOP = { height: 900, width: 1440 }
+
+/**
+ * A window short enough to trip `usePanelItemSize`'s first step-down
+ * (`height <= 40rem`, so 640px) and wide enough that nothing else
+ * about the layout changes with it.
+ */
+export const SHORT_WINDOW = { height: 600, width: 1440 }