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

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

@@ -9,14 +9,18 @@ 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";
+import { duplicateBlock, ensureLineAfter, insertBasic, insertIsland, liveInlineCode, liveMarkdown, moveBlock, restrictHtml, turnInto } from "./ops.js";
+import { ButtonLinkPanel, applyButton, buttonAt, buttonInitial, insertButton, removeButton } from "./button.js";
+import { checklistShortcut, insertChecklist, syncTaskA11y, toggleTaskAtPointer, toggleTaskFromKey } from "./checklist.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 { 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";
@@ -112,11 +116,23 @@ function insertHtmlAtCaret(html) {
 		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 NOT_COUNTED = [
+	"[data-rt=component]",
+	"[data-rt=pullquote]",
+	"[data-rt=takeaways]",
+	"[data-rt=toc]",
+	"[data-rt=related]",
+	"[data-rt=author]",
+	"[data-rt=embed]",
+	"[data-rt=video]",
+	"[data-rt=file]",
+	"[data-rt=footnotes]",
+	"sup[data-rt=fn]"
+].join(",");
 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, " "));
+	if (!/data-rt="(?:component|pullquote|takeaways|toc|related|author|embed|video|file|footnotes|fn)"/.test(html) || typeof DOMParser === "undefined") return WORDS(html.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(" "));
@@ -128,7 +144,7 @@ var countComponents = (html) => (html.match(/data-rt="component"/g) ?? []).lengt
 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"}` : ""}`;
+	return `${w.toLocaleString("en-US")} ${w === 1 ? "word" : "words"}${c ? ` · ${c} ${c === 1 ? "component" : "components"}` : ""}`;
 };
 function insertTextAtCaret(text) {
 	if (exec("insertText", text)) return;
@@ -161,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";
@@ -249,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);
@@ -272,7 +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));
@@ -283,6 +309,9 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		const el = ref.current;
 		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));
@@ -568,7 +597,21 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		}
 		if (!it.id || !blockAllowed(it.id, allows)) return;
 		noteRecent(it);
-		insertBasic(el, it.id);
+		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);
+			emit();
+			refresh();
+			openButton(a);
+			return;
+		} else insertBasic(el, it.id);
 		emit();
 		refresh();
 	};
@@ -645,6 +688,11 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		}
 		const mod = e.metaKey || e.ctrlKey;
 		const k = eventKey(e);
+		if (!mod && !e.altKey && !readOnly && ref.current && toggleTaskFromKey(ref.current, e.key)) {
+			e.preventDefault();
+			emit();
+			return;
+		}
 		if (mod && !e.altKey && k === "k") {
 			e.preventDefault();
 			saveSel();
@@ -750,6 +798,11 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 			hist.current.textAt = Date.now();
 			hist.current.future = [];
 		}
+		if (!single && ne.inputType === "insertText" && allows("checklist") && checklistShortcut(ref.current, ne.data)) {
+			setSlash(null);
+			emit();
+			return;
+		}
 		if (!single && ne.inputType === "insertText" && (ne.data === " " || ne.data === "-") && liveMarkdown(ref.current, ne.data, allows)) {
 			setSlash(null);
 			emit();
@@ -789,6 +842,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		restoreSel();
 		const s = window.getSelection();
 		const anchor = (s?.anchorNode?.nodeType === 1 ? s.anchorNode : s?.anchorNode?.parentElement)?.closest("a") ?? null;
+		if (anchor && ref.current && buttonAt(ref.current, anchor)) return openButton(anchor);
 		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;
@@ -804,6 +858,50 @@ 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;
+		const { link: initial, label } = buttonInitial(a);
+		setBubble(null);
+		setLink({
+			rect: a.getBoundingClientRect(),
+			existing: a,
+			initial,
+			button: {
+				a,
+				label
+			}
+		});
+	};
+	const saveButton = (v, label) => {
+		const b = link?.button;
+		setLink(null);
+		if (!b) return;
+		applyButton(b.a, v, label);
+		emit();
+	};
 	const saveLink = (v) => {
 		const l = link;
 		setLink(null);
@@ -1072,7 +1170,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		moveBlock: moveBlock$1,
 		islandUndo,
 		islandRedo,
-		startDrag
+		startDrag,
+		allows
 	});
 	api.current = {
 		emit,
@@ -1085,7 +1184,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		moveBlock: moveBlock$1,
 		islandUndo,
 		islandRedo,
-		startDrag
+		startDrag,
+		allows
 	};
 	const islandCtx = React.useMemo(() => ({
 		readOnly,
@@ -1100,8 +1200,15 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		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]);
+		drag: (x, e) => api.current.startDrag(x, e),
+		allows: (f) => api.current.allows(f),
+		outline: outline.current,
+		references
+	}), [
+		readOnly,
+		dense,
+		references
+	]);
 	const commentSel = onComment ? () => {
 		restoreSel();
 		const q = window.getSelection()?.toString().trim();
@@ -1305,6 +1412,22 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 							onKeyDown,
 							onKeyUp: refresh,
 							onMouseUp: refresh,
+							onMouseDown: (e) => {
+								if (readOnly || !ref.current || !toggleTaskAtPointer(ref.current, e.target, e.clientX)) return;
+								e.preventDefault();
+								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();
+								openButton(a);
+							},
 							onPaste: (e) => {
 								if (readOnly) return;
 								if (Array.from(e.clipboardData.files).filter((f) => f.type.startsWith("image/")).length) {
@@ -1481,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", {
@@ -1506,7 +1636,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 							words.toLocaleString("en-US"),
 							" ",
 							words === 1 ? "word" : "words",
-							comps ? ` · ${comps} ${comps === 1 ? "block" : "blocks"}` : "",
+							comps ? ` · ${comps} ${comps === 1 ? "component" : "components"}` : "",
 							" · ",
 							Math.max(1, Math.round(words / 220)),
 							" min read"
@@ -1562,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),
@@ -1579,7 +1738,19 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 					}) }), /* @__PURE__ */ jsx(PopoverContent, {
 						className: "w-[340px] rounded-kit-lg p-3",
 						finalFocus: false,
-						children: link ? /* @__PURE__ */ jsx("div", {
+						children: link?.button ? /* @__PURE__ */ jsx(ButtonLinkPanel, {
+							initial: link.initial,
+							label: link.button.label,
+							allowNewTab,
+							onSave: saveButton,
+							onCancel: () => setLink(null),
+							onDetach: () => {
+								const a = link.button.a;
+								setLink(null);
+								if (ref.current) removeButton(ref.current, a);
+								emit();
+							}
+						}) : link ? /* @__PURE__ */ jsx("div", {
 							className: "flex flex-col gap-2",
 							children: /* @__PURE__ */ jsx(LinkForm, {
 								initial: link.initial,
@@ -1609,6 +1780,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 						placeholder,
 						docKey: `${docKey}:expanded`,
 						features,
+						references,
 						single,
 						allowNewTab,
 						expandCrumbs,