@mahe_pkm/buzl-html-editor 0.1.0 → 0.2.1

package/dist/public/public-live-edit.js

@@ -0,0 +1,286 @@
+(() => {
+  'use strict';
+
+  const runtime = document.currentScript
+    || document.querySelector('script[data-buzl-live-edit-runtime]');
+  if (!runtime || !runtime.dataset.buzlPageToken) return;
+
+  const pageToken = runtime.dataset.buzlPageToken;
+  const pagePath = runtime.dataset.buzlPagePath || window.location.pathname;
+  const editableSelector = '[data-buzl-public-edit-key]';
+  const originals = new Map();
+  const histories = new Map();
+  const dirtyKeys = new Set();
+  let editMode = false;
+  let menuOpen = false;
+  let activeKey = null;
+  let lastChangedKey = null;
+  let saving = false;
+
+  const host = document.createElement('div');
+  host.setAttribute('data-buzl-public-editor-ui', 'true');
+  const shadow = host.attachShadow({ mode: 'open' });
+  const stylesheet = document.createElement('link');
+  stylesheet.rel = 'stylesheet';
+  stylesheet.href = '/__buzl/live-edit.css';
+  shadow.appendChild(stylesheet);
+
+  const toolbar = document.createElement('div');
+  toolbar.className = 'buzl-toolbar';
+  toolbar.setAttribute('role', 'toolbar');
+  toolbar.setAttribute('aria-label', 'Buzl page editor');
+  toolbar.innerHTML = `
+    <button class="buzl-launcher" type="button" data-menu-toggle aria-label="Open Buzl editor" title="Open Buzl editor" aria-expanded="false" aria-controls="buzl-editor-menu"><span aria-hidden="true">✎</span></button>
+    <div class="buzl-menu" id="buzl-editor-menu" data-menu>
+      <span class="buzl-status" data-status title="${escapeAttribute(pagePath)}">Ready to edit this page</span>
+      <button class="buzl-primary" type="button" data-toggle aria-pressed="false">Edit Text</button>
+      <button type="button" data-save disabled>Save</button>
+      <button type="button" data-undo disabled>Undo</button>
+      <button type="button" data-cancel disabled>Cancel</button>
+      <a href="/admin/" data-advanced>Advanced Editor</a>
+    </div>
+  `;
+  shadow.appendChild(toolbar);
+  document.documentElement.appendChild(host);
+
+  const toggleButton = shadow.querySelector('[data-toggle]');
+  const menuButton = shadow.querySelector('[data-menu-toggle]');
+  const saveButton = shadow.querySelector('[data-save]');
+  const undoButton = shadow.querySelector('[data-undo]');
+  const cancelButton = shadow.querySelector('[data-cancel]');
+  const statusLabel = shadow.querySelector('[data-status]');
+
+  function escapeAttribute(value) {
+    return String(value)
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  function setStatus(message, tone = '') {
+    statusLabel.textContent = message;
+    if (tone) statusLabel.dataset.tone = tone;
+    else delete statusLabel.dataset.tone;
+  }
+
+  function visibleEditableElements() {
+    return Array.from(document.querySelectorAll(editableSelector)).filter((element) => {
+      if (!element.textContent || !element.textContent.trim()) return false;
+      if (element.closest('[data-buzl-public-editor-ui], [aria-hidden="true"], svg, script, style, noscript, input, textarea, select')) {
+        return false;
+      }
+      const styles = window.getComputedStyle(element);
+      const box = element.getBoundingClientRect();
+      return styles.display !== 'none'
+        && styles.visibility !== 'hidden'
+        && box.width > 0
+        && box.height > 0;
+    });
+  }
+
+  function ensureOriginal(element) {
+    const key = element.dataset.buzlPublicEditKey;
+    if (!originals.has(key)) originals.set(key, element.innerHTML);
+    if (!histories.has(key)) histories.set(key, []);
+    return key;
+  }
+
+  function changedElements() {
+    return Array.from(document.querySelectorAll(editableSelector)).filter((element) => (
+      dirtyKeys.has(element.dataset.buzlPublicEditKey)
+    ));
+  }
+
+  function updateControls() {
+    const changed = changedElements();
+    const dirty = changed.length > 0;
+    toggleButton.textContent = editMode ? 'Editing On' : 'Edit Text';
+    const keepMenuOpen = menuOpen || editMode || dirty;
+    toolbar.dataset.expanded = String(keepMenuOpen);
+    menuButton.setAttribute('aria-expanded', String(keepMenuOpen));
+    menuButton.setAttribute('aria-label', editMode ? 'Buzl editing menu' : 'Open Buzl editor');
+    menuButton.title = editMode ? 'Buzl editing menu' : 'Open Buzl editor';
+    toggleButton.setAttribute('aria-pressed', String(editMode));
+    saveButton.disabled = !dirty || saving;
+    cancelButton.disabled = !dirty || saving;
+    const history = activeKey ? histories.get(activeKey) : histories.get(lastChangedKey);
+    undoButton.disabled = !history || history.length === 0 || saving;
+    if (dirty && !saving) setStatus(`${changed.length} unsaved change${changed.length === 1 ? '' : 's'}`, 'warning');
+    if (!dirty && !saving) setStatus(editMode ? 'Click highlighted text to edit' : 'Ready to edit this page');
+  }
+
+  function setMenuOpen(nextOpen) {
+    if (!nextOpen && (editMode || changedElements().length)) return;
+    menuOpen = Boolean(nextOpen);
+    updateControls();
+  }
+
+  function setEditMode(nextMode) {
+    editMode = Boolean(nextMode);
+    document.body.classList.toggle('buzl-public-editing', editMode);
+    for (const element of document.querySelectorAll(editableSelector)) {
+      if (editMode) {
+        element.setAttribute('contenteditable', 'true');
+        element.setAttribute('spellcheck', 'true');
+        element.setAttribute('data-buzl-public-edit', 'true');
+      } else {
+        element.removeAttribute('contenteditable');
+        element.removeAttribute('spellcheck');
+        element.removeAttribute('data-buzl-public-edit');
+      }
+    }
+    updateControls();
+  }
+
+  function restoreOriginals() {
+    for (const key of dirtyKeys) {
+      const element = document.querySelector(`[data-buzl-public-edit-key="${CSS.escape(key)}"]`);
+      if (element && originals.has(key)) element.innerHTML = originals.get(key);
+      histories.set(key, []);
+    }
+    dirtyKeys.clear();
+    activeKey = null;
+    lastChangedKey = null;
+  }
+
+  async function saveChanges() {
+    if (saving) return;
+    const changed = changedElements();
+    if (!changed.length) return;
+
+    saving = true;
+    updateControls();
+    setStatus('Saving…', 'warning');
+    try {
+      const response = await fetch('/__buzl/live-edit/save', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          pageToken,
+          changes: changed.map((element) => ({
+            key: element.dataset.buzlPublicEditKey,
+            html: element.innerHTML,
+          })),
+        }),
+      });
+      const result = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(result.error || 'Could not save this page');
+
+      const savedChanges = new Map(
+        Array.isArray(result.savedChanges)
+          ? result.savedChanges.map((change) => [String(change.key), String(change.html)])
+          : [],
+      );
+      for (const element of changed) {
+        const key = ensureOriginal(element);
+        if (savedChanges.has(key)) element.innerHTML = savedChanges.get(key);
+        originals.set(key, element.innerHTML);
+        histories.set(key, []);
+        dirtyKeys.delete(key);
+      }
+      activeKey = null;
+      lastChangedKey = null;
+      const successMessage = `Saved ${result.savedCount || changed.length} change${changed.length === 1 ? '' : 's'}`;
+      setStatus(successMessage, 'success');
+      setTimeout(() => {
+        if (!changedElements().length) updateControls();
+      }, 1800);
+    } catch (error) {
+      setStatus(error.message || 'Save failed', 'error');
+    } finally {
+      saving = false;
+      updateControls();
+      if (!changedElements().length) {
+        setStatus('Saved successfully', 'success');
+      }
+    }
+  }
+
+  menuButton.addEventListener('click', () => setMenuOpen(!menuOpen));
+  toggleButton.addEventListener('click', () => {
+    menuOpen = true;
+    setEditMode(!editMode);
+  });
+  saveButton.addEventListener('click', saveChanges);
+  cancelButton.addEventListener('click', () => {
+    if (!changedElements().length || window.confirm('Discard all unsaved text changes on this page?')) {
+      restoreOriginals();
+      setEditMode(false);
+      setStatus('Changes cancelled');
+    }
+  });
+  undoButton.addEventListener('click', () => {
+    const key = activeKey || lastChangedKey;
+    if (!key) return;
+    const element = document.querySelector(`[data-buzl-public-edit-key="${CSS.escape(key)}"]`);
+    const history = histories.get(key) || [];
+    if (!element || !history.length) return;
+    element.innerHTML = history.pop();
+    activeKey = key;
+    if (element.innerHTML === originals.get(key)) dirtyKeys.delete(key);
+    else dirtyKeys.add(key);
+    updateControls();
+    element.focus();
+  });
+
+  document.addEventListener('focusin', (event) => {
+    const element = event.target.closest && event.target.closest('[data-buzl-public-edit="true"]');
+    if (element) {
+      const key = element.dataset.buzlPublicEditKey;
+      if (!dirtyKeys.has(key)) {
+        originals.set(key, element.innerHTML);
+        histories.set(key, []);
+      }
+      activeKey = key;
+    }
+  }, true);
+
+  document.addEventListener('beforeinput', (event) => {
+    const element = event.target.closest && event.target.closest('[data-buzl-public-edit="true"]');
+    if (!editMode || !element) return;
+    const key = ensureOriginal(element);
+    const history = histories.get(key);
+    if (history.at(-1) !== element.innerHTML) history.push(element.innerHTML);
+    if (history.length > 30) history.shift();
+    activeKey = key;
+    lastChangedKey = key;
+  }, true);
+
+  document.addEventListener('input', (event) => {
+    const element = event.target.closest && event.target.closest('[data-buzl-public-edit="true"]');
+    if (!editMode || !element) return;
+    lastChangedKey = ensureOriginal(element);
+    if (element.innerHTML === originals.get(lastChangedKey)) dirtyKeys.delete(lastChangedKey);
+    else dirtyKeys.add(lastChangedKey);
+    updateControls();
+  }, true);
+
+  document.addEventListener('click', (event) => {
+    if (!editMode) return;
+    const editable = event.target.closest && event.target.closest('[data-buzl-public-edit="true"]');
+    if (!editable) return;
+    if (editable.closest('a, button, summary')) event.preventDefault();
+    event.stopPropagation();
+  }, true);
+
+  document.addEventListener('keydown', (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+      event.preventDefault();
+      saveChanges();
+    }
+    if (editMode && event.key === 'Escape' && document.activeElement) {
+      document.activeElement.blur();
+    }
+    if (!editMode && event.key === 'Escape') setMenuOpen(false);
+  }, true);
+
+  window.addEventListener('beforeunload', (event) => {
+    if (!changedElements().length) return;
+    event.preventDefault();
+    event.returnValue = '';
+  });
+
+  updateControls();
+})();