@tensor_1/react 2.25.0 → 2.26.0

package/README.md

@@ -92,7 +92,9 @@ Markdown cannot represent everything a user can type. When the editor re-seriali
 - Reference definitions (`[id]: url`) are kept. If their surrounding block is deleted, they move to the end.
 
 Editor props: `features` (`full` / `comment` / `template`), `headingLevels` (limits the toolbar and input rules;
-existing headings at other levels keep their level), `onUploadImage` (enables the image button and image paste/drop),
+existing headings at other levels keep their level), `onUploadImage` (enables the image button and image paste/drop in
+every preset), `imagesUnavailableReason` (status-line text when an image is pasted or dropped while images are off;
+default label `imagesUnsupported`, "Images can't be added here."; a paste that also carries text stays a text paste),
 `isSafeUrl`, `resolveImageSrc` (its return value is used verbatim), `onSubmitShortcut` (Ctrl/Cmd+Enter), `emoji`,
 `emojiImageBaseUrl`, `maxLength` (counter; over the limit sets `aria-invalid`), `placeholder`, `disabled`, `readOnly`,
 `labels` (every string, placeholders `{count}` `{max}`), `emojiPickerLabels`, `emojiLocale`, `id`, `name` (adds a
@@ -227,6 +229,18 @@ Radial mode still shortens long labels to fit its ring, but every node carries i
 
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.
 
+### Drawer closes on a backdrop click
+
+`Drawer` closes on a click on the dimmed backdrop, as well as on Escape and its close button, and calls the same
+`onClose` (TENSOR HAR-547). `Peek` already did; both now share one handler. On a drawer that holds unsaved form input,
+pass `dismissOnBackdrop={false}` so a stray click can't discard it; Escape and the close button still close. On a
+phone the panel stops 2em + 6px short of the left edge (the browser's modal-dialog `max-width`), and a tap on that
+strip closes it too.
+
+```tsx
+<Drawer open={open} onClose={close} title="Edit user" dismissOnBackdrop={!dirty}>…</Drawer>
+```
+
 ### InfoTip and `help` slots
 
 A small ? next to a title or label opens a plain-text explanation. Use it for what a page, section or field *means*. Keep instructions the user needs while typing ("8+ characters", "ISO date") visible in `hint`.

package/dist/components/Drawer.d.ts

@@ -6,10 +6,16 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     closeLabel?: string;
     open: boolean;
     onClose?: () => void;
+    /**
+     * A click on the dimmed backdrop calls `onClose`, like Escape and the close button
+     * (TENSOR HAR-547). Pass `false` on a drawer that holds unsaved form input, so a stray click
+     * can't discard it; Escape and the close button still close. Default `true`.
+     */
+    dismissOnBackdrop?: boolean;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
 }
-declare function Drawer({ open, onClose, title, children, footer, closeLabel, className, ...rest }: DrawerProps): react.JSX.Element;
+declare function Drawer({ open, onClose, dismissOnBackdrop, title, children, footer, closeLabel, className, onClick, ...rest }: DrawerProps): react.JSX.Element;
 
 export { Drawer, type DrawerProps };

package/dist/components/Drawer.js

@@ -3,11 +3,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
 import { useDialog } from "../hooks/useDialog.js";
+import { backdropDismiss } from "../hooks/backdropDismiss.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Drawer({ open, onClose, title, children, footer, closeLabel = "Close drawer", className, ...rest }) {
+function Drawer({ open, onClose, dismissOnBackdrop = true, title, children, footer, closeLabel = "Close drawer", className, onClick, ...rest }) {
   const ref = useDialog(open, onClose);
   const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick, dismissOnBackdrop), children: [
     (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-drawer__header", children: [
       title && /* @__PURE__ */ jsx("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
       onClose && /* @__PURE__ */ jsx(

package/dist/components/Peek.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
 import { useDialog } from "../hooks/useDialog.js";
+import { backdropDismiss } from "../hooks/backdropDismiss.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
 const ChevronUp = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 8l4-4 4 4" }) });
 const ChevronDown = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
@@ -10,15 +11,7 @@ function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hi
   const ref = useDialog(open, onClose);
   const hasNav = onNavPrev != null || onNavNext != null;
   const titleId = useId();
-  const onBackdropClick = (e) => {
-    onClick?.(e);
-    if (!onClose || e.target !== e.currentTarget) return;
-    const r = e.currentTarget.getBoundingClientRect();
-    if (r.width === 0) return;
-    const outside = e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
-    if (outside) onClose();
-  };
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: onBackdropClick, children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick), children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ jsxs("div", { className: "uix-peek__nav", children: [
         /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": previousLabel, children: /* @__PURE__ */ jsx(ChevronUp, {}) }),

package/dist/components/RichTextEditor.d.ts

@@ -39,6 +39,8 @@ interface RichTextLabels {
     image: string;
     imageUploading: string;
     imageFailed: string;
+    /** Shown when an image is pasted or dropped where images are off (default for `imagesUnavailableReason`). */
+    imagesUnsupported: string;
     emoji: string;
     /** Accessible name of the `:shortcode` suggestion list. */
     emojiSuggestions: string;
@@ -65,11 +67,17 @@ interface RichTextEditorProps {
     features?: RichTextFeatures;
     /** Heading levels the toolbar and input rules offer. Default `[1, 2, 3]`. */
     headingLevels?: ReadonlyArray<RichTextHeadingLevel>;
-    /** Enables the image button (preset `full`), and image paste/drop. */
+    /** Enables image paste/drop and the toolbar image button, in every preset. */
     onUploadImage?: (file: File) => Promise<{
         src: string;
         alt: string;
     }>;
+    /**
+     * Shown in the status line when an image is pasted or dropped while images are off (no
+     * `onUploadImage`), e.g. "Attach files to the incident instead.". Nothing is inserted.
+     * Default: the `imagesUnsupported` label.
+     */
+    imagesUnavailableReason?: string;
     /** Link policy. Default: http(s), mailto and same-app paths. */
     isSafeUrl?: (url: string) => boolean;
     /** Image policy: the URL to display, or `null` to show the image as a link chip. */

package/dist/components/RichTextEditor.js

@@ -59,6 +59,7 @@ const DEFAULT_RICH_TEXT_LABELS = {
   image: "Image",
   imageUploading: "Uploading image\u2026",
   imageFailed: "The image could not be added.",
+  imagesUnsupported: "Images can't be added here.",
   emoji: "Emoji",
   emojiSuggestions: "Emoji suggestions",
   undo: "Undo",
@@ -70,8 +71,9 @@ const DEFAULT_RICH_TEXT_LABELS = {
 const COMMON = ["bold", "italic", "strike", "code", "bulletList", "orderedList", "taskList", "blockquote", "codeBlock", "link", "emoji", "history", "source"];
 const PRESETS = {
   full: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table", "image"]),
-  comment: new Set(COMMON),
-  template: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table"])
+  // Images in every preset once the consumer supplies onUploadImage (TENSOR HAR-749).
+  comment: /* @__PURE__ */ new Set([...COMMON, "image"]),
+  template: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table", "image"])
 };
 const emojiSuggestionKey = new PluginKey("uixEmojiSuggestion");
 const SHORTCODE_RE = /:([a-zA-Z0-9_+-]+):$/;
@@ -187,7 +189,8 @@ function RichTextEditor(props) {
     minRows,
     className,
     onBlur,
-    emojiImageBaseUrl
+    emojiImageBaseUrl,
+    imagesUnavailableReason
   } = props;
   const emojiBase = useMemo(() => normalizeEmojiImageBaseUrl(emojiImageBaseUrl), [emojiImageBaseUrl]);
   const renderEmoji = useEmojiRenderer(emojiImageBaseUrl);
@@ -199,7 +202,7 @@ function RichTextEditor(props) {
   const linkPopoverId = `${uid}-link`;
   const controls = PRESETS[features];
   const has = (control) => controls.has(control) && (control !== "emoji" || emoji) && (control !== "image" || !!onUploadImage);
-  const latest = useRef({ onChange, onSubmitShortcut, onBlur, isSafeUrl, resolveImageSrc, onUploadImage, placeholder, imagesOn: false });
+  const latest = useRef({ onChange, onSubmitShortcut, onBlur, isSafeUrl, resolveImageSrc, onUploadImage, placeholder, imagesOn: false, imagesOffText: "" });
   latest.current = {
     onChange,
     onSubmitShortcut,
@@ -208,7 +211,8 @@ function RichTextEditor(props) {
     resolveImageSrc,
     onUploadImage,
     placeholder,
-    imagesOn: controls.has("image") && !!onUploadImage
+    imagesOn: controls.has("image") && !!onUploadImage,
+    imagesOffText: imagesUnavailableReason?.trim() || labels.imagesUnsupported
   };
   const lastValue = useRef(value);
   const origin = useRef(null);
@@ -431,22 +435,31 @@ function RichTextEditor(props) {
     shouldRerenderOnTransaction: false,
     editable: !disabled && !readOnly,
     editorProps: {
+      // An image file pasted or dropped where images are off used to vanish silently; now the
+      // status line says so (TENSOR HAR-749). A paste that also carries text is a text paste:
+      // Excel, Word and Docs add a PNG rendering of the copied cells or text, which must not
+      // replace (or block) the text itself.
       handlePaste: (_view, event) => {
-        const files = Array.from(event.clipboardData?.files ?? []).filter((f) => f.type.startsWith("image/"));
-        if (!files.length || !latest.current.imagesOn || !editorRef.current) return false;
-        files.forEach((file) => void uploadImage(editorRef.current, file));
+        const data = event.clipboardData;
+        const files = Array.from(data?.files ?? []).filter((f) => f.type.startsWith("image/"));
+        if (!files.length || !editorRef.current || data?.getData("text/plain").trim()) return false;
+        event.preventDefault();
+        if (!latest.current.imagesOn) setStatus({ kind: "notice", text: latest.current.imagesOffText });
+        else files.forEach((file) => void uploadImage(editorRef.current, file));
         return true;
       },
       handleDrop: (_view, event) => {
         const files = Array.from(event.dataTransfer?.files ?? []).filter((f) => f.type.startsWith("image/"));
-        if (!files.length || !latest.current.imagesOn || !editorRef.current) return false;
+        if (!files.length || !editorRef.current) return false;
         event.preventDefault();
-        files.forEach((file) => void uploadImage(editorRef.current, file));
+        if (!latest.current.imagesOn) setStatus({ kind: "notice", text: latest.current.imagesOffText });
+        else files.forEach((file) => void uploadImage(editorRef.current, file));
         return true;
       }
     },
     onCreate: ({ editor: ed }) => load(ed, lastValue.current),
     onUpdate: ({ editor: ed }) => {
+      setStatus((s) => s?.kind === "notice" ? null : s);
       if (!origin.current) return;
       emit(writeMarkdown(ed.getJSON(), origin.current, managerOf(ed)));
     },

package/dist/hooks/backdropDismiss.d.ts

@@ -0,0 +1,7 @@
+import { MouseEventHandler, MouseEvent } from 'react';
+
+declare function isBackdropClick(e: MouseEvent<HTMLDialogElement>): boolean;
+/** The dialog's onClick: runs the consumer's own onClick first, then closes on a backdrop click. */
+declare function backdropDismiss(onClose: (() => void) | undefined, onClick?: MouseEventHandler<HTMLDialogElement>, enabled?: boolean): MouseEventHandler<HTMLDialogElement>;
+
+export { backdropDismiss, isBackdropClick };

package/dist/hooks/backdropDismiss.js

@@ -0,0 +1,16 @@
+function isBackdropClick(e) {
+  if (e.target !== e.currentTarget) return false;
+  const r = e.currentTarget.getBoundingClientRect();
+  if (r.width === 0) return false;
+  return e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
+}
+function backdropDismiss(onClose, onClick, enabled = true) {
+  return (e) => {
+    onClick?.(e);
+    if (enabled && onClose && isBackdropClick(e)) onClose();
+  };
+}
+export {
+  backdropDismiss,
+  isBackdropClick
+};

package/dist/index.cjs

@@ -1791,12 +1791,28 @@ function PromptDialog({ open, title, description, inputLabel, defaultValue = "",
 
 // src/components/Drawer.tsx
 var import_react19 = require("react");
+
+// src/hooks/backdropDismiss.ts
+function isBackdropClick(e) {
+  if (e.target !== e.currentTarget) return false;
+  const r = e.currentTarget.getBoundingClientRect();
+  if (r.width === 0) return false;
+  return e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
+}
+function backdropDismiss(onClose, onClick, enabled = true) {
+  return (e) => {
+    onClick?.(e);
+    if (enabled && onClose && isBackdropClick(e)) onClose();
+  };
+}
+
+// src/components/Drawer.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Drawer({ open, onClose, title, children, footer, closeLabel = "Close drawer", className, ...rest }) {
+function Drawer({ open, onClose, dismissOnBackdrop = true, title, children, footer, closeLabel = "Close drawer", className, onClick, ...rest }) {
   const ref = useDialog(open, onClose);
   const titleId = (0, import_react19.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick, dismissOnBackdrop), children: [
     (title != null || onClose) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uix-drawer__header", children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
       onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1824,15 +1840,7 @@ function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hi
   const ref = useDialog(open, onClose);
   const hasNav = onNavPrev != null || onNavNext != null;
   const titleId = (0, import_react20.useId)();
-  const onBackdropClick = (e) => {
-    onClick?.(e);
-    if (!onClose || e.target !== e.currentTarget) return;
-    const r = e.currentTarget.getBoundingClientRect();
-    if (r.width === 0) return;
-    const outside = e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
-    if (outside) onClose();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: onBackdropClick, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick), children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uix-peek__nav", children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": previousLabel, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronUp, {}) }),

package/dist/index.d.cts

@@ -453,11 +453,17 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     closeLabel?: string;
     open: boolean;
     onClose?: () => void;
+    /**
+     * A click on the dimmed backdrop calls `onClose`, like Escape and the close button
+     * (TENSOR HAR-547). Pass `false` on a drawer that holds unsaved form input, so a stray click
+     * can't discard it; Escape and the close button still close. Default `true`.
+     */
+    dismissOnBackdrop?: boolean;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
 }
-declare function Drawer({ open, onClose, title, children, footer, closeLabel, className, ...rest }: DrawerProps): react.JSX.Element;
+declare function Drawer({ open, onClose, dismissOnBackdrop, title, children, footer, closeLabel, className, onClick, ...rest }: DrawerProps): react.JSX.Element;
 
 interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */

package/dist/rich-text.cjs

@@ -1674,6 +1674,7 @@ var DEFAULT_RICH_TEXT_LABELS = {
   image: "Image",
   imageUploading: "Uploading image\u2026",
   imageFailed: "The image could not be added.",
+  imagesUnsupported: "Images can't be added here.",
   emoji: "Emoji",
   emojiSuggestions: "Emoji suggestions",
   undo: "Undo",
@@ -1685,8 +1686,9 @@ var DEFAULT_RICH_TEXT_LABELS = {
 var COMMON = ["bold", "italic", "strike", "code", "bulletList", "orderedList", "taskList", "blockquote", "codeBlock", "link", "emoji", "history", "source"];
 var PRESETS = {
   full: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table", "image"]),
-  comment: new Set(COMMON),
-  template: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table"])
+  // Images in every preset once the consumer supplies onUploadImage (TENSOR HAR-749).
+  comment: /* @__PURE__ */ new Set([...COMMON, "image"]),
+  template: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table", "image"])
 };
 var emojiSuggestionKey = new import_state.PluginKey("uixEmojiSuggestion");
 var SHORTCODE_RE = /:([a-zA-Z0-9_+-]+):$/;
@@ -1802,7 +1804,8 @@ function RichTextEditor(props) {
     minRows,
     className,
     onBlur,
-    emojiImageBaseUrl
+    emojiImageBaseUrl,
+    imagesUnavailableReason
   } = props;
   const emojiBase = (0, import_react7.useMemo)(() => normalizeEmojiImageBaseUrl(emojiImageBaseUrl), [emojiImageBaseUrl]);
   const renderEmoji = useEmojiRenderer(emojiImageBaseUrl);
@@ -1814,7 +1817,7 @@ function RichTextEditor(props) {
   const linkPopoverId = `${uid}-link`;
   const controls = PRESETS[features];
   const has = (control) => controls.has(control) && (control !== "emoji" || emoji) && (control !== "image" || !!onUploadImage);
-  const latest = (0, import_react7.useRef)({ onChange, onSubmitShortcut, onBlur, isSafeUrl, resolveImageSrc, onUploadImage, placeholder, imagesOn: false });
+  const latest = (0, import_react7.useRef)({ onChange, onSubmitShortcut, onBlur, isSafeUrl, resolveImageSrc, onUploadImage, placeholder, imagesOn: false, imagesOffText: "" });
   latest.current = {
     onChange,
     onSubmitShortcut,
@@ -1823,7 +1826,8 @@ function RichTextEditor(props) {
     resolveImageSrc,
     onUploadImage,
     placeholder,
-    imagesOn: controls.has("image") && !!onUploadImage
+    imagesOn: controls.has("image") && !!onUploadImage,
+    imagesOffText: imagesUnavailableReason?.trim() || labels.imagesUnsupported
   };
   const lastValue = (0, import_react7.useRef)(value);
   const origin = (0, import_react7.useRef)(null);
@@ -2046,22 +2050,31 @@ function RichTextEditor(props) {
     shouldRerenderOnTransaction: false,
     editable: !disabled && !readOnly,
     editorProps: {
+      // An image file pasted or dropped where images are off used to vanish silently; now the
+      // status line says so (TENSOR HAR-749). A paste that also carries text is a text paste:
+      // Excel, Word and Docs add a PNG rendering of the copied cells or text, which must not
+      // replace (or block) the text itself.
       handlePaste: (_view, event) => {
-        const files = Array.from(event.clipboardData?.files ?? []).filter((f) => f.type.startsWith("image/"));
-        if (!files.length || !latest.current.imagesOn || !editorRef.current) return false;
-        files.forEach((file) => void uploadImage(editorRef.current, file));
+        const data = event.clipboardData;
+        const files = Array.from(data?.files ?? []).filter((f) => f.type.startsWith("image/"));
+        if (!files.length || !editorRef.current || data?.getData("text/plain").trim()) return false;
+        event.preventDefault();
+        if (!latest.current.imagesOn) setStatus({ kind: "notice", text: latest.current.imagesOffText });
+        else files.forEach((file) => void uploadImage(editorRef.current, file));
         return true;
       },
       handleDrop: (_view, event) => {
         const files = Array.from(event.dataTransfer?.files ?? []).filter((f) => f.type.startsWith("image/"));
-        if (!files.length || !latest.current.imagesOn || !editorRef.current) return false;
+        if (!files.length || !editorRef.current) return false;
         event.preventDefault();
-        files.forEach((file) => void uploadImage(editorRef.current, file));
+        if (!latest.current.imagesOn) setStatus({ kind: "notice", text: latest.current.imagesOffText });
+        else files.forEach((file) => void uploadImage(editorRef.current, file));
         return true;
       }
     },
     onCreate: ({ editor: ed }) => load(ed, lastValue.current),
     onUpdate: ({ editor: ed }) => {
+      setStatus((s) => s?.kind === "notice" ? null : s);
       if (!origin.current) return;
       emit(writeMarkdown(ed.getJSON(), origin.current, managerOf(ed)));
     },

package/dist/rich-text.d.cts

@@ -38,6 +38,8 @@ interface RichTextLabels {
     image: string;
     imageUploading: string;
     imageFailed: string;
+    /** Shown when an image is pasted or dropped where images are off (default for `imagesUnavailableReason`). */
+    imagesUnsupported: string;
     emoji: string;
     /** Accessible name of the `:shortcode` suggestion list. */
     emojiSuggestions: string;
@@ -64,11 +66,17 @@ interface RichTextEditorProps {
     features?: RichTextFeatures;
     /** Heading levels the toolbar and input rules offer. Default `[1, 2, 3]`. */
     headingLevels?: ReadonlyArray<RichTextHeadingLevel>;
-    /** Enables the image button (preset `full`), and image paste/drop. */
+    /** Enables image paste/drop and the toolbar image button, in every preset. */
     onUploadImage?: (file: File) => Promise<{
         src: string;
         alt: string;
     }>;
+    /**
+     * Shown in the status line when an image is pasted or dropped while images are off (no
+     * `onUploadImage`), e.g. "Attach files to the incident instead.". Nothing is inserted.
+     * Default: the `imagesUnsupported` label.
+     */
+    imagesUnavailableReason?: string;
     /** Link policy. Default: http(s), mailto and same-app paths. */
     isSafeUrl?: (url: string) => boolean;
     /** Image policy: the URL to display, or `null` to show the image as a link chip. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",