@heyramzi/ui 2.11.0 → 2.11.2

package/dist/editor/extensions.js

@@ -8,193 +8,152 @@ import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table
 import { BlockIdExtension } from "./block-id.js";
 import { CodeBlockChrome, HeadingAnchors } from "./doc-blocks.js";
 const CmsBlock = TiptapNode.create({
-    name: "cmsBlock",
-    group: "block",
-    atom: true,
-    draggable: true,
-    selectable: true,
-    addAttributes () {
-        return {
-            blockType: {
-                default: "unknown"
-            },
-            data: {
-                default: {}
-            }
-        };
-    },
-    parseHTML () {
-        return [
-            {
-                tag: 'div[data-type="cms-block"]'
-            }
-        ];
-    },
-    renderHTML ({ HTMLAttributes }) {
-        const blockType = typeof HTMLAttributes.blockType === "string" ? HTMLAttributes.blockType : "unknown";
-        const { data: _data, blockType: _blockType, ...attrs } = HTMLAttributes;
-        return [
-            "div",
-            mergeAttributes(attrs, {
-                class: "cms-block-node",
-                "data-type": "cms-block",
-                "data-block-type": blockType
-            }),
-            [
-                "strong",
-                {},
-                "CMS block"
-            ],
-            [
-                "span",
-                {},
-                ` ${blockType}`
-            ]
-        ];
-    }
+	name: "cmsBlock",
+	group: "block",
+	atom: true,
+	draggable: true,
+	selectable: true,
+	addAttributes() {
+		return {
+			blockType: { default: "unknown" },
+			data: { default: {} }
+		};
+	},
+	parseHTML() {
+		return [{ tag: "div[data-type=\"cms-block\"]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		const blockType = typeof HTMLAttributes.blockType === "string" ? HTMLAttributes.blockType : "unknown";
+		const { data: _data, blockType: _blockType, ...attrs } = HTMLAttributes;
+		return [
+			"div",
+			mergeAttributes(attrs, {
+				class: "cms-block-node",
+				"data-type": "cms-block",
+				"data-block-type": blockType
+			}),
+			[
+				"strong",
+				{},
+				"CMS block"
+			],
+			[
+				"span",
+				{},
+				` ${blockType}`
+			]
+		];
+	}
 });
+// WHY: the same facade markup as serializer.ts, so authors see what ships. The
+// editor only needs an atomic node; click-to-load lives in renderer.svelte.
 const Youtube = TiptapNode.create({
-    name: "youtube",
-    group: "block",
-    atom: true,
-    draggable: true,
-    selectable: true,
-    addAttributes () {
-        return {
-            videoId: {
-                default: null
-            },
-            title: {
-                default: ""
-            },
-            start: {
-                default: 0
-            }
-        };
-    },
-    parseHTML () {
-        return [
-            {
-                tag: "div[data-video-id]"
-            }
-        ];
-    },
-    renderHTML ({ HTMLAttributes }) {
-        const videoId = typeof HTMLAttributes.videoId === "string" ? HTMLAttributes.videoId : "";
-        const title = typeof HTMLAttributes.title === "string" ? HTMLAttributes.title : "";
-        const start = typeof HTMLAttributes.start === "number" ? HTMLAttributes.start : 0;
-        return [
-            "div",
-            mergeAttributes({
-                class: "tiptap-youtube",
-                "data-video-id": videoId,
-                "data-start": String(start)
-            }),
-            [
-                "button",
-                {
-                    type: "button",
-                    class: "tiptap-youtube-trigger",
-                    "aria-label": `Play video: ${title}`
-                },
-                [
-                    "img",
-                    {
-                        class: "tiptap-youtube-poster",
-                        src: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
-                        alt: "",
-                        loading: "lazy",
-                        width: "480",
-                        height: "360"
-                    }
-                ],
-                [
-                    "span",
-                    {
-                        class: "tiptap-youtube-play",
-                        "aria-hidden": "true"
-                    }
-                ],
-                [
-                    "span",
-                    {
-                        class: "tiptap-youtube-title"
-                    },
-                    title
-                ]
-            ]
-        ];
-    }
+	name: "youtube",
+	group: "block",
+	atom: true,
+	draggable: true,
+	selectable: true,
+	addAttributes() {
+		return {
+			videoId: { default: null },
+			title: { default: "" },
+			start: { default: 0 }
+		};
+	},
+	parseHTML() {
+		return [{ tag: "div[data-video-id]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		const videoId = typeof HTMLAttributes.videoId === "string" ? HTMLAttributes.videoId : "";
+		const title = typeof HTMLAttributes.title === "string" ? HTMLAttributes.title : "";
+		const start = typeof HTMLAttributes.start === "number" ? HTMLAttributes.start : 0;
+		return [
+			"div",
+			mergeAttributes({
+				class: "tiptap-youtube",
+				"data-video-id": videoId,
+				"data-start": String(start)
+			}),
+			[
+				"button",
+				{
+					type: "button",
+					class: "tiptap-youtube-trigger",
+					"aria-label": `Play video: ${title}`
+				},
+				["img", {
+					class: "tiptap-youtube-poster",
+					src: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
+					alt: "",
+					loading: "lazy",
+					width: "480",
+					height: "360"
+				}],
+				["span", {
+					class: "tiptap-youtube-play",
+					"aria-hidden": "true"
+				}],
+				[
+					"span",
+					{ class: "tiptap-youtube-title" },
+					title
+				]
+			]
+		];
+	}
 });
 function dedupeExtensions(extensions) {
-    const seen = new Set();
-    return extensions.filter((extension)=>{
-        if (!extension || typeof extension !== "object") return false;
-        const name = "name" in extension && typeof extension.name === "string" ? extension.name : "";
-        if (!name) return true;
-        if (seen.has(name)) return false;
-        seen.add(name);
-        return true;
-    });
+	const seen = new Set();
+	return extensions.filter((extension) => {
+		if (!extension || typeof extension !== "object") return false;
+		const name = "name" in extension && typeof extension.name === "string" ? extension.name : "";
+		if (!name) return true;
+		if (seen.has(name)) return false;
+		seen.add(name);
+		return true;
+	});
 }
 const DRAG_DOTS = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="2.5" cy="2.5" r="1" fill="currentColor"/><circle cx="2.5" cy="6" r="1" fill="currentColor"/><circle cx="2.5" cy="9.5" r="1" fill="currentColor"/><circle cx="6" cy="2.5" r="1" fill="currentColor"/><circle cx="6" cy="6" r="1" fill="currentColor"/><circle cx="6" cy="9.5" r="1" fill="currentColor"/></svg>`;
 function dragHandle() {
-    return DragHandle.configure({
-        render () {
-            const el = document.createElement("div");
-            el.classList.add("drag-handle");
-            el.innerHTML = DRAG_DOTS;
-            return el;
-        }
-    });
+	return DragHandle.configure({ render() {
+		const el = document.createElement("div");
+		el.classList.add("drag-handle");
+		el.innerHTML = DRAG_DOTS;
+		return el;
+	} });
 }
+/** The extension list for a preset: `full` adds CMS blocks, YouTube, images and H4. */
 export function buildExtensions({ preset, placeholder, blockIds, anchors = false }) {
-    const full = preset === "full";
-    return dedupeExtensions([
-        StarterKit.configure({
-            heading: {
-                levels: full ? [
-                    1,
-                    2,
-                    3,
-                    4
-                ] : [
-                    1,
-                    2,
-                    3
-                ]
-            },
-            link: {
-                openOnClick: false
-            }
-        }),
-        ...full ? [
-            CmsBlock,
-            Youtube,
-            Image.configure({
-                inline: false
-            }),
-            TaskList,
-            TaskItem.configure({
-                nested: true
-            }),
-            Table.configure({
-                resizable: false
-            }),
-            TableRow,
-            TableHeader,
-            TableCell,
-            CodeBlockChrome
-        ] : [],
-        ...anchors ? [
-            HeadingAnchors.configure(anchors)
-        ] : [],
-        Placeholder.configure({
-            placeholder
-        }),
-        dragHandle(),
-        ...blockIds ? [
-            BlockIdExtension
-        ] : []
-    ]);
+	const full = preset === "full";
+	return dedupeExtensions([
+		StarterKit.configure({
+			heading: { levels: full ? [
+				1,
+				2,
+				3,
+				4
+			] : [
+				1,
+				2,
+				3
+			] },
+			link: { openOnClick: false }
+		}),
+		...full ? [
+			CmsBlock,
+			Youtube,
+			Image.configure({ inline: false }),
+			TaskList,
+			TaskItem.configure({ nested: true }),
+			Table.configure({ resizable: false }),
+			TableRow,
+			TableHeader,
+			TableCell,
+			CodeBlockChrome
+		] : [],
+		...anchors ? [HeadingAnchors.configure(anchors)] : [],
+		Placeholder.configure({ placeholder }),
+		dragHandle(),
+		...blockIds ? [BlockIdExtension] : []
+	]);
 }

package/dist/editor/index.js

@@ -2,3 +2,7 @@ export { default as RichEditor } from "../../src/editor/editor.svelte";
 export { default as RichRenderer } from "../../src/editor/renderer.svelte";
 export { renderTiptapContent, extractHeadings, extractYoutubeVideos } from "./serializer.js";
 export { BlockIdExtension, generateBlockId } from "./block-id.js";
+// WHY: the markdown bridge and block-ops pull in markdown-it, so they aren't
+// re-exported here. Blog pages would bundle it. Import from their subpaths:
+//   @heyramzi/ui/editor/markdown
+//   @heyramzi/ui/editor/block-ops

package/dist/editor/markdown-test-helpers.js

@@ -1,6 +1,8 @@
+/** The top-level block nodes of a doc. */
 export function blocks(doc) {
-    return doc.content;
+	return doc.content;
 }
+/** True when every top-level block carries a string id. */
 export function allHaveIds(doc) {
-    return doc.content.every((n)=>typeof n.attrs?.id === "string" && n.attrs.id.length > 0);
+	return doc.content.every((n) => typeof n.attrs?.id === "string" && n.attrs.id.length > 0);
 }