@charcuterie/ui 3.25.0 → 3.27.0

package/src/MarkdownEditor/MarkdownEditor.test.tsx

@@ -625,3 +625,111 @@ test("the hint stays described when the container is narrow", async () => {
 
   await expectNoAxeViolations(canvasElement)
 })
+
+/**
+ * THE IMAGE BUTTON, and the reason it is in the toolbar rather
+ * than beside the editor.
+ *
+ * The editor already took a paste and a drop. Neither exists on a
+ * tablet, so the only way in there was a `FileDropZone` under the
+ * box — which appends to the END of the document, because pressing
+ * it moves focus out of the editor. An image in prose belongs at
+ * the point it is explained, so the control has to be one the
+ * editor owns.
+ *
+ * ⚠️ It is the FOURTH action, before the lists, because `Toolbar`
+ * overflows from the end and last put it behind "More actions" at
+ * 900px. It still collapses on a narrow enough surface, so a test
+ * cannot assume the button is on the bar.
+ */
+const openImageButton = async (
+  canvas: Canvas,
+  body: Canvas,
+) => {
+  const onTheBar = canvas.queryByRole("button", {
+    name: "Image",
+  })
+
+  if (onTheBar) {
+    return onTheBar
+  }
+
+  await userEvent.click(
+    canvas.getByRole("button", { name: "More actions" }),
+  )
+
+  // The menu is PORTALLED, so it is on `body` and not inside the
+  // story's canvas.
+  return body.getByRole("menuitem", { name: "Image" })
+}
+
+test("the toolbar offers Image when uploads are wired", async () => {
+  const { body, canvas } = await mountStory(Interactive)
+
+  await expect(
+    await openImageButton(canvas, body),
+  ).not.toBeNull()
+})
+
+/** A button that opens a file picker and then has nowhere to send
+ * the file is worse than no button. */
+test("the toolbar hides Image when nothing can take the file", async () => {
+  const { body, canvas } = await mountStory(NoUpload)
+
+  const overflow = canvas.queryByRole("button", {
+    name: "More actions",
+  })
+
+  if (overflow) {
+    await userEvent.click(overflow)
+  }
+
+  await expect(
+    body.queryByRole("button", { name: "Image" }),
+  ).toBeNull()
+
+  await expect(
+    body.queryByRole("menuitem", { name: "Image" }),
+  ).toBeNull()
+})
+
+test("a picked file uploads and lands at the caret", async () => {
+  const { body, canvas } = await mountStory(Interactive)
+
+  const editor = getEditor(canvas, "Task description")
+
+  await userEvent.click(editor)
+
+  editor.setSelectionRange(0, 0)
+
+  await userEvent.click(await openImageButton(canvas, body))
+
+  const picker = canvas
+    .getByRole("toolbar")
+    .parentElement?.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement
+
+  await expect(picker).not.toBeNull()
+
+  // The picker itself is the browser's; what this drives is the
+  // `change` it fires on the way back.
+  await userEvent.upload(
+    picker,
+    new File(["binary"], "jig.png", { type: "image/png" }),
+  )
+
+  await waitFor(() => {
+    expect(editor.value).toContain(
+      "![jig.png](https://example.invalid/blobs/jig.png)",
+    )
+  })
+
+  // At the caret — offset 0 — not appended to the end.
+  await expect(editor.value.startsWith("![jig.png](")).toBe(
+    true,
+  )
+
+  // And it is still markdown, with no tag anywhere.
+  await expect(editor.value).not.toContain("<img")
+})

package/src/MarkdownEditor/MarkdownEditor.tsx

@@ -63,6 +63,7 @@ export type MarkdownEditorIcons = Partial<
     | "bulletedList"
     | "code"
     | "heading"
+    | "image"
     | "italic"
     | "link"
     | "numberedList"
@@ -286,6 +287,12 @@ export const MarkdownEditor = ({
 
   const layerRef = useRef<HTMLDivElement>(null)
 
+  /** The toolbar's Image button presses this. It is a real
+   * `<input type="file">` because nothing else opens a file
+   * picker, and it is the only way in on a touch device — there
+   * is nothing to paste from and nothing to drag. */
+  const imageInputRef = useRef<HTMLInputElement>(null)
+
   const uploadCount = useRef(0)
 
   const [value, setValue] = useState(defaultValue)
@@ -674,6 +681,54 @@ export const MarkdownEditor = ({
                 )
               },
             },
+            /*
+              IMAGE, and only when the consumer can actually take
+              one. A button that opens a file picker and then has
+              nowhere to send the file is worse than no button.
+
+              Spread rather than a `filter(Boolean)` so the array
+              stays a `ToolbarItem[]` without a cast.
+
+              ⚠️ FOURTH, and the position is load-bearing rather
+              than aesthetic. `Toolbar` overflows from the END of
+              this list, so the order IS the priority order. Put
+              last, beside Link where it reads most naturally, and
+              Image was the first thing to collapse into "More
+              actions" — at 900px it was already hidden, and in a
+              comment box in a rail it never appeared at all. That
+              is the complaint this button exists to answer:
+              *"adding an image is way at the bottom"*. Hiding it
+              behind an overflow trigger moves the problem rather
+              than fixing it.
+
+              Fourth is visible wherever four actions fit — at
+              900px the bar carries eight. It still collapses on a
+              genuinely narrow editor (at 460px the bar carries
+              three), which is why a comment box in a rail keeps a
+              `FileDropZone` beside it. It also reads: emphasis,
+              then structure, then insert.
+
+              The caret is why this belongs in the toolbar at all
+              rather than beside the editor. A `FileDropZone` under
+              the box appends to the end of the document, because
+              pressing it moves focus out; the textarea keeps its
+              `selectionStart` while blurred, so the insertion
+              lands where the user last was — which is the whole
+              point of an image in prose.
+            */
+            ...(onUploadImage
+              ? [
+                  {
+                    icon: icons?.image,
+                    isDisabled: isDisabled || isReadOnly,
+                    key: "image",
+                    label: "Image",
+                    onSelect: () => {
+                      imageInputRef.current?.click()
+                    },
+                  },
+                ]
+              : []),
             {
               icon: icons?.bulletedList,
               isDisabled: isDisabled || isReadOnly,
@@ -755,6 +810,40 @@ export const MarkdownEditor = ({
           overflow="menu"
           overflowIcon={icons?.overflow}
         />
+
+        {/*
+          The Image button's actual control.
+
+          `hidden`, not `sr-only`: `display: none` takes it out of
+          the accessibility tree, which is what is wanted here —
+          the toolbar button is the named control, and a second
+          unlabelled file input announced beside it would be one
+          control too many. `.click()` on a hidden input opens the
+          picker in every browser the fleet runs.
+
+          `multiple`, because a drop already takes several and the
+          two ways in should not disagree. The value is cleared
+          after each pick so choosing the SAME file twice fires
+          `change` the second time.
+        */}
+        {onUploadImage ? (
+          <input
+            accept="image/*"
+            aria-hidden="true"
+            className="hidden"
+            multiple
+            onChange={(changeEvent) => {
+              uploadImages(
+                Array.from(changeEvent.target.files ?? []),
+              )
+
+              changeEvent.target.value = ""
+            }}
+            ref={imageInputRef}
+            tabIndex={-1}
+            type="file"
+          />
+        ) : null}
       </div>
 
       <div className="grid">

package/src/icons.storyHelpers.tsx

@@ -295,6 +295,16 @@ export const LinkIcon = (): ReactNode => (
   </svg>
 )
 
+export const ImageIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <rect height="16" rx="2" width="18" x="3" y="4" />
+
+    <path d="M3 15l5-5 4 4 3-3 6 6" />
+
+    <circle cx="8.5" cy="9" r="1.2" />
+  </svg>
+)
+
 /**
  * The whole `MarkdownEditorIcons` bag, ready to spread into either
  * editor's `icons` prop.
@@ -304,6 +314,7 @@ export const MARKDOWN_ICONS = {
   bulletedList: <BulletedListIcon />,
   code: <CodeIcon />,
   heading: <HeadingIcon />,
+  image: <ImageIcon />,
   italic: <ItalicIcon />,
   link: <LinkIcon />,
   numberedList: <NumberedListIcon />,

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.mdx

@@ -148,7 +148,9 @@ from either edge, or flip the Markdown source toggle, which is exactly what it i
 
 ## Pasting
 
-- **An image** (or a drop) runs `onUploadImage` and inserts `![alt](url)` at the caret, then
+- **An image** — pasted, dropped, or picked with the toolbar's **Image** action, which
+  appears only when `onUploadImage` is wired and is the only way in on a tablet — runs
+  `onUploadImage` and inserts `![alt](url)` at the caret, then
   renders it in place. The component does not own storage — it hands you a `File`.
 - **A URL over selected text** becomes `[selection](url)`, the way it does in every other
   editor. Deliberately strict: one absolute `http(s)` URL and nothing else, because mangling

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.stories.tsx

@@ -242,3 +242,34 @@ export const IconsVersusWords: Story = {
     </StoryGrid>
   ),
 }
+
+/**
+ * With an upload wired, so the **Image** toolbar action appears.
+ *
+ * The editor already took a paste and a drop; neither exists on a
+ * tablet, and a `FileDropZone` beside the box appends to the end of
+ * the document because pressing it moves focus out. The toolbar
+ * button keeps the insertion at the caret, which is the whole point
+ * of an image in prose.
+ *
+ * The upload here is a fake that resolves after a beat, so the
+ * placeholder is visible while it runs. A real consumer returns a
+ * URL from its own blob storage.
+ */
+export const Uploading: Story = {
+  args: {
+    defaultValue:
+      "Press Image, or paste one, and it lands where the caret is.\n",
+    label: "Task description",
+    onUploadImage: async (file: File) => {
+      await new Promise((resolve) => {
+        setTimeout(resolve, 600)
+      })
+
+      return {
+        alt: file.name,
+        url: `https://example.invalid/blobs/${encodeURIComponent(file.name)}`,
+      }
+    },
+  },
+}

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.test.tsx

@@ -5,9 +5,13 @@ import { test } from "vitest"
 import { mountStory } from "../mountStory.testHelpers.ts"
 import * as stories from "./MarkdownEditorCodeMirror.stories.tsx"
 
-const { AllStates, CaretReveal, Default } =
+const { AllStates, CaretReveal, Default, Uploading } =
   composeStories(stories)
 
+type Canvas = Awaited<
+  ReturnType<typeof mountStory>
+>["canvas"]
+
 /**
  * The two ways this surface stopped behaving like the `<textarea>`
  * it replaced. Both are invisible to every other gate: the stories
@@ -183,3 +187,107 @@ test("a document taller than the frame grows it", async () => {
     scroller.clientHeight,
   )
 })
+
+/**
+ * THE IMAGE BUTTON, on the CodeMirror surface.
+ *
+ * Same control and same reason as the `<textarea>` sibling's: paste
+ * and drop do not exist on a tablet, and a `FileDropZone` beside the
+ * editor appends to the END of the document because pressing it
+ * moves focus out. Here the insertion goes through
+ * `readSelection(view)`, so it lands at the caret — CodeMirror keeps
+ * its selection while the file picker is open.
+ *
+ * ⚠️ Image is the FOURTH action, before the lists, because
+ * `Toolbar` overflows from the end and last put it behind the
+ * overflow trigger at 900px. It still collapses on a narrow enough
+ * surface, so a test cannot assume it is on the bar.
+ */
+const openImageButton = async (
+  canvas: Canvas,
+  body: Canvas,
+) => {
+  const onTheBar = canvas.queryByRole("button", {
+    name: "Image",
+  })
+
+  if (onTheBar) {
+    return onTheBar
+  }
+
+  await userEvent.click(
+    canvas.getByRole("button", { name: "More actions" }),
+  )
+
+  // `overflow="panel"` here rather than `menu`, and the panel is
+  // PORTALLED — so it is on `body`, not inside the story canvas.
+  return body.getByRole("button", { name: "Image" })
+}
+
+test("the toolbar offers Image when uploads are wired", async () => {
+  const { body, canvas } = await mountStory(Uploading)
+
+  await expect(
+    await openImageButton(canvas, body),
+  ).not.toBeNull()
+})
+
+/** A button that opens a file picker and then has nowhere to send
+ * the file is worse than no button. */
+test("the toolbar hides Image when nothing can take the file", async () => {
+  const { body, canvas } = await mountStory(Default)
+
+  const overflow = canvas.queryByRole("button", {
+    name: "More actions",
+  })
+
+  if (overflow) {
+    await userEvent.click(overflow)
+  }
+
+  await expect(
+    body.queryByRole("button", { name: "Image" }),
+  ).toBeNull()
+})
+
+test("a picked file uploads and lands in the document", async () => {
+  const { body, canvas } = await mountStory(Uploading)
+
+  await userEvent.click(await openImageButton(canvas, body))
+
+  const picker = canvas
+    .getByRole("toolbar")
+    .parentElement?.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement
+
+  await expect(picker).not.toBeNull()
+
+  // The picker itself is the browser's; what this drives is the
+  // `change` it fires on the way back.
+  await userEvent.upload(
+    picker,
+    new File(["binary"], "jig.png", { type: "image/png" }),
+  )
+
+  /*
+    The document is CodeMirror's, so the assertion reads the
+    editing surface's text rather than a `value`.
+
+    NOT `getByRole("img")`, which is what this first tried: live
+    preview reveals a construct's markers while the caret is inside
+    it, and the caret lands immediately after the insertion — so
+    the image is markdown on screen at exactly this moment and
+    becomes a picture when the caret leaves. That is the surface
+    working, not failing.
+  */
+  await waitFor(() => {
+    expect(
+      canvas.getByRole("textbox", {
+        name: "Task description",
+      }).textContent,
+    ).toContain(
+      "![jig.png](https://example.invalid/blobs/jig.png)",
+    )
+  })
+})

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.tsx

@@ -300,6 +300,12 @@ export const MarkdownEditorCodeMirror = ({
 
   const uploadCount = useRef(0)
 
+  /** The toolbar's Image button presses this. A real
+   * `<input type="file">` because nothing else opens a file
+   * picker, and it is the only way in on a touch device — there
+   * is nothing to paste from and nothing to drag. */
+  const imageInputRef = useRef<HTMLInputElement>(null)
+
   const editabilityRef = useRef(new Compartment())
 
   const [isRawMode, setIsRawMode] = useState(
@@ -732,6 +738,34 @@ export const MarkdownEditorCodeMirror = ({
                 )
               },
             },
+            /*
+              IMAGE, and only when the consumer can actually take
+              one. A button that opens a file picker and then has
+              nowhere to send the file is worse than no button.
+
+              Spread rather than a `filter(Boolean)`, so the array
+              stays a `ToolbarItem[]` without a cast.
+
+              ⚠️ FOURTH, and the position is load-bearing rather
+              than aesthetic — same reason as the textarea
+              sibling's. `Toolbar` overflows from the END, so the
+              order IS the priority order, and last put Image
+              behind "More actions" at 900px. The whole point of
+              the button is that adding an image is not buried.
+            */
+            ...(onUploadImage
+              ? [
+                  {
+                    icon: icons?.image,
+                    isDisabled: isDisabled || isReadOnly,
+                    key: "image",
+                    label: "Image",
+                    onSelect: () => {
+                      imageInputRef.current?.click()
+                    },
+                  },
+                ]
+              : []),
             {
               icon: icons?.bulletedList,
               isDisabled: isDisabled || isReadOnly,
@@ -832,6 +866,56 @@ export const MarkdownEditorCodeMirror = ({
           overflow="panel"
           overflowIcon={icons?.overflow}
         />
+
+        {/*
+          The Image button's actual control.
+
+          `hidden`, not `sr-only`: `display: none` takes it out of
+          the accessibility tree, which is what is wanted — the
+          toolbar button is the named control, and a second
+          unlabelled file input announced beside it would be one
+          control too many.
+
+          The insertion lands at the CARET, not at the end of the
+          document, because `readSelection(view)` reads
+          CodeMirror's own selection and the view keeps it while
+          the picker is open. That is the whole reason this is a
+          toolbar button rather than a drop zone under the box.
+        */}
+        {onUploadImage ? (
+          <input
+            accept="image/*"
+            aria-hidden="true"
+            className="hidden"
+            multiple
+            onChange={(changeEvent) => {
+              const view = viewRef.current
+
+              if (view) {
+                for (const file of Array.from(
+                  changeEvent.target.files ?? [],
+                ).filter(isImageFile)) {
+                  uploadCount.current += 1
+
+                  void uploadImage({
+                    count: uploadCount.current,
+                    file,
+                    handlers: handlersRef.current,
+                    setMessage: setUploadMessage,
+                    view,
+                  })
+                }
+              }
+
+              // Cleared so choosing the SAME file twice fires
+              // `change` the second time.
+              changeEvent.target.value = ""
+            }}
+            ref={imageInputRef}
+            tabIndex={-1}
+            type="file"
+          />
+        ) : null}
       </div>
 
       {/*