@broberg/cms-inline-edit 0.7.1 → 0.7.2

package/dist/index.cjs

@@ -1419,11 +1419,48 @@ function togglePageTools(options, forankring) {
   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 boks = document.createElement("div");
+  boks.setAttribute("data-testid", "page-tools-tags-boks");
+  boks.style.cssText = "flex:1;min-width:0;display:none;flex-wrap:wrap;align-items:center;gap:5px;background:#12151a;border:1px solid #3a3f4a;border-radius:8px;padding:5px 7px;cursor:text;";
+  const chips = [];
   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;";
+  felt.style.cssText = "flex:1;min-width:70px;background:transparent;border:none;padding:2px;color:#fff;font:12px system-ui,sans-serif;outline:none;";
+  const tegnChips = () => {
+    Array.prototype.forEach.call(boks.querySelectorAll("[data-chip]"), (c) => c.remove());
+    chips.forEach((t, i) => {
+      const chip = document.createElement("span");
+      chip.setAttribute("data-chip", "");
+      chip.setAttribute("data-testid", "page-tools-tag-chip");
+      chip.style.cssText = "display:inline-flex;align-items:center;gap:4px;background:rgba(0,178,255,.15);border:1px solid rgba(0,178,255,.45);border-radius:999px;padding:2px 4px 2px 8px;color:#7fd8ff;font:600 11px system-ui,sans-serif;";
+      chip.textContent = t;
+      const x = document.createElement("button");
+      x.type = "button";
+      x.setAttribute("data-testid", "page-tools-tag-fjern");
+      x.setAttribute("aria-label", `Fjern ${t}`);
+      x.style.cssText = "background:none;border:none;color:#7fd8ff;font:700 13px system-ui,sans-serif;cursor:pointer;line-height:1;padding:0 3px;";
+      x.textContent = "\xD7";
+      x.addEventListener("click", (e) => {
+        e.stopPropagation();
+        chips.splice(i, 1);
+        tegnChips();
+        felt.focus();
+      });
+      chip.appendChild(x);
+      boks.insertBefore(chip, felt);
+    });
+  };
+  const tagify = () => {
+    const nye = parseTags(felt.value);
+    for (const t of nye) {
+      if (!chips.some((c) => c.toLowerCase() === t.toLowerCase())) chips.push(t);
+    }
+    felt.value = "";
+    tegnChips();
+  };
+  boks.addEventListener("click", () => felt.focus());
   const gem = document.createElement("button");
   gem.type = "button";
   gem.setAttribute("data-testid", "page-tools-tags-gem");
@@ -1431,12 +1468,13 @@ function togglePageTools(options, forankring) {
   gem.textContent = "Gem";
   plus.addEventListener("click", () => {
     plus.style.display = "none";
-    felt.style.display = "block";
+    boks.style.display = "flex";
     gem.style.display = "inline-block";
     felt.focus();
   });
   const gemTags = async () => {
-    const nye = parseTags(felt.value);
+    tagify();
+    const nye = [...chips];
     if (!nye.length) return;
     gem.disabled = true;
     gem.textContent = "\u2026";
@@ -1449,6 +1487,8 @@ function togglePageTools(options, forankring) {
       gem.textContent = holdt ? "Gemt \u2713" : "Fejl";
       if (holdt) {
         felt.value = "";
+        chips.length = 0;
+        tegnChips();
         setTimeout(() => {
           gem.textContent = "Gem";
           gem.disabled = false;
@@ -1463,12 +1503,27 @@ function togglePageTools(options, forankring) {
   };
   gem.addEventListener("click", () => void gemTags());
   felt.addEventListener("keydown", (e) => {
+    if (e.key === ",") {
+      e.preventDefault();
+      tagify();
+      return;
+    }
     if (e.key === "Enter") {
       e.preventDefault();
       void gemTags();
+      return;
     }
+    if (e.key === "Backspace" && felt.value === "" && chips.length) {
+      e.preventDefault();
+      chips.pop();
+      tegnChips();
+    }
+  });
+  felt.addEventListener("input", () => {
+    if (felt.value.includes(",")) tagify();
   });
-  tagRow.append(plus, felt, gem);
+  boks.appendChild(felt);
+  tagRow.append(plus, boks, gem);
   popup.appendChild(tagRow);
   const lukP\u00E5Klik = (e) => {
     if (!popup.contains(e.target) && !forankring.contains(e.target)) luk();