@broberg/cms-inline-edit 0.5.3 → 0.5.5

package/dist/index.cjs

@@ -26,7 +26,10 @@ __export(index_exports, {
   getConnectedToken: () => getConnectedToken,
   htmlToMarkdown: () => htmlToMarkdown,
   initInlineEdit: () => initInlineEdit,
-  rescanFields: () => rescanFields
+  positionPopover: () => positionPopover,
+  renderCurrentRefLine: () => renderCurrentRefLine,
+  rescanFields: () => rescanFields,
+  resolveExistingRef: () => resolveExistingRef
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -102,7 +105,8 @@ var DEFAULT_LABELS = {
   linkYes: "Ja",
   linkNo: "Nej",
   linkEmpty: "Ingen sider fundet",
-  linkLoading: "Henter sider\u2026"
+  linkLoading: "Henter sider\u2026",
+  linkCurrent: "Linker til"
 };
 var uiLabels = DEFAULT_LABELS;
 function resolveOptions(options) {
@@ -499,6 +503,22 @@ async function fetchLinkablePages() {
   linkPages = body.pages ?? [];
   return linkPages;
 }
+function positionPopover(el, rect, gap, width) {
+  const MARGIN = 8;
+  const vh = window.innerHeight;
+  const vw = window.innerWidth;
+  el.style.maxHeight = `${Math.max(120, vh - MARGIN * 2)}px`;
+  el.style.overflowY = "auto";
+  el.style.display = "block";
+  const h = el.getBoundingClientRect().height || el.offsetHeight || 0;
+  let top = rect.bottom + gap;
+  if (top + h > vh - MARGIN) {
+    const above = rect.top - gap - h;
+    top = above >= MARGIN ? above : vh - MARGIN - h;
+  }
+  el.style.top = `${Math.max(MARGIN, top)}px`;
+  el.style.left = `${Math.max(MARGIN, Math.min(rect.left, vw - width - MARGIN))}px`;
+}
 function toggleLinkDialog(anchor) {
   if (linkDialog && linkDialog.style.display === "block") {
     hideLinkDialog();
@@ -510,9 +530,12 @@ function toggleLinkDialog(anchor) {
   if (!linkDialog) linkDialog = buildLinkDialog();
   renderLinkDialog();
   const rect = anchor.getBoundingClientRect();
-  linkDialog.style.top = `${rect.bottom + 8}px`;
-  linkDialog.style.left = `${Math.min(Math.max(8, rect.left - 180), window.innerWidth - 400)}px`;
-  linkDialog.style.display = "block";
+  positionPopover(
+    linkDialog,
+    { top: rect.top, bottom: rect.bottom, left: rect.left - 180 },
+    8,
+    392
+  );
 }
 function buildLinkDialog() {
   const d = document.createElement("div");
@@ -534,7 +557,7 @@ function renderLinkDialog() {
   const editing = !!linkEditing;
   const existingRef = linkEditing?.getAttribute("data-cms-ref") ?? "";
   const onPageTab = !editing || !!existingRef;
-  d.innerHTML = `<div style="display:flex;gap:4px;padding:8px 8px 0"><button type="button" data-testid="inline-link-tab-page" data-tab="page" style="${tabCss(onPageTab)}">${L.linkTabPage}</button><button type="button" data-testid="inline-link-tab-url" data-tab="url" style="${tabCss(!onPageTab)}">${L.linkTabUrl}</button></div><div style="padding:10px 12px 12px"><div data-pane="page" style="display:${onPageTab ? "block" : "none"}"><input data-testid="inline-link-search" data-role="search" placeholder="${L.linkSearch}" style="${fieldCss()}"><div data-role="list" data-testid="inline-link-list" style="margin-top:8px;max-height:196px;overflow-y:auto;border:1px solid #3a3f4a;border-radius:8px;background:#141821"></div></div><div data-pane="url" style="display:${onPageTab ? "none" : "block"}"><label style="${labelCss()}">${L.linkUrl}</label><input data-testid="inline-link-url" data-role="url" placeholder="https://\u2026" style="${fieldCss()}"></div><label style="${labelCss()}">${L.linkText}</label><input data-testid="inline-link-text" data-role="text" placeholder="${L.linkTextAuto}" style="${fieldCss()}"><p data-role="hint" style="font-size:11.5px;color:#9aa3b2;margin:6px 0 0;line-height:1.5"></p><div data-role="live" style="display:flex;gap:8px;margin-top:12px;padding:9px 10px;background:rgba(0,178,255,.08);border:1px solid rgba(0,178,255,.28);border-radius:8px"><p style="margin:0;font-size:11.5px;color:#c9d1dd;line-height:1.55">${L.linkLiveHint}</p></div><div style="display:flex;gap:8px;align-items:center;margin-top:14px"><div data-role="remove"></div><div style="flex:1"></div><button type="button" data-testid="inline-link-cancel" data-role="cancel" style="${btnCss(false)}">${L.linkCancel}</button><button type="button" data-testid="inline-link-submit" data-role="submit" style="${btnCss(true)}" disabled>${editing ? L.linkSave : L.linkInsert}</button></div></div>`;
+  d.innerHTML = `<div style="display:flex;gap:4px;padding:8px 8px 0"><button type="button" data-testid="inline-link-tab-page" data-tab="page" style="${tabCss(onPageTab)}">${L.linkTabPage}</button><button type="button" data-testid="inline-link-tab-url" data-tab="url" style="${tabCss(!onPageTab)}">${L.linkTabUrl}</button></div><div style="padding:10px 12px 12px"><div data-pane="page" style="display:${onPageTab ? "block" : "none"}"><input data-testid="inline-link-search" data-role="search" placeholder="${L.linkSearch}" style="${fieldCss()}"><div data-role="current" data-testid="inline-link-current" style="display:none;margin-top:8px;padding:7px 10px;background:rgba(0,178,255,.08);border:1px solid rgba(0,178,255,.28);border-radius:8px;font-size:11.5px;color:#c9d1dd;line-height:1.45"></div><div data-role="list" data-testid="inline-link-list" style="margin-top:8px;max-height:196px;overflow-y:auto;border:1px solid #3a3f4a;border-radius:8px;background:#141821"></div></div><div data-pane="url" style="display:${onPageTab ? "none" : "block"}"><label style="${labelCss()}">${L.linkUrl}</label><input data-testid="inline-link-url" data-role="url" placeholder="https://\u2026" style="${fieldCss()}"></div><label style="${labelCss()}">${L.linkText}</label><input data-testid="inline-link-text" data-role="text" placeholder="${L.linkTextAuto}" style="${fieldCss()}"><p data-role="hint" style="font-size:11.5px;color:#9aa3b2;margin:6px 0 0;line-height:1.5"></p><div data-role="live" style="display:flex;gap:8px;margin-top:12px;padding:9px 10px;background:rgba(0,178,255,.08);border:1px solid rgba(0,178,255,.28);border-radius:8px"><p style="margin:0;font-size:11.5px;color:#c9d1dd;line-height:1.55">${L.linkLiveHint}</p></div><div style="display:flex;gap:8px;align-items:center;margin-top:14px"><div data-role="remove"></div><div style="flex:1"></div><button type="button" data-testid="inline-link-cancel" data-role="cancel" style="${btnCss(false)}">${L.linkCancel}</button><button type="button" data-testid="inline-link-submit" data-role="submit" style="${btnCss(true)}" disabled>${editing ? L.linkSave : L.linkInsert}</button></div></div>`;
   const q = (role) => d.querySelector(`[data-role="${role}"]`);
   const text = q("text");
   const urlIn = q("url");
@@ -589,6 +612,28 @@ function buildRemoveLink() {
   wrap.appendChild(btn);
   return wrap;
 }
+function resolveExistingRef(ref, pages) {
+  if (!ref) return null;
+  const [collection, ...rest] = ref.split(":");
+  const slug = rest.join(":");
+  if (!collection || !slug) return null;
+  return pages.find((p) => p.collection === collection && p.slug === slug) ?? null;
+}
+function renderCurrentRefLine(box, ref, pages) {
+  if (!ref) {
+    box.style.display = "none";
+    box.innerHTML = "";
+    return;
+  }
+  const label = escapeHtml(uiLabels.linkCurrent);
+  const page = resolveExistingRef(ref, pages);
+  box.style.display = "block";
+  box.innerHTML = page ? `${label}: <strong>${escapeHtml(page.title)}</strong> <span style="color:#9aa3b2;font-family:ui-monospace,Menlo,monospace">${escapeHtml(page.path)}</span>` : `${label}: <span style="font-family:ui-monospace,Menlo,monospace">${escapeHtml(ref)}</span>`;
+}
+function paintCurrentRef(pages) {
+  const box = linkDialog?.querySelector('[data-role="current"]');
+  if (box) renderCurrentRefLine(box, linkEditing?.getAttribute("data-cms-ref"), pages ?? []);
+}
 function renderLinkList(filter) {
   const d = linkDialog;
   if (!d) return;
@@ -614,19 +659,21 @@ function renderLinkList(filter) {
         syncLinkDialog();
       };
       list.appendChild(row);
+      if (on) row.scrollIntoView?.({ block: "nearest" });
     });
   };
+  const preselect = (pages) => {
+    if (!linkPicked) linkPicked = resolveExistingRef(linkEditing?.getAttribute("data-cms-ref"), pages);
+    paintCurrentRef(pages);
+  };
   if (linkPages) {
+    preselect(linkPages);
     paint(linkPages);
     return;
   }
   list.innerHTML = `<div style="padding:10px;font-size:12.5px;color:#9aa3b2">${uiLabels.linkLoading}</div>`;
   fetchLinkablePages().then((pages) => {
-    const ref = linkEditing?.getAttribute("data-cms-ref");
-    if (ref && !linkPicked) {
-      const [c, ...rest] = ref.split(":");
-      linkPicked = pages.find((p) => p.collection === c && p.slug === rest.join(":")) ?? null;
-    }
+    preselect(pages);
     paint(pages);
     syncLinkDialog();
   }).catch(() => {
@@ -701,9 +748,7 @@ function toggleEmojiPicker(anchor) {
   const sel = window.getSelection();
   if (sel && sel.rangeCount > 0) savedRange = sel.getRangeAt(0).cloneRange();
   const rect = anchor.getBoundingClientRect();
-  emojiPicker.style.top = `${rect.bottom + 6}px`;
-  emojiPicker.style.left = `${Math.min(rect.left, window.innerWidth - 240)}px`;
-  emojiPicker.style.display = "block";
+  positionPopover(emojiPicker, rect, 6, 230);
 }
 function hideEmojiPicker() {
   if (emojiPicker) emojiPicker.style.display = "none";
@@ -836,7 +881,7 @@ function serializeBlockChildren(parent) {
       const s = serializeBlock(node).trim();
       if (s) blocks.push(s);
     } else {
-      inlineRun += serializeInlineNode(node);
+      inlineRun = joinInline(inlineRun, serializeInlineNode(node));
     }
   });
   flushInline();
@@ -916,10 +961,41 @@ function serializeList(listEl, ordered) {
 function escapeAttr(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
 }
+function preservedLinkAttrs(el) {
+  const out = [];
+  for (const attr of Array.from(el.attributes)) {
+    const name = attr.name.toLowerCase();
+    if (name === "href") continue;
+    if (name.startsWith("on")) continue;
+    if (/^javascript:/i.test(attr.value.trim())) continue;
+    out.push(`${name}="${escapeAttr(attr.value)}"`);
+  }
+  return out;
+}
+var HARD_BREAK = "  \n";
+function edgeWhitespace(ws) {
+  if (!ws) return "";
+  return /\n/.test(ws) ? HARD_BREAK : " ";
+}
+function wrapEmphasis(inner, delimiter) {
+  const core = inner.trim();
+  if (!core) return "";
+  const lead = edgeWhitespace(inner.slice(0, inner.length - inner.trimStart().length));
+  const trail = edgeWhitespace(inner.slice(inner.trimEnd().length));
+  return lead + delimiter + core + delimiter + trail;
+}
+function joinInline(out, piece) {
+  if (!piece) return out;
+  const outTail = /\s*$/.exec(out)[0];
+  const pieceHead = /^\s*/.exec(piece)[0];
+  if (!outTail || !pieceHead) return out + piece;
+  const merged = /\n/.test(outTail + pieceHead) ? HARD_BREAK : " ";
+  return out.slice(0, out.length - outTail.length) + merged + piece.slice(pieceHead.length);
+}
 function serializeInline(node) {
   let out = "";
   node.childNodes.forEach((child) => {
-    out += serializeInlineNode(child);
+    out = joinInline(out, serializeInlineNode(child));
   });
   return out;
 }
@@ -936,11 +1012,11 @@ function serializeInlineNode(child) {
     switch (tag) {
       case "strong":
       case "b":
-        out += inner.trim() ? `**${inner.trim()}**` : "";
+        out += wrapEmphasis(inner, "**");
         break;
       case "em":
       case "i":
-        out += inner.trim() ? `*${inner.trim()}*` : "";
+        out += wrapEmphasis(inner, "*");
         break;
       case "code":
         out += "`" + inner + "`";
@@ -950,12 +1026,9 @@ function serializeInlineNode(child) {
         break;
       case "a": {
         const href = el.getAttribute("href") || "";
-        const ref = el.getAttribute("data-cms-ref");
-        if (ref) {
-          const attrs = [`href="${escapeAttr(href)}"`, `data-cms-ref="${escapeAttr(ref)}"`];
-          const label = el.getAttribute("data-cms-ref-label");
-          if (label) attrs.push(`data-cms-ref-label="${escapeAttr(label)}"`);
-          out += `<a ${attrs.join(" ")}>${inner}</a>`;
+        const extras = preservedLinkAttrs(el);
+        if (extras.length > 0) {
+          out += `<a ${[`href="${escapeAttr(href)}"`, ...extras].join(" ")}>${inner}</a>`;
         } else {
           out += href ? `[${inner}](${href})` : inner;
         }
@@ -1090,6 +1163,9 @@ function injectStyles() {
   getConnectedToken,
   htmlToMarkdown,
   initInlineEdit,
-  rescanFields
+  positionPopover,
+  renderCurrentRefLine,
+  rescanFields,
+  resolveExistingRef
 });
 //# sourceMappingURL=index.cjs.map