@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/controls/rich-text/editor.js

@@ -0,0 +1,1630 @@
+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 { COMPONENT_INSERT_TOAST } from "../component-services.js";
+import { eventKey } from "../../lib/key-event.js";
+import { closestBlock, createIsland, defaultModel, editingHost, esc, hydrate, isEmptyHtml, placeCaret, rangeRect, rid, sanitize, serialize, textBeforeCaret, topBlock } from "./dom.js";
+import { LinkForm } from "./link-form.js";
+import { CatalogComponentsProvider, InsertMenuContent, SlashMenuPanel, blockAllowed, catalogKey, noteRecent, useCatalog } from "./catalog.js";
+import { openComponentPanel } from "./component-panel.js";
+import { Island } from "./blocks.js";
+import { ALL_FEATURES } from "./codec.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowBarToDown, IconArrowBarToUp, IconCopy, IconGripVertical, IconPlus, IconTransform, IconTrash } from "@tabler/icons-react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { createPortal, flushSync } from "react-dom";
+//#region src/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 [&_span[class]:not([data-rt-isolate]_*)]:!text-inherit [&_span[class]:not([data-rt-isolate]_*)]:![-webkit-text-fill-color:currentColor] [&_span[class]:not([data-rt-isolate]_*)]:!bg-none [&_span[class]:not([data-rt-isolate]_*)]:!opacity-100 [&_span[class]:not([data-rt-isolate]_*)]:!visible [&_h1:not([data-rt-isolate]_*)]:text-[28px] [&_h1:not([data-rt-isolate]_*)]:font-semibold [&_h1:not([data-rt-isolate]_*)]:leading-9 [&_h1:not([data-rt-isolate]_*)]:tracking-[-0.01em] [&_h2:not([data-rt-isolate]_*)]:text-[22px] [&_h2:not([data-rt-isolate]_*)]:font-semibold [&_h2:not([data-rt-isolate]_*)]:leading-8 [&_h2:not([data-rt-isolate]_*)]:tracking-[-0.01em] [&_h3:not([data-rt-isolate]_*)]:text-kit-lg [&_h3:not([data-rt-isolate]_*)]:font-semibold [&_h4:not([data-rt-isolate]_*)]:text-kit-md [&_h4:not([data-rt-isolate]_*)]:font-semibold [&_h5:not([data-rt-isolate]_*)]:text-kit-base [&_h5:not([data-rt-isolate]_*)]:font-semibold [&_h6:not([data-rt-isolate]_*)]:text-kit-sm [&_h6:not([data-rt-isolate]_*)]:font-semibold [&_h6:not([data-rt-isolate]_*)]:uppercase [&_h6:not([data-rt-isolate]_*)]:tracking-wide [&_h6:not([data-rt-isolate]_*)]: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 [&_ul[data-task]:not([data-rt-isolate]_*)]:list-none [&_ul[data-task]:not([data-rt-isolate]_*)]:pl-0 [&_ul[data-task]>li:not([data-rt-isolate]_*)]:relative [&_ul[data-task]>li:not([data-rt-isolate]_*)]:pl-7 [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:absolute [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:left-0 [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:top-[0.2em] [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:flex [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:size-4 [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:items-center [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:justify-center [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:rounded-kit-md [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:border [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:border-kit-line-strong [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:bg-kit-surface [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:text-[11px] [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:font-semibold [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:leading-none [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:content-[''] [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:text-kit-fg-3 [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:line-through [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:before:border-kit-inverse [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:before:bg-kit-inverse [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:before:text-kit-fg-inverse [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:before:content-['✓'] [&_blockquote:not([data-rt-isolate]_*)]:border-l-2 [&_blockquote:not([data-rt-isolate]_*)]:border-kit-line-strong [&_blockquote:not([data-rt-isolate]_*)]:pl-4 [&_blockquote:not([data-rt-isolate]_*)]:text-kit-fg-2 [&_blockquote:not([data-rt-isolate]_*)]:italic [&_a:not([data-rt-isolate]_*)]:text-kit-accent-fg [&_a:not([data-rt-isolate]_*)]:underline [&_a:not([data-rt-isolate]_*)]:decoration-kit-accent-line [&_a:not([data-rt-isolate]_*)]:underline-offset-2 [&_a[data-button]:not([data-rt-isolate]_*)]:inline-flex [&_a[data-button]:not([data-rt-isolate]_*)]:h-9 [&_a[data-button]:not([data-rt-isolate]_*)]:items-center [&_a[data-button]:not([data-rt-isolate]_*)]:rounded-kit-md [&_a[data-button]:not([data-rt-isolate]_*)]:bg-kit-inverse [&_a[data-button]:not([data-rt-isolate]_*)]:px-3.5 [&_a[data-button]:not([data-rt-isolate]_*)]:text-kit-sm [&_a[data-button]:not([data-rt-isolate]_*)]:font-medium [&_a[data-button]:not([data-rt-isolate]_*)]:text-kit-fg-inverse [&_a[data-button]:not([data-rt-isolate]_*)]:no-underline [&_abbr:not([data-rt-isolate]_*)]:cursor-help [&_abbr:not([data-rt-isolate]_*)]:underline [&_abbr:not([data-rt-isolate]_*)]:decoration-dotted [&_abbr:not([data-rt-isolate]_*)]:underline-offset-2 [&_sup:not([data-rt-isolate]_*)]:text-[0.7em] [&_sup:not([data-rt-isolate]_*)]:leading-none [&_code:not([data-rt-isolate]_*)]:rounded-kit-md [&_code:not([data-rt-isolate]_*)]:bg-kit-muted [&_code:not([data-rt-isolate]_*)]:px-1 [&_code:not([data-rt-isolate]_*)]:py-px [&_code:not([data-rt-isolate]_*)]:font-kit-mono [&_code:not([data-rt-isolate]_*)]:text-[0.9em] [&_pre:not([data-rt-isolate]_*)]:overflow-x-auto [&_pre:not([data-rt-isolate]_*)]:whitespace-pre-wrap [&_pre:not([data-rt-isolate]_*)]:rounded-kit-lg [&_pre:not([data-rt-isolate]_*)]:bg-kit-code [&_pre:not([data-rt-isolate]_*)]:text-kit-code-fg [&_pre:not([data-rt-isolate]_*)]:p-3 [&_pre:not([data-rt-isolate]_*)]:font-kit-mono [&_pre:not([data-rt-isolate]_*)]:text-kit-sm [&_pre:not([data-rt-isolate]_*)]:border [&_pre:not([data-rt-isolate]_*)]:border-kit-line [&_pre_code:not([data-rt-isolate]_*)]:rounded-none [&_pre_code:not([data-rt-isolate]_*)]:bg-transparent [&_pre_code:not([data-rt-isolate]_*)]:p-0 [&_pre_code:not([data-rt-isolate]_*)]:text-[1em] [&_hr:not([data-rt-isolate]_*)]:my-6 [&_hr:not([data-rt-isolate]_*)]:border-kit-line [&_figure:not([data-rt-isolate]_*)]:my-4 [&_img:not([data-rt-isolate]_*)]:rounded-kit-lg [&_img:not([data-rt-isolate]_*)]:border [&_img:not([data-rt-isolate]_*)]:border-kit-line [&_figcaption:not([data-rt-isolate]_*)]:mt-1.5 [&_figcaption:not([data-rt-isolate]_*)]:text-center [&_figcaption:not([data-rt-isolate]_*)]:text-kit-sm [&_figcaption:not([data-rt-isolate]_*)]:text-kit-fg-3 [&_figure_img:not([data-rt-isolate]_*)]:block [&_figure[data-size=s]_img:not([data-rt-isolate]_*)]:w-1/3 [&_figure[data-size=m]_img:not([data-rt-isolate]_*)]:w-1/2 [&_figure[data-size=l]_img:not([data-rt-isolate]_*)]:w-3/4 [&_figure[data-align=center]_img:not([data-rt-isolate]_*)]:mx-auto [&_figure[data-align=right]_img:not([data-rt-isolate]_*)]:ml-auto [&_figure[data-align=full]_img:not([data-rt-isolate]_*)]:w-full [&_div[data-callout]:not([data-rt-isolate]_*)]:rounded-kit-lg [&_div[data-callout]:not([data-rt-isolate]_*)]:border [&_div[data-callout]:not([data-rt-isolate]_*)]:border-kit-info-line [&_div[data-callout]:not([data-rt-isolate]_*)]:bg-kit-info-soft [&_div[data-callout]:not([data-rt-isolate]_*)]:px-4 [&_div[data-callout]:not([data-rt-isolate]_*)]:py-3 [&_div[data-callout]:not([data-rt-isolate]_*)]:text-kit-fg [&_div[data-callout=tip]:not([data-rt-isolate]_*)]:border-kit-success-line [&_div[data-callout=tip]:not([data-rt-isolate]_*)]:bg-kit-success-soft [&_div[data-callout=warning]:not([data-rt-isolate]_*)]:border-kit-warning-line [&_div[data-callout=warning]:not([data-rt-isolate]_*)]:bg-kit-warning-soft [&_div[data-callout]>p[data-title]:not([data-rt-isolate]_*)]:font-medium [&_details:not([data-rt-isolate]_*)]:rounded-kit-md [&_summary:not([data-rt-isolate]_*)]:cursor-pointer [&_summary:not([data-rt-isolate]_*)]:font-medium [&_details>div:not([data-rt-isolate]_*)]:mt-1 [&_details>div:not([data-rt-isolate]_*)]:border-l [&_details>div:not([data-rt-isolate]_*)]:border-kit-line [&_details>div:not([data-rt-isolate]_*)]:pl-4 [&_details>div:not([data-rt-isolate]_*)]:ml-1 [&_div[data-rt=columns]:not([data-rt-isolate]_*)]:grid [&_div[data-rt=columns]:not([data-rt-isolate]_*)]:gap-4 [&_div[data-cols='2']:not([data-rt-isolate]_*)]:grid-cols-2 [&_div[data-cols='3']:not([data-rt-isolate]_*)]:grid-cols-3 [&_div[data-cols='4']:not([data-rt-isolate]_*)]:grid-cols-4 [&_div[data-gap=s]:not([data-rt-isolate]_*)]:gap-2 [&_div[data-gap=l]:not([data-rt-isolate]_*)]:gap-7 [&_div[data-rt=file]:not([data-rt-isolate]_*)]:rounded-kit-lg [&_div[data-rt=file]:not([data-rt-isolate]_*)]:border [&_div[data-rt=file]:not([data-rt-isolate]_*)]:border-kit-line [&_div[data-rt=file]:not([data-rt-isolate]_*)]:px-3 [&_div[data-rt=file]:not([data-rt-isolate]_*)]:py-2.5 [&_div[data-rt=file]:not([data-rt-isolate]_*)]:text-kit-sm [&_div[data-embed]:not([data-rt-isolate]_*)]:flex [&_div[data-embed]:not([data-rt-isolate]_*)]:aspect-video [&_div[data-embed]:not([data-rt-isolate]_*)]:items-center [&_div[data-embed]:not([data-rt-isolate]_*)]:justify-center [&_div[data-embed]:not([data-rt-isolate]_*)]:rounded-kit-lg [&_div[data-embed]:not([data-rt-isolate]_*)]:border [&_div[data-embed]:not([data-rt-isolate]_*)]:border-kit-line [&_div[data-embed]:not([data-rt-isolate]_*)]:bg-kit-subtle [&_div[data-embed]:not([data-rt-isolate]_*)]:text-kit-sm [&_div[data-embed]:not([data-rt-isolate]_*)]:text-kit-fg-3 [&_div[data-block]:not([data-rt-isolate]_*)]:flex [&_div[data-block]:not([data-rt-isolate]_*)]:items-center [&_div[data-block]:not([data-rt-isolate]_*)]:gap-2 [&_div[data-block]:not([data-rt-isolate]_*)]:rounded-kit-lg [&_div[data-block]:not([data-rt-isolate]_*)]:border [&_div[data-block]:not([data-rt-isolate]_*)]:border-dashed [&_div[data-block]:not([data-rt-isolate]_*)]:border-kit-accent-line [&_div[data-block]:not([data-rt-isolate]_*)]:bg-kit-accent-softer [&_div[data-block]:not([data-rt-isolate]_*)]:px-3 [&_div[data-block]:not([data-rt-isolate]_*)]:py-3 [&_div[data-block]:not([data-rt-isolate]_*)]:text-kit-sm [&_div[data-block]:not([data-rt-isolate]_*)]:text-kit-accent-fg [&_table:not([data-rt-isolate]_*)]:w-full [&_table:not([data-rt-isolate]_*)]:border-collapse [&_table:not([data-rt-isolate]_*)]:text-kit-sm [&_td:not([data-rt-isolate]_*)]:border [&_td:not([data-rt-isolate]_*)]:border-kit-line [&_td:not([data-rt-isolate]_*)]:px-2.5 [&_td:not([data-rt-isolate]_*)]:py-1.5 [&_td:not([data-rt-isolate]_*)]:align-top [&_th:not([data-rt-isolate]_*)]:border [&_th:not([data-rt-isolate]_*)]:border-kit-line [&_th:not([data-rt-isolate]_*)]:bg-kit-subtle [&_th:not([data-rt-isolate]_*)]:px-2.5 [&_th:not([data-rt-isolate]_*)]:py-1.5 [&_th:not([data-rt-isolate]_*)]:text-left [&_th:not([data-rt-isolate]_*)]:align-top [&_th:not([data-rt-isolate]_*)]:font-medium";
+/** Panel density (≈340px inspector): 13px text, smaller headings. */
+var RT_PANEL = "text-kit-sm leading-[1.6] [&_h1:not([data-rt-isolate]_*)]:text-kit-xl [&_h1:not([data-rt-isolate]_*)]:leading-7 [&_h2:not([data-rt-isolate]_*)]:text-kit-lg [&_h2:not([data-rt-isolate]_*)]:leading-7 [&_h3:not([data-rt-isolate]_*)]:text-kit-md [&_h4:not([data-rt-isolate]_*)]:text-kit-base [&_h5:not([data-rt-isolate]_*)]:text-kit-sm [&_h6:not([data-rt-isolate]_*)]: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;
+	}
+};
+/** A footnote marker (`<sup data-footnote>`, or the table's `<sup><a href="#…-fn-n">`): never an x² mark. */
+var FOOTNOTE_SUP = "sup[data-footnote], sup:has(> a[href*='-fn-'])";
+/** x² / x₂ (V2): on inside the same mark takes it off (unwrap, keeping the words selected); inside the other one swaps;
+*  otherwise the browser wraps the selection. Footnote markers are never touched. */
+function toggleScript(root, tag) {
+	const s = window.getSelection();
+	if (!s || !s.rangeCount) return;
+	const at = (n) => n?.nodeType === 1 ? n : n?.parentElement ?? null;
+	const find = (t) => {
+		const el = at(s.anchorNode)?.closest(t === "sup" ? `sup:not(${FOOTNOTE_SUP})` : "sub");
+		return el && root.contains(el) ? el : null;
+	};
+	const unwrap = (el) => {
+		const first = el.firstChild;
+		const last = el.lastChild;
+		el.replaceWith(...Array.from(el.childNodes));
+		if (first && last) {
+			const r = document.createRange();
+			r.setStartBefore(first);
+			r.setEndAfter(last);
+			s.removeAllRanges();
+			s.addRange(r);
+		}
+	};
+	const same = find(tag);
+	if (same) return unwrap(same);
+	const other = find(tag === "sup" ? "sub" : "sup");
+	if (other) unwrap(other);
+	exec(tag === "sup" ? "superscript" : "subscript");
+}
+/** Focus is in another text field (the comment composer, a link input) while the page's selection stays in this editor. */
+var typingElsewhere = (el) => {
+	const ae = document.activeElement;
+	return !!el && !!ae && ae !== el && !el.contains(ae) && ae.matches("input, textarea, [contenteditable='true']");
+};
+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);
+	}
+}
+var NOT_COUNTED = "[data-rt=component],[data-rt=pullquote],[data-rt=takeaways],[data-rt=embed],[data-rt=video],[data-rt=file]";
+var WORDS = (s) => s.replace(/\u200b/g, "").trim().split(/\s+/).filter(Boolean).length;
+function countWords(html) {
+	if (!html) return 0;
+	if (!/data-rt="(?:component|pullquote|takeaways|embed|video|file)"/.test(html) || typeof DOMParser === "undefined") return WORDS(html.replace(/<\/(p|li|h[1-6]|blockquote|pre|figcaption|td|th|summary|div)>|<br\s*\/?>/g, " ").replace(/<[^>]+>/g, "").replace(/&nbsp;|&[a-z]+;/g, " "));
+	const doc = new DOMParser().parseFromString(`<body>${html}</body>`, "text/html");
+	doc.body.querySelectorAll(NOT_COUNTED).forEach((n) => n.remove());
+	doc.body.querySelectorAll("p,li,h1,h2,h3,h4,h5,h6,td,th,figcaption,summary,pre,blockquote,div").forEach((n) => n.append(" "));
+	return WORDS(doc.body.textContent ?? "");
+}
+/** Linked component instances in the body. */
+var countComponents = (html) => (html.match(/data-rt="component"/g) ?? []).length;
+/** "1,840 words · 3 components" */
+var bodyCountLabel = (html) => {
+	const w = countWords(html);
+	const c = countComponents(html);
+	return `${w.toLocaleString("en-US")} ${w === 1 ? "word" : "words"}${c ? ` · ${c} ${c === 1 ? "block" : "blocks"}` : ""}`;
+};
+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 reduceMotion = useReducedMotion();
+	const [bubble, setBubble] = React.useState(null);
+	/** Comment was picked: the toolbar stays away until the next click or key inside this editor */
+	const [quiet, setQuiet] = React.useState(false);
+	React.useEffect(() => {
+		const el = ref.current;
+		if (!quiet || !el) return;
+		const wake = () => setQuiet(false);
+		el.addEventListener("mousedown", wake);
+		el.addEventListener("keydown", wake);
+		return () => {
+			el.removeEventListener("mousedown", wake);
+			el.removeEventListener("keydown", wake);
+		};
+	}, [quiet]);
+	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;
+			}
+			const left = w.getBoundingClientRect().left - (a ? a.getBoundingClientRect().left : 0);
+			setGutterRoom(left >= 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();
+				const ok = s && s.rangeCount && !s.isCollapsed && ref.current?.contains(s.anchorNode) && !typingElsewhere(ref.current);
+				setBubble(ok ? rangeRect(s.getRangeAt(0), ref.current) : null);
+			});
+		};
+		window.addEventListener("scroll", on, true);
+		window.addEventListener("resize", on);
+		const box = new ResizeObserver(on);
+		if (wrap.current) box.observe(wrap.current);
+		return () => {
+			cancelAnimationFrame(raf);
+			box.disconnect();
+			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;
+		if (typingElsewhere(el)) {
+			setBubble(null);
+			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"),
+			sup: !!anchorEl?.closest(`sup:not(${FOOTNOTE_SUP})`),
+			sub: !!anchorEl?.closest("sub"),
+			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();
+		const away = () => typingElsewhere(ref.current) && setBubble(null);
+		document.addEventListener("selectionchange", on);
+		document.addEventListener("focusin", away);
+		return () => {
+			document.removeEventListener("selectionchange", on);
+			document.removeEventListener("focusin", away);
+		};
+	}, [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);
+			const made = { el: null };
+			oneStep(`Insert ${c.name}`, () => {
+				const isl = made.el = insertIsland(el, "component", {
+					...defaultModel("component"),
+					ref: c.id,
+					name: c.name
+				});
+				emit();
+				return isl;
+			});
+			refresh();
+			if (made.el && services.useComponentInfo) openComponentPanel(made.el);
+			services.toast?.(`${c.name} added`, { description: COMPONENT_INSERT_TOAST });
+			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 = eventKey(e);
+		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();
+					const p = ensureLineAfter(b);
+					placeCaret(p, 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 && eventKey(e) === "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 html = ref.current ? serialize(ref.current) : value;
+			const text = htmlToMarkdown(html);
+			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 || eventKey(e) !== "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,
+		startDrag
+	});
+	api.current = {
+		emit,
+		deleteBlock,
+		exitIsland,
+		record,
+		oneStep,
+		notify,
+		duplicateBlock: duplicateBlock$1,
+		moveBlock: moveBlock$1,
+		islandUndo,
+		islandRedo,
+		startDrag
+	};
+	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(),
+		drag: (x, e) => api.current.startDrag(x, e)
+	}), [readOnly, dense]);
+	const commentSel = onComment ? () => {
+		restoreSel();
+		const q = window.getSelection()?.toString().trim();
+		setBubble(null);
+		setQuiet(true);
+		if (q) onComment(q);
+	} : void 0;
+	const onMark = (cmd) => allows(MARK_FEATURE[cmd]) && run(() => cmd === "superscript" || cmd === "subscript" ? ref.current && toggleScript(ref.current, cmd === "superscript" ? "sup" : "sub") : 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:not([data-rt-isolate]_*)]:size-3.5" : "size-[22px] [&_svg:not([data-rt-isolate]_*)]: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 [--rt-toolbar-h:2rem] pointer-coarse:[--rt-toolbar-h:2.75rem]", "rounded-kit-lg border transition-colors duration-150", 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: reduceMotion ? 0 : 4
+								},
+								animate: {
+									opacity: 1,
+									y: 0
+								},
+								exit: {
+									opacity: 0,
+									y: reduceMotion ? 0 : 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;
+						const b = topBlock(ref.current, t);
+						placeGutter(b?.getAttribute("data-rt-island") === "component" ? null : b);
+					},
+					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": "Rich text",
+							"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 && "text-kit-sm leading-[1.6] [&_h1:not([data-rt-isolate]_*)]:text-kit-xl [&_h1:not([data-rt-isolate]_*)]:leading-7 [&_h2:not([data-rt-isolate]_*)]:text-kit-lg [&_h2:not([data-rt-isolate]_*)]:leading-7 [&_h3:not([data-rt-isolate]_*)]:text-kit-md [&_h4:not([data-rt-isolate]_*)]:text-kit-base [&_h5:not([data-rt-isolate]_*)]:text-kit-sm [&_h6:not([data-rt-isolate]_*)]:text-kit-xs", "peer relative outline-none focus-visible:shadow-none [&_*:not([data-rt-isolate]_*)]: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)]", "[&_a[data-button]:not([data-rt-isolate]_*)]:cursor-pointer [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:cursor-pointer", "[&_sup[data-rt=fn]]:mx-px [&_sup[data-rt=fn]]:cursor-pointer [&_sup[data-rt=fn]]:rounded-kit-sm [&_sup[data-rt=fn]]:px-0.5 [&_sup[data-rt=fn]]:text-[0.72em] [&_sup[data-rt=fn]]:font-semibold [&_sup[data-rt=fn]]:text-kit-accent-fg [&_sup[data-rt=fn]:hover]:bg-kit-accent-soft", 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 ? "text-kit-sm" : "text-kit-base", dense ? "left-2.5 top-2" : "left-4 top-3.5"),
+							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:not([data-rt-isolate]_*)]: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 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: "tabular-nums",
+						children: [
+							words.toLocaleString("en-US"),
+							" ",
+							words === 1 ? "word" : "words",
+							comps ? ` · ${comps} ${comps === 1 ? "block" : "blocks"}` : "",
+							" · ",
+							Math.max(1, Math.round(words / 220)),
+							" min read"
+						]
+					})]
+				}),
+				bubble && !quiet && !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-[var(--kit-z-popover,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-[calc(var(--kit-z-popover,84)_+_1)]",
+					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("div", {
+							className: "flex flex-col gap-2",
+							children: /* @__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 { RT_PANEL, RT_PROSE, RichTextEditor, bodyCountLabel, countComponents, countWords, slashPlacement };
+
+//# sourceMappingURL=editor.js.map