@broberg/cms-inline-edit 0.5.4 → 0.6.0

package/dist/index.cjs

@@ -26,7 +26,11 @@ __export(index_exports, {
   getConnectedToken: () => getConnectedToken,
   htmlToMarkdown: () => htmlToMarkdown,
   initInlineEdit: () => initInlineEdit,
-  rescanFields: () => rescanFields
+  positionPopover: () => positionPopover,
+  renderCurrentRefLine: () => renderCurrentRefLine,
+  rescanFields: () => rescanFields,
+  resolveExistingRef: () => resolveExistingRef,
+  setLinkTarget: () => setLinkTarget
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -40,6 +44,30 @@ function applyFieldSlice(current, original, next) {
   return current.slice(0, first) + next + current.slice(first + original.length);
 }
 
+// src/link-target.ts
+function isSchemeless(raw) {
+  const v = (raw || "").trim();
+  if (!v) return false;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(v)) return false;
+  if (v.startsWith("//")) return false;
+  if (v.startsWith("/")) return false;
+  if (v.startsWith("#")) return false;
+  if (v.startsWith("?")) return false;
+  return true;
+}
+function withHttps(raw) {
+  return `https://${(raw || "").trim().replace(/^\/+/, "")}`;
+}
+function isExternalHost(raw, currentHost) {
+  const v = (raw || "").trim();
+  if (!/^https?:\/\//i.test(v)) return false;
+  try {
+    return new URL(v).host.toLowerCase() !== (currentHost || "").toLowerCase();
+  } catch {
+    return false;
+  }
+}
+
 // src/token-safe.ts
 var TEXT_NODE = 3;
 var ELEMENT_NODE = 1;
@@ -94,6 +122,9 @@ var DEFAULT_LABELS = {
   linkLiveHint: "Linket peger p\xE5 <b>siden</b> \u2014 ikke p\xE5 en adresse. Flyttes siden, eller f\xE5r den et nyt navn, retter linket sig selv.",
   linkUrlHint: "En fri adresse peger pr\xE6cis d\xE9r, du skriver. Den f\xF8lger <b>ikke</b> med, hvis m\xE5let flytter sig.",
   linkUrl: "Adresse",
+  linkNewTab: "\xC5bn i ny fane",
+  linkSchemeless: "<b>{v}</b> l\xE6ses som en side p\xE5 <b>dette</b> site \u2014 ikke som en adresse ude p\xE5 nettet.",
+  linkSchemelessFix: "Tilf\xF8j https://",
   linkInsert: "Inds\xE6t link",
   linkSave: "Gem \xE6ndring",
   linkCancel: "Annull\xE9r",
@@ -102,7 +133,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) {
@@ -470,6 +502,8 @@ var savedRange = null;
 var linkDialog = null;
 var linkPages = null;
 var linkPicked = null;
+var linkNewTab = false;
+var linkNewTabTouched = false;
 var linkEditing = null;
 function hideLinkDialog() {
   if (linkDialog) linkDialog.style.display = "none";
@@ -499,6 +533,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 +560,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");
@@ -532,9 +585,13 @@ function renderLinkDialog() {
   if (!d) return;
   const L = uiLabels;
   const editing = !!linkEditing;
+  if (!editing) {
+    linkNewTab = false;
+    linkNewTabTouched = false;
+  }
   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 data-role="schemeless" data-testid="inline-link-schemeless" style="display:none;margin-top:8px;padding:8px 10px;background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.34);border-radius:8px"><p data-role="schemeless-text" style="margin:0;font-size:11.5px;color:#e8d6b0;line-height:1.5"></p><button type="button" data-testid="inline-link-add-scheme" data-role="add-scheme" style="${btnCss(false)};margin-top:7px;height:26px;font-size:12px">${L.linkSchemelessFix}</button></div></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><button type="button" data-role="newtab" data-testid="inline-link-newtab" aria-pressed="false" style="display:flex;align-items:center;gap:8px;margin-top:12px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:12.5px;color:#c9d1dd"><span data-role="newtab-box" style="${checkboxCss(false)}"></span><span>${L.linkNewTab}</span></button><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");
@@ -542,6 +599,8 @@ function renderLinkDialog() {
   if (editing) {
     text.value = linkEditing?.getAttribute("data-cms-ref-label") === "auto" ? "" : linkEditing?.textContent ?? "";
     if (!existingRef) urlIn.value = linkEditing?.getAttribute("href") ?? "";
+    linkNewTab = linkEditing?.getAttribute("target") === "_blank";
+    linkNewTabTouched = true;
     q("remove").appendChild(buildRemoveLink());
   }
   d.querySelectorAll("[data-tab]").forEach((btn) => {
@@ -561,6 +620,16 @@ function renderLinkDialog() {
   urlIn.oninput = syncLinkDialog;
   q("cancel").onclick = hideLinkDialog;
   q("submit").onclick = applyLink;
+  q("newtab").onclick = () => {
+    linkNewTab = !linkNewTab;
+    linkNewTabTouched = true;
+    syncLinkDialog();
+  };
+  q("add-scheme").onclick = () => {
+    urlIn.value = withHttps(urlIn.value);
+    urlIn.focus();
+    syncLinkDialog();
+  };
   renderLinkList("");
   syncLinkDialog();
 }
@@ -589,6 +658,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 +705,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(() => {
@@ -642,6 +735,30 @@ function syncLinkDialog() {
   q("hint").innerHTML = own ? uiLabels.linkTextOwnHint : onPage ? uiLabels.linkTextAutoHint : uiLabels.linkUrlHint;
   q("live").style.display = onPage ? "flex" : "none";
   q("submit").disabled = onPage ? !linkPicked : !q("url").value.trim();
+  const raw = q("url").value;
+  const doubtful = !onPage && isSchemeless(raw);
+  q("schemeless").style.display = doubtful ? "block" : "none";
+  if (doubtful) {
+    q("schemeless-text").innerHTML = uiLabels.linkSchemeless.replace(
+      "{v}",
+      escapeHtml(raw.trim())
+    );
+  }
+  if (!onPage && !linkNewTabTouched) {
+    linkNewTab = isExternalHost(raw, typeof location !== "undefined" ? location.host : "");
+  }
+  const box = q("newtab-box");
+  if (box) box.setAttribute("style", checkboxCss(linkNewTab));
+  q("newtab").setAttribute("aria-pressed", String(linkNewTab));
+}
+function setLinkTarget(el, newTab) {
+  if (newTab) {
+    el.setAttribute("target", "_blank");
+    el.setAttribute("rel", "noopener");
+  } else {
+    el.removeAttribute("target");
+    el.removeAttribute("rel");
+  }
 }
 function applyLink() {
   const d = linkDialog;
@@ -653,18 +770,21 @@ function applyLink() {
   if (!href) return;
   const ref = onPage && linkPicked ? `${linkPicked.collection}:${linkPicked.slug}` : "";
   const label = own || (onPage ? linkPicked?.title ?? href : href);
+  const applyTarget = (el) => setLinkTarget(el, linkNewTab);
   if (linkEditing) {
     linkEditing.setAttribute("href", href);
     if (ref) linkEditing.setAttribute("data-cms-ref", ref);
     else linkEditing.removeAttribute("data-cms-ref");
     if (ref && !own) linkEditing.setAttribute("data-cms-ref-label", "auto");
     else linkEditing.removeAttribute("data-cms-ref-label");
+    applyTarget(linkEditing);
     linkEditing.textContent = label;
     hideLinkDialog();
     return;
   }
   const a = document.createElement("a");
   a.setAttribute("href", href);
+  applyTarget(a);
   if (ref) {
     a.setAttribute("data-cms-ref", ref);
     if (!own) a.setAttribute("data-cms-ref-label", "auto");
@@ -689,6 +809,7 @@ function escapeHtml(v) {
   return v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 var tabCss = (on) => "flex:1;background:" + (on ? "#2a2f38" : "none") + ";border:1px solid " + (on ? "#3a3f4a" : "transparent") + ";color:" + (on ? "#fff" : "#9aa3b2") + ";height:32px;border-radius:7px;font-size:13px;cursor:pointer;font-weight:500;font-family:inherit;";
+var checkboxCss = (on) => "width:16px;height:16px;flex:0 0 16px;border-radius:4px;box-sizing:border-box;display:inline-block;" + (on ? `background:#00b2ff;border:1px solid #00b2ff;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.6 2.6L12 5.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-size:100% 100%;` : "background:#141821;border:1px solid #3a3f4a;");
 var fieldCss = () => "width:100%;background:#141821;border:1px solid #3a3f4a;color:#fff;height:34px;border-radius:7px;padding:0 10px;font-size:13.5px;outline:none;font-family:inherit;box-sizing:border-box;";
 var labelCss = () => "font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9aa3b2;margin:12px 0 5px;display:block;";
 var btnCss = (primary) => "height:33px;border-radius:7px;font-size:13px;cursor:pointer;padding:0 14px;font-weight:600;font-family:inherit;" + (primary ? "background:#00b2ff;color:#04121b;border:none;" : "background:none;border:1px solid #3a3f4a;color:#fff;font-weight:500;");
@@ -701,9 +822,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 +955,7 @@ function serializeBlockChildren(parent) {
       const s = serializeBlock(node).trim();
       if (s) blocks.push(s);
     } else {
-      inlineRun += serializeInlineNode(node);
+      inlineRun = joinInline(inlineRun, serializeInlineNode(node));
     }
   });
   flushInline();
@@ -927,10 +1046,30 @@ function preservedLinkAttrs(el) {
   }
   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;
 }
@@ -947,11 +1086,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 + "`";
@@ -1098,6 +1237,10 @@ function injectStyles() {
   getConnectedToken,
   htmlToMarkdown,
   initInlineEdit,
-  rescanFields
+  positionPopover,
+  renderCurrentRefLine,
+  rescanFields,
+  resolveExistingRef,
+  setLinkTarget
 });
 //# sourceMappingURL=index.cjs.map