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

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

@@ -9,6 +9,7 @@ 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 { 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 +20,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 +177,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 +265,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 +293,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 +310,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 +597,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);
@@ -838,6 +858,28 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 			} : { 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;
@@ -1159,8 +1201,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 +1418,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();
@@ -1551,6 +1604,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 +1692,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),
@@ -1691,6 +1780,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 						placeholder,
 						docKey: `${docKey}:expanded`,
 						features,
+						references,
 						single,
 						allowNewTab,
 						expandCrumbs,