@bettercms-ai/kit 2.0.0-next.1 → 2.0.0-next.3

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

@@ -4,11 +4,13 @@ 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 { LinkPopoverBody } from "../link.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 { applyTextLink, fromLinkValue, textLinkOf, toLinkValue } from "./link-form.js";
+import { createOutlineStore, outlineOf } from "./toc.js";
 import { CatalogComponentsProvider, InsertMenuContent, SlashMenuPanel, blockAllowed, catalogKey, noteRecent, useCatalog } from "./catalog.js";
 import { openComponentPanel } from "./component-panel.js";
 import { Island } from "./blocks.js";
@@ -19,6 +21,7 @@ import { ALL_FEATURES } from "./codec.js";
 import { htmlToMarkdown, looksLikeMarkdown, markdownToHtml } from "./markdown.js";
 import { EMPTY_FMT, FormatToolbar, MARK_FEATURE, stylesFor } from "./toolbar.js";
 import { SelectionBubble } from "./floating.js";
+import { FN_MARK, FOOTNOTE_POPOVER_CLASS, FOOTNOTE_REFUSED, FootnoteEditor, FootnotesList, backToMarker, caretAfterMarker, insertFootnote, renumberFootnotes } from "./footnote.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";
@@ -175,7 +178,7 @@ function slashPlacement(caret, viewportH) {
 		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 }) {
+function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, features = ALL_FEATURES, references, 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";
@@ -263,6 +266,11 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		const t = window.setTimeout(() => setNotice(null), 8e3);
 		return () => window.clearTimeout(t);
 	}, [notice]);
+	/** V2 article-blocks.tsx:45-66: one live outline per editor, so every table of contents follows the headings */
+	const outline = React.useRef(createOutlineStore());
+	/** V2 rich-text-editor.tsx:271-276: the body's markers in text order, and the one whose note is open */
+	const [footnotes, setFootnotes] = React.useState([]);
+	const [fnEdit, setFnEdit] = React.useState(null);
 	const syncIslands = React.useCallback(() => {
 		const el = ref.current;
 		if (!el) return setIslands((p) => p.length ? [] : p);
@@ -286,8 +294,12 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		const el = ref.current;
 		if (!el) return;
 		el.innerHTML = sanitize(html || "") || "<p><br></p>";
+		el.querySelectorAll(":scope > ol[data-rt=\"footnotes\"]").forEach((n) => n.remove());
+		el.querySelectorAll(FN_MARK).forEach((m) => m.setAttribute("contenteditable", "false"));
 		hydrate(el);
 		syncTaskA11y(el);
+		setFootnotes(renumberFootnotes(el));
+		outline.current.set(outlineOf(el));
 		known.current = html;
 		setEmpty(isEmptyHtml(html));
 		setWords(countWords(html));
@@ -299,6 +311,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		if (!el) return;
 		syncIslands();
 		syncTaskA11y(el);
+		outline.current.set(outlineOf(el));
+		setFootnotes(renumberFootnotes(el));
 		const html = serialize(el);
 		setEmpty(isEmptyHtml(html) && !el.querySelector(":scope > [data-rt-island], :scope > hr"));
 		setWords(countWords(html));
@@ -584,6 +598,13 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		}
 		if (!it.id || !blockAllowed(it.id, allows)) return;
 		noteRecent(it);
+		if (it.id === "footnote") {
+			const m = insertFootnote(el);
+			if (!m) return void notify(FOOTNOTE_REFUSED.title, { description: FOOTNOTE_REFUSED.description });
+			emit();
+			openFootnote(m, true);
+			return;
+		}
 		if (it.id === "task") insertChecklist(el);
 		else if (it.id === "button") {
 			const a = insertButton(el);
@@ -591,7 +612,11 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 			refresh();
 			openButton(a);
 			return;
-		} else insertBasic(el, it.id);
+		} else if (it.id === "related" && references?.topic === false) insertIsland(el, "related", {
+			...defaultModel("related"),
+			mode: "newest"
+		});
+		else insertBasic(el, it.id);
 		emit();
 		refresh();
 	};
@@ -832,12 +857,31 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		setLink({
 			rect,
 			existing: anchor,
-			initial: anchor ? {
-				href: anchor.getAttribute("href") ?? "",
-				newTab: anchor.getAttribute("target") === "_blank"
-			} : { href: "" }
+			initial: anchor ? textLinkOf(anchor) : { href: "" }
+		});
+	};
+	const openFootnote = (m, fresh = false) => {
+		if (readOnly) return;
+		setBubble(null);
+		setFnEdit({
+			el: m,
+			rect: m.getBoundingClientRect(),
+			fresh
 		});
 	};
+	const removeFootnote = (m) => {
+		setFnEdit(null);
+		m.remove();
+		emit();
+	};
+	/** closed: a new footnote with no note is taken back out (V2), else the caret goes back after its marker */
+	const closeFootnote = () => {
+		const f = fnEdit;
+		setFnEdit(null);
+		if (!f || !ref.current) return;
+		if (f.fresh && !(f.el.getAttribute("data-note") ?? "").trim()) return removeFootnote(f.el);
+		caretAfterMarker(ref.current, f.el);
+	};
 	/** V2 rich-text-editor.tsx:865-873: a button's popover, its label above the link form */
 	const openButton = (a) => {
 		if (readOnly) return;
@@ -865,15 +909,14 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		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");
+			applyTextLink(l.existing, v);
 			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 attr = (s) => esc(s).replace(/"/g, "&quot;");
+			insertHtmlAtCaret(`<a href="${attr(v.href)}"${v.newTab ? ` target="_blank"` : ""}${v.rel ? ` rel="${attr(v.rel)}"` : ""}>${esc(text)}</a>`);
 		});
 	};
 	const aiRewrite = (preset) => {
@@ -1159,8 +1202,14 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		undo: () => api.current.islandUndo(),
 		redo: () => api.current.islandRedo(),
 		drag: (x, e) => api.current.startDrag(x, e),
-		allows: (f) => api.current.allows(f)
-	}), [readOnly, dense]);
+		allows: (f) => api.current.allows(f),
+		outline: outline.current,
+		references
+	}), [
+		readOnly,
+		dense,
+		references
+	]);
 	const commentSel = onComment ? () => {
 		restoreSel();
 		const q = window.getSelection()?.toString().trim();
@@ -1370,6 +1419,11 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 								emit();
 							},
 							onClick: (e) => {
+								const fn = e.target.closest?.(FN_MARK);
+								if (fn && ref.current?.contains(fn) && !fn.closest("[data-rt-island]") && !readOnly) {
+									e.preventDefault();
+									return openFootnote(fn);
+								}
 								const a = ref.current ? buttonAt(ref.current, e.target) : null;
 								if (!a || readOnly) return;
 								e.preventDefault();
@@ -1422,7 +1476,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 									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)
+							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]]:leading-[0] [&_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,
@@ -1551,6 +1605,13 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 						}), el, key))
 					]
 				}),
+				/* @__PURE__ */ jsx(FootnotesList, {
+					notes: footnotes,
+					readOnly,
+					density: dense ? "dense" : "default",
+					onEdit: (m) => openFootnote(m),
+					onBack: (m) => ref.current && backToMarker(ref.current, m)
+				}),
 				/* @__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", {
@@ -1632,6 +1693,35 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 						maxHeight: slashMaxH
 					})
 				})] }), document.body) : null,
+				/* @__PURE__ */ jsxs(Popover, {
+					open: !!fnEdit,
+					onOpenChange: (o) => !o && closeFootnote(),
+					children: [/* @__PURE__ */ jsx(PopoverAnchor, { render: /* @__PURE__ */ jsx("span", {
+						className: "pointer-events-none fixed",
+						style: fnEdit ? {
+							top: fnEdit.rect.bottom,
+							left: fnEdit.rect.left,
+							width: Math.max(1, fnEdit.rect.width),
+							height: 1
+						} : {
+							top: 0,
+							left: 0
+						}
+					}) }), /* @__PURE__ */ jsx(PopoverContent, {
+						className: FOOTNOTE_POPOVER_CLASS,
+						finalFocus: false,
+						children: fnEdit ? /* @__PURE__ */ jsx(FootnoteEditor, {
+							n: footnotes.findIndex((f) => f.el === fnEdit.el) + 1,
+							note: fnEdit.el.getAttribute("data-note") ?? "",
+							onChange: (v) => {
+								fnEdit.el.setAttribute("data-note", v);
+								emit();
+							},
+							onRemove: () => removeFootnote(fnEdit.el),
+							onDone: closeFootnote
+						}, footnotes.findIndex((f) => f.el === fnEdit.el)) : null
+					})]
+				}),
 				/* @__PURE__ */ jsxs(Popover, {
 					open: !!link,
 					onOpenChange: (o) => !o && setLink(null),
@@ -1663,10 +1753,10 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 							}
 						}) : link ? /* @__PURE__ */ jsx("div", {
 							className: "flex flex-col gap-2",
-							children: /* @__PURE__ */ jsx(LinkForm, {
-								initial: link.initial,
-								allowNewTab,
-								onSave: saveLink,
+							children: /* @__PURE__ */ jsx(LinkPopoverBody, {
+								initial: toLinkValue(link.initial),
+								hideNewTab: !allowNewTab,
+								onSave: (v) => saveLink(fromLinkValue(v, allowNewTab)),
 								onCancel: () => setLink(null),
 								onDetach: link.existing ? () => {
 									const a = link.existing;
@@ -1691,6 +1781,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 						placeholder,
 						docKey: `${docKey}:expanded`,
 						features,
+						references,
 						single,
 						allowNewTab,
 						expandCrumbs,