@ai-matrx/rich-editor 0.5.4 → 0.5.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.5.5
+### Images in Write after a reload; image paste in textareas; checklist Enter and `- ` (2026-10-08)
+
+- Write's uploaded image draws after a reload (needs rich-content 0.2.54: the image waits for the app's lazy host instead of swapping its hooks mid-life). Guard `src/visual/__tests__/write-image-island.test.tsx`.
+- `useTextareaFormatting(el, enabled, { uploadImage })`: a pasted or dropped image uploads and `![name](url)` lands at the caret. `format/markdown-image-upload` — `useMarkdownImageUpload()` (through the host bindings; Write uses it), `createMarkdownImageUpload(upload, fileUrls)` (for a host that renders before the lazy host), `insertUploadedImages`, `imageFilesOf`. Guard `src/format/__tests__/textarea-image-paste.test.tsx`.
+- An empty list item stores as its bare marker, task or not: `- [ ]` with nothing after it reloads as a bullet reading "[ ]" (GFM needs text after the box).
+- `- ` / `* ` / `+ ` typed at the start of a checklist item turns it into a bullet item (Notion, Google Docs); typed mid-text it stays text. Guard `src/visual/__tests__/checklist-enter-and-dash.test.ts`.
+
+Consumer action: a markdown textarea that should take pasted images passes `uploadImage`.
+
 ## 0.5.4
 ### Images in Write survive a reload (2026-10-08)
 

package/dist/core/markdown-serialize.js

@@ -140,7 +140,7 @@ function serializeListItem(item, marker, ctx) {
   const task = attr(item, "mdTask") ?? "";
   const body = serializeChildren(item, "listItem", ctx);
   const head = lead + marker;
-  if (body === "") return task ? `${head}${after || " "}${task}`.trimEnd() : head;
+  if (body === "") return head;
   const indent = attr(item, "mdIndent") ?? (lead + marker + (after || " ")).length;
   const pad = " ".repeat(indent);
   const lines = body.split("\n");

package/dist/core/typing-rules.d.ts

@@ -1,6 +1,8 @@
 import { Extension, InputRule } from "@tiptap/core";
 /** `[ ] ` / `[] ` / `[x] ` typed at the very start of a line. */
 export declare const TASK_TYPED: RegExp;
+/** `- ` / `* ` / `+ ` typed at the very start of a line. */
+export declare const BULLET_TYPED: RegExp;
 /** An address followed by the whitespace that ends it. */
 export declare const URL_TYPED: RegExp;
 /** `![alt](url)` followed by whitespace. */

package/dist/core/typing-rules.js

@@ -2,6 +2,7 @@ import { Extension, InputRule } from "@tiptap/core";
 import { findWrapping } from "@tiptap/pm/transform";
 import { TASK_DONE, TASK_OPEN } from "./commands.js";
 const TASK_TYPED = /^\s*\[([ xX]?)\]\s$/;
+const BULLET_TYPED = /^\s*([-+*])\s$/;
 const URL_TYPED = /(?:^|\s)((?:https?:\/\/|www\.)[^\s<>]+)(\s)$/;
 const IMAGE_TYPED = /!\[([^\]\n]*)\]\(([^()\s]+)\)(\s)$/;
 function trimUrl(url) {
@@ -52,6 +53,22 @@ const taskRule = new InputRule({
     return void 0;
   }
 });
+const bulletInTaskRule = new InputRule({
+  find: BULLET_TYPED,
+  handler: ({ state, range }) => {
+    const $from = state.doc.resolve(range.from);
+    if ($from.parent.type.name !== "paragraph") return null;
+    const itemDepth = listItemDepth($from);
+    if (itemDepth === -1 || $from.index(itemDepth) !== 0) return null;
+    const itemPos = $from.before(itemDepth);
+    const item = state.doc.nodeAt(itemPos);
+    if (!item || typeof item.attrs.mdTask !== "string") return null;
+    const { tr } = state;
+    tr.delete(range.from, range.to);
+    tr.setNodeMarkup(itemPos, void 0, { ...item.attrs, mdTask: null });
+    return void 0;
+  }
+});
 const imageRule = new InputRule({
   find: IMAGE_TYPED,
   handler: ({ state, range, match }) => {
@@ -86,7 +103,7 @@ const urlRule = new InputRule({
     return void 0;
   }
 });
-const TYPING_RULES = [taskRule, imageRule, urlRule];
+const TYPING_RULES = [taskRule, bulletInTaskRule, imageRule, urlRule];
 const MarkdownTypingRules = Extension.create({
   name: "richEditorTypingRules",
   addInputRules() {
@@ -94,6 +111,7 @@ const MarkdownTypingRules = Extension.create({
   }
 });
 export {
+  BULLET_TYPED,
   IMAGE_TYPED,
   MarkdownTypingRules,
   TASK_TYPED,

package/dist/editor/RichEditorImpl.js

@@ -40,8 +40,7 @@ import { cn } from "@ai-matrx/design-system";
 import { EditableContextMenu } from "@ai-matrx/rich-content/host/app-bindings";
 import { buildApplicationScopeFromMenuContext } from "@ai-matrx/rich-content/host/app-bindings";
 import { useMicField } from "@ai-matrx/rich-content/host/app-bindings";
-import { useFileUpload } from "@ai-matrx/rich-content/host/app-bindings";
-import { fileUrls } from "@ai-matrx/rich-content/host/app-bindings";
+import { useMarkdownImageUpload } from "../format/markdown-image-upload.js";
 import { RichDocument } from "@ai-matrx/rich-content/rich-document/RichDocument";
 import { planSave } from "../core/save-plan.js";
 import { reconcileHostValue } from "../core/host-value.js";
@@ -141,7 +140,6 @@ function RichEditorImpl({
   const handle = useRef(null);
   const pendingCaret = useRef(null);
   const imageInput = useRef(null);
-  const { upload } = useFileUpload();
   const lastValue = useRef(value);
   const ownSaves = useRef(/* @__PURE__ */ new Set());
   useEffect(() => {
@@ -262,16 +260,7 @@ function RichEditorImpl({
     setImageDialogOpen(false);
     imageInput.current?.click();
   };
-  const uploadImage = async (file) => {
-    try {
-      const uploaded = await upload({ kind: "file", file }, { folderPath: "Editor images" });
-      const alt = file.name.replace(/\.[^.]+$/, "").replace(/[[\]]/g, "");
-      return `![${alt}](${fileUrls(uploaded.fileId).inline})`;
-    } catch (error) {
-      toast.error(`The image did not upload: ${error instanceof Error ? error.message : String(error)}`);
-      return null;
-    }
-  };
+  const uploadImage = useMarkdownImageUpload();
   const shellRef = useRef(null);
   const liveShell = {
     save,

package/dist/format/markdown-image-upload.d.ts

@@ -0,0 +1,34 @@
+export type MarkdownImageUpload = (file: File) => Promise<string | null>;
+/** The alt text for an uploaded file: its name without the extension, brackets removed. */
+export declare function imageAltOf(fileName: string): string;
+type Upload = (input: {
+    kind: "file";
+    file: File;
+}, options: {
+    folderPath: string;
+}) => Promise<{
+    fileId: string;
+}>;
+type FileUrls = (fileId: string) => {
+    inline: string;
+};
+/**
+ * The uploader over a host's own upload + file-URL functions — for a host that renders before the
+ * app's lazy rich-content host has loaded (a hook read through the host bindings would change its
+ * hook list when the host lands).
+ */
+export declare function createMarkdownImageUpload(upload: Upload, urls: FileUrls): MarkdownImageUpload;
+/** Upload one image through the host bindings; the markdown that draws it, or null (announced). */
+export declare function useMarkdownImageUpload(): MarkdownImageUpload;
+/** The image files a paste or drop carries (screenshots arrive as files on the clipboard). */
+export declare function imageFilesOf(data: DataTransfer | null | undefined): File[];
+/**
+ * Upload each image and write its markdown into the textarea where the caret was when it was
+ * pasted or dropped (later edits move that point with them only if they were before it — the
+ * insert lands at the recorded offset clamped to the text). React hears it as an input event.
+ */
+export declare function insertUploadedImages(el: HTMLTextAreaElement, files: readonly File[], at: {
+    from: number;
+    to: number;
+}, uploadImage: MarkdownImageUpload): Promise<void>;
+export {};

package/dist/format/markdown-image-upload.js

@@ -0,0 +1,60 @@
+"use client";
+import { fileUrls, useFileUpload } from "@ai-matrx/rich-content/host/app-bindings";
+import { toast } from "@ai-matrx/rich-content/host/toast";
+function imageAltOf(fileName) {
+  return fileName.replace(/\.[^.]+$/, "").replace(/[[\]]/g, "") || "image";
+}
+function createMarkdownImageUpload(upload, urls) {
+  return async (file) => {
+    try {
+      const uploaded = await upload({ kind: "file", file }, { folderPath: "Editor images" });
+      return `![${imageAltOf(file.name)}](${urls(uploaded.fileId).inline})`;
+    } catch (error) {
+      toast.error(`The image did not upload: ${error instanceof Error ? error.message : String(error)}`);
+      return null;
+    }
+  };
+}
+function useMarkdownImageUpload() {
+  const { upload } = useFileUpload();
+  return createMarkdownImageUpload(upload, fileUrls);
+}
+function imageFilesOf(data) {
+  return Array.from(data?.files ?? []).filter((file) => file.type.startsWith("image/"));
+}
+async function insertUploadedImages(el, files, at, uploadImage) {
+  let from = at.from;
+  let to = at.to;
+  for (const file of files) {
+    const markdown = await uploadImage(file);
+    if (!markdown || !el.isConnected) continue;
+    const text = el.value;
+    const start = Math.min(from, text.length);
+    const end = Math.min(Math.max(to, start), text.length);
+    const before = text.slice(0, start);
+    const lead = before === "" || /\s$/.test(before) ? "" : " ";
+    const insert = `${lead}${markdown}`;
+    el.focus({ preventScroll: true });
+    el.setSelectionRange(start, end);
+    let done = false;
+    try {
+      done = typeof document.execCommand === "function" && document.execCommand("insertText", false, insert);
+    } catch {
+      done = false;
+    }
+    if (!done || el.value === text) {
+      el.setRangeText(insert, start, end, "end");
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    from = start + insert.length;
+    to = from;
+    el.setSelectionRange(from, from);
+  }
+}
+export {
+  createMarkdownImageUpload,
+  imageAltOf,
+  imageFilesOf,
+  insertUploadedImages,
+  useMarkdownImageUpload
+};

package/dist/format/useTextareaFormatting.d.ts

@@ -1,4 +1,12 @@
+import { type MarkdownImageUpload } from "./markdown-image-upload.js";
+export interface TextareaFormattingOptions {
+    /**
+     * Pasting or dropping an image uploads it and writes `![name](url)` at the caret
+     * (useMarkdownImageUpload). Absent: images are left to the browser / the host.
+     */
+    uploadImage?: MarkdownImageUpload | null;
+}
 export declare function isApplePlatform(): boolean;
 /** Run the chord's command on this element; true when the chord was a formatting command. */
 export declare function handleFormatChord(el: HTMLTextAreaElement, event: KeyboardEvent): boolean;
-export declare function useTextareaFormatting(element: HTMLTextAreaElement | null, enabled?: boolean): void;
+export declare function useTextareaFormatting(element: HTMLTextAreaElement | null, enabled?: boolean, options?: TextareaFormattingOptions): void;

package/dist/format/useTextareaFormatting.js

@@ -1,9 +1,10 @@
 "use client";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useSelectionZone } from "@ai-matrx/rich-content/selection-toolbar/selection-zones";
 import { formatCommandForKey, keyNameOf } from "../core/markdown-format.js";
 import { markdownFormatHost, registerFormatElement, textareaFormatTarget } from "./format-target.js";
 import { ensureFormatActions } from "./format-actions.js";
+import { imageFilesOf, insertUploadedImages } from "./markdown-image-upload.js";
 function isApplePlatform() {
   if (typeof navigator === "undefined") return false;
   const platform = navigator.userAgentData?.platform ?? navigator.platform ?? "";
@@ -16,7 +17,41 @@ function handleFormatChord(el, event) {
   textareaFormatTarget(el).run(command);
   return true;
 }
-function useTextareaFormatting(element, enabled = true) {
+function useTextareaFormatting(element, enabled = true, options = {}) {
+  const uploadRef = useRef(options.uploadImage);
+  useEffect(() => {
+    uploadRef.current = options.uploadImage;
+  });
+  const uploads = Boolean(options.uploadImage);
+  useEffect(() => {
+    if (!element || !enabled || !uploads) return;
+    const take = (event, data) => {
+      if (element.readOnly || element.disabled) return;
+      const images = imageFilesOf(data);
+      const uploadImage = uploadRef.current;
+      if (images.length === 0 || !uploadImage) return;
+      event.preventDefault();
+      void insertUploadedImages(element, images, { from: element.selectionStart, to: element.selectionEnd }, uploadImage);
+    };
+    const onPaste = (event) => take(event, event.clipboardData);
+    const onDragOver = (event) => {
+      if (Array.from(event.dataTransfer?.items ?? []).some((item) => item.kind === "file" && item.type.startsWith("image/"))) {
+        event.preventDefault();
+      }
+    };
+    const onDrop = (event) => {
+      if (imageFilesOf(event.dataTransfer).length) element.focus({ preventScroll: true });
+      take(event, event.dataTransfer);
+    };
+    element.addEventListener("paste", onPaste);
+    element.addEventListener("dragover", onDragOver);
+    element.addEventListener("drop", onDrop);
+    return () => {
+      element.removeEventListener("paste", onPaste);
+      element.removeEventListener("dragover", onDragOver);
+      element.removeEventListener("drop", onDrop);
+    };
+  }, [element, enabled, uploads]);
   useEffect(() => {
     if (!element || !enabled) return;
     ensureFormatActions();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "The AI Matrx editor: Visual (Tiptap), Source (CodeMirror), Preview, the markdown formatting command layer, and edit-in-place — over @ai-matrx/rich-content. Consumers that only render never install it.",
   "type": "module",
   "license": "MIT",
@@ -90,12 +90,12 @@
     "@tiptap/suggestion": "^3.31.3",
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.48.0",
-    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/agents": "latest",
+    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/content-ir": "latest",
     "@ai-matrx/design-system": "latest",
-    "@ai-matrx/print": "latest",
     "@ai-matrx/kit": "latest",
+    "@ai-matrx/print": "latest",
     "@ai-matrx/rich-content": "latest"
   },
   "peerDependencies": {