@broberg/cms-inline-edit 0.7.1 → 0.8.0

package/dist/index.cjs

@@ -31,6 +31,7 @@ __export(index_exports, {
   isDangerousUrl: () => isDangerousUrl,
   isExternalHost: () => isExternalHost,
   isSchemeless: () => isSchemeless,
+  plainTextWithBreaks: () => plainTextWithBreaks,
   positionPopover: () => positionPopover,
   renderCurrentRefLine: () => renderCurrentRefLine,
   rescanFields: () => rescanFields,
@@ -439,7 +440,7 @@ function wireField(el, token, options) {
     e.preventDefault();
     e.stopPropagation();
     const tokenSafe = hasTokenChips(el);
-    el.dataset.cmsOriginalValue = tokenSafe ? serializeTokenSafe(el) : el.textContent ?? "";
+    el.dataset.cmsOriginalValue = tokenSafe ? serializeTokenSafe(el) : plainTextWithBreaks(el);
     el.setAttribute("contenteditable", "true");
     if (tokenSafe) lockTokenChips(el);
     el.focus();
@@ -447,7 +448,7 @@ function wireField(el, token, options) {
   el.addEventListener("blur", () => {
     el.removeAttribute("contenteditable");
     const original = el.dataset.cmsOriginalValue ?? "";
-    const current = hasTokenChips(el) ? serializeTokenSafe(el) : el.textContent ?? "";
+    const current = hasTokenChips(el) ? serializeTokenSafe(el) : plainTextWithBreaks(el);
     if (current.trim() === original.trim()) return;
     void saveField(el, current.trim(), token, options);
   });
@@ -457,12 +458,35 @@ function wireField(el, token, options) {
     document.execCommand("insertText", false, text);
   });
   el.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      el.blur();
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    if (e.shiftKey) {
+      document.execCommand("insertLineBreak");
+      return;
     }
+    el.blur();
   });
 }
+function plainTextWithBreaks(el) {
+  let out = "";
+  const walk = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      out += node.textContent ?? "";
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    const tag = node.tagName.toLowerCase();
+    if (tag === "br") {
+      out += "\n";
+      return;
+    }
+    const blocky = tag === "div" || tag === "p";
+    if (blocky && out !== "" && !out.endsWith("\n")) out += "\n";
+    node.childNodes.forEach(walk);
+  };
+  el.childNodes.forEach(walk);
+  return out;
+}
 var richCtx = null;
 var richToolbar = null;
 function wireRichField(el, token, options, mode) {
@@ -1419,11 +1443,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 +1492,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 +1511,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 +1527,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();
@@ -1520,6 +1599,7 @@ function injectStyles() {
   isDangerousUrl,
   isExternalHost,
   isSchemeless,
+  plainTextWithBreaks,
   positionPopover,
   renderCurrentRefLine,
   rescanFields,