@broberg/cms-inline-edit 0.5.5 → 0.6.1

package/dist/index.cjs

@@ -29,7 +29,8 @@ __export(index_exports, {
   positionPopover: () => positionPopover,
   renderCurrentRefLine: () => renderCurrentRefLine,
   rescanFields: () => rescanFields,
-  resolveExistingRef: () => resolveExistingRef
+  resolveExistingRef: () => resolveExistingRef,
+  setLinkTarget: () => setLinkTarget
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -43,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;
@@ -97,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",
@@ -299,10 +327,12 @@ function showIdlePill() {
   removeIdlePill();
   const wrap = document.createElement("div");
   wrap.setAttribute("data-cms-inline-edit-idle", "");
+  wrap.setAttribute("data-testid", "inline-edit-idle");
   wrap.style.cssText = "position:fixed;bottom:16px;left:16px;display:inline-flex;align-items:stretch;z-index:2147483647;box-shadow:0 4px 16px rgba(0,0,0,.3);border-radius:999px;overflow:hidden;";
   const edit = document.createElement("button");
   edit.type = "button";
   edit.setAttribute("data-cms-inline-edit-enter", "");
+  edit.setAttribute("data-testid", "inline-edit-enter");
   edit.style.cssText = "display:inline-flex;align-items:center;gap:7px;background:#1c2027;color:#fff;font:600 12px system-ui,sans-serif;padding:8px 14px;border:none;cursor:pointer;";
   const editText = document.createElement("span");
   editText.textContent = options.connectLabel;
@@ -311,6 +341,7 @@ function showIdlePill() {
   const out = document.createElement("button");
   out.type = "button";
   out.setAttribute("data-cms-inline-edit-logout", "");
+  out.setAttribute("data-testid", "inline-edit-logout");
   out.textContent = options.logoutLabel;
   out.style.cssText = "background:#141821;color:#9aa4b2;font:600 11px system-ui,sans-serif;padding:8px 12px;border:none;border-left:1px solid rgba(255,255,255,.12);cursor:pointer;";
   out.addEventListener("click", () => {
@@ -474,6 +505,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";
@@ -555,9 +588,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="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>`;
+  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");
@@ -565,6 +602,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) => {
@@ -584,6 +623,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();
 }
@@ -689,6 +738,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;
@@ -700,18 +773,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");
@@ -736,6 +812,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;");
@@ -1099,6 +1176,7 @@ function showPill(el, state) {
   if (!pill) {
     pill = document.createElement("span");
     pill.setAttribute("data-cms-inline-edit-pill", "");
+    pill.setAttribute("data-testid", "inline-edit-pill");
     document.body.appendChild(pill);
     pills.set(el, pill);
   }
@@ -1126,6 +1204,7 @@ function showActiveBadge(options) {
   const badge = document.createElement("button");
   badge.type = "button";
   badge.setAttribute("data-cms-inline-edit-badge", "");
+  badge.setAttribute("data-testid", "inline-edit-badge");
   badge.style.cssText = "position:fixed;bottom:16px;left:16px;display:inline-flex;align-items:center;gap:7px;background:#1c2027;color:#fff;font:600 12px system-ui,sans-serif;padding:8px 14px;border-radius:999px;z-index:2147483647;box-shadow:0 4px 16px rgba(0,0,0,.3);border:none;cursor:pointer;opacity:.9;transition:opacity .15s;";
   const text = document.createElement("span");
   text.textContent = options.disconnectLabel;
@@ -1166,6 +1245,7 @@ function injectStyles() {
   positionPopover,
   renderCurrentRefLine,
   rescanFields,
-  resolveExistingRef
+  resolveExistingRef,
+  setLinkTarget
 });
 //# sourceMappingURL=index.cjs.map