@broberg/cms-inline-edit 0.4.21 → 0.5.0

package/dist/index.js

@@ -50,7 +50,27 @@ var DEFAULT_LABELS = {
   done: "F\xE6rdig",
   saving: "Gemmer\u2026",
   saved: "Gemt \u2713",
-  error: "Fejl \u2014 pr\xF8v igen"
+  error: "Fejl \u2014 pr\xF8v igen",
+  link: "Link",
+  linkTabPage: "Side p\xE5 sitet",
+  linkTabUrl: "Fri adresse",
+  linkSearch: "S\xF8g efter en side\u2026",
+  linkText: "Linktekst",
+  linkTextAuto: "F\xF8lger sidens titel",
+  linkTextAutoHint: "<b>Tom = f\xF8lger sidens titel.</b> Omd\xF8bes siden, retter teksten sig selv. Skriver du din egen tekst, bliver den st\xE5ende.",
+  linkTextOwnHint: "Linket viser <b>din egen tekst</b>. Den bliver st\xE5ende, ogs\xE5 hvis siden omd\xF8bes.",
+  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",
+  linkInsert: "Inds\xE6t link",
+  linkSave: "Gem \xE6ndring",
+  linkCancel: "Annull\xE9r",
+  linkRemove: "Fjern link",
+  linkRemoveConfirm: "Fjern?",
+  linkYes: "Ja",
+  linkNo: "Nej",
+  linkEmpty: "Ingen sider fundet",
+  linkLoading: "Henter sider\u2026"
 };
 var uiLabels = DEFAULT_LABELS;
 function resolveOptions(options) {
@@ -152,6 +172,7 @@ function isExpired(token) {
 var SQUARE_PEN_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="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>';
 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>';
 function makeIcon() {
   const icon = document.createElement("span");
   icon.style.cssText = "display:inline-flex;line-height:0;flex:0 0 auto";
@@ -310,6 +331,7 @@ function deactivateRich() {
   el.removeAttribute("contenteditable");
   el.classList.remove("cms-rich-editing");
   hideRichToolbar();
+  hideLinkDialog();
   if (el.innerHTML !== originalHtml) {
     const value = mode === "html" ? el.innerHTML : htmlToMarkdown(el.innerHTML);
     void saveField(el, value, token, options);
@@ -355,6 +377,10 @@ function buildRichToolbar() {
   t.appendChild(toolbarButton(UL_SVG, uiLabels.unorderedList, () => document.execCommand("insertUnorderedList")));
   t.appendChild(toolbarButton(OL_SVG, uiLabels.orderedList, () => document.execCommand("insertOrderedList")));
   t.appendChild(sep());
+  const linkBtn = toolbarButton(LINK_SVG, uiLabels.link, () => toggleLinkDialog(linkBtn));
+  linkBtn.setAttribute("data-testid", "inline-toolbar-link");
+  t.appendChild(linkBtn);
+  t.appendChild(sep());
   const clrLabel = document.createElement("label");
   clrLabel.style.cssText = "display:flex;align-items:center;gap:5px;color:#9aa4b2;font-size:12px;cursor:pointer;";
   clrLabel.textContent = uiLabels.color;
@@ -388,6 +414,231 @@ var EMOJIS = "\u{1F600} \u{1F603} \u{1F604} \u{1F601} \u{1F606} \u{1F609} \u{1F6
 );
 var emojiPicker = null;
 var savedRange = null;
+var linkDialog = null;
+var linkPages = null;
+var linkPicked = null;
+var linkEditing = null;
+function hideLinkDialog() {
+  if (linkDialog) linkDialog.style.display = "none";
+  linkPicked = null;
+  linkEditing = null;
+}
+function anchorAtCaret() {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return null;
+  let node = sel.getRangeAt(0).startContainer;
+  while (node && node !== document.body) {
+    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "A") {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return null;
+}
+async function fetchLinkablePages() {
+  if (linkPages) return linkPages;
+  if (!richCtx) return [];
+  const { options, token } = richCtx;
+  const url = `${options.cmsBaseUrl}/api/inline-edit/pages?site=${encodeURIComponent(options.siteId)}`;
+  const res = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
+  if (!res.ok) throw new Error(`pages ${res.status}`);
+  const body = await res.json();
+  linkPages = body.pages ?? [];
+  return linkPages;
+}
+function toggleLinkDialog(anchor) {
+  if (linkDialog && linkDialog.style.display === "block") {
+    hideLinkDialog();
+    return;
+  }
+  const sel = window.getSelection();
+  if (sel && sel.rangeCount > 0) savedRange = sel.getRangeAt(0).cloneRange();
+  linkEditing = anchorAtCaret();
+  if (!linkDialog) linkDialog = buildLinkDialog();
+  renderLinkDialog();
+  const rect = anchor.getBoundingClientRect();
+  linkDialog.style.top = `${rect.bottom + 8}px`;
+  linkDialog.style.left = `${Math.min(Math.max(8, rect.left - 180), window.innerWidth - 400)}px`;
+  linkDialog.style.display = "block";
+}
+function buildLinkDialog() {
+  const d = document.createElement("div");
+  d.setAttribute("data-cms-inline-edit-toolbar", "");
+  d.setAttribute("data-testid", "inline-link-dialog");
+  d.style.cssText = "position:fixed;z-index:2147483646;background:#1c2027;border:1px solid #3a3f4a;border-radius:10px;width:392px;display:none;box-shadow:0 8px 32px rgba(0,0,0,.5);font-family:system-ui,sans-serif;color:#fff;overflow:hidden;";
+  d.addEventListener("mousedown", (e) => {
+    const t = e.target;
+    if (t.tagName !== "INPUT") e.preventDefault();
+    e.stopPropagation();
+  });
+  document.body.appendChild(d);
+  return d;
+}
+function renderLinkDialog() {
+  const d = linkDialog;
+  if (!d) return;
+  const L = uiLabels;
+  const editing = !!linkEditing;
+  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="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>`;
+  const q = (role) => d.querySelector(`[data-role="${role}"]`);
+  const text = q("text");
+  const urlIn = q("url");
+  const search = q("search");
+  if (editing) {
+    text.value = linkEditing?.getAttribute("data-cms-ref-label") === "auto" ? "" : linkEditing?.textContent ?? "";
+    if (!existingRef) urlIn.value = linkEditing?.getAttribute("href") ?? "";
+    q("remove").appendChild(buildRemoveLink());
+  }
+  d.querySelectorAll("[data-tab]").forEach((btn) => {
+    btn.onclick = () => {
+      const page = btn.dataset.tab === "page";
+      d.querySelectorAll("[data-tab]").forEach((b) => {
+        b.setAttribute("style", tabCss(b.dataset.tab === "page" ? page : !page));
+      });
+      d.querySelector('[data-pane="page"]').style.display = page ? "block" : "none";
+      d.querySelector('[data-pane="url"]').style.display = page ? "none" : "block";
+      q("live").style.display = page ? "flex" : "none";
+      syncLinkDialog();
+    };
+  });
+  search.oninput = () => renderLinkList(search.value);
+  text.oninput = syncLinkDialog;
+  urlIn.oninput = syncLinkDialog;
+  q("cancel").onclick = hideLinkDialog;
+  q("submit").onclick = applyLink;
+  renderLinkList("");
+  syncLinkDialog();
+}
+function buildRemoveLink() {
+  const wrap = document.createElement("div");
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.setAttribute("data-testid", "inline-link-remove");
+  btn.textContent = uiLabels.linkRemove;
+  btn.style.cssText = "background:none;border:none;color:#ff8a8a;font-size:12.5px;cursor:pointer;padding:0 2px;";
+  btn.onclick = () => {
+    wrap.innerHTML = `<span style="font-size:11.5px;color:#ff8a8a;font-weight:500;padding:0 2px">${uiLabels.linkRemoveConfirm}</span><button type="button" data-testid="inline-link-remove-yes" style="font-size:11px;padding:2px 8px;border-radius:4px;border:none;background:#c0392b;color:#fff;cursor:pointer;line-height:1.4;margin-left:6px">${uiLabels.linkYes}</button><button type="button" data-testid="inline-link-remove-no" style="font-size:11px;padding:2px 8px;border-radius:4px;border:1px solid #3a3f4a;background:none;color:#fff;cursor:pointer;line-height:1.4;margin-left:6px">${uiLabels.linkNo}</button>`;
+    wrap.querySelector('[data-testid="inline-link-remove-no"]').onclick = () => {
+      wrap.innerHTML = "";
+      wrap.appendChild(btn);
+    };
+    wrap.querySelector('[data-testid="inline-link-remove-yes"]').onclick = () => {
+      if (linkEditing) {
+        const parent = linkEditing.parentNode;
+        while (linkEditing.firstChild) parent?.insertBefore(linkEditing.firstChild, linkEditing);
+        parent?.removeChild(linkEditing);
+      }
+      hideLinkDialog();
+    };
+  };
+  wrap.appendChild(btn);
+  return wrap;
+}
+function renderLinkList(filter) {
+  const d = linkDialog;
+  if (!d) return;
+  const list = d.querySelector('[data-role="list"]');
+  if (!list) return;
+  const paint = (pages) => {
+    const f = filter.trim().toLowerCase();
+    const shown = pages.filter((p) => !f || `${p.title} ${p.path}`.toLowerCase().includes(f));
+    if (!shown.length) {
+      list.innerHTML = `<div style="padding:10px;font-size:12.5px;color:#9aa3b2">${uiLabels.linkEmpty}</div>`;
+      return;
+    }
+    list.innerHTML = "";
+    shown.forEach((p) => {
+      const on = linkPicked?.collection === p.collection && linkPicked?.slug === p.slug;
+      const row = document.createElement("div");
+      row.setAttribute("data-testid", `inline-link-page-${p.collection}-${p.slug}`);
+      row.style.cssText = "display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;border-bottom:1px solid #232833;" + (on ? "background:rgba(0,178,255,.14);" : "");
+      row.innerHTML = `<div style="min-width:0;flex:1"><div style="font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(p.title)}</div><div style="font-size:11.5px;color:#9aa3b2;font-family:ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(p.path)}</div></div><span style="flex:none;font-size:10px;text-transform:uppercase;color:#9aa3b2;border:1px solid #3a3f4a;border-radius:4px;padding:2px 6px;white-space:nowrap">${escapeHtml(p.label)}</span>`;
+      row.onclick = () => {
+        linkPicked = p;
+        renderLinkList(filter);
+        syncLinkDialog();
+      };
+      list.appendChild(row);
+    });
+  };
+  if (linkPages) {
+    paint(linkPages);
+    return;
+  }
+  list.innerHTML = `<div style="padding:10px;font-size:12.5px;color:#9aa3b2">${uiLabels.linkLoading}</div>`;
+  fetchLinkablePages().then((pages) => {
+    const ref = linkEditing?.getAttribute("data-cms-ref");
+    if (ref && !linkPicked) {
+      const [c, ...rest] = ref.split(":");
+      linkPicked = pages.find((p) => p.collection === c && p.slug === rest.join(":")) ?? null;
+    }
+    paint(pages);
+    syncLinkDialog();
+  }).catch(() => {
+    list.innerHTML = `<div style="padding:10px;font-size:12.5px;color:#ff8a8a">${uiLabels.error}</div>`;
+  });
+}
+function syncLinkDialog() {
+  const d = linkDialog;
+  if (!d) return;
+  const q = (role) => d.querySelector(`[data-role="${role}"]`);
+  const onPage = d.querySelector('[data-pane="page"]').style.display !== "none";
+  const own = q("text").value.trim();
+  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();
+}
+function applyLink() {
+  const d = linkDialog;
+  if (!d || !richCtx) return;
+  const q = (role) => d.querySelector(`[data-role="${role}"]`);
+  const onPage = d.querySelector('[data-pane="page"]').style.display !== "none";
+  const own = q("text").value.trim();
+  const href = onPage ? linkPicked?.path ?? "" : q("url").value.trim();
+  if (!href) return;
+  const ref = onPage && linkPicked ? `${linkPicked.collection}:${linkPicked.slug}` : "";
+  const label = own || (onPage ? linkPicked?.title ?? href : href);
+  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");
+    linkEditing.textContent = label;
+    hideLinkDialog();
+    return;
+  }
+  const a = document.createElement("a");
+  a.setAttribute("href", href);
+  if (ref) {
+    a.setAttribute("data-cms-ref", ref);
+    if (!own) a.setAttribute("data-cms-ref-label", "auto");
+  }
+  const sel = window.getSelection();
+  if (savedRange && sel) {
+    sel.removeAllRanges();
+    sel.addRange(savedRange);
+    const range = sel.getRangeAt(0);
+    a.textContent = own || range.toString() || label;
+    range.deleteContents();
+    range.insertNode(a);
+    sel.removeAllRanges();
+  } else {
+    a.textContent = label;
+    richCtx.el.appendChild(a);
+  }
+  savedRange = null;
+  hideLinkDialog();
+}
+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 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;");
 function toggleEmojiPicker(anchor) {
   if (!emojiPicker) emojiPicker = buildEmojiPicker();
   if (emojiPicker.style.display === "block") {
@@ -497,12 +748,44 @@ function reattachOrphanListItems(container) {
     }
   }
 }
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "div",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "hr",
+  "table"
+]);
+function isBlockNode(node) {
+  return node.nodeType === Node.ELEMENT_NODE && BLOCK_TAGS.has(node.tagName.toLowerCase());
+}
 function serializeBlockChildren(parent) {
   const blocks = [];
-  parent.childNodes.forEach((node) => {
-    const s = serializeBlock(node).trim();
+  let inlineRun = "";
+  const flushInline = () => {
+    const s = inlineRun.trim();
     if (s) blocks.push(s);
+    inlineRun = "";
+  };
+  parent.childNodes.forEach((node) => {
+    if (isBlockNode(node)) {
+      flushInline();
+      const s = serializeBlock(node).trim();
+      if (s) blocks.push(s);
+    } else {
+      inlineRun += serializeInlineNode(node);
+    }
   });
+  flushInline();
   return blocks.join("\n\n");
 }
 function serializeBlock(node) {
@@ -576,14 +859,23 @@ function serializeList(listEl, ordered) {
   });
   return items.join("\n");
 }
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
 function serializeInline(node) {
   let out = "";
   node.childNodes.forEach((child) => {
-    if (child.nodeType === Node.TEXT_NODE) {
-      out += (child.textContent ?? "").replace(/\s+/g, " ");
-      return;
-    }
-    if (child.nodeType !== Node.ELEMENT_NODE) return;
+    out += serializeInlineNode(child);
+  });
+  return out;
+}
+function serializeInlineNode(child) {
+  if (child.nodeType === Node.TEXT_NODE) {
+    return (child.textContent ?? "").replace(/\s+/g, " ");
+  }
+  if (child.nodeType !== Node.ELEMENT_NODE) return "";
+  {
+    let out = "";
     const el = child;
     const tag = el.tagName.toLowerCase();
     const inner = serializeInline(el);
@@ -604,7 +896,15 @@ function serializeInline(node) {
         break;
       case "a": {
         const href = el.getAttribute("href") || "";
-        out += href ? `[${inner}](${href})` : inner;
+        const ref = el.getAttribute("data-cms-ref");
+        if (ref) {
+          const attrs = [`href="${escapeAttr(href)}"`, `data-cms-ref="${escapeAttr(ref)}"`];
+          const label = el.getAttribute("data-cms-ref-label");
+          if (label) attrs.push(`data-cms-ref-label="${escapeAttr(label)}"`);
+          out += `<a ${attrs.join(" ")}>${inner}</a>`;
+        } else {
+          out += href ? `[${inner}](${href})` : inner;
+        }
         break;
       }
       case "img": {
@@ -625,8 +925,8 @@ function serializeInline(node) {
       default:
         out += inner;
     }
-  });
-  return out;
+    return out;
+  }
 }
 async function saveField(el, value, token, options) {
   const collection = el.dataset.cmsCollection;