@charcuterie/ui 3.26.0 → 3.28.0

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>
 
       {/*