@charcuterie/ui 3.18.0 → 3.19.2

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.test.tsx

@@ -0,0 +1,185 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, waitFor } from "storybook/test"
+import { test } from "vitest"
+
+import { mountStory } from "../mountStory.testHelpers.ts"
+import * as stories from "./MarkdownEditorCodeMirror.stories.tsx"
+
+const { AllStates, CaretReveal, Default } =
+  composeStories(stories)
+
+/**
+ * The two ways this surface stopped behaving like the `<textarea>`
+ * it replaced. Both are invisible to every other gate: the stories
+ * render, the toolbar works, axe is clean, and the field is still
+ * one you cannot see the caret in and cannot click into.
+ */
+
+/**
+ * Every `caret-color` this element is actually told, in cascade
+ * order, ignoring the suite's own override.
+ *
+ * A computed style cannot answer this question **here**:
+ * `FREEZE_MOTION_CSS` forces `caret-color: transparent !important`
+ * on `*` for the whole `ui-dom` suite, deliberately, because a
+ * blinking caret is a pixel diff that means nothing. So the test
+ * reads the declarations instead — which is the honest subject
+ * anyway, since what regressed is *whose rule wins*.
+ */
+const caretDeclarationsFor = (element: Element) => {
+  const declarations: string[] = []
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList | null = null
+
+    try {
+      rules = sheet.cssRules
+    } catch {
+      // A cross-origin sheet throws on access and has nothing to
+      // say about a CodeMirror caret.
+      continue
+    }
+
+    for (const rule of Array.from(rules ?? [])) {
+      if (!(rule instanceof CSSStyleRule)) {
+        continue
+      }
+
+      const value =
+        rule.style.getPropertyValue("caret-color")
+
+      if (
+        value === "" ||
+        // The suite's own freeze, which is not part of the
+        // component's cascade.
+        rule.selectorText.includes("*")
+      ) {
+        continue
+      }
+
+      if (element.matches(rule.selectorText)) {
+        declarations.push(value)
+      }
+    }
+  }
+
+  return declarations
+}
+
+/**
+ * CodeMirror hard-codes the caret **black** for any editor whose
+ * theme did not declare itself dark — and Charcuterie's is one
+ * theme for both schemes, because every colour in it is a token. So
+ * the editor is always `cm-light`, and in dark mode the caret was
+ * black on `surface-base`:
+ *
+ *   *"this comments area has a black blinking cursor in dark mode
+ *   that I can't see."*
+ *
+ * It is `caret-color` and not `.cm-cursor` because `drawSelection`
+ * is **not** installed on this surface: the caret is the browser's
+ * own, so the property the browser reads is the only lever. Last
+ * declaration wins at equal specificity — two classes each — and
+ * the base theme is `Prec.lowest`, which is what puts it first in
+ * the sheet.
+ */
+test("the caret is a token, not CodeMirror's black", async () => {
+  const { canvas } = await mountStory(CaretReveal)
+
+  const content = canvas.getByRole("textbox", {
+    name: "Description",
+  })
+
+  const declarations = caretDeclarationsFor(content)
+
+  await expect(declarations.at(-1)).toBe(
+    "var(--color-content-primary)",
+  )
+})
+
+/**
+ * The whole box takes a click, because the whole box IS the text
+ * field:
+ *
+ *   *"the markdown box isn't a textarea, it's an input field or
+ *   something. It should be the whole box that's clickable to type
+ *   into."*
+ *
+ * `.cm-content` is the `contenteditable`, and it used to be as tall
+ * as its text — one line, in an empty field inside an 8rem frame.
+ * Everything below it belonged to the wrapper `<div>`, so the
+ * bottom three quarters of a text field focused nothing.
+ *
+ * The number is the frame's own minimum (`min-h-32`), so this fails
+ * on any change that puts the minimum back on a box the caret does
+ * not live in.
+ */
+test("an empty field's text area fills the frame", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  const content = canvas.getByRole("textbox", {
+    name: "Empty description",
+  })
+
+  await waitFor(() => {
+    expect(
+      content.getBoundingClientRect().height,
+    ).toBeGreaterThanOrEqual(128)
+  })
+})
+
+/** And the point three quarters of the way down an empty field
+ * belongs to the document rather than to the frame around it. */
+test("a click low in an empty field lands in the document", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  const content = canvas.getByRole("textbox", {
+    name: "Empty description",
+  })
+
+  const box = content.getBoundingClientRect()
+
+  const hit = document.elementFromPoint(
+    box.left + box.width / 2,
+    box.bottom - 8,
+  )
+
+  await expect(content.contains(hit)).toBe(true)
+
+  await userEvent.click(content)
+
+  await expect(
+    content === document.activeElement ||
+      content.contains(document.activeElement),
+  ).toBe(true)
+})
+
+/**
+ * The other end of the same change: filling the frame must not
+ * turn the frame into a scroll box.
+ *
+ * A description is read in place, and an editor that keeps its own
+ * 8rem window over a 40-line document is the shape this surface
+ * exists to avoid. The frame grows instead — which is what
+ * `min-height: auto` on a flex item preserves, and what a `height`
+ * anywhere in this stack would have quietly taken away.
+ */
+test("a document taller than the frame grows it", async () => {
+  const { canvas } = await mountStory(Default)
+
+  const content = canvas.getByRole("textbox", {
+    name: "Description",
+  })
+
+  const scroller = content.parentElement as HTMLElement
+
+  await waitFor(() => {
+    expect(
+      content.getBoundingClientRect().height,
+    ).toBeGreaterThan(128)
+  })
+
+  await expect(scroller.scrollHeight).toBe(
+    scroller.clientHeight,
+  )
+})

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.tsx

@@ -834,8 +834,49 @@ export const MarkdownEditorCodeMirror = ({
         />
       </div>
 
+      {/*
+        The frame's height reaches the `contenteditable`, so the
+        whole box takes a click.
+
+        A `<textarea>` is one box: it is as tall as you make it and
+        every pixel of it accepts the caret. CodeMirror is a stack
+        — `.cm-editor` in this host, `.cm-scroller` in that, and
+        the `contenteditable` `.cm-content` in that — and each of
+        those was only as tall as the text. A frame with a
+        `min-height` and a two-line document therefore had a large
+        band that belonged to *this div*, and pressing it focused
+        nothing:
+
+          *"the markdown box isn't a textarea, it's an input field
+          or something. It should be the whole box that's clickable
+          to type into."*
+
+        So the height is handed down the stack, one utility per
+        step, and each one is there because the step above it does
+        not arrive on its own:
+
+         1. `flex flex-col` + `[&>.cm-editor]:flex-1` — a
+            `min-height` is not a definite height, so nothing
+            inside the editor could be a percentage *of* it.
+         2. `[&_.cm-scroller]:flex-1` — CodeMirror's base theme
+            gives the scroller `height: 100%`, and that percentage
+            does not resolve against a parent whose own height came
+            out of flexing. Stretching it by flex does.
+         3. `[&_.cm-content]:self-stretch` — the scroller is a flex
+            ROW pinned to `align-items: flex-start !important`, so
+            the content sits at its natural height. `align-self` is
+            the item's own property and is not what that
+            `!important` is on, which is why this is the one line
+            that reaches the box the caret actually lives in.
+
+        Everything here grows, and nothing clips: a document taller
+        than the frame still makes the frame taller rather than
+        scrolling inside it, which is what `min-height: auto` on a
+        flex item preserves. Measured both ways in
+        `MarkdownEditorCodeMirror.test.tsx`.
+      */}
       <div
-        className="min-h-32 px-1 text-md cq-md:min-h-48"
+        className="flex min-h-32 flex-col px-1 text-md cq-md:min-h-48 [&>.cm-editor]:flex-1 [&_.cm-scroller]:flex-1 [&_.cm-content]:self-stretch"
         ref={hostRef}
       />
 

package/src/markdownEditorCodeMirror/livePreview.ts

@@ -1153,6 +1153,28 @@ const livePreviewTheme = EditorView.theme({
    * it.
    */
   ".cm-content": {
+    /**
+     * The caret, which CodeMirror hard-codes **black**.
+     *
+     * `drawSelection` is not installed, so the caret is the
+     * browser's own and `caret-color` decides what it looks like.
+     * The base theme sets that per light/dark class — `&light .cm-
+     * content { caret-color: black }` — and those classes track
+     * whether a *CodeMirror theme* declared `dark: true`, not what
+     * scheme the page is painted in. Charcuterie has one theme for
+     * both schemes because every colour in it is a token, so the
+     * editor is always `cm-light` and the caret was always black:
+     * invisible on `surface-base` in dark mode, which is a text
+     * field you cannot find the insertion point in.
+     *
+     * The token is the same one the text uses, so it follows the
+     * scheme by construction and cannot be black on black again.
+     * Same specificity as the base rule it replaces (two classes),
+     * and later in the sheet — a theme's rules are inserted after
+     * the base theme's, which is what CodeMirror's `Prec.lowest`
+     * on the base module guarantees.
+     */
+    caretColor: "var(--color-content-primary)",
     lineHeight: "1.6",
   },
   /**

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 }