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

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

@@ -12,9 +12,11 @@ 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 { 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 * as React from "react";
@@ -112,11 +114,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 +142,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;
@@ -273,6 +287,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		if (!el) return;
 		el.innerHTML = sanitize(html || "") || "<p><br></p>";
 		hydrate(el);
+		syncTaskA11y(el);
 		known.current = html;
 		setEmpty(isEmptyHtml(html));
 		setWords(countWords(html));
@@ -283,6 +298,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		const el = ref.current;
 		if (!el) return;
 		syncIslands();
+		syncTaskA11y(el);
 		const html = serialize(el);
 		setEmpty(isEmptyHtml(html) && !el.querySelector(":scope > [data-rt-island], :scope > hr"));
 		setWords(countWords(html));
@@ -568,7 +584,14 @@ 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 === "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 +668,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 +778,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 +822,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 +838,28 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 			} : { href: "" }
 		});
 	};
+	/** 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 +1128,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		moveBlock: moveBlock$1,
 		islandUndo,
 		islandRedo,
-		startDrag
+		startDrag,
+		allows
 	});
 	api.current = {
 		emit,
@@ -1085,7 +1142,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		moveBlock: moveBlock$1,
 		islandUndo,
 		islandRedo,
-		startDrag
+		startDrag,
+		allows
 	};
 	const islandCtx = React.useMemo(() => ({
 		readOnly,
@@ -1100,7 +1158,8 @@ 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)
+		drag: (x, e) => api.current.startDrag(x, e),
+		allows: (f) => api.current.allows(f)
 	}), [readOnly, dense]);
 	const commentSel = onComment ? () => {
 		restoreSel();
@@ -1305,6 +1364,17 @@ 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 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) {
@@ -1506,7 +1576,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"
@@ -1579,7 +1649,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,