@bettercms-ai/kit 0.1.1 → 1.0.0

package/controls/rich-text/editor.js

@@ -0,0 +1,1530 @@
+import { cn } from "../../lib/cn.js";
+import { useKitEnv, useKitServices } from "../../context.js";
+import { Button } from "../../ui/button.js";
+import { shortcutHintsOn } from "../../ui/shortcut-hint.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Tooltip } from "../../ui/overlay.js";
+import { Textarea } from "../../ui/input.js";
+import { ExpandedEditorModal } from "../../ui/expanded-editor-modal.js";
+import { bodyCountLabel, closestBlock, countComponents, countWords, createIsland, defaultModel, editingHost, esc, hydrate, isEmptyHtml, placeCaret, rangeRect, rid, sanitize, serialize, textBeforeCaret, topBlock } from "./dom.js";
+import { ALL_FEATURES } from "./codec.js";
+import { LinkForm } from "./link-form.js";
+import { Island } from "./blocks.js";
+import { CatalogComponentsProvider, InsertMenuContent, SlashMenuPanel, blockAllowed, catalogKey, noteRecent, useCatalog } from "./catalog.js";
+import { htmlToMarkdown, looksLikeMarkdown, markdownToHtml } from "./markdown.js";
+import { duplicateBlock, ensureLineAfter, insertBasic, insertIsland, liveInlineCode, liveMarkdown, moveBlock, restrictHtml, turnInto } from "./ops.js";
+import { EMPTY_FMT, FormatToolbar, MARK_FEATURE, stylesFor } from "./toolbar.js";
+import { SelectionBubble } from "./floating.js";
+import * as React from "react";
+import { IconArrowBarToDown, IconArrowBarToUp, IconCopy, IconGripVertical, IconPlus, IconTransform, IconTrash } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import { createPortal, flushSync } from "react-dom";
+//#region src/kit/controls/rich-text/editor.tsx
+/**
+* RICH TEXT — the boxed rich-text editor (V2 HEAD controls/rich-text-editor.tsx, Figma 60995-5431, CPO D49 / D54 / D55).
+*
+* contentEditable + execCommand keeps it dependency-free; the value is clean HTML, which the field's control turns into
+* the stored value through the host's codec (./codec.ts). Rich blocks (an image) are React "islands" rendered into
+* contenteditable=false nodes and written back as static HTML, so a re-mount restores them (./dom.ts).
+*
+*   ./toolbar.tsx    the field toolbar (no room at rest, folds into the chevron by width)
+*   ./catalog.tsx    Insert menu, slash menu and the shared block catalogue
+*   ./blocks.tsx     the rich blocks (an image)
+*   ./markdown.ts    HTML ⇄ Markdown for the Markdown toggle and pasting
+*   ./ops.ts         pure DOM block operations (insert, turn into, move, duplicate, live Markdown, field rules)
+*   ./floating.tsx   the selection bubble
+*   ./dom.ts         hydrate / serialize / sanitize and selection helpers
+*
+* Everything the editor offers is limited to what the field accepts (`features`): a toolbar button, a slash command, a
+* Markdown shortcut or pasted markup the field cannot hold is not offered, or is turned into what it can hold and said so.
+*/
+var RT_PROSE = "text-kit-base leading-[1.6] text-kit-fg [&>*+*]:mt-3 [&_h1]:text-[28px] [&_h1]:font-semibold [&_h1]:leading-9 [&_h1]:tracking-[-0.01em] [&_h2]:text-[22px] [&_h2]:font-semibold [&_h2]:leading-8 [&_h2]:tracking-[-0.01em] [&_h3]:text-kit-lg [&_h3]:font-semibold [&_h4]:text-kit-md [&_h4]:font-semibold [&_h5]:text-kit-base [&_h5]:font-semibold [&_h6]:text-kit-sm [&_h6]:font-semibold [&_h6]:uppercase [&_h6]:tracking-wide [&_h6]:text-kit-fg-2 [&>h1]:mt-6 [&>h2]:mt-6 [&>h3]:mt-5 [&>*:first-child]:mt-0 [&_ul:not([data-rt-isolate]_*)]:list-disc [&_ul:not([data-rt-isolate]_*)]:pl-5 [&_ol:not([data-rt-isolate]_*)]:list-decimal [&_ol:not([data-rt-isolate]_*)]:pl-5 [&_li:not([data-rt-isolate]_*)]:pl-1 [&_li+li:not([data-rt-isolate]_*)]:mt-1 [&_li:not([data-rt-isolate]_*)]:marker:text-kit-fg-3 [&_blockquote]:border-l-2 [&_blockquote]:border-kit-line-strong [&_blockquote]:pl-4 [&_blockquote]:text-kit-fg-2 [&_blockquote]:italic [&_a]:text-kit-accent-fg [&_a]:underline [&_a]:decoration-kit-accent-line [&_a]:underline-offset-2 [&_abbr]:cursor-help [&_abbr]:underline [&_abbr]:decoration-dotted [&_abbr]:underline-offset-2 [&_sup]:text-[0.7em] [&_sup]:leading-none [&_code]:rounded-kit-md [&_code]:bg-kit-muted [&_code]:px-1 [&_code]:py-px [&_code]:font-kit-mono [&_code]:text-[0.9em] [&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap [&_pre]:rounded-kit-lg [&_pre]:border [&_pre]:border-kit-line [&_pre]:bg-kit-code [&_pre]:p-3 [&_pre]:font-kit-mono [&_pre]:text-kit-sm [&_pre_code]:rounded-none [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-[1em] [&_hr]:my-6 [&_hr]:border-kit-line [&_table]:w-full [&_table]:border-collapse [&_table]:text-kit-sm [&_td]:border [&_td]:border-kit-line [&_td]:px-2.5 [&_td]:py-1.5 [&_td]:align-top [&_th]:border [&_th]:border-kit-line [&_th]:bg-kit-subtle [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:text-left [&_th]:align-top [&_th]:font-medium";
+/** Panel density (≈340px inspector): 13px text, smaller headings. */
+var RT_PANEL = "text-kit-sm leading-[1.6] [&_h1]:text-kit-xl [&_h1]:leading-7 [&_h2]:text-kit-lg [&_h2]:leading-7 [&_h3]:text-kit-md [&_h4]:text-kit-base [&_h5]:text-kit-sm [&_h6]:text-kit-xs";
+/** execCommand, where the engine has it (it returns false where it does not). */
+var exec = (cmd, arg) => {
+	try {
+		return typeof document.execCommand === "function" && document.execCommand(cmd, false, arg);
+	} catch {
+		return false;
+	}
+};
+var queryState = (c) => {
+	try {
+		return typeof document.queryCommandState === "function" && document.queryCommandState(c);
+	} catch {
+		return false;
+	}
+};
+/** Insert HTML at the caret: the browser's own insert (undoable), else by hand. */
+function insertHtmlAtCaret(html) {
+	if (exec("insertHTML", html)) return;
+	const s = window.getSelection();
+	if (!s || !s.rangeCount) return;
+	const r = s.getRangeAt(0);
+	r.deleteContents();
+	const tpl = document.createElement("template");
+	tpl.innerHTML = sanitize(html);
+	const last = tpl.content.lastChild;
+	r.insertNode(tpl.content);
+	if (last) {
+		r.setStartAfter(last);
+		r.collapse(true);
+		s.removeAllRanges();
+		s.addRange(r);
+	}
+}
+function insertTextAtCaret(text) {
+	if (exec("insertText", text)) return;
+	const s = window.getSelection();
+	if (!s || !s.rangeCount) return;
+	const r = s.getRangeAt(0);
+	r.deleteContents();
+	const t = document.createTextNode(text);
+	r.insertNode(t);
+	r.setStartAfter(t);
+	r.collapse(true);
+	s.removeAllRanges();
+	s.addRange(r);
+}
+/** The slash menu at full height (header 32, list 300, footer 28, borders), the least it shrinks to, and the gap it keeps from the window's edge. */
+var SLASH_MENU_H = 362;
+var SLASH_MIN_H = 160;
+var SLASH_EDGE = 8;
+/**
+* Where the slash menu goes, collision-aware: below the caret when the whole menu fits there, else on the side with
+* more room, and never taller than that room (its list scrolls), so the last row (More components) stays reachable in
+* a short window.
+*/
+function slashPlacement(caret, viewportH) {
+	const below = viewportH - caret.bottom - 6 - SLASH_EDGE;
+	const above = caret.top - 6 - SLASH_EDGE;
+	const flipUp = below < SLASH_MENU_H && above > below;
+	return {
+		flipUp,
+		maxHeight: Math.max(SLASH_MIN_H, Math.min(SLASH_MENU_H, flipUp ? above : below))
+	};
+}
+function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, features = ALL_FEATURES, single, allowNewTab = true, id, invalid, variant = "document", expandCrumbs, expandedOpen, onExpandedOpenChange, inModal, hideFullscreen, maxHeight, autoFocus, onComment, components }) {
+	const hints = shortcutHintsOn();
+	const ph = placeholder ?? (hints ? "Type '/' for commands" : "Write something…");
+	const dense = variant === "panel";
+	const ref = React.useRef(null);
+	const wrap = React.useRef(null);
+	const scroller = React.useRef(null);
+	const saved = React.useRef(null);
+	const known = React.useRef(null);
+	const pending = React.useRef(null);
+	/** a host undo just ran: its value is loaded even while the editor has focus (⌘Z here) */
+	const forceLoad = React.useRef(false);
+	const prevDoc = React.useRef(null);
+	const onChangeRef = React.useRef(onChange);
+	onChangeRef.current = onChange;
+	const valueRef = React.useRef(value);
+	valueRef.current = value;
+	const services = useKitServices();
+	const env = useKitEnv();
+	const featureKey = features.join(",");
+	const allows = React.useCallback((f) => features.includes(f), [featureKey]);
+	const [empty, setEmpty] = React.useState(isEmptyHtml(value));
+	const [words, setWords] = React.useState(() => countWords(value));
+	const [comps, setComps] = React.useState(() => countComponents(value));
+	const [fmt, setFmt] = React.useState(EMPTY_FMT);
+	const [modalOwn, setModalOwn] = React.useState(false);
+	const modalOpen = expandedOpen ?? modalOwn;
+	const setModalOpen = (o) => onExpandedOpenChange ? onExpandedOpenChange(o) : setModalOwn(o);
+	const [md, setMd] = React.useState(null);
+	const [mdConfirm, setMdConfirm] = React.useState(false);
+	const [bubble, setBubble] = React.useState(null);
+	const [slash, setSlash] = React.useState(null);
+	const [gutter, setGutter] = React.useState(null);
+	const [blockMenu, setBlockMenu] = React.useState(false);
+	const [gutterInsert, setGutterInsert] = React.useState(false);
+	const gutterTarget = React.useRef(null);
+	const canAI = env.can("ai.use") && !!services.aiRewrite;
+	const aiAttempt = React.useRef(0);
+	const [link, setLink] = React.useState(null);
+	const [drag, setDrag] = React.useState(null);
+	const [focused, setFocused] = React.useState(false);
+	const [menus, setMenus] = React.useState({
+		style: false,
+		more: false
+	});
+	const [insertOpen, setInsertOpen] = React.useState(false);
+	const inserted = React.useRef(false);
+	const [islands, setIslands] = React.useState([]);
+	const hist = React.useRef({
+		past: [],
+		future: [],
+		textAt: 0,
+		hosts: []
+	});
+	const [width, setWidth] = React.useState(720);
+	const [gutterRoom, setGutterRoom] = React.useState(false);
+	const blurTimer = React.useRef(void 0);
+	const [notice, setNotice] = React.useState(null);
+	const expanded = !!inModal;
+	const toolbarOpen = !readOnly && (focused || menus.style || menus.more || insertOpen || expanded || !!md || !!link);
+	const scrollable = !!maxHeight && !expanded;
+	/** A refusal or a result the author must see: the host's toaster, else a line under the editor. Never silent. */
+	const notify = React.useCallback((message, opts = {}) => {
+		if (services.toast) services.toast(message, opts);
+		else setNotice({
+			message,
+			...opts
+		});
+	}, [services]);
+	React.useEffect(() => {
+		if (!notice) return;
+		const t = window.setTimeout(() => setNotice(null), 8e3);
+		return () => window.clearTimeout(t);
+	}, [notice]);
+	const syncIslands = React.useCallback(() => {
+		const el = ref.current;
+		if (!el) return setIslands((p) => p.length ? [] : p);
+		const list = Array.from(el.querySelectorAll(":scope > [data-rt-island]"));
+		const seen = /* @__PURE__ */ new Set();
+		for (const x of list) {
+			if (!x.__rt) {
+				x.innerHTML = "";
+				x.__rt = defaultModel(x.getAttribute("data-rt-island"));
+				delete x.dataset.rtId;
+			}
+			if (!x.dataset.rtId || seen.has(x.dataset.rtId)) x.dataset.rtId = rid("i");
+			seen.add(x.dataset.rtId);
+		}
+		setIslands((prev) => prev.length === list.length && prev.every((p, i) => p.el === list[i]) ? prev : list.map((x) => ({
+			id: x.dataset.rtId,
+			el: x
+		})));
+	}, []);
+	const load = React.useCallback((html) => {
+		const el = ref.current;
+		if (!el) return;
+		el.innerHTML = sanitize(html || "") || "<p><br></p>";
+		hydrate(el);
+		known.current = html;
+		setEmpty(isEmptyHtml(html));
+		setWords(countWords(html));
+		setComps(countComponents(html));
+		syncIslands();
+	}, [syncIslands]);
+	const emit = React.useCallback(() => {
+		const el = ref.current;
+		if (!el) return;
+		syncIslands();
+		const html = serialize(el);
+		setEmpty(isEmptyHtml(html) && !el.querySelector(":scope > [data-rt-island], :scope > hr"));
+		setWords(countWords(html));
+		setComps(countComponents(html));
+		if (html === known.current) return;
+		forceLoad.current = false;
+		known.current = html;
+		onChangeRef.current(html);
+	}, [syncIslands]);
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const docChanged = prevDoc.current !== null && prevDoc.current !== docKey;
+		prevDoc.current = docKey;
+		if (pending.current !== null) {
+			const h = pending.current;
+			pending.current = null;
+			load(h);
+			return;
+		}
+		if (forceLoad.current && value !== known.current) {
+			forceLoad.current = false;
+			load(value);
+			return;
+		}
+		if (docChanged || !el.firstChild || value !== known.current && !wrap.current?.contains(document.activeElement)) load(value);
+	}, [
+		value,
+		docKey,
+		md,
+		load
+	]);
+	React.useEffect(() => {
+		setMd(null);
+		setMdConfirm(false);
+		setSlash(null);
+		setLink(null);
+		setGutter(null);
+	}, [docKey]);
+	React.useEffect(() => {
+		exec("defaultParagraphSeparator", "p");
+		if (autoFocus && ref.current && !readOnly) {
+			ref.current.focus({ preventScroll: true });
+			placeCaret(ref.current.lastElementChild ?? ref.current);
+		}
+	}, []);
+	React.useEffect(() => {
+		const w = wrap.current;
+		if (!w || typeof ResizeObserver === "undefined") return;
+		const measureRoom = () => {
+			let a = w.parentElement;
+			while (a && a !== document.body) {
+				const cs = getComputedStyle(a);
+				if (cs.overflowX !== "visible" || cs.overflowY !== "visible") break;
+				a = a.parentElement;
+			}
+			setGutterRoom(w.getBoundingClientRect().left - (a ? a.getBoundingClientRect().left : 0) >= 48);
+		};
+		const ro = new ResizeObserver(([e]) => {
+			setWidth(Math.round(e.contentRect.width));
+			measureRoom();
+		});
+		ro.observe(w);
+		return () => ro.disconnect();
+	}, []);
+	const [stickyTop, setStickyTop] = React.useState(0);
+	React.useEffect(() => {
+		const w = wrap.current;
+		if (!toolbarOpen || dense || !w) return;
+		let sp = w.parentElement;
+		while (sp && !/(auto|scroll)/.test(getComputedStyle(sp).overflowY)) sp = sp.parentElement;
+		if (!sp) return setStickyTop(0);
+		let top = 0;
+		sp.querySelectorAll(".sticky").forEach((h) => {
+			if (h.contains(w) || w.contains(h) || !(h.compareDocumentPosition(w) & Node.DOCUMENT_POSITION_FOLLOWING)) return;
+			const cs = getComputedStyle(h);
+			if (cs.position !== "sticky") return;
+			top = Math.max(top, (parseFloat(cs.top) || 0) + h.offsetHeight);
+		});
+		setStickyTop(top);
+	}, [toolbarOpen, dense]);
+	const hasSlash = !!slash;
+	React.useEffect(() => {
+		if (!hasSlash) return;
+		let raf = 0;
+		const on = (e) => {
+			if (e.target instanceof Element && e.target.closest("[role=listbox]")) return;
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(() => setSlash((sl) => {
+				const s = window.getSelection();
+				if (!sl || !s || !s.rangeCount || s.getRangeAt(0).startContainer !== sl.node) return null;
+				const rect = rangeRect(s.getRangeAt(0), sl.node.parentElement ?? ref.current);
+				return rect.top === sl.rect.top && rect.left === sl.rect.left ? sl : {
+					...sl,
+					rect
+				};
+			}));
+		};
+		window.addEventListener("scroll", on, true);
+		return () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", on, true);
+		};
+	}, [hasSlash]);
+	const hasBubble = !!bubble;
+	React.useEffect(() => {
+		if (!hasBubble) return;
+		let raf = 0;
+		const on = () => {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(() => {
+				const s = window.getSelection();
+				setBubble(s && s.rangeCount && !s.isCollapsed && ref.current?.contains(s.anchorNode) ? rangeRect(s.getRangeAt(0), ref.current) : null);
+			});
+		};
+		window.addEventListener("scroll", on, true);
+		window.addEventListener("resize", on);
+		return () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", on, true);
+			window.removeEventListener("resize", on);
+		};
+	}, [hasBubble]);
+	const saveSel = () => {
+		const s = window.getSelection();
+		if (s && s.rangeCount && ref.current?.contains(s.anchorNode)) saved.current = s.getRangeAt(0).cloneRange();
+	};
+	const restoreSel = () => {
+		const el = ref.current;
+		if (!el) return;
+		const r = saved.current;
+		const s = window.getSelection();
+		if (r && el.contains(r.startContainer) && s) {
+			(editingHost(r.startContainer) ?? el).focus({ preventScroll: true });
+			s.removeAllRanges();
+			s.addRange(r);
+		} else {
+			el.focus({ preventScroll: true });
+			placeCaret(el.lastElementChild ?? el);
+		}
+	};
+	const refresh = React.useCallback(() => {
+		const el = ref.current;
+		const s = window.getSelection();
+		if (!el || !s || !s.rangeCount || !el.contains(s.anchorNode)) return;
+		saved.current = s.getRangeAt(0).cloneRange();
+		const anchorEl = s.anchorNode?.nodeType === 1 ? s.anchorNode : s.anchorNode?.parentElement;
+		const inIsland = !!anchorEl?.closest("[data-rt-island]");
+		const tb = topBlock(el, s.anchorNode);
+		const r = s.getRangeAt(0);
+		const hasSel = !s.isCollapsed && !!r.toString().trim();
+		const next = {
+			bold: queryState("bold") && !/^H[1-6]$/.test(tb?.tagName ?? ""),
+			italic: queryState("italic"),
+			underline: queryState("underline"),
+			strike: queryState("strikeThrough"),
+			ul: !inIsland && tb?.tagName === "UL",
+			ol: !inIsland && tb?.tagName === "OL",
+			block: inIsland ? "island" : tb?.tagName.toLowerCase() ?? "p",
+			hasSel,
+			onLink: !!anchorEl?.closest("a")
+		};
+		setFmt((p) => JSON.stringify(p) === JSON.stringify(next) ? p : next);
+		setBubble(hasSel ? rangeRect(r, el) : null);
+		el.querySelectorAll(":scope > [data-hint]").forEach((n) => (n !== tb || n.textContent) && n.removeAttribute("data-hint"));
+		if (tb && tb.tagName === "P" && s.isCollapsed && !tb.textContent && !tb.querySelector("img") && document.activeElement === el && shortcutHintsOn()) tb.setAttribute("data-hint", "Type '/' for commands");
+	}, []);
+	React.useEffect(() => {
+		const on = () => refresh();
+		document.addEventListener("selectionchange", on);
+		return () => document.removeEventListener("selectionchange", on);
+	}, [refresh]);
+	const run = (fn) => {
+		restoreSel();
+		fn();
+		emit();
+		refresh();
+	};
+	const placeGutter = (b) => {
+		const sc = scroller.current;
+		if (!b || !sc) return setGutter(null);
+		const sr = sc.getBoundingClientRect();
+		const br = b.getBoundingClientRect();
+		setGutter((g) => {
+			const top = br.top - sr.top + sc.scrollTop;
+			return g && g.el === b && g.top === top ? g : {
+				el: b,
+				top,
+				height: br.height
+			};
+		});
+	};
+	const currentBlock = () => {
+		const el = ref.current;
+		if (!el) return null;
+		const s = window.getSelection();
+		return topBlock(el, s && s.rangeCount && el.contains(s.anchorNode) ? s.anchorNode : document.activeElement);
+	};
+	const deleteBlock = (b) => {
+		const el = ref.current;
+		if (!el || !el.contains(b)) return;
+		const next = b.nextSibling;
+		b.remove();
+		let filler = null;
+		if (!el.firstElementChild) {
+			filler = document.createElement("p");
+			filler.innerHTML = "<br>";
+			el.append(filler);
+		}
+		setGutter(null);
+		setBlockMenu(false);
+		emit();
+		notify("Block deleted", { action: {
+			label: "Undo",
+			onClick: () => {
+				const root = ref.current;
+				if (!root) return;
+				if (filler?.isConnected && !filler.textContent) filler.remove();
+				if (next && next.parentNode === root) root.insertBefore(b, next);
+				else root.append(b);
+				emit();
+			}
+		} });
+	};
+	const duplicateBlock$1 = (b) => {
+		const c = duplicateBlock(b);
+		emit();
+		if (gutter) placeGutter(c);
+	};
+	const moveBlock$1 = (b, dir) => {
+		if (!moveBlock(b, dir)) return;
+		emit();
+		if (gutter) requestAnimationFrame(() => placeGutter(b));
+	};
+	const turnInto$1 = (b, tag) => {
+		const el = ref.current;
+		if (el && turnInto(el, b, tag)) emit();
+	};
+	const exitIsland = (x) => {
+		const el = ref.current;
+		if (!el || !el.contains(x)) return;
+		const next = ensureLineAfter(x);
+		el.focus({ preventScroll: true });
+		placeCaret(next, false);
+		emit();
+	};
+	const insertBlock = (it) => {
+		const el = ref.current;
+		if (!el || readOnly) return;
+		if (it.kind === "component" && it.component) {
+			const c = it.component;
+			noteRecent(it);
+			oneStep(`Insert ${c.name}`, () => {
+				const isl = insertIsland(el, "component", {
+					...defaultModel("component"),
+					ref: c.id,
+					name: c.name
+				});
+				emit();
+				return isl;
+			});
+			refresh();
+			return;
+		}
+		if (!it.id || !blockAllowed(it.id, allows)) return;
+		noteRecent(it);
+		insertBasic(el, it.id);
+		emit();
+		refresh();
+	};
+	const slashCat = useCatalog(slash?.query ?? "", allows, slash?.folder ?? false, components ?? null);
+	const caretRect = () => {
+		const s = window.getSelection();
+		if (!s || !s.rangeCount) return null;
+		return rangeRect(s.getRangeAt(0), topBlock(ref.current, s.anchorNode) ?? ref.current);
+	};
+	const pickSlash = (it) => {
+		if (it.kind === "folder") return setSlash((s) => s && {
+			...s,
+			folder: true,
+			active: 1
+		});
+		if (it.kind === "back") return setSlash((s) => s && {
+			...s,
+			folder: false,
+			active: 0
+		});
+		const sl = slash;
+		setSlash(null);
+		if (sl) {
+			try {
+				const r = document.createRange();
+				r.setStart(sl.node, sl.offset);
+				r.setEnd(sl.node, Math.min(sl.node.length, sl.offset + 1 + sl.query.length));
+				r.deleteContents();
+				const c = document.createRange();
+				c.setStart(sl.node, Math.min(sl.offset, sl.node.length));
+				c.collapse(true);
+				const s = window.getSelection();
+				s?.removeAllRanges();
+				s?.addRange(c);
+			} catch {}
+			if (it.kind === "component") flushSync(() => emit());
+		}
+		insertBlock(it);
+	};
+	const toggleInlineCode = () => {
+		const el = ref.current;
+		const s = window.getSelection();
+		if (!el || !s || !s.rangeCount || !allows("code")) return;
+		const code = (s.anchorNode?.nodeType === 1 ? s.anchorNode : s.anchorNode?.parentElement)?.closest("code");
+		if (code && el.contains(code) && !code.closest("pre")) {
+			code.replaceWith(...Array.from(code.childNodes));
+			emit();
+			return;
+		}
+		const text = s.toString();
+		if (!text) return void notify("Select some text first", { description: "Or wrap words in backticks to format them as code." });
+		insertHtmlAtCaret(`<code>${esc(text)}</code>`);
+		emit();
+	};
+	const onKeyDown = (e) => {
+		if (slash) {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopPropagation();
+				setSlash(slash.folder ? {
+					...slash,
+					folder: false,
+					active: 0
+				} : null);
+				return;
+			}
+			if (catalogKey(e, slashCat.flat, slash.active, (a) => setSlash((s) => s && {
+				...s,
+				active: a
+			}), pickSlash, false)) {
+				e.preventDefault();
+				return;
+			}
+		}
+		const mod = e.metaKey || e.ctrlKey;
+		const k = e.key.toLowerCase();
+		if (mod && !e.altKey && k === "k") {
+			e.preventDefault();
+			saveSel();
+			openLink();
+			return;
+		}
+		if (mod && !e.altKey && !e.shiftKey && k === "e") {
+			e.preventDefault();
+			toggleInlineCode();
+			return;
+		}
+		if (mod && !e.altKey && !e.shiftKey && (k === "b" && !allows("bold") || k === "i" && !allows("italic") || k === "u" && !allows("underline"))) {
+			e.preventDefault();
+			return;
+		}
+		if (mod && e.altKey && /^Digit[0-6]$/.test(e.code)) {
+			e.preventDefault();
+			const n = Number(e.code.slice(5));
+			const tag = n === 0 ? "p" : `h${n}`;
+			if (tag === "p" || allows(tag)) turnInto$1(currentBlock(), tag);
+			return;
+		}
+		if (e.key === "Enter" && !mod && !e.shiftKey) {
+			if (single) {
+				e.preventDefault();
+				return;
+			}
+			const cb = currentBlock();
+			if (cb && /^(BLOCKQUOTE|H[1-6])$/.test(cb.tagName) && !cb.textContent?.replace(/​/g, "").trim()) {
+				e.preventDefault();
+				turnInto$1(cb, "p");
+				return;
+			}
+			const sel = window.getSelection();
+			if (cb?.tagName === "BLOCKQUOTE" && sel?.isCollapsed && sel.rangeCount && !cb.querySelector("p")) {
+				const rest = document.createRange();
+				rest.selectNodeContents(cb);
+				rest.setStart(sel.anchorNode, sel.anchorOffset);
+				if (!rest.toString().trim()) {
+					e.preventDefault();
+					const p = document.createElement("p");
+					p.innerHTML = "<br>";
+					cb.after(p);
+					placeCaret(p);
+					emit();
+					return;
+				}
+			}
+			const s = window.getSelection();
+			const pre = s?.anchorNode && (s.anchorNode.nodeType === 1 ? s.anchorNode : s.anchorNode.parentElement)?.closest("pre");
+			if (pre && ref.current?.contains(pre)) {
+				e.preventDefault();
+				exec("insertLineBreak");
+				return;
+			}
+		}
+		if (e.key === "ArrowDown" && !mod && !e.shiftKey && !single) {
+			const b = currentBlock();
+			const s = window.getSelection();
+			if (b && !b.nextElementSibling && b.tagName !== "P" && !b.hasAttribute("data-rt-island") && s?.isCollapsed && s.rangeCount) {
+				const rest = document.createRange();
+				rest.selectNodeContents(b);
+				rest.setStart(s.anchorNode, s.anchorOffset);
+				if (!rest.toString().trim()) {
+					e.preventDefault();
+					placeCaret(ensureLineAfter(b), false);
+					emit();
+				}
+			}
+		}
+	};
+	/** Block-level shortcuts; runs for the surface and for text inside rich blocks. */
+	const onWrapKeyDown = (e) => {
+		if (e.defaultPrevented) return;
+		const mod = e.metaKey || e.ctrlKey;
+		if (mod && e.key === "Enter" && !hideFullscreen) {
+			e.preventDefault();
+			setModalOpen(true);
+			return;
+		}
+		if (md || readOnly) return;
+		const t = e.target;
+		if (!ref.current?.contains(t) || t.tagName === "INPUT" || t.tagName === "TEXTAREA") return;
+		if (undoKey(e)) return;
+		if (single) return;
+		if (mod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "d") {
+			e.preventDefault();
+			const b = currentBlock();
+			if (b) duplicateBlock$1(b);
+			return;
+		}
+		if (mod && e.shiftKey && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+			e.preventDefault();
+			const b = currentBlock();
+			if (b) moveBlock$1(b, e.key === "ArrowUp" ? -1 : 1);
+		}
+	};
+	const onInput = (e) => {
+		if (e.target !== ref.current) return;
+		const ne = e.nativeEvent;
+		if (ne.inputType !== "historyUndo" && ne.inputType !== "historyRedo") {
+			hist.current.textAt = Date.now();
+			hist.current.future = [];
+		}
+		if (!single && ne.inputType === "insertText" && (ne.data === " " || ne.data === "-") && liveMarkdown(ref.current, ne.data, allows)) {
+			setSlash(null);
+			emit();
+			return;
+		}
+		if (ne.inputType === "insertText" && ne.data === "`" && allows("code")) liveInlineCode();
+		emit();
+		const s = window.getSelection();
+		if (!s || !s.rangeCount) return setSlash(null);
+		const r = s.getRangeAt(0);
+		if (!slash) {
+			if (single || ne.inputType !== "insertText" || ne.data !== "/" || r.startContainer.nodeType !== 3) return;
+			const blk = closestBlock(ref.current, r.startContainer);
+			if (!blk || textBeforeCaret(blk) !== "/") return;
+			const rect = caretRect();
+			if (rect) setSlash({
+				rect,
+				node: r.startContainer,
+				offset: r.startOffset - 1,
+				query: "",
+				folder: false,
+				active: 0
+			});
+			return;
+		}
+		if (r.startContainer !== slash.node || r.startOffset <= slash.offset || slash.node.data[slash.offset] !== "/") return setSlash(null);
+		const q = slash.node.data.slice(slash.offset + 1, r.startOffset);
+		if (/\s/.test(q) || q.length > 24) return setSlash(null);
+		setSlash({
+			...slash,
+			query: q,
+			active: slash.folder ? 1 : 0
+		});
+	};
+	const openLink = () => {
+		if (!allows("link")) return;
+		restoreSel();
+		const s = window.getSelection();
+		const anchor = (s?.anchorNode?.nodeType === 1 ? s.anchorNode : s?.anchorNode?.parentElement)?.closest("a") ?? null;
+		if (!anchor && (!s || s.isCollapsed || !s.toString().trim())) {
+			notify("Select some text first", { description: hints ? "Then press ⌘K to link it." : "Then link it." });
+			return;
+		}
+		const rect = s && s.rangeCount ? rangeRect(s.getRangeAt(0), ref.current) : ref.current.getBoundingClientRect();
+		setBubble(null);
+		setLink({
+			rect,
+			existing: anchor,
+			initial: anchor ? {
+				href: anchor.getAttribute("href") ?? "",
+				newTab: anchor.getAttribute("target") === "_blank"
+			} : { href: "" }
+		});
+	};
+	const saveLink = (v) => {
+		const l = link;
+		setLink(null);
+		if (!l) return;
+		if (l.existing) {
+			l.existing.setAttribute("href", v.href);
+			if (v.newTab) l.existing.setAttribute("target", "_blank");
+			else l.existing.removeAttribute("target");
+			emit();
+			return;
+		}
+		run(() => {
+			const text = window.getSelection()?.toString() || v.href;
+			insertHtmlAtCaret(`<a href="${esc(v.href).replace(/"/g, "&quot;")}"${v.newTab ? ` target="_blank"` : ""}>${esc(text)}</a>`);
+		});
+	};
+	const aiRewrite = (preset) => {
+		const rewrite = services.aiRewrite;
+		restoreSel();
+		const range = saved.current?.cloneRange();
+		const text = range?.toString() ?? "";
+		if (!rewrite || !range || !text.trim()) return;
+		setBubble(null);
+		Promise.resolve().then(() => rewrite(text, preset, aiAttempt.current++)).then((out) => {
+			const el = ref.current;
+			if (!el || !el.contains(range.startContainer) || range.toString() !== text) {
+				notify("The text changed before the rewrite came back", { description: "Nothing was replaced. Select it again to retry." });
+				return;
+			}
+			el.focus({ preventScroll: true });
+			const s = window.getSelection();
+			s?.removeAllRanges();
+			s?.addRange(range);
+			insertTextAtCaret(out);
+			emit();
+			notify("Rewritten with AI", { description: hints ? "Press ⌘Z to undo" : void 0 });
+		}, (err) => notify("Could not rewrite the selection", { description: err instanceof Error ? err.message : String(err) }));
+	};
+	const onGripDown = (e) => {
+		if (!gutter) return;
+		startDrag(gutter.el, e, () => setBlockMenu(true));
+	};
+	/** Drag a top-level block (the gutter grip) to a new position; a tap calls `onTap`. */
+	const startDrag = (from, e, onTap) => {
+		if (readOnly || e.button !== 0) return;
+		e.preventDefault();
+		const start = e.clientY;
+		let moved = false;
+		const kids = () => Array.from(ref.current?.children ?? []);
+		const move = (ev) => {
+			if (!moved && Math.abs(ev.clientY - start) < 4) return;
+			moved = true;
+			const sc = scroller.current;
+			const sr = sc.getBoundingClientRect();
+			let target = null;
+			let line = 0;
+			for (const k of kids()) {
+				const r = k.getBoundingClientRect();
+				if (ev.clientY < r.top + r.height / 2) {
+					target = k;
+					line = r.top - sr.top + sc.scrollTop - 4;
+					break;
+				}
+				line = r.bottom - sr.top + sc.scrollTop + 4;
+			}
+			setDrag({
+				from,
+				line,
+				target
+			});
+		};
+		const up = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			if (!moved) {
+				onTap?.();
+				return;
+			}
+			setDrag((d) => {
+				if (d && d.target !== d.from) {
+					if (d.target) d.target.before(d.from);
+					else ref.current?.append(d.from);
+					setTimeout(emit, 0);
+				}
+				return null;
+			});
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+	};
+	const conform = (html) => {
+		const r = restrictHtml(html, allows);
+		if (r.dropped.length) notify(`This field keeps no ${r.dropped.join(" or ")}`, { description: "They were left out; the text around them was kept." });
+		return r.html;
+	};
+	const toggleMarkdown = () => {
+		if (!md) {
+			const text = htmlToMarkdown(ref.current ? serialize(ref.current) : value);
+			setMd({
+				text,
+				original: text
+			});
+			setSlash(null);
+			setGutter(null);
+			setBubble(null);
+			setLink(null);
+			return;
+		}
+		if (md.text === md.original) {
+			setMd(null);
+			setMdConfirm(false);
+			return;
+		}
+		setMdConfirm(true);
+	};
+	const convertMarkdown = () => {
+		if (!md) return;
+		let html;
+		try {
+			html = conform(markdownToHtml(md.text));
+		} catch (err) {
+			notify("Could not convert this Markdown", { description: `${err instanceof Error ? err.message : String(err)}. Your rich text is unchanged.` });
+			return;
+		}
+		pending.current = html;
+		known.current = html;
+		onChangeRef.current(html);
+		setMd(null);
+		setMdConfirm(false);
+	};
+	/** A host step's undo or redo; its value then loads even here, with the caret in the editor. */
+	const runHost = (run) => {
+		forceLoad.current = true;
+		const r = run();
+		if (r !== true) forceLoad.current = false;
+		return r;
+	};
+	/**
+	* This body's host step that is the host's next undo (or redo) NOW. The host's toolbar moves these steps too: after
+	* its Undo then Redo, the step is the latest change again, so ⌘Z here undoes it. Any later change in this body is a
+	* host step of its own (the body's value is the host's), so a host step that is next is the latest change here.
+	*/
+	const hostNext = (way) => {
+		const hs = hist.current.hosts;
+		for (let i = hs.length - 1; i >= 0; i--) if (hs[i].step.next() === way) return hs[i];
+		return null;
+	};
+	const islandUndo = () => {
+		const host = hostNext("undo");
+		if (host) {
+			const r = runHost(host.step.undo);
+			if (r !== true) notify("Nothing was undone", { description: r });
+			return true;
+		}
+		const h = hist.current;
+		while (h.past.length && !h.past[h.past.length - 1].el.isConnected) h.past.pop();
+		const step = h.past[h.past.length - 1];
+		if (!step || step.at < h.textAt) return false;
+		if (!step.el.__rtSet) return false;
+		h.past.pop();
+		h.future.push({
+			...step,
+			before: step.el.__rt,
+			at: Date.now()
+		});
+		step.el.__rtSet(step.before);
+		return true;
+	};
+	const islandRedo = () => {
+		const host = hostNext("redo");
+		if (host) {
+			const r = runHost(host.step.redo);
+			if (r !== true) notify("Nothing was redone", { description: r });
+			return true;
+		}
+		const h = hist.current;
+		const step = h.future.pop();
+		if (!step || !step.el.isConnected || !step.el.__rtSet) return false;
+		h.past.push({
+			...step,
+			before: step.el.__rt,
+			at: Date.now()
+		});
+		step.el.__rtSet(step.before);
+		return true;
+	};
+	/**
+	* One action as ONE undo step (a separate copy, "use shared version again", a component inserted): in the host's
+	* history when it keeps one (KitServices.historyStep: its toolbar Undo, an Undo toast and ⌘Z here are the same
+	* undo), else in this editor's own (`before`: the model the island had; an insert has none, and stays as undoable
+	* as any block inserted here). `write` makes the change and answers the island it changed. Answers its undo.
+	*/
+	const oneStep = (label, write, before) => {
+		const h = hist.current;
+		const made = { el: null };
+		const historyStep = services.historyStep;
+		const step = historyStep ? historyStep(() => {
+			made.el = write();
+		}) : (made.el = write(), null);
+		const el = made.el;
+		if (step) {
+			h.hosts = [...h.hosts, {
+				label,
+				step
+			}].slice(-100);
+			return () => runHost(step.undo);
+		}
+		if (!el || !before) return () => "This change has no undo step here.";
+		const s = {
+			el,
+			before,
+			label,
+			at: Date.now()
+		};
+		h.past = [...h.past, s].slice(-100);
+		h.future = [];
+		return () => {
+			if (!h.past.includes(s)) return "It was undone already.";
+			if (h.past[h.past.length - 1] !== s || s.at < h.textAt) return "Changes made after it come first. Press ⌘Z to undo them.";
+			return islandUndo() ? true : "The block was removed, so there is nothing to undo.";
+		};
+	};
+	const record = (el, before, label, coalesce) => {
+		const h = hist.current;
+		const now = Date.now();
+		const top = h.past[h.past.length - 1];
+		if (coalesce && top && top.el === el && top.label === label && now - top.at < 500 && top.at > h.textAt) top.at = now;
+		else h.past = [...h.past, {
+			el,
+			before,
+			label,
+			at: now
+		}].slice(-100);
+		h.future = [];
+	};
+	const undoKey = (e) => {
+		if (!(e.metaKey || e.ctrlKey) || e.altKey || e.key.toLowerCase() !== "z") return false;
+		if (e.shiftKey) {
+			if (!islandRedo()) return false;
+			e.preventDefault();
+			return true;
+		}
+		if (islandUndo()) {
+			e.preventDefault();
+			return true;
+		}
+		if (!hist.current.past.length || !ref.current) return false;
+		e.preventDefault();
+		const before = ref.current.innerHTML;
+		exec("undo");
+		if (ref.current.innerHTML === before) {
+			hist.current.textAt = 0;
+			islandUndo();
+		}
+		return true;
+	};
+	const api = React.useRef({
+		emit,
+		deleteBlock,
+		exitIsland,
+		record,
+		oneStep,
+		notify,
+		duplicateBlock: duplicateBlock$1,
+		moveBlock: moveBlock$1,
+		islandUndo,
+		islandRedo
+	});
+	api.current = {
+		emit,
+		deleteBlock,
+		exitIsland,
+		record,
+		oneStep,
+		notify,
+		duplicateBlock: duplicateBlock$1,
+		moveBlock: moveBlock$1,
+		islandUndo,
+		islandRedo
+	};
+	const islandCtx = React.useMemo(() => ({
+		readOnly,
+		dense,
+		emit: () => api.current.emit(),
+		remove: (x) => api.current.deleteBlock(x),
+		exit: (x) => api.current.exitIsland(x),
+		record: (x, before, label, coalesce) => api.current.record(x, before, label, coalesce),
+		step: (label, write, before) => api.current.oneStep(label, write, before),
+		notify: (message, description) => api.current.notify(message, { description }),
+		duplicate: (x) => api.current.duplicateBlock(x),
+		move: (x, dir) => api.current.moveBlock(x, dir),
+		undo: () => api.current.islandUndo(),
+		redo: () => api.current.islandRedo()
+	}), [readOnly, dense]);
+	const commentSel = onComment ? () => {
+		restoreSel();
+		const q = window.getSelection()?.toString().trim();
+		if (q) onComment(q);
+	} : void 0;
+	const onMark = (cmd) => allows(MARK_FEATURE[cmd]) && run(() => exec(cmd));
+	const onStyle = (tag) => {
+		restoreSel();
+		turnInto$1(currentBlock(), tag);
+		refresh();
+	};
+	const { flipUp, maxHeight: slashMaxH } = slash ? slashPlacement(slash.rect, window.innerHeight) : {
+		flipUp: false,
+		maxHeight: SLASH_MENU_H
+	};
+	const gBlock = gutter?.el;
+	const gIsText = !!gBlock && !gBlock.hasAttribute("data-rt-island") && gBlock.tagName !== "HR";
+	const btn = dense ? "size-5 [&_svg]:size-3.5" : "size-[22px] [&_svg]:size-3.5";
+	const gutterMode = readOnly || dense || single ? "none" : gutterRoom ? "outside" : "inset";
+	const showGutter = gutterMode !== "none";
+	const minH = expanded ? "min-h-[60vh]" : single ? "min-h-9" : dense ? "min-h-[120px]" : "min-h-[190px]";
+	const turnStyles = stylesFor(allows).filter((s) => [
+		"p",
+		"h1",
+		"h2",
+		"h3",
+		"blockquote"
+	].includes(s.tag));
+	return /* @__PURE__ */ jsx(CatalogComponentsProvider, {
+		value: components ?? null,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: wrap,
+			"data-rt-editor": "",
+			className: cn("relative rounded-kit-lg border transition-colors duration-150 [--rt-toolbar-h:2rem] pointer-coarse:[--rt-toolbar-h:2.75rem]", expanded ? "bg-[var(--kit-surface-raised)]" : "bg-kit-surface", invalid ? "border-[var(--kit-field-invalid)]" : toolbarOpen ? "border-kit-line-strong" : "border-kit-line"),
+			style: { "--rt-sticky-top": toolbarOpen && !dense ? `calc(${stickyTop}px + var(--rt-toolbar-h))` : "var(--kit-sticky-top, 0px)" },
+			onMouseLeave: () => !blockMenu && !gutterInsert && !drag && setGutter(null),
+			onKeyDown: onWrapKeyDown,
+			onFocus: () => {
+				window.clearTimeout(blurTimer.current);
+				setFocused(true);
+			},
+			onBlur: () => {
+				window.clearTimeout(blurTimer.current);
+				blurTimer.current = window.setTimeout(() => {
+					const a = document.activeElement;
+					if (wrap.current?.contains(a) || a?.closest("[role=menu],[role=dialog],[role=listbox],[data-floating-layer]")) return;
+					setFocused(false);
+					setBubble(null);
+					ref.current?.querySelectorAll("[data-hint]").forEach((n) => n.removeAttribute("data-hint"));
+					if (valueRef.current !== known.current && !md) load(valueRef.current);
+				}, 400);
+			},
+			children: [
+				readOnly ? null : /* @__PURE__ */ jsx(FormatToolbar, {
+					open: toolbarOpen,
+					sticky: !dense,
+					stickyTop,
+					width,
+					dense,
+					fmt,
+					md: !!md,
+					allows,
+					hideFullscreen,
+					insertOpen,
+					setInsertOpen: (o) => {
+						if (o) inserted.current = false;
+						setInsertOpen(o);
+					},
+					onMenuOpen: (name, o) => setMenus((m) => ({
+						...m,
+						[name]: o
+					})),
+					onStyle,
+					onMark,
+					onList: (kind) => allows(kind) && run(() => {
+						const b = currentBlock();
+						if (b && /^(H[1-6]|BLOCKQUOTE)$/.test(b.tagName)) turnInto$1(b, "p");
+						exec(kind === "ul" ? "insertUnorderedList" : "insertOrderedList");
+						ref.current?.querySelectorAll(":is(p,h1,h2,h3,h4,h5,h6,blockquote) > :is(ul,ol)").forEach((list) => {
+							const host = list.parentElement;
+							host.replaceWith(...Array.from(host.childNodes).filter((n) => n.nodeType === 1 || n.textContent?.trim()));
+						});
+					}),
+					onLink: openLink,
+					onClear: () => run(() => {
+						exec("removeFormat");
+						exec("unlink");
+					}),
+					onComment: commentSel,
+					onInlineCode: () => {
+						restoreSel();
+						toggleInlineCode();
+					},
+					onCodeBlock: () => {
+						restoreSel();
+						if (allows("pre")) turnInto$1(currentBlock(), "pre");
+					},
+					onInsert: (it) => {
+						inserted.current = true;
+						restoreSel();
+						insertBlock(it);
+						setInsertOpen(false);
+					},
+					keepFocusOnInsertClose: () => inserted.current,
+					onFullscreen: () => setModalOpen(true),
+					onMarkdown: toggleMarkdown,
+					saveSel
+				}),
+				md ? /* @__PURE__ */ jsxs("div", {
+					className: "px-3 pb-2.5 pt-2.5",
+					children: [
+						/* @__PURE__ */ jsx(Textarea, {
+							"aria-label": "Field content as Markdown",
+							spellCheck: false,
+							value: md.text,
+							readOnly,
+							onChange: (e) => {
+								setMd({
+									...md,
+									text: e.target.value
+								});
+								setMdConfirm(false);
+							},
+							className: cn("font-kit-mono text-kit-xs leading-5", expanded ? "min-h-[60vh]" : dense ? "min-h-[120px]" : "min-h-[190px]"),
+							style: scrollable ? { maxHeight } : void 0
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "mt-1.5 text-kit-2xs text-kit-fg-3",
+							children: "Markdown. Switching back converts it to blocks."
+						}),
+						/* @__PURE__ */ jsx(AnimatePresence, {
+							initial: false,
+							children: mdConfirm ? /* @__PURE__ */ jsxs(motion.div, {
+								initial: {
+									opacity: 0,
+									y: 4
+								},
+								animate: {
+									opacity: 1,
+									y: 0
+								},
+								exit: {
+									opacity: 0,
+									y: 4
+								},
+								transition: { duration: .15 },
+								role: "alertdialog",
+								"aria-label": "Convert edited Markdown?",
+								className: "mt-2 flex flex-wrap items-center gap-2 rounded-kit-lg border border-kit-line bg-kit-subtle px-3 py-2",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "flex-1 text-kit-sm font-medium text-kit-fg",
+										children: "Convert edited Markdown?"
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										size: "xs",
+										variant: "ghost",
+										onClick: () => setMdConfirm(false),
+										children: "Keep editing Markdown"
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										size: "xs",
+										variant: "primary",
+										autoFocus: true,
+										onClick: convertMarkdown,
+										children: "Convert to rich text"
+									})
+								]
+							}, "confirm") : null
+						})
+					]
+				}) : /* @__PURE__ */ jsxs("div", {
+					ref: scroller,
+					className: cn("relative", scrollable && "overflow-y-auto"),
+					style: scrollable ? { maxHeight } : void 0,
+					onMouseMove: (e) => {
+						if (drag || blockMenu || gutterInsert || !showGutter) return;
+						const t = e.target;
+						if (t.closest("[data-rt-gutter]")) return;
+						placeGutter(topBlock(ref.current, t));
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							ref,
+							id: inModal ? void 0 : id,
+							role: "textbox",
+							"aria-multiline": !single,
+							"aria-labelledby": !inModal && id ? `${id}-label` : void 0,
+							"aria-label": inModal || !id ? expandCrumbs?.[expandCrumbs.length - 1] ?? "Rich text" : void 0,
+							"aria-placeholder": ph,
+							"aria-readonly": readOnly || void 0,
+							"aria-invalid": invalid || void 0,
+							contentEditable: !readOnly,
+							suppressContentEditableWarning: true,
+							spellCheck: true,
+							tabIndex: readOnly ? 0 : void 0,
+							onInput,
+							onKeyDown,
+							onKeyUp: refresh,
+							onMouseUp: refresh,
+							onPaste: (e) => {
+								if (readOnly) return;
+								if (Array.from(e.clipboardData.files).filter((f) => f.type.startsWith("image/")).length) {
+									e.preventDefault();
+									notify(allows("image") ? "Add images from the media library" : "This field keeps no images", { description: allows("image") ? "A pasted file has no address the page can show it from. Use Insert › Image." : void 0 });
+									return;
+								}
+								const text = e.clipboardData.getData("text/plain");
+								e.preventDefault();
+								if (!text) return;
+								if (single || !/\n/.test(text.trim()) && !looksLikeMarkdown(text)) {
+									insertTextAtCaret(single ? text.replace(/\s*\n\s*/g, " ") : text);
+									emit();
+									return;
+								}
+								let html;
+								try {
+									html = markdownToHtml(text);
+								} catch {
+									html = text.split(/\n{2,}/).map((p) => `<p>${esc(p.trim()).replace(/\n/g, "<br>")}</p>`).join("");
+								}
+								insertHtmlAtCaret(conform(html));
+								if (ref.current) hydrate(ref.current);
+								emit();
+							},
+							onDragOver: (e) => {
+								if (e.dataTransfer.types.includes("application/x-bcms-asset") && allows("image")) e.preventDefault();
+							},
+							onDrop: (e) => {
+								const asset = e.dataTransfer.getData("application/x-bcms-asset");
+								if (!asset || readOnly || !allows("image")) return;
+								e.preventDefault();
+								try {
+									const a = JSON.parse(asset);
+									const b = topBlock(ref.current, e.target);
+									const isl = createIsland("image", defaultModel("image", {
+										src: a.url,
+										alt: a.alt ?? ""
+									}));
+									if (b) b.after(isl);
+									else ref.current?.append(isl);
+									ensureLineAfter(isl);
+									emit();
+								} catch {
+									notify("That drop is not an image from the media library");
+								}
+							},
+							className: cn(RT_PROSE, dense && RT_PANEL, "peer relative outline-none [&_*]:outline-none", "[&>p[data-hint]]:before:pointer-events-none [&>p[data-hint]]:before:float-left [&>p[data-hint]]:before:h-0 [&>p[data-hint]]:before:text-kit-fg-4 [&>p[data-hint]]:before:content-[attr(data-hint)]", dense ? "px-2.5 py-2" : "px-4 py-3.5", minH)
+						}),
+						empty ? /* @__PURE__ */ jsx("div", {
+							"aria-hidden": true,
+							className: cn("pointer-events-none absolute text-kit-fg-4 peer-focus:hidden", dense ? "left-2.5 top-2 text-kit-sm" : "left-4 top-3.5 text-kit-base"),
+							children: ph
+						}) : null,
+						gutter && showGutter ? /* @__PURE__ */ jsxs("div", {
+							"data-rt-gutter": "",
+							className: cn("absolute z-[3] flex items-start", gutterMode === "outside" ? "-left-12 pr-1" : "left-0"),
+							style: { top: gutter.top + Math.max(-2, Math.min(4, gutter.height / 2 - 12)) },
+							children: [gutterMode === "outside" ? /* @__PURE__ */ jsxs(Popover, {
+								open: gutterInsert,
+								onOpenChange: (o) => {
+									if (o) {
+										gutterTarget.current = gutter.el;
+										inserted.current = false;
+									}
+									setGutterInsert(o);
+								},
+								children: [/* @__PURE__ */ jsx(Tooltip, {
+									content: "Add a block below",
+									disabled: gutterInsert,
+									children: /* @__PURE__ */ jsx(PopoverTrigger, {
+										"aria-label": "Add a block below",
+										className: cn("flex items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg", btn),
+										children: /* @__PURE__ */ jsx(IconPlus, {
+											stroke: 1.5,
+											"aria-hidden": true
+										})
+									})
+								}), gutterInsert ? /* @__PURE__ */ jsx(InsertMenuContent, {
+									side: "bottom",
+									align: "start",
+									allows,
+									keepFocusOnClose: () => inserted.current,
+									onInsert: (it) => {
+										const b = gutterTarget.current;
+										const el = ref.current;
+										inserted.current = true;
+										setGutterInsert(false);
+										if (!b || !el || !el.contains(b)) return;
+										const p = document.createElement("p");
+										p.innerHTML = "<br>";
+										b.after(p);
+										el.focus({ preventScroll: true });
+										placeCaret(p);
+										insertBlock(it);
+									}
+								}) : null]
+							}) : null, /* @__PURE__ */ jsxs(Menu, {
+								open: blockMenu,
+								onOpenChange: setBlockMenu,
+								children: [/* @__PURE__ */ jsx(Tooltip, {
+									content: "Drag to move, click for options",
+									disabled: blockMenu || !!drag,
+									children: /* @__PURE__ */ jsx(MenuTrigger, {
+										"aria-label": "Block options",
+										onPointerDown: onGripDown,
+										onKeyDown: (e) => {
+											if (e.key === "Enter" || e.key === " ") {
+												e.preventDefault();
+												setBlockMenu(true);
+											}
+										},
+										className: cn("flex cursor-grab items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg active:cursor-grabbing", gutterMode === "inset" ? "h-[22px] w-4 rounded-kit-sm [&_svg]:size-3.5" : btn, (blockMenu || drag) && "bg-kit-hover text-kit-fg"),
+										children: /* @__PURE__ */ jsx(IconGripVertical, {
+											stroke: 1.5,
+											"aria-hidden": true
+										})
+									})
+								}), /* @__PURE__ */ jsxs(MenuContent, {
+									className: "w-56",
+									align: "start",
+									finalFocus: false,
+									children: [
+										turnStyles.length > 1 ? /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsx(MenuSubTrigger, {
+											icon: /* @__PURE__ */ jsx(IconTransform, { stroke: 1.5 }),
+											disabled: !gIsText,
+											children: "Turn into"
+										}), /* @__PURE__ */ jsx(MenuSubContent, {
+											className: "w-48",
+											children: turnStyles.map((t) => /* @__PURE__ */ jsx(MenuItem, {
+												icon: t.icon,
+												onClick: () => turnInto$1(gBlock ?? null, t.tag),
+												children: t.label
+											}, t.tag))
+										})] }) : null,
+										/* @__PURE__ */ jsx(MenuItem, {
+											icon: /* @__PURE__ */ jsx(IconCopy, { stroke: 1.5 }),
+											shortcut: "⌘D",
+											onClick: () => gBlock && duplicateBlock$1(gBlock),
+											children: "Duplicate"
+										}),
+										/* @__PURE__ */ jsx(MenuItem, {
+											icon: /* @__PURE__ */ jsx(IconArrowBarToUp, { stroke: 1.5 }),
+											shortcut: "⌘⇧↑",
+											disabled: !gBlock?.previousElementSibling,
+											onClick: () => gBlock && moveBlock$1(gBlock, -1),
+											children: "Move up"
+										}),
+										/* @__PURE__ */ jsx(MenuItem, {
+											icon: /* @__PURE__ */ jsx(IconArrowBarToDown, { stroke: 1.5 }),
+											shortcut: "⌘⇧↓",
+											disabled: !gBlock?.nextElementSibling,
+											onClick: () => gBlock && moveBlock$1(gBlock, 1),
+											children: "Move down"
+										}),
+										/* @__PURE__ */ jsx(MenuSeparator, {}),
+										/* @__PURE__ */ jsx(MenuItem, {
+											danger: true,
+											icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+											onClick: () => gBlock && deleteBlock(gBlock),
+											children: "Delete"
+										})
+									]
+								})]
+							})]
+						}) : null,
+						drag?.line != null ? /* @__PURE__ */ jsx("div", {
+							className: "pointer-events-none absolute inset-x-3 z-[6] h-0.5 rounded-full bg-kit-info",
+							style: { top: drag.line }
+						}) : null,
+						islands.map(({ id: key, el }) => createPortal(/* @__PURE__ */ jsx(Island, {
+							el,
+							ctx: islandCtx
+						}), el, key))
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-7 items-center justify-end gap-3 rounded-b-kit-lg border-t border-kit-line-subtle px-3 text-kit-2xs text-kit-fg-3",
+					children: [notice ? /* @__PURE__ */ jsxs("span", {
+						role: "status",
+						"aria-live": "polite",
+						className: "mr-auto min-w-0 truncate text-kit-fg-2",
+						children: [
+							notice.message,
+							notice.description ? ` ${notice.description}` : "",
+							notice.action ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ml-1.5 font-medium text-kit-fg underline underline-offset-2",
+								onClick: () => {
+									notice.action.onClick();
+									setNotice(null);
+								},
+								children: notice.action.label
+							}) : null
+						]
+					}) : null, /* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 tabular-nums",
+						children: [
+							words.toLocaleString("en-US"),
+							" ",
+							words === 1 ? "word" : "words",
+							comps ? ` · ${comps} ${comps === 1 ? "component" : "components"}` : "",
+							" · ",
+							Math.max(1, Math.round(words / 220)),
+							" min read"
+						]
+					})]
+				}),
+				bubble && !readOnly && !slash && !link && !md && !menus.style && !menus.more && !insertOpen ? /* @__PURE__ */ jsx(SelectionBubble, {
+					rect: bubble,
+					avoid: toolbarOpen ? wrap.current?.querySelector("[role=\"toolbar\"][aria-label=\"Text formatting\"]")?.getBoundingClientRect() : null,
+					fmt,
+					allows,
+					saveSel,
+					onAi: canAI ? aiRewrite : void 0,
+					onStyle,
+					onMark,
+					onInlineCode: () => {
+						restoreSel();
+						toggleInlineCode();
+					},
+					onLink: openLink,
+					onComment: commentSel
+				}) : null,
+				slash && !md ? createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					"data-floating-layer": "",
+					className: "pointer-events-auto fixed inset-0 z-[84]",
+					onMouseDown: () => setSlash(null)
+				}), /* @__PURE__ */ jsx(motion.div, {
+					initial: {
+						opacity: 0,
+						y: flipUp ? -4 : 4
+					},
+					animate: {
+						opacity: 1,
+						y: 0
+					},
+					transition: { duration: .14 },
+					style: {
+						left: Math.min(window.innerWidth - 330, Math.max(8, slash.rect.left)),
+						...flipUp ? { bottom: window.innerHeight - slash.rect.top + 6 } : { top: slash.rect.bottom + 6 }
+					},
+					"data-floating-layer": "",
+					className: "pointer-events-auto fixed z-[85]",
+					children: /* @__PURE__ */ jsx(SlashMenuPanel, {
+						query: slash.query,
+						folder: slash.folder,
+						active: slash.active,
+						allows,
+						setActive: (a) => setSlash((s) => s && {
+							...s,
+							active: a
+						}),
+						onPick: pickSlash,
+						maxHeight: slashMaxH
+					})
+				})] }), document.body) : null,
+				/* @__PURE__ */ jsxs(Popover, {
+					open: !!link,
+					onOpenChange: (o) => !o && setLink(null),
+					children: [/* @__PURE__ */ jsx(PopoverAnchor, { render: /* @__PURE__ */ jsx("span", {
+						className: "pointer-events-none fixed",
+						style: link ? {
+							top: link.rect.bottom,
+							left: link.rect.left,
+							width: Math.max(1, link.rect.width),
+							height: 1
+						} : {
+							top: 0,
+							left: 0
+						}
+					}) }), /* @__PURE__ */ jsx(PopoverContent, {
+						className: "w-[340px] rounded-kit-lg p-3",
+						finalFocus: false,
+						children: link ? /* @__PURE__ */ jsx(LinkForm, {
+							initial: link.initial,
+							allowNewTab,
+							onSave: saveLink,
+							onCancel: () => setLink(null),
+							onDetach: link.existing ? () => {
+								const a = link.existing;
+								a.replaceWith(...Array.from(a.childNodes));
+								setLink(null);
+								emit();
+							} : void 0
+						}) : null
+					})]
+				}),
+				!hideFullscreen ? /* @__PURE__ */ jsx(ExpandedEditorModal, {
+					open: modalOpen,
+					onOpenChange: setModalOpen,
+					crumbs: expandCrumbs?.length ? expandCrumbs : ["Text"],
+					returnFocus: () => ref.current,
+					meta: bodyCountLabel(value),
+					children: modalOpen ? /* @__PURE__ */ jsx(RichTextEditor, {
+						value,
+						onChange,
+						readOnly,
+						placeholder,
+						docKey: `${docKey}:expanded`,
+						features,
+						single,
+						allowNewTab,
+						expandCrumbs,
+						variant: "document",
+						hideFullscreen: true,
+						inModal: true,
+						autoFocus: true,
+						onComment,
+						components
+					}) : null
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { RichTextEditor };
+
+//# sourceMappingURL=editor.js.map