@caretcms/core 0.1.2 → 0.3.0

package/static/cms/editor/text-edit.js

@@ -5,6 +5,20 @@ import { sanitizeHtml } from './sanitize.js';
 const snapshots = new WeakMap();
 let keydownBound = false;
 
+// `contenteditable="plaintext-only"` isn't supported in older Firefox (pre-136);
+// setting it there leaves the element non-editable. Feature-detect once and fall
+// back to "true" (rich contenteditable) — the blur handler saves via textContent
+// for non-rich fields, so the stored value stays plain-text regardless.
+const PLAINTEXT_ONLY_SUPPORTED = (() => {
+  try {
+    const probe = document.createElement('div');
+    probe.setAttribute('contenteditable', 'plaintext-only');
+    return probe.contentEditable === 'plaintext-only';
+  } catch (e) {
+    return false;
+  }
+})();
+
 export function mountTextEditors({
   state,
   parseCaretAttr,
@@ -52,7 +66,10 @@ export function mountTextEditors({
     const isRich = el.hasAttribute('data-caret-rich');
     const isLinkable = !isRich && el.hasAttribute('data-caret-raw');
 
-    el.setAttribute('contenteditable', isRich ? 'true' : 'plaintext-only');
+    el.setAttribute(
+      'contenteditable',
+      isRich || !PLAINTEXT_ONLY_SUPPORTED ? 'true' : 'plaintext-only',
+    );
     el.classList.add('cms-editable');
     if (isRich) el.classList.add('cms-rich');
     if (isLinkable) el.classList.add('cms-linkable');
@@ -95,9 +112,48 @@ export function mountTextEditors({
     el.addEventListener('input', () => {
       const snapshot = snapshots.get(el);
       const current = isRich ? el.innerHTML : (el.textContent || '');
-      state.dirtyEl = current !== snapshot ? el : null;
+      if (current !== snapshot) state.dirtyEls.add(el);
+      else state.dirtyEls.delete(el);
     });
 
+    // Save-conflict resolution: never silently discard the user's edit. Keep
+    // their text in the field and offer an explicit choice. "Keep mine" re-saves
+    // (the save queue refreshed the cached revision on the 409, so the retry
+    // targets the current revision and overwrites); "Load latest" replaces the
+    // field with the server value. The element stays dirty until resolved.
+    const runConflict = (resolved, mine, latestValue) => {
+      state.dirtyEls.add(el);
+      el.classList.add('cms-conflict');
+      showToast.conflict({
+        message: 'This content changed elsewhere while you were editing.',
+        onKeepMine: async () => {
+          el.classList.remove('cms-conflict');
+          el.classList.add('cms-saving');
+          const retry = await saveField(resolved.collection, resolved.id, resolved.field, mine);
+          el.classList.remove('cms-saving');
+          flash(el, retry.ok);
+          if (retry.ok) {
+            state.dirtyEls.delete(el);
+            syncBoundText(attr, mine);
+            showToast('Your version saved', 'success');
+          } else if (retry.reason === 'conflict') {
+            runConflict(resolved, mine, retry.latestValue);
+          } else if (retry.reason !== 'unauthorized') {
+            showToast('Failed to save. Try again.', 'error');
+          }
+        },
+        onLoadLatest: () => {
+          el.classList.remove('cms-conflict');
+          state.dirtyEls.delete(el);
+          const value = typeof latestValue === 'string' ? latestValue : mine;
+          applyTextValue(el, value);
+          snapshots.set(el, isRich ? sanitizeHtml(value) : value);
+          syncBoundText(attr, value);
+          showToast('Loaded latest version', 'success');
+        },
+      });
+    };
+
     el.addEventListener('blur', async () => {
       removeLinkHint();
 
@@ -107,7 +163,7 @@ export function mountTextEditors({
       // Skip save if Escape was pressed
       if (el._caretSkipSave) {
         el._caretSkipSave = false;
-        state.dirtyEl = null;
+        state.dirtyEls.delete(el);
         if (isRich) {
           el.innerHTML = snapshots.get(el) || '';
         } else if (isLinkable) {
@@ -147,24 +203,19 @@ export function mountTextEditors({
       const result = await saveField(resolved.collection, resolved.id, resolved.field, current);
       el.classList.remove('cms-saving');
       flash(el, result.ok);
-      state.dirtyEl = null;
 
-      // Sync all duplicated text bindings
       if (result.ok) {
+        state.dirtyEls.delete(el);
         syncBoundText(attr, current);
         showToast('Content saved', 'success');
-      } else {
-        const rollbackValue =
-          result.reason === 'conflict' && typeof result.latestValue === 'string'
-            ? result.latestValue
-            : snapshot;
-        syncBoundText(attr, rollbackValue);
-
-        if (result.reason === 'conflict') {
-          showToast('Content changed elsewhere. Loaded latest value.', 'error');
-        } else if (result.reason !== 'unauthorized') {
-          showToast('Failed to save. Changes reverted.', 'error');
-        }
+      } else if (result.reason === 'conflict') {
+        // Preserve the user's edit and let them choose — don't overwrite it.
+        runConflict(resolved, current, result.latestValue);
+      } else if (result.reason !== 'unauthorized') {
+        // Genuine failure (not an auth redirect): revert to the pre-edit snapshot.
+        state.dirtyEls.delete(el);
+        syncBoundText(attr, snapshot);
+        showToast('Failed to save. Changes reverted.', 'error');
       }
     });
   });

package/static/cms/editor/text-link-interactions.js

@@ -177,10 +177,10 @@ export function createTextLinkInteractions({
               }
             }
 
-            state.dirtyEl = focused;
+            state.dirtyEls.add(focused);
           } else if (url === '' && existingLink) {
             document.execCommand('unlink', false, null);
-            state.dirtyEl = focused;
+            state.dirtyEls.add(focused);
           }
 
           state.linkPopupEl = null;
@@ -208,7 +208,7 @@ export function createTextLinkInteractions({
             newSel.removeAllRanges();
             newSel.addRange(range);
             document.execCommand('insertText', false, `[${selectedText}](${url})`);
-            state.dirtyEl = focused;
+            state.dirtyEls.add(focused);
           }
 
           state.linkPopupEl = null;
@@ -235,7 +235,7 @@ export function createTextLinkInteractions({
           } else {
             focused.textContent = snapshot;
           }
-          state.dirtyEl = null;
+          state.dirtyEls.delete(focused);
         }
         focused._caretSkipSave = true;
         focused.blur();

package/static/cms/editor/toast.css

@@ -2,11 +2,20 @@
    Toast notifications
    --------------------------------------------------------------------------- */
 
-.cms-toast {
+.cms-toast-stack {
   position: fixed;
   bottom: 62px;
   right: 24px;
   z-index: 100000;
+  display: flex;
+  flex-direction: column-reverse; /* newest nearest the toolbar */
+  align-items: flex-end;
+  gap: 8px;
+  max-width: min(360px, calc(100vw - 48px));
+  pointer-events: none; /* the region is inert; interactive toasts opt back in */
+}
+
+.cms-toast {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -16,7 +25,7 @@
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
   font-family: var(--cms-font);
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.86);
   border-radius: 2px;
   opacity: 0;
   transform: translateY(8px) scale(0.98);
@@ -24,22 +33,114 @@
   pointer-events: none;
 }
 
+/* Sticky / actionable toasts must receive clicks (close + conflict buttons). */
+.cms-toast.cms-toast-interactive {
+  pointer-events: auto;
+}
+
 .cms-toast.cms-toast-out {
   animation: cms-toast-out 0.3s ease forwards;
 }
 
+.cms-toast-msg {
+  flex: 1 1 auto;
+  line-height: 1.4;
+}
+
 .cms-toast-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }
 
+.cms-toast-icon-wrap {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
 .cms-toast-success { border-left: 3px solid var(--cms-green); }
 .cms-toast-success .cms-toast-icon { color: var(--cms-green); }
 
 .cms-toast-error { border-left: 3px solid var(--cms-red); }
 .cms-toast-error .cms-toast-icon { color: var(--cms-red); }
 
+.cms-toast-warning { border-left: 3px solid var(--cms-amber, #eab308); }
+.cms-toast-warning .cms-toast-icon { color: var(--cms-amber, #eab308); }
+
+/* Conflict prompt lays the action buttons below the message. */
+.cms-toast-warning {
+  flex-wrap: wrap;
+}
+
+.cms-toast-actions {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  margin-top: 4px;
+  justify-content: flex-end;
+}
+
+.cms-toast-btn {
+  font-family: var(--cms-font);
+  font-size: 11px;
+  font-weight: 500;
+  padding: 5px 12px;
+  border-radius: 2px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.78);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.cms-toast-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.cms-toast-btn-primary {
+  border-color: var(--cms-blue, #3b82f6);
+  color: #fff;
+  background: var(--cms-blue, #3b82f6);
+}
+
+.cms-toast-btn-primary:hover {
+  filter: brightness(1.1);
+  background: var(--cms-blue, #3b82f6);
+}
+
+.cms-toast-btn:focus-visible,
+.cms-toast-close:focus-visible {
+  outline: 2px solid var(--cms-blue, #3b82f6);
+  outline-offset: 2px;
+}
+
+.cms-toast-close {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  margin-left: 2px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+.cms-toast-close:hover {
+  color: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+/* An editable region awaiting a conflict decision. */
+.cms-editable.cms-conflict {
+  outline: 2px solid var(--cms-amber, #eab308) !important;
+  outline-offset: 4px;
+}
+
 @keyframes cms-toast-in {
   to { opacity: 1; transform: translateY(0) scale(1); }
 }
@@ -48,3 +149,14 @@
   to { opacity: 0; transform: translateY(12px) scale(0.98); }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .cms-toast {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  .cms-toast.cms-toast-out {
+    animation: none;
+    opacity: 0;
+  }
+}

package/static/cms/editor/toast.js

@@ -1,29 +1,128 @@
+const SUCCESS_SVG =
+  '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>';
+const ERROR_SVG =
+  '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
+const WARNING_SVG =
+  '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
+
+function iconFor(type) {
+  if (type === 'success') return SUCCESS_SVG;
+  if (type === 'warning') return WARNING_SVG;
+  return ERROR_SVG;
+}
+
+/**
+ * Toast controller. Returns a `showToast(message, type)` function with a
+ * `.conflict()` method for the two-choice save-conflict prompt.
+ *
+ * Design notes:
+ *  - Toasts stack (a container region) instead of one replacing the next, so a
+ *    burst of saves or an error + a later success don't clobber each other.
+ *  - Errors and conflict prompts are STICKY and dismissible — a 2.5s auto-hide
+ *    would let a failure or a data-loss choice vanish before it's read.
+ *  - The message is always set via textContent, never innerHTML, so a
+ *    server-provided error string can't inject markup into the editor chrome.
+ *  - The container is an aria-live region; errors/conflicts are role="alert".
+ */
 export function createToast() {
-  let activeToast = null;
+  let container = null;
 
-  return function showToast(message, type) {
-    if (activeToast) {
-      activeToast.remove();
-    }
+  function ensureContainer() {
+    if (container && document.body.contains(container)) return container;
+    container = document.createElement('div');
+    container.className = 'cms-toast-stack';
+    container.setAttribute('aria-live', 'polite');
+    document.body.appendChild(container);
+    return container;
+  }
+
+  function dismiss(toast) {
+    if (toast._caretDismissed) return;
+    toast._caretDismissed = true;
+    toast.classList.add('cms-toast-out');
+    setTimeout(() => toast.remove(), 300);
+  }
+
+  function render(type, { message, sticky, actions, role }) {
+    const stack = ensureContainer();
 
     const toast = document.createElement('div');
     toast.className = `cms-toast cms-toast-${type}`;
+    if (role) toast.setAttribute('role', role);
+    if (sticky || (actions && actions.length)) toast.classList.add('cms-toast-interactive');
+
+    const iconWrap = document.createElement('span');
+    iconWrap.className = 'cms-toast-icon-wrap';
+    iconWrap.setAttribute('aria-hidden', 'true');
+    iconWrap.innerHTML = iconFor(type); // trusted constant SVG only
+    toast.appendChild(iconWrap);
+
+    const msg = document.createElement('span');
+    msg.className = 'cms-toast-msg';
+    msg.textContent = message; // never innerHTML — message may carry server text
+    toast.appendChild(msg);
+
+    if (actions && actions.length) {
+      const group = document.createElement('div');
+      group.className = 'cms-toast-actions';
+      for (const action of actions) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = `cms-toast-btn${action.primary ? ' cms-toast-btn-primary' : ''}`;
+        btn.textContent = action.label;
+        btn.addEventListener('click', () => {
+          dismiss(toast);
+          try {
+            action.onClick();
+          } catch (e) {
+            /* action errors shouldn't break the toast */
+          }
+        });
+        group.appendChild(btn);
+      }
+      toast.appendChild(group);
+    } else if (sticky) {
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.className = 'cms-toast-close';
+      close.setAttribute('aria-label', 'Dismiss');
+      close.textContent = '×';
+      close.addEventListener('click', () => dismiss(toast));
+      toast.appendChild(close);
+    }
+
+    stack.appendChild(toast);
+    if (!sticky) setTimeout(() => dismiss(toast), 2500);
+    return toast;
+  }
+
+  function showToast(message, type) {
+    const t = type === 'error' ? 'error' : type || 'success';
+    return render(t, {
+      message,
+      sticky: t === 'error',
+      role: t === 'error' ? 'alert' : undefined,
+    });
+  }
+
+  // Two-choice save-conflict prompt. Sticky so the user's edit is never silently
+  // discarded — they explicitly choose to keep theirs or load the latest.
+  showToast.conflict = ({
+    message,
+    onKeepMine,
+    onLoadLatest,
+    keepLabel = 'Keep mine',
+    latestLabel = 'Load latest',
+  }) =>
+    render('warning', {
+      message,
+      sticky: true,
+      role: 'alert',
+      actions: [
+        { label: keepLabel, primary: true, onClick: onKeepMine },
+        { label: latestLabel, onClick: onLoadLatest },
+      ],
+    });
 
-    const iconSvg =
-      type === 'success'
-        ? '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>'
-        : '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
-
-    toast.innerHTML = iconSvg + `<span>${message}</span>`;
-    document.body.appendChild(toast);
-    activeToast = toast;
-
-    setTimeout(() => {
-      toast.classList.add('cms-toast-out');
-      setTimeout(() => {
-        toast.remove();
-        if (activeToast === toast) activeToast = null;
-      }, 300);
-    }, 2500);
-  };
+  return showToast;
 }

package/static/cms/editor/tokens-and-text.css

@@ -16,14 +16,43 @@
   --cms-green: #22c55e;
   --cms-red: #ef4444;
   --cms-yellow: #eab308;
+  --cms-amber: #eab308;
   --cms-font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
 
+/* ---------------------------------------------------------------------------
+   Host-style insulation
+
+   The editor chrome is injected as direct <body> children on the HOST site, so
+   an aggressive host reset (`* {}`, `body {}`, tag selectors) can bleed into it
+   — distorting fonts, line-height, letter-spacing, or box model. Pin the chrome
+   roots to sane defaults so they render consistently regardless of the host's
+   CSS. (Individual controls set their own type where needed.)
+   --------------------------------------------------------------------------- */
+.cms-toolbar,
+.cms-toast-stack,
+.cms-toast,
+.cms-link-popover,
+.cms-content-map,
+.cms-link-follow,
+.cms-rich-toolbar,
+.cms-studio-panel {
+  box-sizing: border-box;
+  font-family: var(--cms-font);
+  line-height: normal;
+  letter-spacing: normal;
+  text-transform: none;
+  text-align: left;
+}
+
 /* ---------------------------------------------------------------------------
    Text editing affordances — simple blue outline
    --------------------------------------------------------------------------- */
 
-[data-caret].cms-editable {
+/* Both field bindings (data-caret) and markdown body blocks (data-caret-md)
+   carry .cms-editable, so the hover/focus affordances apply to both. */
+[data-caret].cms-editable,
+[data-caret-md].cms-editable {
   cursor: text;
   transition: outline 0.2s, box-shadow 0.2s, background 0.4s;
   outline: 2px dashed transparent;
@@ -31,16 +60,57 @@
   border-radius: 2px;
 }
 
-[data-caret].cms-editable:hover {
+[data-caret].cms-editable:hover,
+[data-caret-md].cms-editable:hover {
   outline-color: var(--cms-blue-hover);
 }
 
-[data-caret].cms-editable:focus {
+[data-caret].cms-editable:focus,
+[data-caret-md].cms-editable:focus {
   outline: 2px solid var(--cms-blue);
   outline-offset: 4px;
   box-shadow: 0 0 0 4px var(--cms-blue-dim);
 }
 
+/* Briefly confirms that the paired Studio field was located. Save feedback is
+   green, so linked selection keeps the editor's blue navigation language. */
+.cms-linked-selection {
+  outline: 2px solid var(--cms-blue) !important;
+  outline-offset: 4px;
+  box-shadow: 0 0 0 4px var(--cms-blue-dim);
+  transition: outline-color 0.35s ease, box-shadow 0.35s ease;
+}
+
+/* ---------------------------------------------------------------------------
+   Unpublished body draft
+   The server rewrite tags blocks whose prose comes from an unpublished draft
+   (editor preview only — the public reads the base and never receives this).
+   Flag them so a reloaded preview is visibly distinct from live, published
+   prose and the editor knows a Publish is still pending.
+   --------------------------------------------------------------------------- */
+
+[data-caret-md-draft] {
+  position: relative;
+  background: var(--cms-blue-dim);
+  box-shadow: -0.6em 0 0 0 var(--cms-blue-dim);
+  border-radius: 2px;
+}
+
+[data-caret-md-draft]::after {
+  content: 'Draft';
+  position: absolute;
+  top: -0.6em;
+  right: 0;
+  font: 600 10px / 1 var(--cms-font);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #fff;
+  background: var(--cms-yellow);
+  padding: 3px 6px;
+  border-radius: 3px;
+  pointer-events: none;
+}
+
 /* ---------------------------------------------------------------------------
    Link/button click prevention in editor mode
    --------------------------------------------------------------------------- */

package/static/cms/editor/toolbar.css

@@ -133,7 +133,7 @@
   letter-spacing: 0.08em;
   text-transform: uppercase;
   background: transparent;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.72);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 2px;
   cursor: pointer;
@@ -189,7 +189,7 @@
 }
 
 .cms-status-text {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.72);
   font-size: 11px;
   font-weight: 400;
 }
@@ -220,6 +220,17 @@
   display: none;
 }
 
+/* Draft controls wrapper is transparent to the toolbar's flex layout so its
+   buttons keep the row's gap; [hidden] (server delivery, no pending draft)
+   still collapses the whole group. */
+.cms-draft-controls {
+  display: contents;
+}
+
+.cms-draft-controls[hidden] {
+  display: none;
+}
+
 /* Draft preview active — amber, signalling "unpublished" */
 .cms-toolbar button.cms-preview-btn-active {
   background: rgba(234, 179, 8, 0.12);
@@ -227,7 +238,7 @@
   color: var(--cms-yellow);
 }
 
-/* Go live — primary action on static delivery */
+/* Publish — primary action on static delivery */
 .cms-toolbar button.cms-go-live-btn {
   background: rgba(34, 197, 94, 0.12);
   border-color: rgba(34, 197, 94, 0.3);
@@ -240,7 +251,7 @@
   color: var(--cms-green);
 }
 
-/* Publish — green (server delivery when preview is manually enabled) */
+/* Publish — green */
 .cms-toolbar button.cms-publish-btn {
   background: rgba(34, 197, 94, 0.12);
   border-color: rgba(34, 197, 94, 0.3);
@@ -260,8 +271,9 @@
   color: var(--cms-red);
 }
 
-/* Highlight all mode — show every editable region */
-.cms-highlight-all [data-caret].cms-editable {
+/* Highlight all mode — show every editable region (fields AND body blocks) */
+.cms-highlight-all [data-caret].cms-editable,
+.cms-highlight-all [data-caret-md].cms-editable {
   outline-color: var(--cms-blue-hover);
   background: rgba(59, 130, 246, 0.04);
 }
@@ -275,6 +287,7 @@
    transition — motion is suppressed, the information is not. */
 @media (prefers-reduced-motion: reduce) {
   .cms-highlight-all [data-caret].cms-editable,
+  .cms-highlight-all [data-caret-md].cms-editable,
   .cms-highlight-all img[data-caret] {
     transition: none;
   }