active_canvas 0.0.5 → 0.1.0

data/app/assets/javascripts/active_canvas/editor/preview_modal.js

@@ -0,0 +1,112 @@
+/**
+ * ActiveCanvas Editor - Preview modal
+ *
+ * Renders the editor's unsaved state through the public view (preview_iframe)
+ * into a sandboxed iframe. Requests are sequenced so a stale response never
+ * replaces a newer one, and closing aborts the in-flight request.
+ */
+(function() {
+  'use strict';
+
+  function init() {
+    const btn = document.getElementById('btn-preview');
+    const modal = document.getElementById('preview-modal');
+    if (!btn || !modal) return;
+
+    const iframe = document.getElementById('preview-modal-iframe');
+    const loading = document.getElementById('preview-modal-loading');
+    const errorBox = document.getElementById('preview-modal-error');
+    const errorMsg = document.getElementById('preview-modal-error-message');
+    const closeBtn = document.getElementById('btn-close-preview');
+    const previewUrl = btn.dataset.previewUrl;
+
+    let seq = 0;
+    let controller = null;
+    let loadingTimer = null;
+
+    btn.addEventListener('click', open);
+    closeBtn.addEventListener('click', close);
+    modal.addEventListener('click', e => { if (e.target === modal) close(); });
+    document.addEventListener('keydown', e => {
+      if (isOpen() && e.key === 'Escape') { close(); return; }
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'p') {
+        if (document.activeElement && document.activeElement.closest('.monaco-editor')) return;
+        e.preventDefault();
+        if (!isOpen()) open();
+      }
+    });
+
+    function isOpen() { return !modal.hasAttribute('hidden'); }
+
+    function open() {
+      const editor = window.ActiveCanvasEditor && window.ActiveCanvasEditor.instance;
+      modal.removeAttribute('hidden');
+      document.body.style.overflow = 'hidden';
+
+      if (!editor) {
+        showError('Editor not ready yet — try again in a second.');
+        return;
+      }
+
+      showLoading();
+      const id = ++seq;
+      if (controller) controller.abort();
+      controller = new AbortController();
+
+      const html = editor.getHtml();
+      const content = window.ActiveCanvasChips ? window.ActiveCanvasChips.undecorate(html) : html;
+      const csrf = document.querySelector('meta[name="csrf-token"]');
+
+      fetch(previewUrl, {
+        method: 'POST',
+        signal: controller.signal,
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'X-CSRF-Token': csrf ? csrf.content : '',
+          'Accept': 'application/json'
+        },
+        body: new URLSearchParams({
+          content: content,
+          content_css: editor.getCss(),
+          content_js: (window.ActiveCanvasEditor && window.ActiveCanvasEditor.getJs) ? window.ActiveCanvasEditor.getJs() : '',
+          bindings: window.ActiveCanvasBindings ? window.ActiveCanvasBindings.readJson() : '{}'
+        }).toString()
+      })
+        .then(r => r.json().then(body => ({ ok: r.ok, body })))
+        .then(({ ok, body }) => {
+          if (id !== seq || !isOpen()) return;
+          if (ok && body.html) {
+            iframe.onload = hideLoading;
+            iframe.srcdoc = body.html;
+            clearTimeout(loadingTimer);
+            loadingTimer = setTimeout(hideLoading, 1500); // some browsers skip onload for srcdoc
+          } else {
+            showError((body && body.error && body.error.message) || 'Render failed');
+          }
+        })
+        .catch(err => {
+          if (err.name === 'AbortError' || id !== seq) return;
+          showError(err.message || 'Network error');
+        });
+    }
+
+    function close() {
+      seq++; // any response still in flight is now stale
+      if (controller) { controller.abort(); controller = null; }
+      clearTimeout(loadingTimer);
+      modal.setAttribute('hidden', '');
+      document.body.style.overflow = '';
+      iframe.onload = null;
+      iframe.srcdoc = '';
+      hideError();
+      hideLoading();
+    }
+
+    function showLoading() { loading.removeAttribute('hidden'); hideError(); }
+    function hideLoading() { loading.setAttribute('hidden', ''); }
+    function showError(message) { hideLoading(); errorMsg.textContent = message; errorBox.removeAttribute('hidden'); }
+    function hideError() { errorBox.setAttribute('hidden', ''); }
+  }
+
+  document.addEventListener('DOMContentLoaded', init);
+})();

data/app/assets/javascripts/active_canvas/editor/template_validator.js

@@ -0,0 +1,95 @@
+/**
+ * ActiveCanvas Editor - Template validator
+ *
+ * Posts the current source and bindings to validate_template after the
+ * canvas or the bindings change (debounced) and shows the first error in a
+ * banner above the canvas, with line and column. Never touches the canvas.
+ */
+(function() {
+  'use strict';
+
+  window.ActiveCanvasEditor = window.ActiveCanvasEditor || {};
+
+  function setupTemplateValidator(editor, config) {
+    const container = document.getElementById('data-panel-container');
+    if (!container || !config.templateEnabled) return;
+
+    const url = container.dataset.validateUrl;
+    const csrf = window.ActiveCanvasEditor.getCsrfToken();
+    let seq = 0;
+    let timer = null;
+    let lastPayload = null;
+
+    // Only Liquid tags and directives can change the validation result.
+    function liquidFingerprint(content) {
+      return (content.match(/\{\{[\s\S]*?\}\}|\{%[\s\S]*?%\}|data-ac-(?:for|if)="[^"]*"/g) || []).join('\n');
+    }
+
+    function currentPayload() {
+      const html = editor.getHtml();
+      const content = window.ActiveCanvasChips ? window.ActiveCanvasChips.undecorate(html) : html;
+      const bindingsJson = window.ActiveCanvasBindings.readJson();
+      return { payload: JSON.stringify({ content, bindings: bindingsJson }), fingerprint: liquidFingerprint(content) + '\n' + bindingsJson };
+    }
+
+    function validate(force) {
+      const { payload, fingerprint } = currentPayload();
+      if (!force && fingerprint === lastPayload) return;
+      lastPayload = fingerprint;
+      const id = ++seq;
+
+      fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf, 'Accept': 'application/json' },
+        body: payload
+      })
+        .then(r => r.json().then(body => ({ ok: r.ok, body })))
+        .then(({ ok, body }) => {
+          if (id !== seq) return; // a newer check is in flight
+          if (ok && body.ok) clearError();
+          else showError(body.error || { message: 'Template check failed' });
+        })
+        .catch(() => {
+          if (id === seq) showError({ message: 'Could not reach the server to check the template' });
+        });
+    }
+
+    function schedule() {
+      clearTimeout(timer);
+      timer = setTimeout(() => validate(false), 2000);
+    }
+
+    editor.on('load', () => validate(true));
+    editor.on('component:update component:add component:remove', schedule);
+    document.addEventListener('ac:bindings-changed', () => validate(true));
+
+    function showError(err) {
+      let banner = document.getElementById('ac-error-banner');
+      if (!banner) {
+        banner = document.createElement('div');
+        banner.id = 'ac-error-banner';
+        banner.className = 'ac-error-banner';
+        (document.querySelector('.editor-canvas') || document.body).prepend(banner);
+      }
+      const where = err.line ? ` (line ${err.line}${err.column ? `, column ${err.column}` : ''})` : '';
+      const message = String(err.message || '').replace(/^Liquid (?:syntax )?error \(line \d+\): /, '');
+      banner.innerHTML = '';
+      const text = document.createElement('span');
+      text.textContent = `Template error: ${message}${where}`;
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.className = 'ac-error-banner-close';
+      close.title = 'Dismiss';
+      close.textContent = '×';
+      close.addEventListener('click', clearError);
+      banner.append(text, close);
+    }
+
+    function clearError() {
+      const banner = document.getElementById('ac-error-banner');
+      if (banner) banner.remove();
+    }
+  }
+
+  window.ActiveCanvasEditor.setupTemplateValidator = setupTemplateValidator;
+})();

data/app/assets/javascripts/active_canvas/editor.js

@@ -38,9 +38,12 @@
   function initEditor(config) {
     const csrfToken = window.ActiveCanvasEditor.getCsrfToken();
 
-    // Parse components JSON if available, otherwise use HTML content
+    // Dynamic pages always load their Liquid SOURCE, decorated with chips;
+    // the components JSON is not used for them (it is not persisted either).
     let componentsToLoad = config.content || '';
-    if (config.contentComponents) {
+    if (config.templateEnabled && window.ActiveCanvasChips) {
+      componentsToLoad = window.ActiveCanvasChips.decorate(componentsToLoad);
+    } else if (config.contentComponents) {
       try {
         componentsToLoad = JSON.parse(config.contentComponents);
       } catch (e) {
@@ -66,6 +69,11 @@
       // Storage - we'll handle saving manually
       storageManager: false,
 
+      // Text blocks that contain a Liquid chip must still be editable text.
+      parser: {
+        textTypes: ['text', 'textnode', 'comment', 'ac-chip']
+      },
+
       // Device Manager
       deviceManager: {
         devices: [
@@ -147,7 +155,8 @@
         'grapesjs-touch',
         'grapesjs-parser-postcss',
         'grapesjs-tooltip',
-        'grapesjs-typed'
+        'grapesjs-typed',
+        window.ActiveCanvasChips ? window.ActiveCanvasChips.plugin : function() {}
       ],
 
       pluginsOpts: {
@@ -285,6 +294,15 @@
     // Setup RTE toolbar visibility
     AC.setupRteToolbar(editor);
 
+    // Loop / condition traits for dynamic pages
+    if (AC.setupDirectiveTraits) AC.setupDirectiveTraits(editor, config);
+
+    // Server-side template check with an error banner
+    if (AC.setupTemplateValidator) AC.setupTemplateValidator(editor, config);
+
+    // Live values inside the canvas for dynamic pages
+    if (AC.setupLiveData) AC.setupLiveData(editor, config);
+
     // Setup assets panel
     AC.setupAssetsPanel(editor, config, csrfToken);