@broberg/cms-inline-edit 0.5.3 → 0.5.5

package/dist/index.d.ts

@@ -52,6 +52,7 @@ interface InlineEditLabels {
     linkNo?: string;
     linkEmpty?: string;
     linkLoading?: string;
+    linkCurrent?: string;
 }
 interface InlineEditOptions {
     /** Base URL of the CMS API, e.g. "https://webhouse.app". */
@@ -109,6 +110,51 @@ declare function disconnect(options: InlineEditOptions): void;
  * MPA consumers (broberg: full reload per navigation re-runs init) never need it.
  */
 declare function rescanFields(): void;
+interface LinkablePage {
+    collection: string;
+    slug: string;
+    title: string;
+    path: string;
+    label: string;
+}
+/**
+ * Place a fixed-position popover so it stays fully inside the viewport.
+ *
+ * The link dialog used to be pinned at `rect.bottom + gap` unconditionally,
+ * with `overflow:hidden` and no max-height. On a short laptop screen the
+ * dialog's footer — where Gem and Annullér live — sat below the bottom edge
+ * with no way to reach it: the dialog could not scroll and the page behind it
+ * did not move. The editor could open the dialog and fill it in, but not save.
+ * (Reported from production 2026-08-26.)
+ *
+ * Order matters: the element has to be laid out before its height can be
+ * measured, so display is switched on first and the final `top` written after.
+ *
+ * @param width  the popover's own fixed width, used to clamp `left`.
+ */
+declare function positionPopover(el: HTMLElement, rect: {
+    top: number;
+    bottom: number;
+    left: number;
+}, gap: number, width: number): void;
+/**
+ * Find the page an existing `data-cms-ref` points at.
+ *
+ * A slug may itself contain a colon, so only the FIRST segment is the
+ * collection and everything after it is the slug.
+ */
+declare function resolveExistingRef(ref: string | null | undefined, pages: LinkablePage[]): LinkablePage | null;
+/**
+ * Render the "currently points at" line for the link being edited.
+ *
+ * Pure over its arguments so the wording can be pinned by a test. Reading the
+ * highlighted row is not enough on its own: it can sit outside the list's 196px
+ * window, and a reference to a page that is no longer linkable has no row to
+ * highlight at all. Christian, 2026-08-26: "når jeg redigerer et eksisterende
+ * link til egen side skal den også vise hvilken vi linker til." A missing page
+ * shows its raw reference rather than saying nothing.
+ */
+declare function renderCurrentRefLine(box: HTMLElement, ref: string | null | undefined, pages: LinkablePage[]): void;
 /**
  * Converts an edited contenteditable region's innerHTML back to Markdown so a
  * rich article body round-trips through the cms `richtext` contract (fields
@@ -122,4 +168,4 @@ declare function rescanFields(): void;
  */
 declare function htmlToMarkdown(html: string): string;
 
-export { type InlineEditLabels, type InlineEditOptions, applyFieldSlice, buildConnectUrl, disconnect, getConnectedToken, htmlToMarkdown, initInlineEdit, rescanFields };
+export { type InlineEditLabels, type InlineEditOptions, applyFieldSlice, buildConnectUrl, disconnect, getConnectedToken, htmlToMarkdown, initInlineEdit, positionPopover, renderCurrentRefLine, rescanFields, resolveExistingRef };

package/dist/index.js

@@ -70,7 +70,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) {
@@ -467,6 +468,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();
@@ -478,9 +495,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");
@@ -502,7 +522,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");
@@ -557,6 +577,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;
@@ -582,19 +624,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(() => {
@@ -669,9 +713,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";
@@ -804,7 +846,7 @@ function serializeBlockChildren(parent) {
       const s = serializeBlock(node).trim();
       if (s) blocks.push(s);
     } else {
-      inlineRun += serializeInlineNode(node);
+      inlineRun = joinInline(inlineRun, serializeInlineNode(node));
     }
   });
   flushInline();
@@ -884,10 +926,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;
 }
@@ -904,11 +977,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 + "`";
@@ -918,12 +991,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;
         }
@@ -1057,6 +1127,9 @@ export {
   getConnectedToken,
   htmlToMarkdown,
   initInlineEdit,
-  rescanFields
+  positionPopover,
+  renderCurrentRefLine,
+  rescanFields,
+  resolveExistingRef
 };
 //# sourceMappingURL=index.js.map