@broberg/cms-inline-edit 0.6.0 → 0.6.2

package/dist/index.cjs

@@ -67,6 +67,10 @@ function isExternalHost(raw, currentHost) {
     return false;
   }
 }
+function isDangerousUrl(raw) {
+  const v = (raw || "").replace(/[\u0000-\u0020]/g, "");
+  return /^(?:javascript|data|vbscript):/i.test(v);
+}
 
 // src/token-safe.ts
 var TEXT_NODE = 3;
@@ -125,6 +129,7 @@ var DEFAULT_LABELS = {
   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://",
+  linkBlocked: "<b>{v}</b> kan ikke bruges som link \u2014 adresser af den type kan k\xF8re kode p\xE5 sitet.",
   linkInsert: "Inds\xE6t link",
   linkSave: "Gem \xE6ndring",
   linkCancel: "Annull\xE9r",
@@ -327,10 +332,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;
@@ -339,6 +346,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", () => {
@@ -591,7 +599,7 @@ function renderLinkDialog() {
   }
   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 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>`;
+  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="${noticeCss("schemeless")}"><p data-role="schemeless-text" style="margin:0;font-size:11.5px;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");
@@ -736,14 +744,29 @@ function syncLinkDialog() {
   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) {
+  const dangerous = !onPage && isDangerousUrl(raw);
+  const doubtful = !onPage && !dangerous && isSchemeless(raw);
+  const notice = q("schemeless");
+  const show = dangerous || doubtful;
+  if (dangerous) {
+    notice.setAttribute("style", noticeCss("blocked"));
+    notice.setAttribute("data-variant", "blocked");
+    q("schemeless-text").innerHTML = uiLabels.linkBlocked.replace(
+      "{v}",
+      escapeHtml(raw.trim())
+    );
+    q("submit").disabled = true;
+  } else if (doubtful) {
+    notice.setAttribute("style", noticeCss("schemeless"));
+    notice.setAttribute("data-variant", "schemeless");
     q("schemeless-text").innerHTML = uiLabels.linkSchemeless.replace(
       "{v}",
       escapeHtml(raw.trim())
     );
   }
+  notice.style.display = show ? "block" : "none";
+  q("schemeless-text").style.color = dangerous ? "#f5c6c6" : "#e8d6b0";
+  q("add-scheme").style.display = doubtful ? "" : "none";
   if (!onPage && !linkNewTabTouched) {
     linkNewTab = isExternalHost(raw, typeof location !== "undefined" ? location.host : "");
   }
@@ -768,6 +791,7 @@ function applyLink() {
   const own = q("text").value.trim();
   const href = onPage ? linkPicked?.path ?? "" : q("url").value.trim();
   if (!href) return;
+  if (isDangerousUrl(href)) return;
   const ref = onPage && linkPicked ? `${linkPicked.collection}:${linkPicked.slug}` : "";
   const label = own || (onPage ? linkPicked?.title ?? href : href);
   const applyTarget = (el) => setLinkTarget(el, linkNewTab);
@@ -809,6 +833,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 noticeCss = (variant) => "display:none;margin-top:8px;padding:8px 10px;border-radius:8px;background:" + (variant === "blocked" ? "rgba(255,90,90,.10)" : "rgba(255,176,32,.10)") + ";border:1px solid " + (variant === "blocked" ? "rgba(255,90,90,.38)" : "rgba(255,176,32,.34)") + ";";
 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;";
@@ -1100,6 +1125,10 @@ function serializeInlineNode(child) {
         break;
       case "a": {
         const href = el.getAttribute("href") || "";
+        if (isDangerousUrl(href)) {
+          out += inner;
+          break;
+        }
         const extras = preservedLinkAttrs(el);
         if (extras.length > 0) {
           out += `<a ${[`href="${escapeAttr(href)}"`, ...extras].join(" ")}>${inner}</a>`;
@@ -1173,6 +1202,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);
   }
@@ -1200,6 +1230,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;