fix: cleanup icons implementation

sibiraj-s · Feb 26, 2023 · eda7f2f · eda7f2f
1 parent ec6276b
commit eda7f2f
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 102 deletions.
diff --git a/docs/src/content/docs/en/menu.md b/docs/src/content/docs/en/menu.md
@@ -172,7 +172,7 @@ You can specify the icons in the forRoot
 ```ts
 NgxEditorModule.forRoot({
   icons: {
-    bold: '<img src="https://cdn-icons-png.flaticon.com/512/1827/1827924.png " width="15" height="15" alt="" title="" class="img-small">',
+    bold: '<img src="https://img.icons8.com/tiny-glyph/16/null/bold.png" width="15" height="15"/>',
   },
 });
 ```

diff --git a/projects/ngx-editor/src/lib/Icons.ts b/projects/ngx-editor/src/lib/Icons.ts
diff --git a/projects/ngx-editor/src/lib/editor.module.ts b/projects/ngx-editor/src/lib/editor.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { NgxEditorConfig } from './types';
 import { defaults as defaultLocals } from './Locals';
-import { defaults as icons } from './Icons';
+import { icons } from './icons';
 
 import { NgxEditorComponent } from './editor.component';
 import { NgxEditorServiceConfig } from './editor-config.service';

diff --git a/projects/ngx-editor/src/lib/editor.service.ts b/projects/ngx-editor/src/lib/editor.service.ts
@@ -3,7 +3,7 @@ import { Injectable, Optional } from '@angular/core';
 import { NgxEditorConfig } from './types';
 import Locals from './Locals';
 import { NgxEditorServiceConfig } from './editor-config.service';
-import Icon from './icons/index';
+import Icon from './icons';
 
 @Injectable({
   providedIn: 'root',
@@ -19,7 +19,7 @@ export class NgxEditorService {
     return new Locals(this.config.locals);
   }
 
-  geticon(icon: string): string {
+  getIcon(icon: string): string {
     return this.config.icons[icon] ? this.config.icons[icon] : Icon.get(icon);
   }
 }

diff --git a/projects/ngx-editor/src/lib/icons.spec.ts b/projects/ngx-editor/src/lib/icons.spec.ts
@@ -1,22 +1,30 @@
+import { Component } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { NgxEditorModule } from 'ngx-editor';
 import Editor from './Editor';
-import { NgxEditorComponent } from './editor.component';
 
 describe('NgxEditorModule', () => {
-  let component: NgxEditorComponent;
-  let fixture: ComponentFixture<NgxEditorComponent>;
+  @Component({
+    template: '<ngx-editor-menu [editor]="editor"></ngx-editor-menu>',
+  })
+  class TestComponent {
+    editor!: Editor;
+  }
+
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [
-        NgxEditorComponent,
+        TestComponent,
       ],
       imports: [
         NgxEditorModule.forRoot({
           icons: {
-            bold: '<img src="https://cdn-icons-png.flaticon.com/512/1827/1827924.png" id="iconBold" width="15" height="15" alt="" title="" class="img-small">',
+            bold: '<img src="https://example.com/bold.png">',
           },
         }),
       ],
@@ -25,7 +33,7 @@ describe('NgxEditorModule', () => {
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NgxEditorComponent);
+    fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     component.editor = new Editor();
     fixture.detectChanges();
@@ -38,8 +46,9 @@ describe('NgxEditorModule', () => {
   it('should create the editor component correctly', () => {
     expect(component).toBeTruthy();
   });
+
   it('should create the icon correctly', () => {
-    const icon = document.getElementsByClassName('img-small');
-    expect(icon).toBeTruthy();
+    const element = fixture.debugElement.query(By.css('img')).nativeElement as HTMLImageElement;
+    expect(element.src).toBe('https://example.com/bold.png');
   });
 });
diff --git a/projects/ngx-editor/src/lib/icons/index.ts b/projects/ngx-editor/src/lib/icons/index.ts
@@ -1,63 +1,60 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 // Icons source: https://material.io/
 
-import Icons from '../Icons';
-
-const ICON_LIST = new Icons();
-
-const bold = ICON_LIST.get('bold');
-const italic = ICON_LIST.get('italic');
-const code = ICON_LIST.get('code');
-const underline = ICON_LIST.get('underline');
-const strike = ICON_LIST.get('strike');
-const ordered_list = ICON_LIST.get('ordered_list');
-const bullet_list = ICON_LIST.get('bullet_list');
-const quote = ICON_LIST.get('quote');
-const link = ICON_LIST.get('link');
-const unlink = ICON_LIST.get('unlink');
-const image = ICON_LIST.get('image');
-const align_left = ICON_LIST.get('align_left');
-const align_center = ICON_LIST.get('align_center');
-const align_right = ICON_LIST.get('align_right');
-const align_justify = ICON_LIST.get('align_justify');
-const text_color = ICON_LIST.get('text_color');
-const color_fill = ICON_LIST.get('color_fill');
-const horizontal_rule = ICON_LIST.get('horizontal_rule');
-const format_clear = ICON_LIST.get('format_clear');
-const path = ICON_LIST.get('path');
+import bold from './bold';
+import italic from './italic';
+import code from './code';
+import underline from './underline';
+import strike from './strike';
+import orderedList from './ordered_list';
+import bulletList from './bullet_list';
+import quote from './quote';
+import link from './link';
+import unlink from './unlink';
+import image from './image';
+import alignLeft from './align_left';
+import alignCenter from './align_center';
+import alignRight from './align_right';
+import alignJustify from './align_justify';
+import textColor from './text_color';
+import colorFill from './color_fill';
+import horizontalRule from './horizontal_rule';
+import formatClear from './format_clear';
 
 const DEFAULT_ICON_HEIGHT = 20;
 const DEFAULT_ICON_WIDTH = 20;
 const DEFAULT_ICON_FILL = 'currentColor';
 
-const icons: Record<string, any> = {
+export const icons: Record<string, any> = {
   bold,
   italic,
   code,
   underline,
   strike,
-  ordered_list,
-  bullet_list,
+  ordered_list: orderedList,
+  bullet_list: bulletList,
   blockquote: quote,
   link,
   unlink,
   image,
-  align_left,
-  align_center,
-  align_right,
-  align_justify,
-  text_color,
-  color_fill,
-  horizontal_rule,
-  format_clear,
-  path,
+  align_left: alignLeft,
+  align_center: alignCenter,
+  align_right: alignRight,
+  align_justify: alignJustify,
+  text_color: textColor,
+  color_fill: colorFill,
+  horizontal_rule: horizontalRule,
+  format_clear: formatClear,
+  path: '<path></path>',
 };
 
+export type IconsKeys = keyof typeof icons;
+
 class Icon {
   static get(name: keyof typeof icons, fill = DEFAULT_ICON_FILL): string {
     const fullPath = icons[name];
     if (fullPath && (fullPath.includes('<path') || fullPath.includes('<g'))) {
-      return `--
+      return `
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"

diff --git a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.ts b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.ts
@@ -49,7 +49,7 @@ export class BubbleComponent implements OnInit, OnDestroy {
   ];
 
   getIcon(name: TBItems): SafeHtml {
-    return this.sanitizeHTML.transform(this.ngxeService.geticon(name));
+    return this.sanitizeHTML.transform(this.ngxeService.getIcon(name));
   }
 
   getTitle(name: string): string {

diff --git a/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.ts b/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.ts
@@ -5,7 +5,6 @@ import {
 import { EditorView } from 'prosemirror-view';
 import { Subscription } from 'rxjs';
 
-import Icon from '../../../icons/index';
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
 import { TextColor, TextBackgroundColor } from '../MenuCommands';
@@ -32,7 +31,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy {
   }
 
   get icon(): string {
-    return Icon.get(this.type === 'text_color' ? 'text_color' : 'color_fill');
+    return this.ngxeService.getIcon(this.type === 'text_color' ? 'text_color' : 'color_fill');
   }
 
   private get command(): Command {

diff --git a/projects/ngx-editor/src/lib/modules/menu/image/image.component.ts b/projects/ngx-editor/src/lib/modules/menu/image/image.component.ts
@@ -9,7 +9,6 @@ import { Subscription } from 'rxjs';
 
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
-import Icon from '../../../icons/index';
 import { Image as ImageCommand } from '../MenuCommands';
 
 @Component({
@@ -40,7 +39,7 @@ export class ImageComponent implements OnInit, OnDestroy {
   ) { }
 
   get icon(): string {
-    return Icon.get('image');
+    return this.ngxeService.getIcon('image');
   }
 
   get src(): AbstractControl {

diff --git a/projects/ngx-editor/src/lib/modules/menu/insert-command/insert-command.component.ts b/projects/ngx-editor/src/lib/modules/menu/insert-command/insert-command.component.ts
@@ -6,7 +6,7 @@ import { InsertCommands } from '../MenuCommands';
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
 import { TBItems, ToolbarItem } from '../../../types';
-import icons from '../../../icons/index';
+import icons from '../../../icons';
 
 @Component({
   selector: 'ngx-insert-command',

diff --git a/projects/ngx-editor/src/lib/modules/menu/link/link.component.ts b/projects/ngx-editor/src/lib/modules/menu/link/link.component.ts
@@ -7,7 +7,6 @@ import { EditorView } from 'prosemirror-view';
 import { Subscription } from 'rxjs';
 
 import { NgxEditorService } from '../../../editor.service';
-import Icon from '../../../icons/index';
 import { MenuService } from '../menu.service';
 import { Link as LinkCommand } from '../MenuCommands';
 
@@ -33,7 +32,7 @@ export class LinkComponent implements OnInit, OnDestroy {
   ) { }
 
   get icon(): string {
-    return Icon.get(this.isActive ? 'unlink' : 'link');
+    return this.ngxeService.getIcon(this.isActive ? 'unlink' : 'link');
   }
 
   get title(): string {

diff --git a/projects/ngx-editor/src/lib/modules/menu/toggle-command/toggle-command.component.ts b/projects/ngx-editor/src/lib/modules/menu/toggle-command/toggle-command.component.ts
@@ -55,7 +55,7 @@ export class ToggleCommandComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.html = this.ngxeService.geticon(this.name);
+    this.html = this.ngxeService.getIcon(this.name);
 
     this.editorView = this.menuService.editor.view;
 

diff --git a/projects/ngx-editor/src/lib/types.ts b/projects/ngx-editor/src/lib/types.ts
@@ -1,7 +1,7 @@
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 
-import { IconsKeys } from './Icons';
+import { IconsKeys } from './icons';
 import { LocalsKeys } from './Locals';
 
 type TCR = {