From 4acb18c7df8a6a72ca612bb26700585860d5d575 Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Fri, 22 May 2026 06:18:27 -0400
Subject: [PATCH] fix(ops/campaigns): drop loadBlank() call + force explicit
 editor dimensions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two bugs from the first prod test of the Unlayer editor:

1. `editor.value.loadBlank is not a function` — the loadBlank() method
   exists in newer Unlayer versions but NOT in vue-email-editor 2.2
   which wraps an older Unlayer. When no design is stored yet, just let
   the editor render its default empty state ("No content here. Drag
   content from left.") and show a Quasar notification telling the
   user how to start. No explicit load call needed.

2. Editor renders cramped/small — the EmailEditor component's nested
   iframe doesn't inherit dimensions from Quasar's q-page wrapper.
   Wrap the EmailEditor in an explicit-sized container:
       <div style="height: calc(100vh - 60px); width: 100%; overflow: hidden;">
   Plus pass style="height: 100%; width: 100%" to the EmailEditor itself.
   This gives the editor a full viewport-minus-toolbar canvas.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../campaigns/pages/TemplateEditorPage.vue    | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/apps/ops/src/modules/campaigns/pages/TemplateEditorPage.vue b/apps/ops/src/modules/campaigns/pages/TemplateEditorPage.vue
index aa578e5..c37c5cb 100644
--- a/apps/ops/src/modules/campaigns/pages/TemplateEditorPage.vue
+++ b/apps/ops/src/modules/campaigns/pages/TemplateEditorPage.vue
@@ -30,14 +30,20 @@
 
     <!-- Unlayer editor — Vue 3 native, no iframe, full features:
          responsive preview, AMP blocks, Unsplash, file manager, dark mode,
-         layers/structure panel, design tokens, etc. -->
-    <EmailEditor
-      ref="editor"
-      :min-height="'calc(100vh - 60px)'"
-      :options="editorOptions"
-      @load="onEditorLoad"
-      @ready="onEditorReady"
-    />
+         layers/structure panel, design tokens, etc.
+         Wrapped in an explicit-sized container so the inner iframe gets
+         enough height/width (Quasar's q-page doesn't propagate dimensions
+         that easyEditor's nested iframe can pick up automatically). -->
+    <div style="height: calc(100vh - 60px); width: 100%; overflow: hidden; position: relative;">
+      <EmailEditor
+        ref="editor"
+        :options="editorOptions"
+        :min-height="'100%'"
+        style="height: 100%; width: 100%;"
+        @load="onEditorLoad"
+        @ready="onEditorReady"
+      />
+    </div>
 
     <!-- Aperçu dialog — renders the latest saved HTML with sample vars -->
     <q-dialog v-model="previewOpen" maximized persistent>
@@ -179,22 +185,22 @@ async function loadTemplateIntoEditor (name) {
   if (!editorReady.value || !editor.value) return
   try {
     const data = await getTemplate(name)
-    // Priority: Unlayer's own design JSON > nothing (start blank)
-    // (MJML format from the previous editor isn't auto-importable into Unlayer.
-    //  The .html stored from legacy MJML compile is still valid email HTML
-    //  but Unlayer can't ingest arbitrary HTML — the user reconstructs once
-    //  and the design JSON saved by the next "Enregistrer" fixes future loads.)
+    // Priority: Unlayer design JSON saved by a previous edit > nothing.
+    // Legacy MJML/HTML templates aren't auto-importable into Unlayer's
+    // component tree — the user reconstructs visually once, and the
+    // design saved by the next "Enregistrer" fixes future loads.
     if (data.design) {
       const design = typeof data.design === 'string' ? JSON.parse(data.design) : data.design
       editor.value.loadDesign(design)
     } else {
-      // No design yet — load a sensible blank starter so the canvas isn't fully empty
-      editor.value.loadBlank({ backgroundColor: '#F5FAF7' })
+      // No saved design — vue-email-editor 2.x doesn't have a loadBlank()
+      // method on the ref, so we just let the editor show its default
+      // empty state ("No content here. Drag content from left.") and
+      // notify the user to start building.
       $q.notify({
         type: 'info',
-        message: `Pas encore de design pour "${name}" — canvas vide. ` +
-          `Construis visuellement puis enregistre pour persister.`,
-        timeout: 7000,
+        message: `Pas encore de design pour "${name}" — drag des blocs depuis la sidebar gauche pour construire la template, puis "Enregistrer".`,
+        timeout: 8000,
       })
     }
   } catch (e) {