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

package/dist/controls/rich-text/dom.d.ts

@@ -58,9 +58,35 @@ export interface ImageModel {
     align?: ImageAlign;
     size?: ImageSize;
     href?: string;
+    /** RT9: how much is cut from each edge, 0–1 of the source (image-url's crop) */
+    crop?: ImageCrop;
+    /** RT9: the subject, 0–1 of the source (image-url's focal) */
+    focal?: {
+        x: number;
+        y: number;
+    };
     /** the stored block's other keys, opaque to the editor */
     extra?: string;
 }
+/** RT9: image-url's crop, each edge a 0–1 fraction of the source. */
+export interface ImageCrop {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * RT9: an image's framing as production writes it on the `<img>` (richtext richTextImageFrame): `data-src` the stored
+ * url when the drawn one carries the crop, `data-crop` "top,right,bottom,left" and `data-focal` "x,y", each 0–1.
+ */
+export declare function readImageFrame(img: Element | null): {
+    src: string;
+    crop?: ImageCrop;
+    focal?: {
+        x: number;
+        y: number;
+    };
+};
 /** A table island IS the kit's table value (V2 TableModel); only what production's table keeps is stored (see above). */
 export type TableModel = TableValue;
 /** V2 PullQuoteModel (article.ts). */
@@ -100,6 +126,8 @@ export interface EmbedModel {
     url?: string;
     title?: string;
     aspect?: "16:9" | "4:3" | "1:1" | "9:16";
+    /** the title is also the figure's aria-label, as production writes it (RT3) and a new embed does; kept as found */
+    labelled?: true;
     extra?: string;
 }
 export type EmbedProvider = "youtube" | "vimeo" | "x" | "codepen" | "figma" | "maps" | "spotify" | "podcast" | "audio" | "link";
@@ -111,6 +139,52 @@ export interface EmbedInfo {
     host: string;
 }
 export declare function detectEmbed(url: string): EmbedInfo;
+/** V2's article Gallery (plan RT4): `<figure data-rt="gallery" data-layout><ul><li><figure><img src alt><figcaption>`. */
+export interface GalleryIslandModel {
+    layout?: "grid" | "carousel";
+    /** `_key` is the editor's own (rows keep their identity while edited); src, alt and caption are what is stored */
+    images: {
+        _key: string;
+        src: string;
+        alt?: string;
+        caption?: string;
+        crop?: ImageCrop;
+        focal?: {
+            x: number;
+            y: number;
+        };
+    }[];
+    extra?: string;
+}
+/** V2's article Table of contents (plan RT5): `<nav data-rt="toc" data-depth><p data-title>`; the list is derived. */
+export interface TocIslandModel {
+    title?: string;
+    depth?: "2" | "3";
+    extra?: string;
+}
+/** V2's Columns (plan RT7): `<div data-rt="columns" data-gap data-cols><div data-col="true">…</div></div>`, text only. */
+export interface ColumnsIslandModel {
+    gap?: "s" | "m" | "l";
+    /** each column's HTML (paragraphs and marks); `id` is the editor's own */
+    cols: {
+        id: string;
+        html: string;
+    }[];
+    extra?: string;
+}
+/** V2's Author bio (plan RT8): `<aside data-rt="author" data-author>`; name, avatar and bio are resolved, never stored. */
+export interface AuthorIslandModel {
+    author?: string;
+    extra?: string;
+}
+/** V2's Related posts (plan RT8): `<aside data-rt="related" data-mode data-count data-posts>`; the list is resolved. */
+export interface RelatedIslandModel {
+    title?: string;
+    mode?: "topic" | "newest" | "manual";
+    count?: number;
+    posts: string[];
+    extra?: string;
+}
 export interface FileModel {
     url?: string;
     name?: string;
@@ -150,6 +224,11 @@ export interface IslandModels {
     embed: EmbedModel;
     file: FileModel;
     component: ComponentModel;
+    gallery: GalleryIslandModel;
+    toc: TocIslandModel;
+    columns: ColumnsIslandModel;
+    author: AuthorIslandModel;
+    related: RelatedIslandModel;
 }
 export type IslandKind = keyof IslandModels;
 export declare const ISLAND_KINDS: IslandKind[];

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

@@ -59,6 +59,38 @@ var IMAGE_SIZES = [
 	"l",
 	"full"
 ];
+/**
+* RT9: an image's framing as production writes it on the `<img>` (richtext richTextImageFrame): `data-src` the stored
+* url when the drawn one carries the crop, `data-crop` "top,right,bottom,left" and `data-focal` "x,y", each 0–1.
+*/
+function readImageFrame(img) {
+	const src = img?.getAttribute("data-src") ?? img?.getAttribute("src") ?? "";
+	const nums = (raw, n) => {
+		const v = (raw ?? "").split(",").map((x) => Number(x));
+		return raw && v.length === n && v.every((x) => Number.isFinite(x) && x >= 0 && x <= 1) ? v : null;
+	};
+	const c = nums(img?.getAttribute("data-crop"), 4);
+	const f = nums(img?.getAttribute("data-focal"), 2);
+	return {
+		src,
+		...c && c[0] + c[2] < 1 && c[1] + c[3] < 1 ? { crop: {
+			top: c[0],
+			right: c[1],
+			bottom: c[2],
+			left: c[3]
+		} } : {},
+		...f ? { focal: {
+			x: f[0],
+			y: f[1]
+		} } : {}
+	};
+}
+var frameAttrs = (crop, focal) => `${crop ? ` data-crop="${[
+	crop.top,
+	crop.right,
+	crop.bottom,
+	crop.left
+].join(",")}"` : ""}${focal ? ` data-focal="${focal.x},${focal.y}"` : ""}`;
 var CALLOUT_TONES = [
 	"info",
 	"tip",
@@ -152,7 +184,12 @@ var ISLAND_KINDS = [
 	"video",
 	"embed",
 	"file",
-	"component"
+	"component",
+	"gallery",
+	"toc",
+	"columns",
+	"author",
+	"related"
 ];
 function defaultModel(kind, extra) {
 	const base = {
@@ -183,7 +220,8 @@ function defaultModel(kind, extra) {
 		video: () => ({ url: "" }),
 		embed: () => ({
 			url: "",
-			title: ""
+			title: "",
+			labelled: true
 		}),
 		file: () => ({
 			url: "",
@@ -192,6 +230,31 @@ function defaultModel(kind, extra) {
 		component: () => ({
 			id: rid("ci"),
 			overrides: "{}"
+		}),
+		gallery: () => ({
+			layout: "grid",
+			images: []
+		}),
+		toc: () => ({
+			title: "In this article",
+			depth: "3"
+		}),
+		columns: () => ({
+			gap: "m",
+			cols: [{
+				id: rid("col"),
+				html: ""
+			}, {
+				id: rid("col"),
+				html: ""
+			}]
+		}),
+		author: () => ({ author: "" }),
+		related: () => ({
+			title: "Related stories",
+			mode: "topic",
+			count: 3,
+			posts: []
 		})
 	};
 	if (kind === "table") return {
@@ -230,7 +293,7 @@ function renderStatic(kind, model) {
 	switch (kind) {
 		case "image": {
 			const m = model;
-			const img = m.src ? `<img src="${escAttr(m.src)}"${attr("alt", m.alt)}>` : "";
+			const img = m.src ? `<img src="${escAttr(m.src)}"${attr("alt", m.alt)}${frameAttrs(m.crop, m.focal)}>` : "";
 			const linked = img && m.href !== void 0 ? `<a href="${escAttr(m.href)}">${img}</a>` : img;
 			const cap = m.caption !== void 0 ? `<figcaption>${esc(m.caption)}</figcaption>` : "";
 			return `<figure data-rt="image"${attr("data-align", m.align)}${attr("data-size", m.size)}${xAttr(m.extra)}>${linked}${cap}</figure>`;
@@ -266,7 +329,29 @@ function renderStatic(kind, model) {
 		}
 		case "embed": {
 			const m = model;
-			return `<figure data-rt="embed"${attr("data-url", m.url)}${attr("data-title", m.title)}${attr("data-aspect", m.aspect)}${xAttr(m.extra)}>${m.url ? `<a href="${escAttr(m.url)}">${esc(m.title || m.url)}</a>` : ""}</figure>`;
+			return `<figure data-rt="embed"${attr("data-url", m.url)}${attr("data-title", m.title)}${m.labelled ? attr("aria-label", m.title ?? "") : ""}${attr("data-aspect", m.aspect)}${xAttr(m.extra)}>${m.url ? `<a href="${escAttr(m.url)}">${esc(m.title || m.url)}</a>` : ""}</figure>`;
+		}
+		case "gallery": {
+			const m = model;
+			const items = m.images.map((x) => `<li><figure>${x.src ? `<img src="${escAttr(x.src)}" alt="${escAttr(x.alt ?? "")}"${frameAttrs(x.crop, x.focal)}>` : ""}${x.caption ? `<figcaption>${esc(x.caption)}</figcaption>` : ""}</figure></li>`).join("");
+			return `<figure data-rt="gallery"${attr("data-layout", m.layout)}${xAttr(m.extra)}><ul>${items}</ul></figure>`;
+		}
+		case "toc": {
+			const m = model;
+			const title = (m.title ?? "").trim();
+			return `<nav data-rt="toc"${attr("data-depth", m.depth)} aria-label="${escAttr(title || "Table of contents")}"${xAttr(m.extra)}>${title ? `<p data-title>${esc(title)}</p>` : ""}<ol></ol></nav>`;
+		}
+		case "columns": {
+			const m = model;
+			return `<div data-rt="columns"${attr("data-gap", m.gap)} data-cols="${m.cols.length}"${xAttr(m.extra)}>${m.cols.map((c) => `<div data-col="true">${c.html}</div>`).join("")}</div>`;
+		}
+		case "author": {
+			const m = model;
+			return `<aside data-rt="author"${attr("data-author", m.author)}${xAttr(m.extra)}></aside>`;
+		}
+		case "related": {
+			const m = model;
+			return `<aside data-rt="related"${attr("data-mode", m.mode)}${attr("data-count", m.count)} data-posts="${escAttr(m.posts.join(","))}"${xAttr(m.extra)}>${m.title ? `<p data-title>${esc(m.title)}</p>` : ""}</aside>`;
 		}
 		case "file": {
 			const m = model;
@@ -740,8 +825,11 @@ function parseIsland(kind, el) {
 			const img = el.querySelector("img");
 			const a = img?.parentElement?.tagName === "A" ? img.parentElement : null;
 			const cap = el.querySelector(":scope > figcaption");
-			const m = { src: img?.getAttribute("src") ?? "" };
+			const frame = readImageFrame(img);
+			const m = { src: frame.src };
 			if (img?.hasAttribute("alt")) m.alt = img.getAttribute("alt");
+			if (frame.crop) m.crop = frame.crop;
+			if (frame.focal) m.focal = frame.focal;
 			if (cap) m.caption = (cap.textContent ?? "").replace(/\u200b/g, "");
 			const align = oneOf(IMAGE_ALIGNS, attrOf(el, "data-align"));
 			const size = oneOf(IMAGE_SIZES, attrOf(el, "data-size"));
@@ -815,11 +903,75 @@ function parseIsland(kind, el) {
 		case "embed": {
 			const m = {};
 			const url = attrOf(el, "data-url");
-			const title = attrOf(el, "data-title");
+			const title = attrOf(el, "data-title") ?? attrOf(el, "aria-label");
 			const aspect = attrOf(el, "data-aspect");
 			if (url !== void 0) m.url = url;
 			if (title !== void 0) m.title = title;
 			if (aspect !== void 0 && EMBED_ASPECT_VALUES.includes(aspect)) m.aspect = aspect;
+			if (el.hasAttribute("aria-label")) m.labelled = true;
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "gallery": {
+			const m = { images: [] };
+			const layout = attrOf(el, "data-layout");
+			if (layout === "grid" || layout === "carousel") m.layout = layout;
+			m.images = Array.from(el.querySelectorAll("li")).map((li) => {
+				const img = li.querySelector("img");
+				const caption = li.querySelector("figcaption")?.textContent ?? void 0;
+				const frame = readImageFrame(img);
+				return {
+					_key: rid("g"),
+					src: frame.src,
+					...img ? { alt: img.getAttribute("alt") ?? "" } : {},
+					...caption ? { caption } : {},
+					...frame.crop ? { crop: frame.crop } : {},
+					...frame.focal ? { focal: frame.focal } : {}
+				};
+			});
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "toc": {
+			const m = {};
+			const title = el.querySelector("[data-title]")?.textContent?.trim();
+			if (title) m.title = title;
+			const depth = attrOf(el, "data-depth");
+			if (depth === "2" || depth === "3") m.depth = depth;
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "columns": {
+			const m = { cols: Array.from(el.children).filter((c) => c.hasAttribute("data-col")).map((c) => ({
+				id: rid("col"),
+				html: c.innerHTML
+			})) };
+			const gap = attrOf(el, "data-gap");
+			if (gap === "s" || gap === "m" || gap === "l") m.gap = gap;
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "author": {
+			const m = {};
+			const author = attrOf(el, "data-author");
+			if (author !== void 0) m.author = author;
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "related": {
+			const m = { posts: (attrOf(el, "data-posts") ?? "").split(",").map((x) => x.trim()).filter(Boolean) };
+			const title = (attrOf(el, "data-title") ?? el.querySelector("[data-title]")?.textContent ?? "").trim();
+			if (title) m.title = title;
+			const mode = attrOf(el, "data-mode");
+			if (mode === "topic" || mode === "newest" || mode === "manual") m.mode = mode;
+			else if (mode === "auto") m.mode = "topic";
+			const count = Number(attrOf(el, "data-count"));
+			if (Number.isInteger(count) && count > 0) m.count = count;
 			const extra = attrOf(el, "data-extra");
 			if (extra) m.extra = extra;
 			return m;
@@ -1023,6 +1175,6 @@ function rangeRect(r, fallback) {
 }
 var isEmptyHtml = (html) => !html.replace(/<(?!img|hr|figure|table|details|div data-rt)[^>]*>/g, "").replace(/&nbsp;/g, "").trim();
 //#endregion
-export { CALLOUT_TONES, IMAGE_ALIGNS, IMAGE_SIZES, ISLAND_KINDS, STORED_COLUMN_TYPES, TEXT_BLOCKS, cloneModel, closestBlock, colAttrs, colSettingsOf, columnSettings, createIsland, defaultModel, detectEmbed, detectKind, editingHost, editorRoundTrip, esc, escAttr, hydrate, isEmptyHtml, isValueType, parasToText, parseIsland, parseStoredTable, placeCaret, rangeRect, renderStatic, renderStoredTable, rid, sanitize, serialize, textBeforeCaret, textToParas, topBlock, typeAttrOf, typedCellView, typedValueOf, typedWords };
+export { CALLOUT_TONES, IMAGE_ALIGNS, IMAGE_SIZES, ISLAND_KINDS, STORED_COLUMN_TYPES, TEXT_BLOCKS, cloneModel, closestBlock, colAttrs, colSettingsOf, columnSettings, createIsland, defaultModel, detectEmbed, detectKind, editingHost, editorRoundTrip, esc, escAttr, hydrate, isEmptyHtml, isValueType, parasToText, parseIsland, parseStoredTable, placeCaret, rangeRect, readImageFrame, renderStatic, renderStoredTable, rid, sanitize, serialize, textBeforeCaret, textToParas, topBlock, typeAttrOf, typedCellView, typedValueOf, typedWords };
 
 //# sourceMappingURL=dom.js.map