active_canvas 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4b96c0042fa7c12334c67d92ab53a6a59766099111c0abbb854b386f95c69fa
-  data.tar.gz: 4c49e4bdcaea61447a43c4b2a4b7111904354f6f343a8a5ff17eaa08525ee0bd
+  metadata.gz: 379f677cf18be6230e9307e1380a024d6252a4add2b2cd954dfa6769a91b2541
+  data.tar.gz: fb55ab3e7801bae61423982e903cf61d35c396fb523209154a730e67b6fe93ff
 SHA512:
-  metadata.gz: 177d5257bac30fe5da6e91cb5c65bd9584648a5173fbe7c654bbd2dd1f85f6b85d357d3a56cfc07dd3d6595a8ca7de71a8ff38f8f3ae5cc6e1215e0d7dcc50c7
-  data.tar.gz: e02cc03e5f88c357338b92e627e707c392fa9de486157925156d619b86061db8d3079a7b4cc2278e4969f37a4a12fa324e84140fa1d737844ed5e29b1fe7918c
+  metadata.gz: f68e873c9f4950c4b11ecf7a673d4edf911a719bbea2f163e9da45809facebf2a5ec822293dd1077922106a507f4e017b1d1312ca7ab99a207a5212cae8fda2e
+  data.tar.gz: cfcb65632db1f023976acf5699880d615120f6ae669922c4f5c5d39cb0b61ce1daf0fed55a136e9b3b9d6e585d08143eca45b8446602f30b2dfa03686904eac2

data/README.md

@@ -1,5 +1,7 @@
 # ActiveCanvas
 
+![ActiveCanvas Demo](docs/images/active-canvas-demo.gif)
+
 A mountable Rails engine that turns any Rails app into a full-featured CMS. Includes a visual drag-and-drop editor (GrapeJS), AI-powered content generation, Tailwind CSS compilation, media management, page versioning, and SEO controls -- all behind an admin interface that works out of the box.
 
 ## Features

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

@@ -29,6 +29,7 @@
     let cssMonacoEditor = null;
     let jsMonacoEditor = null;
     let monacoInitialized = false;
+    let isSyncing = false;
 
     // Component editing mode
     let editingComponent = null;
@@ -201,6 +202,7 @@
     // Sync GrapeJS content to Monaco editors
     function syncGrapeJSToMonaco() {
       if (!monacoInitialized) return;
+      isSyncing = true;
 
       if (isComponentMode && editingComponent) {
         htmlMonacoEditor.setValue(editingComponent.toHTML());
@@ -208,7 +210,13 @@
         htmlMonacoEditor.setValue(editor.getHtml());
       }
       cssMonacoEditor.setValue(editor.getCss());
-      setTimeout(formatAllCode, 50);
+      setTimeout(async () => {
+        try {
+          await formatAllCode();
+        } finally {
+          isSyncing = false;
+        }
+      }, 50);
     }
 
     // Update GrapeJS preview from Monaco
@@ -252,7 +260,9 @@
       } catch (e) {
         console.error('Error replacing component:', e);
         try {
+          component.components().reset();
           component.components(html);
+          editor.select(component);
         } catch (e2) {
           console.error('Error updating component content:', e2);
         }
@@ -285,8 +295,15 @@
       if (!monacoInitialized) {
         initMonacoEditors();
         setTimeout(() => {
+          isSyncing = true;
           htmlMonacoEditor.setValue(component.toHTML());
-          setTimeout(() => htmlMonacoEditor.getAction('editor.action.formatDocument').run(), 50);
+          setTimeout(async () => {
+            try {
+              await htmlMonacoEditor.getAction('editor.action.formatDocument').run();
+            } finally {
+              isSyncing = false;
+            }
+          }, 50);
 
           document.getElementById('monaco-html-container').style.display = 'block';
           document.getElementById('monaco-css-container').style.display = 'none';
@@ -296,8 +313,15 @@
           htmlMonacoEditor.focus();
         }, 200);
       } else {
+        isSyncing = true;
         htmlMonacoEditor.setValue(component.toHTML());
-        setTimeout(() => htmlMonacoEditor.getAction('editor.action.formatDocument').run(), 50);
+        setTimeout(async () => {
+          try {
+            await htmlMonacoEditor.getAction('editor.action.formatDocument').run();
+          } finally {
+            isSyncing = false;
+          }
+        }, 50);
 
         document.getElementById('monaco-html-container').style.display = 'block';
         document.getElementById('monaco-css-container').style.display = 'none';
@@ -343,6 +367,8 @@
     }
 
     function scheduleCodeUpdate() {
+      if (isSyncing) return;
+
       if (statusEl) {
         statusEl.textContent = 'Modified...';
         statusEl.className = 'code-status modified';

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

@@ -180,17 +180,22 @@
     document.addEventListener('keydown', function(e) {
       if ((e.ctrlKey || e.metaKey) && e.key === 's') {
         e.preventDefault();
+        if (document.activeElement && document.activeElement.closest('.monaco-editor')) return;
         saveContent(false);
       }
     });
 
+    let saveInProgress = false;
+
     // Auto-save every 60 seconds
     setInterval(() => {
       saveContent(true);
     }, 60000);
 
     function saveContent(isAutoSave) {
-      const saveBtn = document.getElementById('btn-save');
+      if (saveInProgress) return;
+      saveInProgress = true;
+
       if (saveBtn) saveBtn.disabled = true;
 
       const html = editor.getHtml();
@@ -243,6 +248,7 @@
         console.error('Save error:', error);
       })
       .finally(() => {
+        saveInProgress = false;
         if (saveBtn) saveBtn.disabled = false;
       });
     }

data/lib/active_canvas/version.rb

@@ -1,3 +1,3 @@
 module ActiveCanvas
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: active_canvas
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Giovanni Panasiti
 bindir: bin
 cert_chain: []
-date: 2026-02-26 00:00:00.000000000 Z
+date: 2026-04-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails