louis/gigafibre-fsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ops/campaigns): drop loadBlank() call + force explicit editor dimensions

Browse Source 
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>
This commit is contained in:
louispaulb 2026-05-22 06:18:27 -04:00
parent 9dcd32ef6a
commit 4acb18c7df
1 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/ops/src/modules/campaigns/pages/TemplateEditorPage.vue
View File

@ -30,14 +30,20 @@
<!-- Unlayer editor — Vue 3 native, no iframe, full features: <!-- Unlayer editor — Vue 3 native, no iframe, full features:
responsive preview, AMP blocks, Unsplash, file manager, dark mode, responsive preview, AMP blocks, Unsplash, file manager, dark mode,
layers/structure panel, design tokens, etc. --> 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 <EmailEditor
ref="editor" ref="editor"
:min-height="'calc(100vh - 60px)'"
:options="editorOptions" :options="editorOptions"
:min-height="'100%'"
style="height: 100%; width: 100%;"
@load="onEditorLoad" @load="onEditorLoad"
@ready="onEditorReady" @ready="onEditorReady"
/> />
</div>
<!-- Aperçu dialog — renders the latest saved HTML with sample vars --> <!-- Aperçu dialog — renders the latest saved HTML with sample vars -->
<q-dialog v-model="previewOpen" maximized persistent> <q-dialog v-model="previewOpen" maximized persistent>
@ -179,22 +185,22 @@ async function loadTemplateIntoEditor (name) {
if (!editorReady.value || !editor.value) return if (!editorReady.value || !editor.value) return
try { try {
const data = await getTemplate(name) const data = await getTemplate(name)
// Priority: Unlayer's own design JSON > nothing (start blank) // Priority: Unlayer design JSON saved by a previous edit > nothing.
// (MJML format from the previous editor isn't auto-importable into Unlayer. // Legacy MJML/HTML templates aren't auto-importable into Unlayer's
// The .html stored from legacy MJML compile is still valid email HTML // component tree — the user reconstructs visually once, and the
// but Unlayer can't ingest arbitrary HTML — the user reconstructs once // design saved by the next "Enregistrer" fixes future loads.
// and the design JSON saved by the next "Enregistrer" fixes future loads.)
if (data.design) { if (data.design) {
const design = typeof data.design === 'string' ? JSON.parse(data.design) : data.design const design = typeof data.design === 'string' ? JSON.parse(data.design) : data.design
editor.value.loadDesign(design) editor.value.loadDesign(design)
} else { } else {
// No design yet — load a sensible blank starter so the canvas isn't fully empty // No saved design — vue-email-editor 2.x doesn't have a loadBlank()
editor.value.loadBlank({ backgroundColor: '#F5FAF7' }) // 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({ $q.notify({
type: 'info', type: 'info',
message: `Pas encore de design pour "${name}" — canvas vide. ` + message: `Pas encore de design pour "${name}" — drag des blocs depuis la sidebar gauche pour construire la template, puis "Enregistrer".`,
`Construis visuellement puis enregistre pour persister.`, timeout: 8000,
timeout: 7000,
}) })
} }
} catch (e) { } catch (e) {