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:
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
ref="editor"
:min-height="'calc(100vh - 60px)'"
: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) {