From d7cd1f4ef7c7d8e0830a4c97f634b71dff1be39b Mon Sep 17 00:00:00 2001 From: Omer Zahid Bajwa Date: Wed, 24 Jul 2024 08:35:02 +0400 Subject: [PATCH 01/11] fix issue with peer dependency conflict in angular > 15 --- projects/email-editor/package.json | 6 ++---- projects/email-editor/src/lib/source.json | 6 ++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/projects/email-editor/package.json b/projects/email-editor/package.json index 3d69cdd..1878a13 100644 --- a/projects/email-editor/package.json +++ b/projects/email-editor/package.json @@ -1,10 +1,8 @@ { "name": "angular-email-editor", - "version": "15.1.1", + "version": "15.2.0", "peerDependencies": { - "@angular/common": "^15.0.0", - "@angular/core": "^15.0.0", - "unlayer-types": "latest" + "unlayer-types": "latest" }, "dependencies": { "tslib": "^2.3.0" diff --git a/projects/email-editor/src/lib/source.json b/projects/email-editor/src/lib/source.json index 3d69cdd..1878a13 100644 --- a/projects/email-editor/src/lib/source.json +++ b/projects/email-editor/src/lib/source.json @@ -1,10 +1,8 @@ { "name": "angular-email-editor", - "version": "15.1.1", + "version": "15.2.0", "peerDependencies": { - "@angular/common": "^15.0.0", - "@angular/core": "^15.0.0", - "unlayer-types": "latest" + "unlayer-types": "latest" }, "dependencies": { "tslib": "^2.3.0" From 1581c9633d99101f48ce275a4df79af8f3c58e99 Mon Sep 17 00:00:00 2001 From: Omer Zahid Bajwa Date: Mon, 21 Oct 2024 11:15:02 +0400 Subject: [PATCH 02/11] use latest editor version --- src/app/example/example.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/example/example.component.ts b/src/app/example/example.component.ts index fc22847..00474c1 100644 --- a/src/app/example/example.component.ts +++ b/src/app/example/example.component.ts @@ -13,6 +13,7 @@ export class ExampleComponent implements OnInit { appearance: { theme: 'modern_light', }, + version: 'latest' }; scriptUrl = 'https://editor.unlayer.com/embed.js?2'; From 5b91944412b3788809bb0c48970c6895afbbc6fb Mon Sep 17 00:00:00 2001 From: Adeel Raza Date: Fri, 25 Oct 2024 00:39:17 +0400 Subject: [PATCH 03/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0dc30ab..22284a6 100644 --- a/README.md +++ b/README.md @@ -131,4 +131,4 @@ You can submit new language translations by creating a PR on this GitHub repo: h ### License -Copyright (c) 2021 Unlayer. [MIT](LICENSE) Licensed. +Copyright (c) 2024 Unlayer. [MIT](LICENSE) Licensed. From 354a22f94fcf361483b69ba95d411c5ced46bc2a Mon Sep 17 00:00:00 2001 From: Adeel Raza Date: Fri, 25 Oct 2024 00:50:19 +0400 Subject: [PATCH 04/11] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 22284a6..82f4acc 100644 --- a/README.md +++ b/README.md @@ -91,9 +91,9 @@ Set skipLibCheck: true in tsconfig.json **tsconfig.json** ```ts - "compilerOptions": { - "skipLibCheck": true, - } +"compilerOptions": { + "skipLibCheck": true, +} ``` ### Methods From 7d9cd5c371d6138d50de8dc1e735bd50ccbc6c80 Mon Sep 17 00:00:00 2001 From: Adeel Raza Date: Fri, 25 Oct 2024 00:51:16 +0400 Subject: [PATCH 05/11] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 82f4acc..3cc1d5e 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,9 @@ export class AppComponent { ``` -Set skipLibCheck: true in tsconfig.json +**Skip Lib Check** + +Set `skipLibCheck: true` in `tsconfig.json`. **tsconfig.json** From ba93badad43c594b34cda05bcf605c620d09131b Mon Sep 17 00:00:00 2001 From: Adeel Raza Date: Fri, 25 Oct 2024 00:52:27 +0400 Subject: [PATCH 06/11] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3cc1d5e..4e1f718 100644 --- a/README.md +++ b/README.md @@ -93,8 +93,10 @@ Set `skipLibCheck: true` in `tsconfig.json`. **tsconfig.json** ```ts -"compilerOptions": { - "skipLibCheck": true, +{ + "compilerOptions": { + "skipLibCheck": true, + } } ``` From f8ea5b4a39b6252b59b419c99c707c35b74460f3 Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Wed, 26 Feb 2025 12:39:40 -0300 Subject: [PATCH 07/11] Add .history to .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 4cc82d1..b5a76cc 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,7 @@ .project .classpath .c9/ +.history *.launch .settings/ *.sublime-workspace From e6113b32e0466ea9c0edacfa67971e9bcd6d05c9 Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Wed, 26 Feb 2025 12:40:34 -0300 Subject: [PATCH 08/11] Remove $event param from load/ready events --- README.md | 4 ++-- .../angular-v10/src/app/app.component.html | 6 +++--- .../angular-v10/src/app/app.component.ts | 10 ++++------ .../angular-v11/src/app/app.component.html | 6 +++--- .../angular-v11/src/app/app.component.ts | 6 +++--- .../angular-v12/src/app/app.component.html | 6 +++--- .../angular-v12/src/app/app.component.ts | 6 +++--- .../angular-v13/src/app/app.component.html | 6 +++--- .../angular-v13/src/app/app.component.ts | 6 +++--- .../angular-v14/src/app/app.component.html | 6 +++--- .../angular-v14/src/app/app.component.ts | 6 +++--- .../angular-v15/src/app/app.component.html | 6 +++--- .../angular-v15/src/app/app.component.ts | 4 ++-- .../angular-v16/src/app/app.component.html | 6 +++--- .../angular-v16/src/app/app.component.ts | 6 +++--- .../angular-v17/src/app/app.component.html | 6 +++--- .../angular-v17/src/app/app.component.ts | 8 ++++---- .../angular-v18/src/app/app.component.html | 6 +++--- .../angular-v18/src/app/app.component.ts | 8 ++++---- .../angular-v7/src/app/app.component.html | 6 +++--- .../angular-v9/src/app/app.component.html | 6 +++--- .../angular-v9/src/app/app.component.ts | 6 +++--- angular-test-projects/app/app.component.html | 6 +++--- angular-test-projects/app/app.component.ts | 6 +++--- src/app/example/example.component.html | 4 ++-- src/app/example/example.component.ts | 7 +++---- 26 files changed, 78 insertions(+), 81 deletions(-) diff --git a/README.md b/README.md index 4e1f718..49ec91a 100644 --- a/README.md +++ b/README.md @@ -80,8 +80,8 @@ export class AppComponent {
``` diff --git a/angular-test-projects/angular-v10/src/app/app.component.html b/angular-test-projects/angular-v10/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v10/src/app/app.component.html +++ b/angular-test-projects/angular-v10/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v10/src/app/app.component.ts b/angular-test-projects/angular-v10/src/app/app.component.ts index 660c95f..482d5dc 100644 --- a/angular-test-projects/angular-v10/src/app/app.component.ts +++ b/angular-test-projects/angular-v10/src/app/app.component.ts @@ -11,18 +11,16 @@ export class AppComponent implements OnInit { @ViewChild(EmailEditorComponent) private emailEditor: EmailEditorComponent; - ngOnInit(): void { - - } + ngOnInit(): void {} // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -31,4 +29,4 @@ export class AppComponent implements OnInit { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v11/src/app/app.component.html b/angular-test-projects/angular-v11/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v11/src/app/app.component.html +++ b/angular-test-projects/angular-v11/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v11/src/app/app.component.ts b/angular-test-projects/angular-v11/src/app/app.component.ts index 6bec1f8..cd4e890 100644 --- a/angular-test-projects/angular-v11/src/app/app.component.ts +++ b/angular-test-projects/angular-v11/src/app/app.component.ts @@ -12,14 +12,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -28,4 +28,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v12/src/app/app.component.html b/angular-test-projects/angular-v12/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v12/src/app/app.component.html +++ b/angular-test-projects/angular-v12/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v12/src/app/app.component.ts b/angular-test-projects/angular-v12/src/app/app.component.ts index 6bec1f8..cd4e890 100644 --- a/angular-test-projects/angular-v12/src/app/app.component.ts +++ b/angular-test-projects/angular-v12/src/app/app.component.ts @@ -12,14 +12,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -28,4 +28,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v13/src/app/app.component.html b/angular-test-projects/angular-v13/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v13/src/app/app.component.html +++ b/angular-test-projects/angular-v13/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v13/src/app/app.component.ts b/angular-test-projects/angular-v13/src/app/app.component.ts index 6bec1f8..cd4e890 100644 --- a/angular-test-projects/angular-v13/src/app/app.component.ts +++ b/angular-test-projects/angular-v13/src/app/app.component.ts @@ -12,14 +12,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -28,4 +28,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v14/src/app/app.component.html b/angular-test-projects/angular-v14/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v14/src/app/app.component.html +++ b/angular-test-projects/angular-v14/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v14/src/app/app.component.ts b/angular-test-projects/angular-v14/src/app/app.component.ts index 6bec1f8..cd4e890 100644 --- a/angular-test-projects/angular-v14/src/app/app.component.ts +++ b/angular-test-projects/angular-v14/src/app/app.component.ts @@ -12,14 +12,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -28,4 +28,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v15/src/app/app.component.html b/angular-test-projects/angular-v15/src/app/app.component.html index ebceac3..b1d1284 100644 --- a/angular-test-projects/angular-v15/src/app/app.component.html +++ b/angular-test-projects/angular-v15/src/app/app.component.html @@ -3,8 +3,8 @@ - \ No newline at end of file + diff --git a/angular-test-projects/angular-v15/src/app/app.component.ts b/angular-test-projects/angular-v15/src/app/app.component.ts index 7e6475f..835a117 100644 --- a/angular-test-projects/angular-v15/src/app/app.component.ts +++ b/angular-test-projects/angular-v15/src/app/app.component.ts @@ -19,12 +19,12 @@ export class AppComponent { @ViewChild('editor') private emailEditor: EmailEditorComponent; - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); this.emailEditor.editor.loadDesign({}); } - editorReady($event) { + editorReady() { console.log('editorReady'); } diff --git a/angular-test-projects/angular-v16/src/app/app.component.html b/angular-test-projects/angular-v16/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v16/src/app/app.component.html +++ b/angular-test-projects/angular-v16/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v16/src/app/app.component.ts b/angular-test-projects/angular-v16/src/app/app.component.ts index 6bec1f8..cd4e890 100644 --- a/angular-test-projects/angular-v16/src/app/app.component.ts +++ b/angular-test-projects/angular-v16/src/app/app.component.ts @@ -12,14 +12,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -28,4 +28,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v17/src/app/app.component.html b/angular-test-projects/angular-v17/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v17/src/app/app.component.html +++ b/angular-test-projects/angular-v17/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v17/src/app/app.component.ts b/angular-test-projects/angular-v17/src/app/app.component.ts index 8cb84bf..636e930 100644 --- a/angular-test-projects/angular-v17/src/app/app.component.ts +++ b/angular-test-projects/angular-v17/src/app/app.component.ts @@ -4,7 +4,7 @@ import { EmailEditorComponent } from 'angular-email-editor'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'angular-email-editor'; @@ -13,14 +13,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -29,4 +29,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v18/src/app/app.component.html b/angular-test-projects/angular-v18/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v18/src/app/app.component.html +++ b/angular-test-projects/angular-v18/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v18/src/app/app.component.ts b/angular-test-projects/angular-v18/src/app/app.component.ts index 8cb84bf..636e930 100644 --- a/angular-test-projects/angular-v18/src/app/app.component.ts +++ b/angular-test-projects/angular-v18/src/app/app.component.ts @@ -4,7 +4,7 @@ import { EmailEditorComponent } from 'angular-email-editor'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'angular-email-editor'; @@ -13,14 +13,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -29,4 +29,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v7/src/app/app.component.html b/angular-test-projects/angular-v7/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v7/src/app/app.component.html +++ b/angular-test-projects/angular-v7/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v9/src/app/app.component.html b/angular-test-projects/angular-v9/src/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/angular-v9/src/app/app.component.html +++ b/angular-test-projects/angular-v9/src/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/angular-v9/src/app/app.component.ts b/angular-test-projects/angular-v9/src/app/app.component.ts index 6bec1f8..cd4e890 100644 --- a/angular-test-projects/angular-v9/src/app/app.component.ts +++ b/angular-test-projects/angular-v9/src/app/app.component.ts @@ -12,14 +12,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -28,4 +28,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/app/app.component.html b/angular-test-projects/app/app.component.html index 9d707e0..b3c8cf3 100644 --- a/angular-test-projects/app/app.component.html +++ b/angular-test-projects/app/app.component.html @@ -2,7 +2,7 @@
-
\ No newline at end of file + diff --git a/angular-test-projects/app/app.component.ts b/angular-test-projects/app/app.component.ts index 6bec1f8..cd4e890 100644 --- a/angular-test-projects/app/app.component.ts +++ b/angular-test-projects/app/app.component.ts @@ -12,14 +12,14 @@ export class AppComponent { private emailEditor: EmailEditorComponent; // called when the editor is created - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); } // called when the editor has finished loading - editorReady($event) { + editorReady() { console.log('editorReady'); } @@ -28,4 +28,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/src/app/example/example.component.html b/src/app/example/example.component.html index 92e31bb..b78aa51 100644 --- a/src/app/example/example.component.html +++ b/src/app/example/example.component.html @@ -9,8 +9,8 @@

Angular Email Editor (Demo)

diff --git a/src/app/example/example.component.ts b/src/app/example/example.component.ts index 00474c1..9746ab9 100644 --- a/src/app/example/example.component.ts +++ b/src/app/example/example.component.ts @@ -13,11 +13,10 @@ export class ExampleComponent implements OnInit { appearance: { theme: 'modern_light', }, - version: 'latest' + version: 'latest', }; scriptUrl = 'https://editor.unlayer.com/embed.js?2'; - constructor() {} ngOnInit() {} @@ -25,12 +24,12 @@ export class ExampleComponent implements OnInit { @ViewChild('editor') private emailEditor: EmailEditorComponent; - editorLoaded($event) { + editorLoaded() { console.log('editorLoaded'); this.emailEditor.editor.loadDesign(sample); } - editorReady($event) { + editorReady() { console.log('editorReady'); } From f847a4749521d1d08f9e5f307a05193d8696acfd Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Wed, 26 Feb 2025 12:45:17 -0300 Subject: [PATCH 09/11] Update README.md about importing module --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 49ec91a..d772019 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,8 @@ Next, you'll need to import the Email Editor module in your app's module. **app.module.ts** +> If you don't have an **app.module.ts** file, you can ignore this step and add `imports: [ EmailEditorModule ]` to your **app.component.ts** instead. + ```ts import { EmailEditorModule } from 'angular-email-editor'; @@ -41,12 +43,13 @@ import { EmailEditorModule } from 'angular-email-editor'; ```ts import { Component, ViewChild } from '@angular/core'; -import { EmailEditorComponent } from 'angular-email-editor'; +import { EmailEditorComponent, EmailEditorModule } from 'angular-email-editor'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], + imports: [EmailEditorModule], }) export class AppComponent { title = 'angular-email-editor'; From eb0e2a769d7333790768929f85fffdc02f4f14c0 Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Wed, 26 Feb 2025 12:51:33 -0300 Subject: [PATCH 10/11] Update demo code to use this.unlayer --- README.md | 23 ++++++++++++++----- .../angular-v10/src/app/app.component.ts | 2 +- .../angular-v11/src/app/app.component.ts | 2 +- .../angular-v12/src/app/app.component.ts | 2 +- .../angular-v13/src/app/app.component.ts | 2 +- .../angular-v14/src/app/app.component.ts | 2 +- .../angular-v15/src/app/app.component.ts | 2 +- .../angular-v16/src/app/app.component.ts | 2 +- .../angular-v17/src/app/app.component.ts | 2 +- .../angular-v18/src/app/app.component.ts | 16 +++++++++---- .../angular-v7/src/app/app.component.ts | 4 ++-- .../angular-v9/src/app/app.component.ts | 2 +- angular-test-projects/app/app.component.ts | 2 +- src/app/example/example.component.ts | 19 ++++++++++----- 14 files changed, 53 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index d772019..095a18c 100644 --- a/README.md +++ b/README.md @@ -55,13 +55,18 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; + + private get unlayer() { + return this.emailEditor.editor; + } // called when the editor is created editorLoaded() { console.log('editorLoaded'); // load the design json here - // this.emailEditor.editor.loadDesign({}); + // you can get the design json by calling unlayer.exportHtml (see below) + // this.unlayer.loadDesign({ /* json object here */ }); } // called when the editor has finished loading @@ -70,9 +75,10 @@ export class AppComponent { } exportHtml() { - this.emailEditor.editor.exportHtml((data) => - console.log('exportHtml', data) - ); + this.unlayer.exportHtml((result) => { + // result object format: { html: string, design: object, amp: object, chunks: object } + console.log('exportHtml', result); + }); } } ``` @@ -103,15 +109,20 @@ Set `skipLibCheck: true` in `tsconfig.json`. } ``` +See the [example source](https://github.com/unlayer/angular-email-editor/tree/master/src) for a reference implementation. + ### Methods +All unlayer methods are available in `this.unlayer`. Here are the most used ones: + | method | params | description | | -------------- | ------------------- | ------------------------------------------------------- | | **loadDesign** | `Object data` | Takes the design JSON and loads it in the editor | | **saveDesign** | `Function callback` | Returns the design JSON in a callback function | | **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function | -See the [example source](https://github.com/unlayer/angular-email-editor/tree/master/src) for a reference implementation. +See the [Unlayer Docs](https://docs.unlayer.com/) for all available methods, or log the object in the console to explore it. + ### Properties diff --git a/angular-test-projects/angular-v10/src/app/app.component.ts b/angular-test-projects/angular-v10/src/app/app.component.ts index 482d5dc..5a0148a 100644 --- a/angular-test-projects/angular-v10/src/app/app.component.ts +++ b/angular-test-projects/angular-v10/src/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent implements OnInit { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; ngOnInit(): void {} // called when the editor is created diff --git a/angular-test-projects/angular-v11/src/app/app.component.ts b/angular-test-projects/angular-v11/src/app/app.component.ts index cd4e890..ef8da3f 100644 --- a/angular-test-projects/angular-v11/src/app/app.component.ts +++ b/angular-test-projects/angular-v11/src/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { diff --git a/angular-test-projects/angular-v12/src/app/app.component.ts b/angular-test-projects/angular-v12/src/app/app.component.ts index cd4e890..ef8da3f 100644 --- a/angular-test-projects/angular-v12/src/app/app.component.ts +++ b/angular-test-projects/angular-v12/src/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { diff --git a/angular-test-projects/angular-v13/src/app/app.component.ts b/angular-test-projects/angular-v13/src/app/app.component.ts index cd4e890..ef8da3f 100644 --- a/angular-test-projects/angular-v13/src/app/app.component.ts +++ b/angular-test-projects/angular-v13/src/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { diff --git a/angular-test-projects/angular-v14/src/app/app.component.ts b/angular-test-projects/angular-v14/src/app/app.component.ts index cd4e890..ef8da3f 100644 --- a/angular-test-projects/angular-v14/src/app/app.component.ts +++ b/angular-test-projects/angular-v14/src/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { diff --git a/angular-test-projects/angular-v15/src/app/app.component.ts b/angular-test-projects/angular-v15/src/app/app.component.ts index 835a117..1c8d4c4 100644 --- a/angular-test-projects/angular-v15/src/app/app.component.ts +++ b/angular-test-projects/angular-v15/src/app/app.component.ts @@ -17,7 +17,7 @@ export class AppComponent { ngOnInit() {} @ViewChild('editor') - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; editorLoaded() { console.log('editorLoaded'); diff --git a/angular-test-projects/angular-v16/src/app/app.component.ts b/angular-test-projects/angular-v16/src/app/app.component.ts index cd4e890..ef8da3f 100644 --- a/angular-test-projects/angular-v16/src/app/app.component.ts +++ b/angular-test-projects/angular-v16/src/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { diff --git a/angular-test-projects/angular-v17/src/app/app.component.ts b/angular-test-projects/angular-v17/src/app/app.component.ts index 636e930..32fd7c0 100644 --- a/angular-test-projects/angular-v17/src/app/app.component.ts +++ b/angular-test-projects/angular-v17/src/app/app.component.ts @@ -10,7 +10,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { diff --git a/angular-test-projects/angular-v18/src/app/app.component.ts b/angular-test-projects/angular-v18/src/app/app.component.ts index 636e930..4b4ea52 100644 --- a/angular-test-projects/angular-v18/src/app/app.component.ts +++ b/angular-test-projects/angular-v18/src/app/app.component.ts @@ -10,13 +10,18 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; + + private get unlayer() { + return this.emailEditor.editor; + } // called when the editor is created editorLoaded() { console.log('editorLoaded'); // load the design json here - // this.emailEditor.editor.loadDesign({}); + // you can get the design json by calling unlayer.exportHtml (see below) + // this.unlayer.loadDesign({ /* json object here */ }); } // called when the editor has finished loading @@ -25,8 +30,9 @@ export class AppComponent { } exportHtml() { - this.emailEditor.editor.exportHtml((data) => - console.log('exportHtml', data) - ); + this.unlayer.exportHtml((result) => { + // result object format: { html: string, design: object, amp: object, chunks: object } + console.log('exportHtml', result); + }); } } diff --git a/angular-test-projects/angular-v7/src/app/app.component.ts b/angular-test-projects/angular-v7/src/app/app.component.ts index 964116f..ef8da3f 100644 --- a/angular-test-projects/angular-v7/src/app/app.component.ts +++ b/angular-test-projects/angular-v7/src/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { @@ -28,4 +28,4 @@ export class AppComponent { console.log('exportHtml', data) ); } -} \ No newline at end of file +} diff --git a/angular-test-projects/angular-v9/src/app/app.component.ts b/angular-test-projects/angular-v9/src/app/app.component.ts index cd4e890..ef8da3f 100644 --- a/angular-test-projects/angular-v9/src/app/app.component.ts +++ b/angular-test-projects/angular-v9/src/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { diff --git a/angular-test-projects/app/app.component.ts b/angular-test-projects/app/app.component.ts index cd4e890..ef8da3f 100644 --- a/angular-test-projects/app/app.component.ts +++ b/angular-test-projects/app/app.component.ts @@ -9,7 +9,7 @@ export class AppComponent { title = 'angular-email-editor'; @ViewChild(EmailEditorComponent) - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; // called when the editor is created editorLoaded() { diff --git a/src/app/example/example.component.ts b/src/app/example/example.component.ts index 9746ab9..fcc0560 100644 --- a/src/app/example/example.component.ts +++ b/src/app/example/example.component.ts @@ -22,26 +22,33 @@ export class ExampleComponent implements OnInit { ngOnInit() {} @ViewChild('editor') - private emailEditor: EmailEditorComponent; + private emailEditor!: EmailEditorComponent; + private get unlayer() { + return this.emailEditor.editor; + } + + // called when the editor is created editorLoaded() { console.log('editorLoaded'); - this.emailEditor.editor.loadDesign(sample); + this.unlayer.loadDesign(sample); } + // called when the editor has finished loading editorReady() { console.log('editorReady'); } saveDesign() { - this.emailEditor.editor.saveDesign((data) => + this.unlayer.saveDesign((data) => console.log('saveDesign', data) ); } exportHtml() { - this.emailEditor.editor.exportHtml((data) => - console.log('exportHtml', data) - ); + this.unlayer.exportHtml((result) => { + // result object format: { html: string, design: object, amp: object, chunks: object } + console.log('exportHtml', result); + }); } } From 27547256962f469fc0236f000c351bd94fe52ccd Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Wed, 26 Feb 2025 12:56:04 -0300 Subject: [PATCH 11/11] Show how to pass options with proper typescript typings --- README.md | 7 +++++++ .../angular-v17/src/app/app.component.html | 1 + angular-test-projects/angular-v17/src/app/app.component.ts | 6 ++++++ src/app/example/example.component.ts | 6 +++--- 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 095a18c..38128d6 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,12 @@ import { EmailEditorComponent, EmailEditorModule } from 'angular-email-editor'; }) export class AppComponent { title = 'angular-email-editor'; + options: EmailEditorComponent['options'] = { + version: 'latest', + appearance: { + theme: 'modern_dark', + }, + }; @ViewChild(EmailEditorComponent) private emailEditor!: EmailEditorComponent; @@ -89,6 +95,7 @@ export class AppComponent {
diff --git a/angular-test-projects/angular-v17/src/app/app.component.html b/angular-test-projects/angular-v17/src/app/app.component.html index b3c8cf3..e808c58 100644 --- a/angular-test-projects/angular-v17/src/app/app.component.html +++ b/angular-test-projects/angular-v17/src/app/app.component.html @@ -2,6 +2,7 @@
diff --git a/angular-test-projects/angular-v17/src/app/app.component.ts b/angular-test-projects/angular-v17/src/app/app.component.ts index 32fd7c0..a30f3a1 100644 --- a/angular-test-projects/angular-v17/src/app/app.component.ts +++ b/angular-test-projects/angular-v17/src/app/app.component.ts @@ -8,6 +8,12 @@ import { EmailEditorComponent } from 'angular-email-editor'; }) export class AppComponent { title = 'angular-email-editor'; + options: EmailEditorComponent['options'] = { + version: 'latest', + appearance: { + theme: 'modern_dark', + }, + }; @ViewChild(EmailEditorComponent) private emailEditor!: EmailEditorComponent; diff --git a/src/app/example/example.component.ts b/src/app/example/example.component.ts index fcc0560..e084f70 100644 --- a/src/app/example/example.component.ts +++ b/src/app/example/example.component.ts @@ -9,11 +9,11 @@ import sample from './sample.json'; styleUrls: ['./example.component.css'], }) export class ExampleComponent implements OnInit { - options = { + options: EmailEditorComponent['options'] = { + version: 'latest', appearance: { - theme: 'modern_light', + theme: 'modern_dark', }, - version: 'latest', }; scriptUrl = 'https://editor.unlayer.com/embed.js?2';