@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/RichTextEditor/RichTextAttachmentConfig.js

@@ -0,0 +1,207 @@
+'use client';
+import { overlayStack, useFloatingSurface } from "../_internal/overlay/useOverlayStack.js";
+import { Button } from "../Button/Button.js";
+import { Input } from "../Input/Input.js";
+import { Slider } from "../Slider/Slider.js";
+import { Stack } from "../Stack/Stack.js";
+import { Cluster } from "../Cluster/Cluster.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { safeHref } from "../RichText/engine/safeHref.js";
+import { attachmentIsImage } from "../RichText/engine/attachment.js";
+import { useAnchoredFloating } from "./useAnchoredFloating.js";
+import { useDismissOnOutsidePointerDown } from "./useDismissOnOutsidePointerDown.js";
+import RichTextEditor_module_default from "./RichTextEditor.module.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+// src/components/RichTextEditor/RichTextAttachmentConfig.tsx
+var MIN_W = 80;
+var ALIGNS = [
+	"left",
+	"center",
+	"right"
+];
+var ALIGN_GLYPH = {
+	left: "⇤",
+	center: "↔",
+	right: "⇥"
+};
+var ALIGN_LABEL_KEY = {
+	left: "richTextEditor.attachmentAlignLeft",
+	center: "richTextEditor.attachmentAlignCenter",
+	right: "richTextEditor.attachmentAlignRight"
+};
+/**
+* Internal floating config popover for a ready attachment. Rendered by
+* `<RichTextEditor>` when the attachment config is open; not exported from the
+* package. Image attachments get alt / align / replace / open / download — and a
+* width slider ONLY when the image renders as a preview (a safe, fetchable src —
+* an embedded image); an uploaded object-URL image renders as a chip and gets no
+* width control. Non-image chips get replace / open / download. Remount it (via
+* `key`) per open so the alt + width fields re-seed from the block.
+*/
+function RichTextAttachmentConfig({ block, anchorRect, getAnchorRect, maxWidth, accept, onAltChange, onAlignChange, onWidthChange, onWidthReset, onReplace, onClose }) {
+	useFloatingSurface(true);
+	const t = useTranslation();
+	const isImage = attachmentIsImage(block);
+	const popRef = useRef(null);
+	const fileRef = useRef(null);
+	const seededAlt = block.alt ?? block.name ?? "";
+	const [alt, setAlt] = useState(seededAlt);
+	const sliderMax = Math.max(81, Math.round(maxWidth));
+	const [width, setWidth] = useState(Math.max(MIN_W, Math.min(block.width ?? sliderMax, sliderMax)));
+	const commitAlt = useCallback(() => {
+		if (alt !== seededAlt) onAltChange(alt);
+	}, [
+		alt,
+		seededAlt,
+		onAltChange
+	]);
+	const { refs, floatingStyles } = useAnchoredFloating(anchorRect, getAnchorRect, { offset: 6 });
+	const setRefs = useCallback((node) => {
+		popRef.current = node;
+		refs.setFloating(node);
+	}, [refs]);
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+	useDismissOnOutsidePointerDown(popRef, onClose);
+	useEffect(() => {
+		const onKeyDown = (e) => {
+			if (e.key !== "Escape") return;
+			e.preventDefault();
+			overlayStack.consumeEscape(e);
+			onCloseRef.current();
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		return () => document.removeEventListener("keydown", onKeyDown, true);
+	}, []);
+	useEffect(() => {
+		const root = popRef.current;
+		if (!root) return;
+		root.querySelector("input, button, [tabindex]")?.focus();
+	}, []);
+	const href = safeHref(block.src ?? "");
+	const curAlign = block.align ?? "left";
+	const sliderNum = (v) => Array.isArray(v) ? v[0] : v;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref: setRefs,
+		className: RichTextEditor_module_default.configPopover,
+		style: floatingStyles,
+		role: "group",
+		"data-rte-overlay": "",
+		"aria-label": t("richTextEditor.attachmentConfigure"),
+		onKeyDown: (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopPropagation();
+				onClose();
+			}
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [isImage && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: RichTextEditor_module_default.configRow,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: RichTextEditor_module_default.configLabel,
+						children: t("richTextEditor.attachmentAlt")
+					}), /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: alt,
+						"aria-label": t("richTextEditor.attachmentAlt"),
+						onChange: (e) => setAlt(e.target.value),
+						onBlur: commitAlt,
+						onKeyDown: (e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								commitAlt();
+							}
+						}
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Cluster, {
+					gap: "xs",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: RichTextEditor_module_default.configLabel,
+						children: t("richTextEditor.attachmentAlign")
+					}), ALIGNS.map((a) => /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						iconOnly: true,
+						variant: curAlign === a ? "secondary" : "ghost",
+						"aria-pressed": curAlign === a,
+						"aria-label": t(ALIGN_LABEL_KEY[a]),
+						onClick: () => onAlignChange(a),
+						children: ALIGN_GLYPH[a]
+					}, a))]
+				}),
+				href && /* @__PURE__ */ jsxs(Cluster, {
+					gap: "xs",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: RichTextEditor_module_default.configLabel,
+							children: t("richTextEditor.attachmentWidth")
+						}),
+						/* @__PURE__ */ jsx(Slider, {
+							value: width,
+							min: MIN_W,
+							max: sliderMax,
+							step: 1,
+							"aria-label": t("richTextEditor.attachmentWidth"),
+							onChange: (v) => {
+								const w = sliderNum(v);
+								setWidth(w);
+								onWidthChange(w);
+							},
+							onChangeEnd: (v) => onWidthChange(sliderNum(v))
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "ghost",
+							onClick: () => {
+								onWidthReset();
+								setWidth(sliderMax);
+							},
+							children: t("richTextEditor.attachmentWidthReset")
+						})
+					]
+				})
+			] }), /* @__PURE__ */ jsxs(Cluster, {
+				gap: "xs",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						ref: fileRef,
+						type: "file",
+						accept,
+						style: { display: "none" },
+						onChange: (e) => {
+							const f = e.target.files?.[0];
+							if (f) onReplace(f);
+							e.target.value = "";
+						}
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => fileRef.current?.click(),
+						children: t("richTextEditor.attachmentReplace")
+					}),
+					href && /* @__PURE__ */ jsx("a", {
+						className: RichTextEditor_module_default.configLink,
+						href,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: t("richTextEditor.attachmentOpen")
+					}),
+					href && /* @__PURE__ */ jsx("a", {
+						className: RichTextEditor_module_default.configLink,
+						href,
+						download: true,
+						rel: "noopener noreferrer",
+						children: t("richTextEditor.attachmentDownload")
+					})
+				]
+			})]
+		})
+	}), document.body);
+}
+export { RichTextAttachmentConfig };

package/dist/components/RichTextEditor/RichTextBlockControls.d.ts

@@ -0,0 +1,62 @@
+import { type RefObject } from 'react';
+import { type BlockAction } from './RichTextBlockMenu.js';
+import type { BlockChoice } from './RichTextToolbar.js';
+import type { BlockType } from '../RichText/engine/model.js';
+export interface RichTextBlockControlsProps {
+    /** The editor shell element ref — used to locate block boxes + anchor overlays. */
+    rootRef: RefObject<HTMLElement | null>;
+    /** Block currently hovered or holding the caret; null hides the gutter. */
+    activeBlockId: string | null;
+    /**
+     * A signature of the current block order (e.g. the ids joined). The gutter's
+     * vertical position is measured from the active block's DOM box; the active
+     * block keeps its id across a reorder, so without an order-derived dependency
+     * the measurement would go stale and the controls would linger at the block's
+     * OLD row after a drop / insert / delete. Pass an order-derived string so the
+     * gutter re-measures whenever the block layout shifts.
+     */
+    blockOrderKey?: string;
+    /** Type of the active block (gates the menu's "Turn into" — hidden for voids). */
+    activeBlockType?: BlockType;
+    /** Controlled open state of the block menu. */
+    menuOpen: boolean;
+    onMenuOpenChange: (open: boolean) => void;
+    onInsertBelow: (blockId: string) => void;
+    onAction: (blockId: string, action: BlockAction) => void;
+    onTurnInto: (blockId: string, choice: BlockChoice) => void;
+    /**
+     * Open the block's configuration affordance (e.g. attachment settings). When
+     * set, a "Configure" item is added to the ⠿ block menu and fires with the
+     * active block id. Omit for blocks that have nothing to configure.
+     */
+    onConfigure?: (blockId: string) => void;
+    /**
+     * Set a whole-block color from the ⠿ menu's Color submenu. When set, a Color
+     * submenu is added to the menu and fires with the active block id, the color
+     * type (`textColor`/`bgColor`), and the palette key (`null` clears). Omit to
+     * hide the submenu.
+     */
+    onColor?: (blockId: string, type: 'textColor' | 'bgColor', key: string | null) => void;
+    /**
+     * Reorder the active block to land at `targetIndex` — a "gap" (0..N) in the
+     * CURRENT block array. Fired when a block drag is dropped. Wired by the editor
+     * to the subtree-aware `moveBlockUnitToIndex` engine transform.
+     */
+    onReorder: (blockId: string, targetIndex: number) => void;
+    /**
+     * Reports block-drag lifecycle so the editor can suppress hover-driven active-block
+     * changes while a drag is in progress (mirrors how `menuOpen` is mirrored into a
+     * ref). Called `true` on drag start, `false` on drag end/cancel.
+     */
+    onDraggingChange?: (dragging: boolean) => void;
+}
+/**
+ * Internal: the gutter overlay for the active block. Measures the block element's
+ * vertical offset within the shell and renders the `＋` insert button + the block
+ * menu there. Renders nothing when there is no active block. The whole gutter is
+ * the drag handle: dragging it reorders the active block via an in-place reflow,
+ * while a plain click on ＋/⠿ still triggers that button. Block configuration
+ * (e.g. attachment settings) lives in the ⠿ menu's "Configure" item, not a
+ * separate gutter button.
+ */
+export declare const RichTextBlockControls: import("react").MemoExoticComponent<({ rootRef, activeBlockId, blockOrderKey, activeBlockType, menuOpen, onMenuOpenChange, onInsertBelow, onAction, onTurnInto, onConfigure, onColor, onReorder, onDraggingChange, }: RichTextBlockControlsProps) => import("react").JSX.Element | null>;

package/dist/components/RichTextEditor/RichTextBlockControls.js

@@ -0,0 +1,211 @@
+'use client';
+import { Button } from "../Button/Button.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { RichTextBlockMenu } from "./RichTextBlockMenu.js";
+import { PlusIcon } from "./icons.js";
+import { preventSelectionLoss } from "./preventSelectionLoss.js";
+import { computeReflow } from "./blockReflow.js";
+import { gapIndexFromY } from "./blockDrop.js";
+import { useDraggingReporter, useShellRelativeRect } from "./useOverlayRect.js";
+import { tidy } from "../_internal/dragAnnouncements.js";
+import RichTextEditor_module_default from "./RichTextEditor.module.js";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, PointerSensor, useDraggable, useSensor, useSensors } from "@dnd-kit/core";
+// src/components/RichTextEditor/RichTextBlockControls.tsx
+var GUTTER_DRAGGABLE_ID = "rte-block-gutter";
+/** Strip all transient drag styles a reflow applied. */
+function clearReflow(snap, shell) {
+	if (snap) {
+		for (const el of snap.els) el.style.transform = "";
+		for (let i = snap.unit.u0; i <= snap.unit.u1; i += 1) snap.els[i]?.classList.remove(RichTextEditor_module_default.blockLifted);
+	}
+	shell?.classList.remove(RichTextEditor_module_default.reflowing);
+}
+/**
+* The gutter strip, wired as the dnd-kit drag handle (the WHOLE strip — ＋ / ⠿
+* and the space around them). A sub-4px press still reaches the buttons (insert /
+* open menu); a press-drag past the 4px activation lifts the row.
+* Spreads only `listeners` — never dnd-kit's `attributes` — so the gutter stays out
+* of the tab order (keyboard reorder is the editor's ⌘/Ctrl+⇧↑/↓ shortcuts).
+*/
+function DraggableGutter({ top, height, innerRef, children }) {
+	const { setNodeRef, listeners } = useDraggable({ id: GUTTER_DRAGGABLE_ID });
+	const setRefs = useCallback((node) => {
+		setNodeRef(node);
+		innerRef.current = node;
+	}, [setNodeRef, innerRef]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRefs,
+		className: RichTextEditor_module_default.gutter,
+		style: {
+			top,
+			height: height ?? void 0
+		},
+		contentEditable: false,
+		...listeners,
+		children
+	});
+}
+/**
+* Internal: the gutter overlay for the active block. Measures the block element's
+* vertical offset within the shell and renders the `＋` insert button + the block
+* menu there. Renders nothing when there is no active block. The whole gutter is
+* the drag handle: dragging it reorders the active block via an in-place reflow,
+* while a plain click on ＋/⠿ still triggers that button. Block configuration
+* (e.g. attachment settings) lives in the ⠿ menu's "Configure" item, not a
+* separate gutter button.
+*/
+var RichTextBlockControls = memo(function RichTextBlockControls({ rootRef, activeBlockId, blockOrderKey, activeBlockType, menuOpen, onMenuOpenChange, onInsertBelow, onAction, onTurnInto, onConfigure, onColor, onReorder, onDraggingChange }) {
+	const t = useTranslation();
+	const dragRef = useRef(null);
+	const draggedIdRef = useRef(null);
+	const gutterElRef = useRef(null);
+	const dragLabelRef = useRef("");
+	const reportDragging = useDraggingReporter(onDraggingChange);
+	useEffect(() => {
+		return () => {
+			clearReflow(dragRef.current, rootRef.current);
+			dragRef.current = null;
+		};
+	}, []);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
+	const blockEl = useCallback(() => activeBlockId ? rootRef.current?.querySelector(`[data-block-id="${CSS.escape(activeBlockId)}"]`) ?? null : null, [rootRef, activeBlockId]);
+	const rect = useShellRelativeRect(rootRef, blockEl, `${blockOrderKey ?? ""}|${menuOpen}`);
+	const top = rect?.top ?? null;
+	const height = rect?.height ?? null;
+	const handleDragStart = (_event) => {
+		const root = rootRef.current;
+		if (!activeBlockId || !root) return;
+		const shellTop = root.getBoundingClientRect().top;
+		const nodes = Array.from(root.querySelectorAll("[data-block-id]"));
+		const rects = nodes.map((el) => {
+			const b = el.getBoundingClientRect();
+			return {
+				top: b.top - shellTop,
+				height: b.height
+			};
+		});
+		const activeEl = nodes.find((el) => el.getAttribute("data-block-id") === activeBlockId);
+		const unitIds = /* @__PURE__ */ new Set([activeBlockId]);
+		activeEl?.querySelectorAll("[data-block-id]").forEach((d) => {
+			const id = d.getAttribute("data-block-id");
+			if (id) unitIds.add(id);
+		});
+		const idxs = [];
+		nodes.forEach((el, i) => {
+			const id = el.getAttribute("data-block-id");
+			if (id && unitIds.has(id)) idxs.push(i);
+		});
+		if (idxs.length === 0) return;
+		const unit = {
+			u0: idxs[0],
+			u1: idxs[idxs.length - 1]
+		};
+		const indexOf = new Map(nodes.map((el, i) => [el, i]));
+		const parentIdx = nodes.map((el) => {
+			const anc = el.parentElement?.closest("[data-block-id]") ?? null;
+			return anc && indexOf.has(anc) ? indexOf.get(anc) : -1;
+		});
+		draggedIdRef.current = activeBlockId;
+		dragLabelRef.current = tidy(nodes[unit.u0].textContent ?? "");
+		onMenuOpenChange(false);
+		reportDragging(true);
+		dragRef.current = {
+			rects,
+			els: nodes,
+			unit,
+			parentIdx
+		};
+		root.classList.add(RichTextEditor_module_default.reflowing);
+		nodes[unit.u0].classList.add(RichTextEditor_module_default.blockLifted);
+	};
+	const handleDragMove = (event) => {
+		const snap = dragRef.current;
+		const root = rootRef.current;
+		if (!snap || !root) return;
+		const activator = event.activatorEvent;
+		const initialY = typeof activator?.clientY === "number" ? activator.clientY : null;
+		if (initialY == null) return;
+		const pointerY = initialY + event.delta.y - root.getBoundingClientRect().top;
+		const reflow = computeReflow(snap.rects, snap.unit, event.delta.y, pointerY);
+		for (let i = 0; i < snap.els.length; i += 1) {
+			const pid = snap.parentIdx[i];
+			const own = reflow.shifts[i] - (pid >= 0 ? reflow.shifts[pid] : 0);
+			snap.els[i].style.transform = own ? `translateY(${own}px)` : "";
+		}
+		if (gutterElRef.current) gutterElRef.current.style.transform = reflow.liftDy ? `translateY(${reflow.liftDy}px)` : "";
+	};
+	const endDrag = () => {
+		clearReflow(dragRef.current, rootRef.current);
+		if (gutterElRef.current) gutterElRef.current.style.transform = "";
+		dragRef.current = null;
+		draggedIdRef.current = null;
+		reportDragging(false);
+	};
+	const handleDragEnd = (event) => {
+		const snap = dragRef.current;
+		const root = rootRef.current;
+		const id = draggedIdRef.current;
+		let gap = null;
+		if (snap && root) {
+			const activator = event.activatorEvent;
+			const initialY = typeof activator?.clientY === "number" ? activator.clientY : null;
+			if (initialY != null) {
+				const pointerY = initialY + event.delta.y - root.getBoundingClientRect().top;
+				gap = gapIndexFromY(snap.rects, pointerY);
+			}
+		}
+		endDrag();
+		if (id != null && gap != null) onReorder(id, gap);
+	};
+	const handleDragCancel = () => {
+		endDrag();
+	};
+	const accessibility = useMemo(() => {
+		const item = () => dragLabelRef.current || t("drag.unnamed");
+		return {
+			announcements: {
+				onDragStart: () => t("drag.pickedUp", { item: item() }),
+				onDragOver: () => void 0,
+				onDragEnd: () => t("drag.moved", { item: item() }),
+				onDragCancel: () => t("drag.cancelled", { item: item() })
+			},
+			screenReaderInstructions: { draggable: t("drag.instructions") }
+		};
+	}, [t]);
+	if (!activeBlockId || top == null) return null;
+	return /* @__PURE__ */ jsx(DndContext, {
+		accessibility,
+		sensors,
+		onDragStart: handleDragStart,
+		onDragMove: handleDragMove,
+		onDragEnd: handleDragEnd,
+		onDragCancel: handleDragCancel,
+		children: /* @__PURE__ */ jsxs(DraggableGutter, {
+			top,
+			height,
+			innerRef: gutterElRef,
+			children: [/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				iconOnly: true,
+				tabIndex: -1,
+				"aria-label": t("richTextEditor.blockInsert"),
+				className: RichTextEditor_module_default.gutterButton,
+				onMouseDown: preventSelectionLoss,
+				onClick: () => onInsertBelow(activeBlockId),
+				children: /* @__PURE__ */ jsx(PlusIcon, {})
+			}), /* @__PURE__ */ jsx(RichTextBlockMenu, {
+				open: menuOpen,
+				onOpenChange: onMenuOpenChange,
+				onAction: (a) => onAction(activeBlockId, a),
+				onTurnInto: (c) => onTurnInto(activeBlockId, c),
+				blockType: activeBlockType,
+				onConfigure: onConfigure ? () => onConfigure(activeBlockId) : void 0,
+				onColor: onColor ? (type, key) => onColor(activeBlockId, type, key) : void 0
+			})]
+		})
+	});
+});
+export { RichTextBlockControls };

package/dist/components/RichTextEditor/RichTextBlockMenu.d.ts

@@ -0,0 +1,28 @@
+import type { BlockChoice } from './RichTextToolbar.js';
+import type { BlockType } from '../RichText/engine/model.js';
+export type BlockAction = 'duplicate' | 'moveUp' | 'moveDown' | 'delete';
+export interface RichTextBlockMenuProps {
+    /** Controlled open state of the menu. */
+    open: boolean;
+    /** Fired when the menu wants to open/close. */
+    onOpenChange: (open: boolean) => void;
+    /** Fired for the flat actions (duplicate / move / delete). */
+    onAction: (action: BlockAction) => void;
+    /** Fired for a "Turn into" choice. */
+    onTurnInto: (choice: BlockChoice) => void;
+    /** When set, a Configure item appears at the top of the menu (e.g. attachment
+     *  settings). Omit for blocks with nothing to configure. */
+    onConfigure?: () => void;
+    /** When set, two color submenus (Text color + Highlight) for the whole block are added. */
+    onColor?: (type: 'textColor' | 'bgColor', key: string | null) => void;
+    /** Type of the block the menu targets. "Turn into" is hidden for `attachment`
+     *  (a void block — converting an image to a heading is nonsense). */
+    blockType?: BlockType;
+}
+/**
+ * Internal: the `⠿` block-actions handle and its menu. The handle is the
+ * DropdownMenu trigger and is `tabIndex={-1}` (not a tab stop — keyboard users
+ * open it via Shift+F10 in the editor). "Turn into" reuses the block-type labels
+ * and is omitted for void attachment blocks.
+ */
+export declare const RichTextBlockMenu: import("react").ForwardRefExoticComponent<RichTextBlockMenuProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/RichTextEditor/RichTextBlockMenu.js

@@ -0,0 +1,137 @@
+'use client';
+import { Button } from "../Button/Button.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { RichTextColorMenu } from "./RichTextColorMenu.js";
+import { preventSelectionLoss } from "./preventSelectionLoss.js";
+import { GripIcon } from "./icons.js";
+import RichTextEditor_module_default from "./RichTextEditor.module.js";
+import { forwardRef, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/RichTextEditor/RichTextBlockMenu.tsx
+/**
+* Internal: the `⠿` block-actions handle and its menu. The handle is the
+* DropdownMenu trigger and is `tabIndex={-1}` (not a tab stop — keyboard users
+* open it via Shift+F10 in the editor). "Turn into" reuses the block-type labels
+* and is omitted for void attachment blocks.
+*/
+var RichTextBlockMenu = forwardRef(function RichTextBlockMenu({ open, onOpenChange, onAction, onTurnInto, onConfigure, onColor, blockType }, ref) {
+	const t = useTranslation();
+	const [openColorSub, setOpenColorSub] = useState(null);
+	useEffect(() => {
+		if (!open) setOpenColorSub(null);
+	}, [open]);
+	const colorSubProps = (which) => ({
+		open: openColorSub === which,
+		onOpenChange: (next) => setOpenColorSub((prev) => next ? which : prev === which ? null : prev)
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, {
+			ref,
+			size: "sm",
+			variant: "ghost",
+			iconOnly: true,
+			tabIndex: -1,
+			"aria-label": t("richTextEditor.blockActions"),
+			className: RichTextEditor_module_default.gutterButton,
+			onMouseDown: preventSelectionLoss,
+			children: /* @__PURE__ */ jsx(GripIcon, {})
+		}) }), /* @__PURE__ */ jsxs(DropdownMenu.Content, {
+			side: "bottom",
+			align: "start",
+			children: [
+				onConfigure && /* @__PURE__ */ jsx(DropdownMenu.Item, {
+					onSelect: onConfigure,
+					children: t("richTextEditor.attachmentConfigure")
+				}),
+				onColor && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenu.Sub, {
+					...colorSubProps("textColor"),
+					children: [/* @__PURE__ */ jsx(DropdownMenu.SubTrigger, { children: t("richTextEditor.textColor") }), /* @__PURE__ */ jsx(DropdownMenu.SubContent, { children: /* @__PURE__ */ jsx(RichTextColorMenu, {
+						type: "textColor",
+						onPick: (key) => {
+							onColor("textColor", key);
+							setOpenColorSub(null);
+						}
+					}) })]
+				}), /* @__PURE__ */ jsxs(DropdownMenu.Sub, {
+					...colorSubProps("bgColor"),
+					children: [/* @__PURE__ */ jsx(DropdownMenu.SubTrigger, { children: t("richTextEditor.highlight") }), /* @__PURE__ */ jsx(DropdownMenu.SubContent, { children: /* @__PURE__ */ jsx(RichTextColorMenu, {
+						type: "bgColor",
+						onPick: (key) => {
+							onColor("bgColor", key);
+							setOpenColorSub(null);
+						}
+					}) })]
+				})] }),
+				blockType !== "attachment" && /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [/* @__PURE__ */ jsx(DropdownMenu.SubTrigger, { children: t("richTextEditor.blockTurnInto") }), /* @__PURE__ */ jsxs(DropdownMenu.SubContent, { children: [
+					/* @__PURE__ */ jsx(DropdownMenu.Item, {
+						onSelect: () => onTurnInto({ type: "paragraph" }),
+						children: t("richTextEditor.paragraph")
+					}),
+					/* @__PURE__ */ jsx(DropdownMenu.Item, {
+						onSelect: () => onTurnInto({
+							type: "heading",
+							level: 1
+						}),
+						children: t("richTextEditor.heading1")
+					}),
+					/* @__PURE__ */ jsx(DropdownMenu.Item, {
+						onSelect: () => onTurnInto({
+							type: "heading",
+							level: 2
+						}),
+						children: t("richTextEditor.heading2")
+					}),
+					/* @__PURE__ */ jsx(DropdownMenu.Item, {
+						onSelect: () => onTurnInto({
+							type: "heading",
+							level: 3
+						}),
+						children: t("richTextEditor.heading3")
+					}),
+					/* @__PURE__ */ jsx(DropdownMenu.Item, {
+						onSelect: () => onTurnInto({ type: "bullet_item" }),
+						children: t("richTextEditor.bulletList")
+					}),
+					/* @__PURE__ */ jsx(DropdownMenu.Item, {
+						onSelect: () => onTurnInto({ type: "ordered_item" }),
+						children: t("richTextEditor.orderedList")
+					}),
+					/* @__PURE__ */ jsx(DropdownMenu.Item, {
+						onSelect: () => onTurnInto({ type: "blockquote" }),
+						children: t("richTextEditor.blockquote")
+					}),
+					/* @__PURE__ */ jsx(DropdownMenu.Item, {
+						onSelect: () => onTurnInto({ type: "code_block" }),
+						children: t("richTextEditor.codeBlock")
+					})
+				] })] }),
+				/* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+				/* @__PURE__ */ jsx(DropdownMenu.Item, {
+					shortcut: "⌘D",
+					onSelect: () => onAction("duplicate"),
+					children: t("richTextEditor.blockDuplicate")
+				}),
+				/* @__PURE__ */ jsx(DropdownMenu.Item, {
+					shortcut: "⌘⇧↑",
+					onSelect: () => onAction("moveUp"),
+					children: t("richTextEditor.blockMoveUp")
+				}),
+				/* @__PURE__ */ jsx(DropdownMenu.Item, {
+					shortcut: "⌘⇧↓",
+					onSelect: () => onAction("moveDown"),
+					children: t("richTextEditor.blockMoveDown")
+				}),
+				/* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+				/* @__PURE__ */ jsx(DropdownMenu.Item, {
+					tone: "danger",
+					onSelect: () => onAction("delete"),
+					children: t("richTextEditor.blockDelete")
+				})
+			]
+		})]
+	});
+});
+export { RichTextBlockMenu };

package/dist/components/RichTextEditor/RichTextColorMenu.d.ts

@@ -0,0 +1,23 @@
+export interface RichTextColorMenuProps {
+    /** Which mark this menu sets. */
+    type: 'textColor' | 'bgColor';
+    /** The active color key for this type (rings the current badge). */
+    active?: string;
+    /** Pick a color key, or null to clear. */
+    onPick: (key: string | null) => void;
+}
+/**
+ * Internal, presentational color picker for ONE mark type (`textColor` OR
+ * `bgColor`). Renders a leading Default/clear badge followed by one named badge
+ * per palette key — each badge styled like the Palette demo chip (subtle bg fill
+ * + strong fg text, both dynamic token `var()`s). Owns no state: the parent
+ * passes the `active` key (to ring the current badge) and an `onPick` dispatcher.
+ *
+ * Every badge is `onMouseDown`-prevented so picking a color never steals the
+ * editor's DOM selection. Not exported from the package index — it's wired into
+ * the toolbar's Text-color / Highlight popovers and the block menu's submenus.
+ *
+ * @example
+ * <RichTextColorMenu type="textColor" active="red" onPick={(key) => …} />
+ */
+export declare function RichTextColorMenu({ type, active, onPick }: RichTextColorMenuProps): import("react").JSX.Element;