@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,1156 @@
+'use client';
+import { nextId } from "../RichText/engine/model.js";
+import { renderDoc } from "../RichText/engine/renderDoc.js";
+import { blockLength, isCollapsed, marksForTypedText, wholeBlockRange } from "../RichText/engine/position.js";
+import { linkAt, setLink } from "./links.js";
+import { applyTypeAutolink, atomicLinkDeleteRange } from "./autolinkInput.js";
+import { RichTextLinkEditor } from "./RichTextLinkEditor.js";
+import { useLinkEditor } from "./useLinkEditor.js";
+import { deleteRange, insertFragment, insertMention, insertText, setColorMark } from "../RichText/engine/transforms.js";
+import { findUrl, linkifyRuns } from "../RichText/engine/autolink.js";
+import { useMention } from "./useMention.js";
+import { RichTextMentionMenu } from "./RichTextMentionMenu.js";
+import { fromHtml } from "../RichText/engine/fromHtml.js";
+import { hasMark, withMark, withoutMark } from "../RichText/engine/marks.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { blockOwnText, rangeRect, readSelection, voidCaretSide, writeSelection } from "./selection.js";
+import { applyInput, voidDelete } from "./input.js";
+import { applyBlockRule, matchBlockRule } from "./inputRules.js";
+import { runsText } from "../RichText/engine/inlines.js";
+import { isLetterKey } from "../_internal/letterKey.js";
+import { shortcutMark } from "./shortcuts.js";
+import { activeColors, activeMarks, applyExactMarks, currentBlock, runIndent, runSetBlock, runToggleList, runToggleMark } from "./commands.js";
+import { RichTextToolbar } from "./RichTextToolbar.js";
+import { duplicateBlockUnit, insertEmptyBlockBelow, moveBlockUnit, moveBlockUnitToIndex, removeBlockUnit } from "../RichText/engine/blockUnit.js";
+import { RichTextBlockControls } from "./RichTextBlockControls.js";
+import { RichTextAttachmentConfig } from "./RichTextAttachmentConfig.js";
+import { useAttachmentConfig } from "./useAttachmentConfig.js";
+import { RichTextImageResizer } from "./RichTextImageResizer.js";
+import { LiveRegion } from "../LiveRegion/LiveRegion.js";
+import { capWidthToHeight } from "./imageSize.js";
+import { imageMaxHeightStyle } from "../RichText/imageMaxHeightStyle.js";
+import { attachmentIsImage, isAttachmentSettled } from "../RichText/engine/attachment.js";
+import { safeHref } from "../RichText/engine/safeHref.js";
+import { useUpload } from "./useUpload.js";
+import { canRedo, canUndo, record, redo, reset, undo } from "./history.js";
+import RichTextEditor_module_default from "./RichTextEditor.module.js";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
+// src/components/RichTextEditor/RichTextEditor.tsx
+var FALLBACK_SENTINEL = Object.freeze(/* @__PURE__ */ jsx("span", {}, "rt-fallback-sentinel"));
+function isEmptyDoc(doc) {
+	return doc.blocks.length === 1 && blockLength(doc.blocks[0]) === 0;
+}
+/** Toggle `mark` within a `Mark[]` (used to fold a shortcut into pending marks). */
+function toggleInList(marks, mark) {
+	return hasMark(marks, mark.type) ? withoutMark(marks, mark.type) : withMark(marks, mark);
+}
+/**
+* Insert `text` at `point` carrying exactly `marks` (staged pending marks). The
+* span comes from the insert's resulting caret, not `point`: beside a void block
+* the text lands in a NEW paragraph after it.
+*/
+function insertWithMarks(doc, point, text, marks) {
+	const inserted = insertText(doc, point, text);
+	const end = inserted.selection.focus;
+	const span = {
+		anchor: {
+			blockId: end.blockId,
+			offset: end.offset - text.length
+		},
+		focus: end
+	};
+	return {
+		doc: applyExactMarks(inserted.doc, span, marks),
+		selection: inserted.selection
+	};
+}
+/**
+* Controlled rich-text editor: a contentEditable surface over the in-house engine with marks, lists, links, mentions, uploads and undo/redo.
+* @see docs/components/RichTextEditor.md
+*/
+var RichTextEditor = forwardRef(function RichTextEditor({ value, onChange, readOnly = false, placeholder, autoFocus, toolbar = false, blockControls = false, mentions, autolink = true, renderLink, renderMention, imageMaxHeight, upload, invalid = false, required = false, className, style, ...rest }, ref) {
+	const t = useTranslation();
+	const rootRef = useRef(null);
+	const isComposingRef = useRef(false);
+	const pendingSelectionRef = useRef(null);
+	const caretAfterVoidDocs = useRef(/* @__PURE__ */ new WeakMap());
+	const latest = useRef({
+		value,
+		onChange,
+		readOnly,
+		autolink,
+		renderLink,
+		upload
+	});
+	latest.current = {
+		value,
+		onChange,
+		readOnly,
+		autolink,
+		renderLink,
+		upload
+	};
+	const liveDocRef = useRef(value);
+	liveDocRef.current = value;
+	const getValue = useCallback(() => latest.current.value, []);
+	const getLiveDoc = useCallback(() => liveDocRef.current, []);
+	const getReadOnly = useCallback(() => latest.current.readOnly, []);
+	const [focused, setFocused] = useState(false);
+	const [toolbarOverlayOpen, setToolbarOverlayOpen] = useState(false);
+	const autoToolbar = toolbar === "auto";
+	const [selection, setSelection] = useState(null);
+	const [pendingMarks, setPendingMarks] = useState(null);
+	const pendingMarksRef = useRef(null);
+	pendingMarksRef.current = pendingMarks;
+	const pendingAtRef = useRef(null);
+	const lastSelectionRef = useRef(null);
+	const setRefs = useCallback((node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const controlsOn = blockControls && !readOnly;
+	const usesShell = toolbar === true || autoToolbar || controlsOn;
+	const mentionsEnabled = !!mentions && !readOnly;
+	const shellRef = useRef(null);
+	const [hoverBlockId, setHoverBlockId] = useState(null);
+	const [caretBlockId, setCaretBlockId] = useState(null);
+	const activeBlockId = hoverBlockId ?? caretBlockId;
+	const [blockMenuOpen, setBlockMenuOpen] = useState(false);
+	const blockMenuOpenRef = useRef(false);
+	blockMenuOpenRef.current = blockMenuOpen;
+	const draggingRef = useRef(false);
+	const setDragging = useCallback((d) => {
+		draggingRef.current = d;
+	}, []);
+	const [hoveredImageId, setHoveredImageId] = useState(null);
+	const [blockDragging, setBlockDragging] = useState(false);
+	const onBlockDraggingChange = useCallback((d) => {
+		draggingRef.current = d;
+		setBlockDragging(d);
+	}, []);
+	const blockIdFromNode = useCallback((node) => {
+		let el = node instanceof HTMLElement ? node : node?.parentElement ?? null;
+		while (el && el !== rootRef.current) {
+			if (el.hasAttribute("data-block-id")) return el.getAttribute("data-block-id");
+			el = el.parentElement;
+		}
+		return null;
+	}, []);
+	const imageFigureIdAt = useCallback((node) => {
+		let el = node instanceof HTMLElement ? node : node?.parentElement ?? null;
+		while (el && el !== rootRef.current) {
+			if (el.tagName === "FIGURE" && el.hasAttribute("data-block-id") && el.querySelector("img")) return el.getAttribute("data-block-id");
+			el = el.parentElement;
+		}
+		return null;
+	}, []);
+	const blockAtPointerY = useCallback((root, clientY) => {
+		let found = null;
+		for (const el of root.querySelectorAll("[data-block-id]")) {
+			const box = el.getBoundingClientRect();
+			if (box.top > clientY) break;
+			if (clientY <= box.bottom) found = el.getAttribute("data-block-id");
+		}
+		return found;
+	}, []);
+	const historyRef = useRef(reset({
+		doc: value,
+		selection: null
+	}));
+	const historyKeyAtRef = useRef(0);
+	const [canUndo$1, setCanUndo] = useState(false);
+	const [canRedo$1, setCanRedo] = useState(false);
+	const syncHistoryFlags = useCallback(() => {
+		setCanUndo(canUndo(historyRef.current));
+		setCanRedo(canRedo(historyRef.current));
+	}, []);
+	const unconfirmedRef = useRef(null);
+	const reconcile = useCallback(() => {
+		const u = unconfirmedRef.current;
+		unconfirmedRef.current = null;
+		if (u && latest.current.value !== u.doc) {
+			historyRef.current = u.prevHistory;
+			syncHistoryFlags();
+			pendingSelectionRef.current = null;
+		}
+	}, [syncHistoryFlags]);
+	const emit = useCallback((doc, prevHistory) => {
+		const before = latest.current.value;
+		liveDocRef.current = doc;
+		try {
+			flushSync(() => latest.current.onChange(doc));
+		} finally {
+			if (latest.current.value === before) {
+				unconfirmedRef.current = {
+					doc,
+					prevHistory
+				};
+				liveDocRef.current = before;
+			}
+		}
+	}, []);
+	const commit = useCallback((result, kind = "other", options) => {
+		if (result.doc === latest.current.value) return;
+		if (options?.caretAfterVoid) caretAfterVoidDocs.current.set(result.doc, options.caretAfterVoid);
+		reconcile();
+		const prevHistory = historyRef.current;
+		historyRef.current = record(historyRef.current, {
+			doc: result.doc,
+			selection: result.selection
+		}, kind, Date.now());
+		syncHistoryFlags();
+		pendingSelectionRef.current = options?.keepSelection ? null : {
+			range: result.selection,
+			afterVoid: options?.caretAfterVoid ?? null
+		};
+		emit(result.doc, prevHistory);
+	}, [
+		syncHistoryFlags,
+		emit,
+		reconcile
+	]);
+	const commitResizeLive = useCallback((doc) => {
+		if (doc === liveDocRef.current) return;
+		reconcile();
+		pendingSelectionRef.current = null;
+		const prevHistory = historyRef.current;
+		historyRef.current = record(historyRef.current, {
+			doc,
+			selection: historyRef.current.present.selection
+		}, "resize", Date.now());
+		syncHistoryFlags();
+		emit(doc, prevHistory);
+	}, [
+		syncHistoryFlags,
+		emit,
+		reconcile
+	]);
+	const commitSilent = useCallback((doc) => {
+		if (doc === latest.current.value) return;
+		reconcile();
+		const root = rootRef.current;
+		const sel = root ? readSelection(root) : null;
+		pendingSelectionRef.current = sel ? {
+			range: sel,
+			afterVoid: null
+		} : null;
+		const prevHistory = historyRef.current;
+		historyRef.current = {
+			...historyRef.current,
+			present: {
+				doc,
+				selection: sel ?? historyRef.current.present.selection
+			}
+		};
+		emit(doc, prevHistory);
+	}, [emit, reconcile]);
+	const uploadOn = !!upload && !readOnly;
+	const [uploadFailure, setUploadFailure] = useState(null);
+	const uploader = useUpload({
+		config: upload ?? { onUpload: async () => ({ url: "" }) },
+		getValue: () => liveDocRef.current,
+		applyInsert: (doc) => {
+			const root = rootRef.current;
+			const sel = (root ? readSelection(root) : null) ?? {
+				anchor: {
+					blockId: liveDocRef.current.blocks[0].id,
+					offset: 0
+				},
+				focus: {
+					blockId: liveDocRef.current.blocks[0].id,
+					offset: 0
+				}
+			};
+			commit({
+				doc,
+				selection: sel
+			}, "other");
+		},
+		applySettle: commitSilent,
+		getCaret: () => (rootRef.current ? readSelection(rootRef.current)?.anchor : void 0) ?? {
+			blockId: liveDocRef.current.blocks[0].id,
+			offset: 0
+		},
+		getContentWidth: () => rootRef.current?.getBoundingClientRect().width ?? 0,
+		onFailureChange: setUploadFailure
+	});
+	const uploaderRef = useRef(uploader);
+	uploaderRef.current = uploader;
+	const uploadInputRef = useRef(null);
+	const clearPendingMarks = useCallback(() => {
+		setPendingMarks(null);
+		pendingMarksRef.current = null;
+		pendingAtRef.current = null;
+	}, []);
+	const takePendingAt = useCallback((point) => {
+		const pend = pendingMarksRef.current;
+		const at = pendingAtRef.current;
+		if (!pend) return null;
+		clearPendingMarks();
+		return at && at.blockId === point.blockId && at.offset === point.offset ? pend : null;
+	}, [clearPendingMarks]);
+	const applyVoidDelete = useCallback((result) => {
+		if (!result) return;
+		if (result.doc === latest.current.value) {
+			if (rootRef.current) writeSelection(rootRef.current, result.selection);
+			return;
+		}
+		commit(result, "delete", { caretAfterVoid: result.caretAfterVoid ? result.selection.anchor.blockId : void 0 });
+	}, [commit]);
+	const onUndo = useCallback(() => {
+		reconcile();
+		const h = historyRef.current;
+		if (!canUndo(h)) return;
+		const next = undo(h);
+		historyRef.current = next;
+		syncHistoryFlags();
+		clearPendingMarks();
+		pendingSelectionRef.current = next.present.selection && {
+			range: next.present.selection,
+			afterVoid: caretAfterVoidDocs.current.get(next.present.doc) ?? null
+		};
+		emit(next.present.doc, h);
+	}, [
+		syncHistoryFlags,
+		clearPendingMarks,
+		emit,
+		reconcile
+	]);
+	const onRedo = useCallback(() => {
+		reconcile();
+		const h = historyRef.current;
+		if (!canRedo(h)) return;
+		const next = redo(h);
+		historyRef.current = next;
+		syncHistoryFlags();
+		clearPendingMarks();
+		pendingSelectionRef.current = next.present.selection && {
+			range: next.present.selection,
+			afterVoid: caretAfterVoidDocs.current.get(next.present.doc) ?? null
+		};
+		emit(next.present.doc, h);
+	}, [
+		syncHistoryFlags,
+		clearPendingMarks,
+		emit,
+		reconcile
+	]);
+	const insertMentionItem = useCallback((blockId, range, trigger, item) => {
+		commit(insertMention(latest.current.value, blockId, range, trigger, item), "other");
+		clearPendingMarks();
+	}, [commit, clearPendingMarks]);
+	const mention = useMention({
+		enabled: mentionsEnabled,
+		rootRef,
+		doc: value,
+		trigger: mentions?.trigger ?? "@",
+		onQuery: mentions?.onQuery,
+		onInsert: insertMentionItem
+	});
+	const recomputeMention = mention.recompute;
+	const stageOrToggleMark = useCallback((range, mark) => {
+		if (isCollapsed(range)) {
+			pendingAtRef.current = range.anchor;
+			setPendingMarks((prev) => toggleInList(prev ?? marksForTypedText(latest.current.value, range.anchor), mark));
+		} else commit(runToggleMark(latest.current.value, range, mark));
+	}, [commit]);
+	const stageOrSetColor = useCallback((range, type, key) => {
+		if (isCollapsed(range)) {
+			pendingAtRef.current = range.anchor;
+			setPendingMarks((prev) => {
+				const base = (prev ?? marksForTypedText(latest.current.value, range.anchor)).filter((m) => m.type !== type);
+				return key ? [...base, {
+					type,
+					color: key
+				}] : base;
+			});
+		} else commit({
+			doc: setColorMark(latest.current.value, range, type, key),
+			selection: range
+		});
+	}, [commit]);
+	const onSetColor = useCallback((type, key) => {
+		const root = rootRef.current;
+		const range = (root ? readSelection(root) : null) ?? lastSelectionRef.current;
+		if (range) {
+			stageOrSetColor(range, type, key);
+			root?.focus();
+		}
+	}, [stageOrSetColor]);
+	const { linkEditor, openLinkEditor, onLinkApply, onLinkRemove, onLinkCancel } = useLinkEditor({
+		rootRef,
+		commit,
+		getValue,
+		getReadOnly
+	});
+	const seenValueRef = useRef(value);
+	useLayoutEffect(() => {
+		const valueChanged = value !== seenValueRef.current;
+		seenValueRef.current = value;
+		if (valueChanged && value !== historyRef.current.present.doc) {
+			historyRef.current = reset({
+				doc: value,
+				selection: null
+			});
+			syncHistoryFlags();
+			if (mentionsEnabled) {
+				const r = rootRef.current;
+				recomputeMention(r ? readSelection(r) : null);
+			}
+		}
+		const root = rootRef.current;
+		const unconfirmed = unconfirmedRef.current;
+		if (unconfirmed && valueChanged) {
+			if (value !== unconfirmed.doc) pendingSelectionRef.current = null;
+			unconfirmedRef.current = null;
+		}
+		const pending = pendingSelectionRef.current;
+		if (root && pending && !unconfirmedRef.current) {
+			writeSelection(root, pending.range);
+			pendingSelectionRef.current = null;
+			const afterVoid = pending.afterVoid;
+			const fig = afterVoid ? root.querySelector(`[data-block-id="${CSS.escape(afterVoid)}"]`) : null;
+			if (fig) {
+				const r = fig.ownerDocument.createRange();
+				r.setStart(fig, fig.childNodes.length);
+				r.collapse(true);
+				const sel = fig.ownerDocument.getSelection();
+				sel?.removeAllRanges();
+				sel?.addRange(r);
+			}
+		}
+	}, [
+		value,
+		syncHistoryFlags,
+		mentionsEnabled,
+		recomputeMention
+	]);
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const onBeforeInput = (e) => {
+			const { value: doc, readOnly: ro, autolink: autolinkOn, renderLink: rl } = latest.current;
+			if (ro || isComposingRef.current) return;
+			if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+				e.preventDefault();
+				if (Date.now() - historyKeyAtRef.current < 100) return;
+				if (e.inputType === "historyUndo") onUndo();
+				else onRedo();
+				return;
+			}
+			const range = readSelection(root);
+			if (!range) {
+				if (e.inputType.startsWith("insert") || e.inputType.startsWith("delete")) e.preventDefault();
+				return;
+			}
+			if (e.inputType === "insertText" && e.data === " " && isCollapsed(range)) {
+				const block = doc.blocks.find((b) => b.id === range.anchor.blockId);
+				if (block) {
+					const before = runsText(block.inlines).slice(0, range.anchor.offset);
+					const match = matchBlockRule(block.type, before, " ");
+					if (match) {
+						e.preventDefault();
+						clearPendingMarks();
+						commit(applyBlockRule(doc, block.id, match), "other");
+						return;
+					}
+				}
+			}
+			if (autolinkOn !== false && e.inputType === "insertText" && e.data === " " && isCollapsed(range)) {
+				const linked = applyTypeAutolink(doc, range.anchor, e.data);
+				if (linked) {
+					e.preventDefault();
+					clearPendingMarks();
+					commit(linked, "type");
+					return;
+				}
+			}
+			if (rl && (e.inputType === "deleteContentBackward" || e.inputType === "deleteContentForward") && isCollapsed(range)) {
+				const dir = e.inputType === "deleteContentBackward" ? "backward" : "forward";
+				const isResolved = (href) => rl({
+					href,
+					text: href
+				}, FALLBACK_SENTINEL) !== FALLBACK_SENTINEL;
+				const delRange = atomicLinkDeleteRange(doc, range.anchor, dir, isResolved);
+				if (delRange) {
+					e.preventDefault();
+					clearPendingMarks();
+					commit(deleteRange(doc, delRange), "delete");
+					return;
+				}
+			}
+			if (/^delete.*(Backward|Forward)$/.test(e.inputType) && isCollapsed(range)) {
+				const vside = voidCaretSide(root, range.anchor.blockId);
+				if (vside) {
+					e.preventDefault();
+					const dir = /Backward$/.test(e.inputType) ? "backward" : "forward";
+					applyVoidDelete(voidDelete(doc, range.anchor.blockId, vside.side, dir));
+					return;
+				}
+			}
+			const pend = takePendingAt(range.anchor);
+			if (pend && e.inputType === "insertText" && isCollapsed(range) && e.data) {
+				e.preventDefault();
+				commit(insertWithMarks(doc, range.anchor, e.data, pend), "type");
+				return;
+			}
+			const data = e.data ?? e.dataTransfer?.getData("text/plain") ?? null;
+			const result = applyInput(doc, range, e.inputType, data);
+			if (result === null) {
+				if (e.inputType.startsWith("format")) e.preventDefault();
+				return;
+			}
+			e.preventDefault();
+			const kind = e.inputType === "insertText" || e.inputType === "insertCompositionText" || e.inputType === "insertReplacementText" ? "type" : e.inputType.startsWith("delete") ? "delete" : "other";
+			commit(result, kind);
+		};
+		root.addEventListener("beforeinput", onBeforeInput);
+		return () => root.removeEventListener("beforeinput", onBeforeInput);
+	}, [
+		commit,
+		onUndo,
+		onRedo,
+		takePendingAt,
+		clearPendingMarks,
+		applyVoidDelete
+	]);
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const onPaste = (e) => {
+			if (latest.current.readOnly) return;
+			if (latest.current.upload && !latest.current.readOnly) {
+				const files = Array.from(e.clipboardData?.files ?? []);
+				if (files.length > 0) {
+					e.preventDefault();
+					uploaderRef.current.uploadFiles(files);
+					return;
+				}
+			}
+			const html = e.clipboardData?.getData("text/html");
+			if (html && html.trim()) {
+				const range = readSelection(root);
+				if (!range) return;
+				const fragment = fromHtml(html);
+				if (isEmptyDoc(fragment)) return;
+				e.preventDefault();
+				commit(insertFragment(latest.current.value, range, fragment));
+				return;
+			}
+			if (latest.current.autolink === false) return;
+			const plain = e.clipboardData?.getData("text/plain");
+			if (!plain || !plain.trim()) return;
+			const runs = linkifyRuns(plain);
+			if (!runs.some((r) => r.marks.some((m) => m.type === "link"))) return;
+			const range = readSelection(root);
+			if (!range) return;
+			const trimmed = plain.trim();
+			const whole = findUrl(trimmed);
+			if (!isCollapsed(range) && whole && whole.start === 0 && whole.end === trimmed.length) {
+				e.preventDefault();
+				commit(setLink(latest.current.value, range, trimmed));
+				return;
+			}
+			const fragment = { blocks: [{
+				id: nextId(),
+				type: "paragraph",
+				inlines: runs
+			}] };
+			e.preventDefault();
+			commit(insertFragment(latest.current.value, range, fragment));
+		};
+		root.addEventListener("paste", onPaste);
+		return () => root.removeEventListener("paste", onPaste);
+	}, [commit]);
+	useEffect(() => {
+		if (autoFocus) rootRef.current?.focus();
+	}, [autoFocus]);
+	useEffect(() => {
+		const toolbarOn = toolbar && !readOnly;
+		if (!toolbarOn && !controlsOn && !mentionsEnabled) return;
+		const onSelChange = () => {
+			const root = rootRef.current;
+			const sel = root ? readSelection(root) : null;
+			if (toolbarOn) {
+				setSelection(sel);
+				if (sel != null) lastSelectionRef.current = sel;
+				const pend = pendingMarksRef.current;
+				const stagedAt = pendingAtRef.current;
+				const sameSpot = sel != null && isCollapsed(sel) && stagedAt != null && sel.anchor.blockId === stagedAt.blockId && sel.anchor.offset === stagedAt.offset;
+				if (pend && !sameSpot) clearPendingMarks();
+			}
+			if (controlsOn) {
+				const domSel = root?.ownerDocument.getSelection();
+				if (domSel && root && domSel.anchorNode && root.contains(domSel.anchorNode)) {
+					const id = blockIdFromNode(domSel.anchorNode);
+					if (id) setCaretBlockId(id);
+				}
+			}
+			if (mentionsEnabled) recomputeMention(sel);
+		};
+		document.addEventListener("selectionchange", onSelChange);
+		return () => document.removeEventListener("selectionchange", onSelChange);
+	}, [
+		toolbar,
+		readOnly,
+		controlsOn,
+		mentionsEnabled,
+		blockIdFromNode,
+		recomputeMention,
+		clearPendingMarks
+	]);
+	useEffect(() => {
+		if (!mentionsEnabled) return;
+		const root = rootRef.current;
+		recomputeMention(root ? readSelection(root) : null);
+	}, [
+		mentionsEnabled,
+		mentions?.trigger,
+		recomputeMention
+	]);
+	useEffect(() => {
+		if (!controlsOn) return;
+		const shell = shellRef.current;
+		if (!shell) return;
+		const onOver = (e) => {
+			if (blockMenuOpenRef.current || draggingRef.current) return;
+			const id = blockIdFromNode(e.target);
+			if (id) setHoverBlockId(id);
+		};
+		let moveRaf = 0;
+		let lastMove = null;
+		const onMove = (e) => {
+			if (blockMenuOpenRef.current || draggingRef.current) return;
+			lastMove = {
+				clientY: e.clientY,
+				target: e.target
+			};
+			if (moveRaf) return;
+			moveRaf = requestAnimationFrame(() => {
+				moveRaf = 0;
+				const m = lastMove;
+				if (!m) return;
+				const root = rootRef.current;
+				if (!root) return;
+				if (!root.contains(m.target)) return;
+				if (blockIdFromNode(m.target)) return;
+				const id = blockAtPointerY(root, m.clientY);
+				if (id) setHoverBlockId(id);
+			});
+		};
+		const onLeave = () => {
+			if (blockMenuOpenRef.current || draggingRef.current) return;
+			setHoverBlockId(null);
+		};
+		shell.addEventListener("mouseover", onOver);
+		shell.addEventListener("mousemove", onMove);
+		shell.addEventListener("mouseleave", onLeave);
+		return () => {
+			shell.removeEventListener("mouseover", onOver);
+			shell.removeEventListener("mousemove", onMove);
+			shell.removeEventListener("mouseleave", onLeave);
+			if (moveRaf) cancelAnimationFrame(moveRaf);
+		};
+	}, [
+		controlsOn,
+		blockIdFromNode,
+		blockAtPointerY
+	]);
+	useEffect(() => {
+		if (readOnly || !usesShell) return;
+		const shell = shellRef.current;
+		if (!shell) return;
+		const onOver = (e) => {
+			if (draggingRef.current) return;
+			const t = e.target;
+			const id = imageFigureIdAt(t);
+			if (id) {
+				setHoveredImageId(id);
+				return;
+			}
+			if (t.closest?.("[data-rte-resize-handle]")) return;
+			setHoveredImageId(null);
+		};
+		const onLeave = () => {
+			if (!draggingRef.current) setHoveredImageId(null);
+		};
+		shell.addEventListener("mouseover", onOver);
+		shell.addEventListener("mouseleave", onLeave);
+		return () => {
+			shell.removeEventListener("mouseover", onOver);
+			shell.removeEventListener("mouseleave", onLeave);
+		};
+	}, [
+		readOnly,
+		usesShell,
+		imageFigureIdAt
+	]);
+	const onKeyDown = useCallback((e) => {
+		if (readOnly) return;
+		const root = rootRef.current;
+		if (!root) return;
+		const mod = e.metaKey || e.ctrlKey;
+		if (mod && isLetterKey(e, "z") && !e.shiftKey) {
+			e.preventDefault();
+			e.stopPropagation();
+			historyKeyAtRef.current = Date.now();
+			onUndo();
+			return;
+		}
+		if (mod && (isLetterKey(e, "y") || isLetterKey(e, "z") && e.shiftKey)) {
+			e.preventDefault();
+			e.stopPropagation();
+			historyKeyAtRef.current = Date.now();
+			onRedo();
+			return;
+		}
+		const range = readSelection(root);
+		if (!range) return;
+		if (controlsOn) {
+			const caretBlock = range.anchor.blockId;
+			if (mod && e.shiftKey && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+				e.preventDefault();
+				e.stopPropagation();
+				commit(moveBlockUnit(value, caretBlock, e.key === "ArrowUp" ? -1 : 1), "other");
+				return;
+			}
+			if (mod && !e.shiftKey && isLetterKey(e, "d")) {
+				e.preventDefault();
+				e.stopPropagation();
+				commit(duplicateBlockUnit(value, caretBlock), "other");
+				return;
+			}
+			if (e.shiftKey && e.key === "F10" || e.key === "ContextMenu") {
+				e.preventDefault();
+				setHoverBlockId(null);
+				setCaretBlockId(caretBlock);
+				setBlockMenuOpen(true);
+				return;
+			}
+		}
+		const vcaret = e.target === root && isCollapsed(range) && !e.nativeEvent.isComposing ? voidCaretSide(root, range.anchor.blockId) : null;
+		if (vcaret?.inside) {
+			if ([...e.key].length === 1 && !e.metaKey && (!e.ctrlKey || e.altKey)) {
+				e.preventDefault();
+				const pend = takePendingAt(range.anchor);
+				commit(pend ? insertWithMarks(value, range.anchor, e.key, pend) : insertText(value, range.anchor, e.key), "type");
+				return;
+			}
+			if (!mod && e.key === "Enter") {
+				e.preventDefault();
+				commit(applyInput(value, range, "insertParagraph", null), "other");
+				return;
+			}
+			if (!mod && (e.key === "Backspace" || e.key === "Delete")) {
+				e.preventDefault();
+				const dir = e.key === "Backspace" ? "backward" : "forward";
+				applyVoidDelete(voidDelete(value, range.anchor.blockId, vcaret.side, dir));
+				return;
+			}
+		}
+		if (mention.open && mention.items.length > 0) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				mention.move(1);
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				mention.move(-1);
+				return;
+			}
+			if (e.key === "Enter" || e.key === "Tab") {
+				e.preventDefault();
+				mention.commitActive();
+				return;
+			}
+		}
+		if (mention.open && e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			mention.close();
+			return;
+		}
+		if ((e.metaKey || e.ctrlKey) && !e.shiftKey && isLetterKey(e, "k")) {
+			e.preventDefault();
+			e.stopPropagation();
+			openLinkEditor();
+			return;
+		}
+		const blockType = currentBlock(value, range)?.type;
+		const inList = blockType === "bullet_item" || blockType === "ordered_item";
+		if (e.key === "Tab" && inList) {
+			e.preventDefault();
+			commit(runIndent(value, range, e.shiftKey ? "out" : "in"));
+			return;
+		}
+		if (e.key === "Enter" && inList && isCollapsed(range)) {
+			const idx = value.blocks.findIndex((b) => b.id === range.anchor.blockId);
+			if (idx !== -1 && blockLength(value.blocks[idx]) === 0) {
+				e.preventDefault();
+				commit(runSetBlock(value, range, { type: "paragraph" }));
+				return;
+			}
+		}
+		const mark = shortcutMark(e);
+		if (mark) {
+			e.preventDefault();
+			stageOrToggleMark(range, mark);
+			return;
+		}
+	}, [
+		value,
+		readOnly,
+		commit,
+		stageOrToggleMark,
+		openLinkEditor,
+		onUndo,
+		onRedo,
+		mention,
+		controlsOn,
+		takePendingAt,
+		applyVoidDelete
+	]);
+	const compositionRef = useRef(null);
+	const onCompositionStart = useCallback(() => {
+		isComposingRef.current = true;
+		const root = rootRef.current;
+		const range = root ? readSelection(root) : null;
+		const before = range && root ? blockOwnText(root, range.anchor.blockId) : null;
+		compositionRef.current = range && before != null ? {
+			range,
+			before
+		} : null;
+	}, []);
+	const onCompositionEnd = useCallback((e) => {
+		isComposingRef.current = false;
+		const snap = compositionRef.current;
+		compositionRef.current = null;
+		const root = rootRef.current;
+		if (readOnly || !root || !snap) return;
+		const { range, before } = snap;
+		if (range.anchor.blockId !== range.focus.blockId) {
+			const result = applyInput(value, range, "insertText", e.data);
+			if (result) commit(result, "type");
+			return;
+		}
+		const blockId = range.anchor.blockId;
+		const after = blockOwnText(root, blockId);
+		if (after == null || after === before) return;
+		const startCap = Math.min(range.anchor.offset, range.focus.offset);
+		let pre = 0;
+		while (pre < startCap && pre < after.length && before[pre] === after[pre]) pre += 1;
+		const endCap = before.length - Math.max(range.anchor.offset, range.focus.offset);
+		let suf = 0;
+		while (suf < Math.min(endCap, before.length - pre) && suf < after.length - pre && before[before.length - 1 - suf] === after[after.length - 1 - suf]) suf += 1;
+		const replaced = {
+			anchor: {
+				blockId,
+				offset: pre
+			},
+			focus: {
+				blockId,
+				offset: before.length - suf
+			}
+		};
+		const inserted = after.slice(pre, after.length - suf);
+		const result = inserted ? applyInput(value, replaced, "insertText", inserted) : applyInput(value, replaced, "deleteContentBackward", null);
+		if (result) commit(result, "type");
+	}, [
+		value,
+		readOnly,
+		commit
+	]);
+	const toolbarMarks = useMemo(() => selection ? activeMarks(value, selection, pendingMarks) : [], [
+		value,
+		selection,
+		pendingMarks
+	]);
+	const toolbarColors = useMemo(() => selection ? activeColors(value, selection, pendingMarks) : {}, [
+		value,
+		selection,
+		pendingMarks
+	]);
+	const toolbarBlock = useMemo(() => selection ? currentBlock(value, selection) : null, [value, selection]);
+	const toolbarLinkActive = useMemo(() => selection ? linkAt(value, selection.focus) != null : false, [value, selection]);
+	const onInsertEmoji = useCallback((emoji) => {
+		const root = rootRef.current;
+		const range = (root ? readSelection(root) : null) ?? lastSelectionRef.current;
+		if (!range) return;
+		const result = applyInput(latest.current.value, range, "insertText", emoji);
+		if (result) {
+			commit(result);
+			root?.focus();
+		}
+	}, [commit]);
+	const onToolbarMark = useCallback((type) => {
+		if (type === "link" || type === "mention" || type === "textColor" || type === "bgColor") return;
+		const root = rootRef.current;
+		const range = (root ? readSelection(root) : null) ?? lastSelectionRef.current;
+		if (range) stageOrToggleMark(range, { type });
+	}, [stageOrToggleMark]);
+	const onToolbarSetBlock = useCallback((choice) => {
+		const root = rootRef.current;
+		const range = (root ? readSelection(root) : null) ?? lastSelectionRef.current;
+		if (range) commit(runSetBlock(latest.current.value, range, choice));
+	}, [commit]);
+	const onToolbarToggleList = useCallback((listType) => {
+		const root = rootRef.current;
+		const range = (root ? readSelection(root) : null) ?? lastSelectionRef.current;
+		if (range) commit(runToggleList(latest.current.value, range, listType));
+	}, [commit]);
+	const onPickFiles = useCallback(() => uploadInputRef.current?.click(), []);
+	const onBlockInsertBelow = useCallback((id) => commit(insertEmptyBlockBelow(latest.current.value, id), "other"), [commit]);
+	const onBlockAction = useCallback((id, action) => {
+		const v = latest.current.value;
+		switch (action) {
+			case "duplicate":
+				commit(duplicateBlockUnit(v, id), "other");
+				break;
+			case "moveUp":
+				commit(moveBlockUnit(v, id, -1), "other");
+				break;
+			case "moveDown":
+				commit(moveBlockUnit(v, id, 1), "other");
+				break;
+			case "delete":
+				commit(removeBlockUnit(v, id), "other");
+				break;
+			default: return action;
+		}
+		setBlockMenuOpen(false);
+	}, [commit]);
+	const onBlockTurnInto = useCallback((id, choice) => {
+		const v = latest.current.value;
+		const range = {
+			anchor: {
+				blockId: id,
+				offset: 0
+			},
+			focus: {
+				blockId: id,
+				offset: 0
+			}
+		};
+		const patch = choice.type === "bullet_item" || choice.type === "ordered_item" ? {
+			type: choice.type,
+			depth: 0
+		} : choice;
+		commit(runSetBlock(v, range, patch), "other");
+		setBlockMenuOpen(false);
+	}, [commit]);
+	const onBlockReorder = useCallback((id, targetIndex) => commit(moveBlockUnitToIndex(latest.current.value, id, targetIndex), "other"), [commit]);
+	const onBlockColor = useCallback((id, type, key) => {
+		const r = wholeBlockRange(latest.current.value, id);
+		if (r) commit({
+			doc: setColorMark(latest.current.value, r, type, key),
+			selection: r
+		}, "other", { keepSelection: true });
+	}, [commit]);
+	const { configBlockId, onConfigOpen, onConfigClose, onConfigAlt, onConfigAlign, onConfigWidth, onConfigWidthReset, onConfigReplace } = useAttachmentConfig({
+		rootRef,
+		commit,
+		commitResizeLive,
+		getValue,
+		getLiveDoc,
+		uploaderRef
+	});
+	const onImageResize = useCallback((w) => {
+		if (hoveredImageId) onConfigWidth(hoveredImageId, w);
+	}, [onConfigWidth, hoveredImageId]);
+	const onEditableClick = useCallback((e) => {
+		if (latest.current.readOnly) return;
+		const el = e.target.closest?.("[data-attachment-action]");
+		if (!el) return;
+		const id = el.getAttribute("data-block-id");
+		const action = el.getAttribute("data-attachment-action");
+		if (!id) return;
+		if (action === "retry") uploaderRef.current.retry(id);
+		else if (action === "remove") uploaderRef.current.remove(id);
+	}, []);
+	const content = useMemo(() => renderDoc(value, {
+		editable: true,
+		renderLink,
+		renderMention
+	}), [
+		value,
+		renderLink,
+		renderMention
+	]);
+	const blockOrderKey = useMemo(() => value.blocks.map((b) => b.id).join("|"), [value.blocks]);
+	const editable = /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: setRefs,
+		style: imageMaxHeightStyle(imageMaxHeight, style),
+		className: clsx(RichTextEditor_module_default.root, readOnly && RichTextEditor_module_default.readOnly, controlsOn && RichTextEditor_module_default.withGutter, className),
+		contentEditable: !readOnly,
+		suppressContentEditableWarning: true,
+		role: "textbox",
+		"aria-multiline": "true",
+		"aria-readonly": readOnly || void 0,
+		"aria-invalid": invalid || void 0,
+		"aria-required": required || void 0,
+		"aria-haspopup": mentions && !readOnly ? "listbox" : void 0,
+		"aria-autocomplete": mentions && !readOnly ? "list" : void 0,
+		"aria-expanded": mentions && !readOnly ? mention.open : void 0,
+		"aria-controls": mention.open ? mention.listboxId : void 0,
+		"aria-activedescendant": mention.open ? mention.activeOptionId : void 0,
+		"aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : t("richTextEditor.editorLabel")),
+		"data-empty": isEmptyDoc(value) ? "" : void 0,
+		"data-placeholder": placeholder,
+		spellCheck: true,
+		onKeyDown,
+		onClick: onEditableClick,
+		onCompositionStart,
+		onCompositionEnd,
+		onFocus: autoToolbar ? () => setFocused(true) : void 0,
+		onBlur: autoToolbar ? () => setFocused(false) : void 0,
+		children: content
+	});
+	const linkBubble = linkEditor && !readOnly ? /* @__PURE__ */ jsx(RichTextLinkEditor, {
+		href: linkEditor.href,
+		editing: linkEditor.editing,
+		anchorRect: linkEditor.anchorRect,
+		getAnchorRect: () => rootRef.current ? rangeRect(rootRef.current, linkEditor.range) : null,
+		onApply: onLinkApply,
+		onRemove: onLinkRemove,
+		onCancel: onLinkCancel
+	}, linkEditor.key) : null;
+	const mentionMenu = mention.open && !readOnly && mention.anchorRect ? /* @__PURE__ */ jsx(RichTextMentionMenu, {
+		items: mention.items,
+		activeIndex: mention.activeIndex,
+		anchorRect: mention.anchorRect,
+		getAnchorRect: mention.getAnchorRect,
+		listboxId: mention.listboxId,
+		getOptionId: mention.getOptionId,
+		label: t("richTextEditor.mentionsLabel"),
+		emptyLabel: t("richTextEditor.mentionsEmpty"),
+		onSelect: mention.selectIndex,
+		onHover: mention.setActiveIndex
+	}) : null;
+	const activeBlock = activeBlockId ? value.blocks.find((b) => b.id === activeBlockId) : void 0;
+	const activeBlockType = activeBlock?.type;
+	const canConfigure = uploadOn && activeBlock?.type === "attachment" && isAttachmentSettled(activeBlock);
+	const configBlock = configBlockId ? value.blocks.find((b) => b.id === configBlockId) : void 0;
+	const blockControlsEl = controlsOn ? /* @__PURE__ */ jsx(RichTextBlockControls, {
+		rootRef: shellRef,
+		activeBlockId,
+		blockOrderKey,
+		activeBlockType,
+		menuOpen: blockMenuOpen,
+		onMenuOpenChange: setBlockMenuOpen,
+		onInsertBelow: onBlockInsertBelow,
+		onAction: onBlockAction,
+		onTurnInto: onBlockTurnInto,
+		onReorder: onBlockReorder,
+		onConfigure: canConfigure ? onConfigOpen : void 0,
+		onColor: onBlockColor,
+		onDraggingChange: onBlockDraggingChange
+	}) : null;
+	const resizableImage = hoveredImageId ? value.blocks.find((b) => b.id === hoveredImageId && b.type === "attachment" && isAttachmentSettled(b) && attachmentIsImage(b) && !!safeHref(b.src ?? "")) : void 0;
+	const imageWidthMax = (id) => {
+		const contentWidth = rootRef.current?.getBoundingClientRect().width ?? 600;
+		const img = rootRef.current?.querySelector(`[data-block-id="${CSS.escape(id)}"] img`);
+		return img ? capWidthToHeight(contentWidth, img.naturalWidth, img.naturalHeight, parseFloat(getComputedStyle(img).maxHeight)) : contentWidth;
+	};
+	const imageResizerEl = !readOnly && usesShell && resizableImage ? /* @__PURE__ */ jsx(RichTextImageResizer, {
+		rootRef: shellRef,
+		blockId: hoveredImageId,
+		layoutKey: `${blockOrderKey}:${resizableImage.width ?? ""}`,
+		maxWidth: imageWidthMax(hoveredImageId),
+		onResize: onImageResize,
+		onDraggingChange: setDragging,
+		hidden: blockDragging
+	}) : null;
+	const configEl = configBlock && configBlock.type === "attachment" && isAttachmentSettled(configBlock) && uploadOn ? (() => {
+		const r = (rootRef.current?.querySelector(`[data-block-id="${CSS.escape(configBlock.id)}"]`))?.getBoundingClientRect();
+		if (!r) return null;
+		return /* @__PURE__ */ jsx(RichTextAttachmentConfig, {
+			block: configBlock,
+			anchorRect: {
+				top: r.top,
+				left: r.left,
+				width: r.width,
+				height: r.height
+			},
+			getAnchorRect: () => {
+				const el = rootRef.current?.querySelector(`[data-block-id="${CSS.escape(configBlock.id)}"]`);
+				if (!el) return null;
+				const b = el.getBoundingClientRect();
+				return {
+					top: b.top,
+					left: b.left,
+					width: b.width,
+					height: b.height
+				};
+			},
+			maxWidth: imageWidthMax(configBlock.id),
+			accept: latest.current.upload?.accept,
+			onAltChange: (alt) => onConfigAlt(configBlock.id, alt),
+			onAlignChange: (align) => onConfigAlign(configBlock.id, align),
+			onWidthChange: (w) => onConfigWidth(configBlock.id, w),
+			onWidthReset: () => onConfigWidthReset(configBlock.id),
+			onReplace: (file) => onConfigReplace(configBlock.id, file),
+			onClose: onConfigClose
+		}, configBlock.id);
+	})() : null;
+	const overlayOpen = linkEditor != null || mention.open || toolbarOverlayOpen;
+	const toolbarBar = toolbar === true || autoToolbar && (focused || !isEmptyDoc(value) || overlayOpen) ? /* @__PURE__ */ jsx(RichTextToolbar, {
+		activeMarks: toolbarMarks,
+		colors: toolbarColors,
+		onSetColor,
+		block: toolbarBlock,
+		disabled: readOnly,
+		onToggleMark: onToolbarMark,
+		onSetBlock: onToolbarSetBlock,
+		onToggleList: onToolbarToggleList,
+		linkActive: toolbarLinkActive,
+		onOpenLink: openLinkEditor,
+		canUndo: canUndo$1,
+		canRedo: canRedo$1,
+		onUndo,
+		onRedo,
+		onPickFiles: uploadOn ? onPickFiles : void 0,
+		onOverlayOpenChange: autoToolbar ? setToolbarOverlayOpen : void 0,
+		onInsertEmoji
+	}) : null;
+	const uploadInput = uploadOn ? /* @__PURE__ */ jsx("input", {
+		ref: uploadInputRef,
+		type: "file",
+		multiple: true,
+		accept: upload?.accept,
+		style: { display: "none" },
+		onChange: (e) => {
+			const files = Array.from(e.target.files ?? []);
+			if (files.length) uploaderRef.current.uploadFiles(files);
+			e.target.value = "";
+		}
+	}) : null;
+	const uploadStatus = uploadOn ? /* @__PURE__ */ jsx(LiveRegion, { children: uploadFailure ? [`${t("richTextEditor.uploadFailed")}: ${uploadFailure.name}`, uploadFailure.reason].filter(Boolean).join(". ") : "" }) : null;
+	if (!usesShell) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		uploadStatus,
+		editable,
+		linkBubble,
+		mentionMenu
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: RichTextEditor_module_default.shell,
+		ref: shellRef,
+		children: [
+			toolbarBar,
+			uploadInput,
+			uploadStatus,
+			editable,
+			linkBubble,
+			mentionMenu,
+			blockControlsEl,
+			imageResizerEl,
+			configEl
+		]
+	});
+});
+export { RichTextEditor };