fix: more fixes to initialization of configs

wfpena · Jul 28, 2024 · b73e05b · b73e05b
1 parent 2a9b6c8
commit b73e05b
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wfpena/angular-wysiwyg",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

diff --git a/projects/angular-editor-app/cypress/e2e/spec.cy.ts b/projects/angular-editor-app/cypress/e2e/spec.cy.ts
@@ -458,7 +458,7 @@ describe('General tests', () => {
     cy.get('#editor1').get('.angular-editor-textarea').first().type('* ');
     cy.get('#html-content-editor1')
       .first()
-      .should('contain.text', '<ul><li><font face="Comic Sans MS" size="5">*');
+      .should('contain.text', '<ul><li><font face="Comic Sans MS" size="5">');
     cy.get('#html-content-editor1')
       .first()
       .should('contain.text', '</font></li></ul>');
@@ -669,7 +669,7 @@ describe('General tests', () => {
       'body > app-root > div:nth-child(5) > div > div:nth-child(3) > table > tr:nth-child(19) > td:nth-child(2) > input',
     ).click();
     editor1.type('> ');
-    cy.get('#html-content-editor3').invoke('text').should('eq', '&gt;&#160;');
+    cy.get('#html-content-editor3').invoke('text').should('contain', '&gt;');
   });
 
   it('Should be able to insert multiple images with the same name', () => {
@@ -1079,7 +1079,7 @@ describe('General tests', () => {
     });
   });
 
-  it('Shoul write any header with proper font name selected first', () => {
+  it('Should write any header with proper font name selected first', () => {
     cy.visit('/');
     // Selecting the font name:
     cy.get('.ae-picker-label').eq(1).click();

diff --git a/projects/angular-editor/package.json b/projects/angular-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wfpena/angular-wysiwyg",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "A rich WYSIWYG text editor for Angular 13+. Rich Text editor component for Angular built using Angular 17.",
   "author": "Wilson Pena <wilsonf.pena@gmail.com>",
   "repository": "https://github.com/wfpena/angular-wysiwyg",

diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
@@ -26,8 +26,8 @@ export class AngularEditorToolbarComponent {
   htmlMode = false;
   linkSelected = false;
   block = 'default';
-  fontName = 'Times New Roman';
-  fontSize = '3';
+  fontName;
+  fontSize;
   foreColour;
   backColor;
 

diff --git a/projects/angular-editor/src/lib/angular-editor.component.ts b/projects/angular-editor/src/lib/angular-editor.component.ts
@@ -109,6 +109,7 @@ export class AngularEditorComponent
     this.addResizeWrapper();
     this.selectImage();
     this.onContentChange(this.textArea.nativeElement);
+    this.runFontNameAndSizeCheck();
   }
 
   constructor(
@@ -147,14 +148,20 @@ export class AngularEditorComponent
       this.config.textPatternsEnabled == null
         ? angularEditorConfig.textPatternsEnabled
         : this.config.textPatternsEnabled;
-    this.config.defaultFontName =
+
+    this.editorService.currentFontName =
+      this.editorService.currentFontName ||
       this.config.defaultFontName ||
-      this.config.fonts[0]?.label ||
-      angularEditorConfig.defaultFontName;
-    this.config.defaultFontSize =
-      this.config.defaultFontSize || angularEditorConfig.defaultFontSize;
-    this.editorService.setFontName(this.config.defaultFontName);
-    this.editorService.setFontSize(this.config.defaultFontSize);
+      angularEditorConfig.defaultFontName ||
+      this.config.fonts[0]?.label;
+
+    this.editorService.currentFontSize =
+      this.editorService.currentFontSize ||
+      this.config.defaultFontSize ||
+      angularEditorConfig.defaultFontSize;
+
+    this.editorService.setFontName(this.editorService.currentFontName);
+    this.editorService.setFontSize(this.editorService.currentFontSize);
   }
 
   ngAfterViewInit() {
@@ -711,7 +718,6 @@ export class AngularEditorComponent
         patternDetected.command();
       }
     }
-    this.runFontNameAndSizeCheck();
   }
 
   /**
@@ -720,6 +726,7 @@ export class AngularEditorComponent
    * Send a node array from the contentEditable of the editor
    */
   exec($event: KeyboardEvent | any | null = null) {
+    this.runFontNameAndSizeCheck();
     if ($event && ($event.key === 'Delete' || $event.key === 'Backspace')) {
       if (this.currentSelectedImage) {
         this.removeResizeWrapper();
@@ -770,8 +777,8 @@ export class AngularEditorComponent
       this.deepRemoveAttribute('size', userSelection.focusNode);
     }
 
-    this.editorToolbar.triggerBlocks(els);
     this.runFontNameAndSizeCheck();
+    this.editorToolbar.triggerBlocks(els);
   }
 
   runFontNameAndSizeCheck() {
@@ -783,9 +790,6 @@ export class AngularEditorComponent
       if (
         fontNameInEditor &&
         this.editorService.currentFontName &&
-        !this.getFonts().some(
-          (x) => x.value === fontNameInEditor.replace(/"/g, ''),
-        ) &&
         currentSelection.collapsed
       ) {
         this.editorService.setFontName(this.editorService.currentFontName);

diff --git a/projects/angular-editor/src/lib/config.ts b/projects/angular-editor/src/lib/config.ts
@@ -75,8 +75,8 @@ export const angularEditorConfig: AngularEditorConfig = {
   showToolbar: true,
   placeholder: 'Enter text here...',
   defaultParagraphSeparator: '',
-  defaultFontName: '',
-  defaultFontSize: '',
+  defaultFontName: 'Arial',
+  defaultFontSize: '5',
   fonts: [
     { class: 'arial', name: 'Arial' },
     { class: 'times-new-roman', name: 'Times New Roman' },