@broberg/cms-inline-edit 0.6.3 → 0.7.1

package/dist/index.js

@@ -1,3 +1,44 @@
+// src/page-tools.ts
+function parseTags(input) {
+  const set = /* @__PURE__ */ new Set();
+  const ud = [];
+  for (const raa of input.split(",")) {
+    const t = raa.trim();
+    if (!t) continue;
+    const noegle = t.toLowerCase();
+    if (set.has(noegle)) continue;
+    set.add(noegle);
+    ud.push(t);
+  }
+  return ud;
+}
+function mergeTags(eksisterende, nye) {
+  const basis = Array.isArray(eksisterende) ? eksisterende.filter((t) => typeof t === "string") : [];
+  const kendte = new Set(basis.map((t) => t.toLowerCase()));
+  const ud = [...basis];
+  for (const t of nye) {
+    if (kendte.has(t.toLowerCase())) continue;
+    kendte.add(t.toLowerCase());
+    ud.push(t);
+  }
+  return ud;
+}
+function primaryDocRef(ankre) {
+  const taeller = /* @__PURE__ */ new Map();
+  for (const a of ankre) {
+    if (!a.collection || !a.slug || a.collection === "globals") continue;
+    const noegle = `${a.collection} ${a.slug}`;
+    const post = taeller.get(noegle) ?? { collection: a.collection, slug: a.slug, n: 0 };
+    post.n++;
+    taeller.set(noegle, post);
+  }
+  let bedst = null;
+  for (const post of taeller.values()) {
+    if (!bedst || post.n > bedst.n) bedst = post;
+  }
+  return bedst ? { collection: bedst.collection, slug: bedst.slug } : null;
+}
+
 // src/field-slice.ts
 function applyFieldSlice(current, original, next) {
   const first = current.indexOf(original);
@@ -228,6 +269,7 @@ var SQUARE_PEN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height=
 var UL_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>';
 var OL_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>';
 var LINK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg>';
+var WRENCH_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>';
 function makeIcon() {
   const icon = document.createElement("span");
   icon.style.cssText = "display:inline-flex;line-height:0;flex:0 0 auto";
@@ -298,6 +340,8 @@ function exitEditMode() {
   deactivateRich();
   editingActive = false;
   document.body.removeAttribute("data-cms-editing");
+  document.querySelector("[data-cms-inline-edit-toolsrow]")?.remove();
+  document.querySelector("[data-cms-inline-edit-tools-popup]")?.remove();
   document.querySelector("[data-cms-inline-edit-badge]")?.remove();
   showIdlePill();
 }
@@ -1234,7 +1278,172 @@ function showActiveBadge(options) {
   badge.addEventListener("mouseenter", () => badge.style.opacity = "1");
   badge.addEventListener("mouseleave", () => badge.style.opacity = ".9");
   badge.addEventListener("click", exitEditMode);
-  document.body.appendChild(badge);
+  badge.style.position = "static";
+  badge.style.borderRadius = "999px 0 0 999px";
+  const raekke = document.createElement("div");
+  raekke.setAttribute("data-cms-inline-edit-toolsrow", "");
+  raekke.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:visible;";
+  const tools = document.createElement("button");
+  tools.type = "button";
+  tools.setAttribute("data-cms-inline-edit-tools", "");
+  tools.setAttribute("data-testid", "inline-edit-tools");
+  tools.setAttribute("aria-label", "Tools");
+  tools.title = "Tools";
+  tools.style.cssText = "display:inline-flex;align-items:center;background:#1c2027;color:#8b93a3;padding:8px 12px;border:none;border-left:1px solid rgba(255,255,255,.12);border-radius:0 999px 999px 0;cursor:pointer;font:600 12px system-ui,sans-serif;";
+  tools.innerHTML = WRENCH_SVG;
+  tools.addEventListener("mouseenter", () => tools.style.color = "#fff");
+  tools.addEventListener("mouseleave", () => tools.style.color = "#8b93a3");
+  tools.addEventListener("click", () => togglePageTools(options, raekke));
+  raekke.append(badge, tools);
+  document.body.appendChild(raekke);
+}
+async function hentDoc(collection, slug, token, options) {
+  const res = await fetch(`${options.cmsBaseUrl}/api/cms/${collection}/${slug}?site=${options.siteId}`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!res.ok) throw new Error(`GET failed: ${res.status}`);
+  const doc = await res.json();
+  return JSON.parse(JSON.stringify(doc.data ?? {}));
+}
+async function gemDoc(collection, slug, data, token, options) {
+  const res = await fetch(`${options.cmsBaseUrl}/api/cms/${collection}/${slug}?site=${options.siteId}`, {
+    method: "PATCH",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+    body: JSON.stringify({ data })
+  });
+  if (!res.ok) throw new Error(`PATCH failed: ${res.status}`);
+}
+function togglePageTools(options, forankring) {
+  const \u00E5ben = document.querySelector("[data-cms-inline-edit-tools-popup]");
+  if (\u00E5ben) {
+    \u00E5ben.remove();
+    return;
+  }
+  const token = getConnectedToken(options);
+  if (!token) return;
+  const ankre = Array.from(
+    document.querySelectorAll("[data-cms-field]")
+  ).map((el) => {
+    const a = {};
+    if (el.dataset.cmsCollection) a.collection = el.dataset.cmsCollection;
+    if (el.dataset.cmsSlug) a.slug = el.dataset.cmsSlug;
+    return a;
+  });
+  const ref = primaryDocRef(ankre);
+  if (!ref) return;
+  const popup = document.createElement("div");
+  popup.setAttribute("data-cms-inline-edit-tools-popup", "");
+  popup.setAttribute("data-testid", "page-tools-popup");
+  popup.style.cssText = "position:fixed;bottom:56px;left:16px;z-index:2147483647;background:#1c2027;border:1px solid #3a3f4a;border-radius:12px;padding:10px;min-width:230px;box-shadow:0 8px 32px rgba(0,0,0,.5);font-family:system-ui,sans-serif;color:#fff;display:flex;flex-direction:column;gap:8px;";
+  const featRow = document.createElement("button");
+  featRow.type = "button";
+  featRow.setAttribute("data-testid", "page-tools-featured");
+  featRow.style.cssText = "display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid #3a3f4a;border-radius:9px;padding:8px 10px;font:600 12px system-ui,sans-serif;color:#fff;cursor:pointer;text-align:left;";
+  featRow.textContent = "\u2605 Featured";
+  featRow.disabled = true;
+  popup.appendChild(featRow);
+  const visFeatured = (til) => {
+    featRow.style.borderColor = til ? "#00b2ff" : "#3a3f4a";
+    featRow.style.color = til ? "#40c8ff" : "#fff";
+    featRow.style.background = til ? "rgba(0,178,255,.13)" : "rgba(255,255,255,.04)";
+  };
+  let featured = false;
+  void hentDoc(ref.collection, ref.slug, token, options).then((data) => {
+    featured = data.featured === true;
+    visFeatured(featured);
+    featRow.disabled = false;
+  }).catch(() => {
+    featRow.textContent = "\u2605 Featured \u2014 kunne ikke l\xE6ses";
+  });
+  featRow.addEventListener("click", async () => {
+    featRow.disabled = true;
+    try {
+      const data = await hentDoc(ref.collection, ref.slug, token, options);
+      data.featured = !(data.featured === true);
+      await gemDoc(ref.collection, ref.slug, data, token, options);
+      const frisk = await hentDoc(ref.collection, ref.slug, token, options);
+      featured = frisk.featured === true;
+      visFeatured(featured);
+    } catch {
+      featRow.style.borderColor = "#f3522c";
+    } finally {
+      featRow.disabled = false;
+    }
+  });
+  const tagRow = document.createElement("div");
+  tagRow.style.cssText = "display:flex;align-items:center;gap:6px;";
+  const plus = document.createElement("button");
+  plus.type = "button";
+  plus.setAttribute("data-testid", "page-tools-tags-plus");
+  plus.style.cssText = "background:rgba(255,255,255,.04);border:1px solid #3a3f4a;border-radius:9px;padding:8px 12px;color:#fff;font:600 12px system-ui,sans-serif;cursor:pointer;";
+  plus.textContent = "# Tags +";
+  const felt = document.createElement("input");
+  felt.type = "text";
+  felt.placeholder = "tag1, tag2, tag3";
+  felt.setAttribute("data-testid", "page-tools-tags-input");
+  felt.style.cssText = "flex:1;min-width:0;display:none;background:#12151a;border:1px solid #3a3f4a;border-radius:8px;padding:7px 9px;color:#fff;font:12px system-ui,sans-serif;outline:none;";
+  const gem = document.createElement("button");
+  gem.type = "button";
+  gem.setAttribute("data-testid", "page-tools-tags-gem");
+  gem.style.cssText = "display:none;background:#00b2ff;border:none;border-radius:8px;padding:7px 11px;color:#04222f;font:700 12px system-ui,sans-serif;cursor:pointer;";
+  gem.textContent = "Gem";
+  plus.addEventListener("click", () => {
+    plus.style.display = "none";
+    felt.style.display = "block";
+    gem.style.display = "inline-block";
+    felt.focus();
+  });
+  const gemTags = async () => {
+    const nye = parseTags(felt.value);
+    if (!nye.length) return;
+    gem.disabled = true;
+    gem.textContent = "\u2026";
+    try {
+      const data = await hentDoc(ref.collection, ref.slug, token, options);
+      data.tags = mergeTags(data.tags, nye);
+      await gemDoc(ref.collection, ref.slug, data, token, options);
+      const frisk = await hentDoc(ref.collection, ref.slug, token, options);
+      const holdt = Array.isArray(frisk.tags) && nye.every((t) => frisk.tags.some((e) => String(e).toLowerCase() === t.toLowerCase()));
+      gem.textContent = holdt ? "Gemt \u2713" : "Fejl";
+      if (holdt) {
+        felt.value = "";
+        setTimeout(() => {
+          gem.textContent = "Gem";
+          gem.disabled = false;
+        }, 1200);
+      } else {
+        gem.disabled = false;
+      }
+    } catch {
+      gem.textContent = "Fejl";
+      gem.disabled = false;
+    }
+  };
+  gem.addEventListener("click", () => void gemTags());
+  felt.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      void gemTags();
+    }
+  });
+  tagRow.append(plus, felt, gem);
+  popup.appendChild(tagRow);
+  const lukP\u00E5Klik = (e) => {
+    if (!popup.contains(e.target) && !forankring.contains(e.target)) luk();
+  };
+  const lukP\u00E5Esc = (e) => {
+    if (e.key === "Escape") luk();
+  };
+  const luk = () => {
+    popup.remove();
+    document.removeEventListener("mousedown", lukP\u00E5Klik);
+    document.removeEventListener("keydown", lukP\u00E5Esc);
+  };
+  setTimeout(() => {
+    document.addEventListener("mousedown", lukP\u00E5Klik);
+    document.addEventListener("keydown", lukP\u00E5Esc);
+  }, 0);
+  document.body.appendChild(popup);
 }
 function decodeJwtPayload(token) {
   try {