@threadlabs/looma 0.16.3 → 0.16.5

package/editor/chunks/extensions.js

@@ -8631,6 +8631,13 @@ function parseHtmlSlice(schema, value) {
 	const parsed = new globalThis.DOMParser().parseFromString(value, "text/html");
 	if (parsed.body.style.display === "none") return Slice.empty;
 	for (const element of parsed.body.querySelectorAll("[style]")) if (element.style.display === "none") element.remove();
+	for (const wrapper of parsed.body.querySelectorAll("div")) for (const child of wrapper.children) {
+		const next = child.nextSibling;
+		if (child.localName !== "span" || next?.nodeType !== 1 || next.localName !== "span") continue;
+		if (!child.textContent?.trim() || !next.textContent?.trim()) continue;
+		if (/\s$/.test(child.textContent) || /^\s/.test(next.textContent)) continue;
+		wrapper.insertBefore(parsed.createTextNode(" "), next);
+	}
 	const container = document.createElement("div");
 	container.append(purify.sanitize(parsed.body.innerHTML, {
 		USE_PROFILES: { html: true },
@@ -8648,8 +8655,20 @@ function parseHtmlSlice(schema, value) {
 	if (!container.textContent?.trim() && !container.querySelector("img, hr")) return Slice.empty;
 	return DOMParser.fromSchema(schema).parseSlice(container, { preserveWhitespace: false });
 }
+function markdownFrontmatter(value) {
+	const match = /^---[ \t]*\r?\n([\s\S]*?)\r?\n(?:---|\.\.\.)[ \t]*(?:\r?\n|$)/.exec(value.slice(0, 8192));
+	if (!match || !/^[A-Za-z][\w-]*:[ \t]*\S/m.test(match[1])) return null;
+	return {
+		source: match[0].trimEnd(),
+		body: value.slice(match[0].length)
+	};
+}
+function escapeHtmlText(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
 function documentSlice(schema, plainText) {
-	if (looksLikeMarkdown(plainText)) return parseHtmlSlice(schema, markdown.render(plainText));
+	const frontmatter = markdownFrontmatter(plainText);
+	if (frontmatter || looksLikeMarkdown(plainText)) return parseHtmlSlice(schema, frontmatter ? `<pre><code class="language-yaml">${escapeHtmlText(frontmatter.source)}</code></pre>${markdown.render(frontmatter.body)}` : markdown.render(plainText));
 	if (looksLikeDocumentHtml(plainText)) return parseHtmlSlice(schema, plainText);
 	return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.16.3",
+  "version": "0.16.5",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/components.css

@@ -8929,7 +8929,7 @@ html[data-ui-input-modality="touch"]
 .ProseMirror table {
   border-collapse: collapse;
   margin: 0;
-  width: max-content !important;
+  width: 100% !important;
   min-width: 100%;
   max-width: none !important;
   table-layout: fixed;

package/vue/editor/index.js

@@ -495,6 +495,7 @@ var LoomaEditor = defineComponent({
 		});
 		const imageDelivery = createLoomaImageDeliveryController({ resolveAttributes: () => props.resolveImageAttributes });
 		let lastFocusedSelection = null;
+		let linkPressedSelection = null;
 		const rememberSelection = (instance) => {
 			if (!instance.isFocused) return;
 			const selection = instance.view.state.selection;
@@ -541,8 +542,10 @@ var LoomaEditor = defineComponent({
 			if (!instance || !props.editable) return;
 			const current = instance.state.selection;
 			const preserved = lastFocusedSelection?.text && lastFocusedSelection.from !== lastFocusedSelection.to ? lastFocusedSelection : null;
-			const from = current.empty && preserved ? preserved.from : current.from;
-			const to = current.empty && preserved ? preserved.to : current.to;
+			const selection = linkPressedSelection ?? (current.empty ? preserved : null);
+			linkPressedSelection = null;
+			const from = selection?.from ?? current.from;
+			const to = selection?.to ?? current.to;
 			const empty = from === to;
 			const existing = instance.isActive("link");
 			linkSelection = {
@@ -1084,6 +1087,13 @@ var LoomaEditor = defineComponent({
 					"data-active": instance.isActive("link") ? "true" : "false",
 					onPointerenter: () => showTool(linkAnchorId, "Link", false),
 					onPointerleave: hideTool,
+					onPointerdown: () => {
+						const selection = instance.state.selection;
+						linkPressedSelection = selection.empty ? null : {
+							from: selection.from,
+							to: selection.to
+						};
+					},
 					onFocusin: () => showTool(linkAnchorId, "Link", true),
 					onFocusout: hideTool
 				}, () => loomaIcon("link")),
@@ -1282,7 +1292,7 @@ var LoomaEditor = defineComponent({
 					class: "looma-editor__chip-popover",
 					open: chipOpen.value,
 					for: chipAnchorId,
-					placement: mobile.value ? "top-start" : "bottom-start",
+					placement: "bottom-start",
 					onClose: () => {
 						chipOpen.value = false;
 					}
@@ -1334,6 +1344,7 @@ var LoomaEditor = defineComponent({
 					onOpen: openLinkEditor,
 					onClose: () => {
 						linkOpen.value = false;
+						linkPressedSelection = null;
 					}
 				}, () => h("form", {
 					class: "looma-editor__link-form",