feat: allow custom color presets

sibiraj-s · Dec 25, 2020 · b82658b · b82658b
1 parent 2532d46
commit b82658b
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 48 deletions.
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -21,16 +21,18 @@ import { CustomMenuComponent } from './components/custom-menu/custom-menu.compon
       schema,
       plugins,
       nodeViews,
-      menu: [
-        ['bold', 'italic'],
-        ['underline', 'strike'],
-        ['code', 'blockquote'],
-        ['ordered_list', 'bullet_list'],
-        [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
-        ['link', 'image'],
-        ['text_color', 'background_color'],
-        ['align_left', 'align_center', 'align_right', 'align_justify'],
-      ]
+      menu: {
+        toolbar: [
+          ['bold', 'italic'],
+          ['underline', 'strike'],
+          ['code', 'blockquote'],
+          ['ordered_list', 'bullet_list'],
+          [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
+          ['link', 'image'],
+          ['text_color', 'background_color'],
+          ['align_left', 'align_center', 'align_right', 'align_justify'],
+        ]
+      }
     }),
   ],
   declarations: [

diff --git a/src/lib/editor.component.html b/src/lib/editor.component.html
@@ -1,6 +1,6 @@
 <div class="NgxEditor" #ngxEditor>
   <ngx-menu 
-    [toolbar]="menu" 
+    [toolbar]="toolbar" 
     [editorView]="view"
   >
   </ngx-menu>

diff --git a/src/lib/editor.component.ts b/src/lib/editor.component.ts
@@ -50,8 +50,8 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     this.config = ngxEditorService.config;
   }
 
-  get menu(): Toolbar {
-    return this.config.menu;
+  get toolbar(): Toolbar {
+    return this.config.menu.toolbar;
   }
 
   writeValue(value: object | null): void {

diff --git a/src/lib/editor.service.ts b/src/lib/editor.service.ts
@@ -4,12 +4,12 @@ import { Plugin } from 'prosemirror-state';
 
 import { placeholder } from 'ngx-editor/plugins';
 
-import { NgxEditorConfig, NodeViews, Toolbar } from './types';
+import { Menu, NgxEditorConfig, NodeViews, Toolbar } from './types';
 import Locals from './Locals';
 
 import { schema } from './schema';
 
-const DEFAULT_MENU: Toolbar = [
+const DEFAULT_TOOLBAR: Toolbar = [
   ['bold', 'italic'],
   ['code', 'blockquote'],
   ['underline', 'strike'],
@@ -20,6 +20,30 @@ const DEFAULT_MENU: Toolbar = [
   ['align_left', 'align_center', 'align_right', 'align_justify'],
 ];
 
+const DEFAULT_COLOR_PRESETS = [
+  '#b60205',
+  '#d93f0b',
+  '#fbca04',
+  '#0e8a16',
+  '#006b75',
+  '#1d76db',
+  '#0052cc',
+  '#5319e7',
+  '#e99695',
+  '#f9d0c4',
+  '#fef2c0',
+  '#c2e0c6',
+  '#bfdadc',
+  '#c5def5',
+  '#bfd4f2',
+  '#d4c5f9'
+];
+
+const DEFAULT_MENU: Menu = {
+  toolbar: DEFAULT_TOOLBAR,
+  colorPresets: []
+};
+
 const DEFAULT_SCHEMA = schema;
 const DEFAULT_PLUGINS: Plugin[] = [
   placeholder()
@@ -49,14 +73,54 @@ export class NgxEditorService {
   get locals(): Locals {
     return new Locals(this.config.locals);
   }
+
+  get menu(): Menu {
+    return this.config.menu;
+  }
+
+  get colorPresets(): string[][] {
+    const col = 8;
+    const colors: string[][] = [];
+
+    const { colorPresets } = this.config.menu;
+    const allColors = colorPresets.length ? colorPresets : DEFAULT_COLOR_PRESETS;
+
+    allColors.forEach((color, index) => {
+      const row = Math.floor(index / col);
+
+      if (!colors[row]) {
+        colors.push([]);
+      }
+
+      colors[row].push(color);
+    });
+
+    return colors;
+  }
 }
 
-export function provideMyServiceOptions(config?: NgxEditorConfig): NgxEditorServiceConfig {
+export const provideMyServiceOptions = (config?: NgxEditorConfig): NgxEditorServiceConfig => {
+  let menu: Menu;
+
+  if (!config.menu) {
+    menu = DEFAULT_MENU;
+  } else if (Array.isArray(config.menu)) {
+    menu = {
+      ...DEFAULT_MENU,
+      toolbar: config.menu,
+    };
+  } else {
+    menu = {
+      ...DEFAULT_MENU,
+      ...config.menu,
+    };
+  }
+
   return {
     plugins: config?.plugins ?? DEFAULT_PLUGINS,
     nodeViews: config?.nodeViews ?? {},
-    menu: config?.menu ?? DEFAULT_MENU,
+    menu,
     schema: config?.schema ?? DEFAULT_SCHEMA,
     locals: config.locals ?? {}
   };
-}
+};
diff --git a/src/lib/modules/menu/color-picker/color-picker.component.html b/src/lib/modules/menu/color-picker/color-picker.component.html
@@ -3,8 +3,8 @@
 </div>
 
 <div *ngIf="showPopup" class="NgxEditor__Popup">
-  <div *ngFor="let colors of colorMap" class="NgxEditor__ColorContainer">
-    <button class="NgxEditor__Color" *ngFor="let color of colors"
+  <div *ngFor="let colorGroup of presets" class="NgxEditor__ColorContainer">
+    <button class="NgxEditor__Color" *ngFor="let color of colorGroup"
       [ngStyle]="{backgroundColor: color, color:getContrastYIQ(color)}" [title]="color"
       (mousedown)="onColorSelect($event, color)"
       [ngClass]="{'NgxEditor__Color--Active': activeColors.includes(color)}"></button>

diff --git a/src/lib/modules/menu/color-picker/color-picker.component.ts b/src/lib/modules/menu/color-picker/color-picker.component.ts
@@ -8,9 +8,9 @@ import { Subscription } from 'rxjs';
 import Icon from '../../../icons';
 import { NgxEditorService } from '../../../editor.service';
 import { SharedService } from '../../../services/shared/shared.service';
-import { TextColor as TextColorCommand, TextBackgroundColor as TextBackgorundColorCommand } from '../MenuCommands';
+import { TextColor, TextBackgroundColor } from '../MenuCommands';
 
-type Command = typeof TextColorCommand | typeof TextBackgorundColorCommand;
+type Command = typeof TextColor | typeof TextBackgroundColor;
 
 @Component({
   selector: 'ngx-color-picker',
@@ -39,11 +39,8 @@ export class ColorPickerComponent implements OnDestroy {
     return !this.canExecute;
   }
 
-  get colorMap(): string[][] {
-    return [
-      this.presets.slice(0, this.presets.length / 2),
-      this.presets.slice(this.presets.length / 2, this.presets.length)
-    ];
+  get presets(): string[][] {
+    return this.ngxeService.colorPresets;
   }
 
   get title(): string {
@@ -55,29 +52,10 @@ export class ColorPickerComponent implements OnDestroy {
   }
 
   private get command(): Command {
-    return this.type === 'text_color' ? TextColorCommand : TextBackgorundColorCommand;
+    return this.type === 'text_color' ? TextColor : TextBackgroundColor;
   }
 
   private pluginUpdateSubscription: Subscription;
-  private presets = [
-    '#b60205',
-    '#d93f0b',
-    '#fbca04',
-    '#0e8a16',
-    '#006b75',
-    '#1d76db',
-    '#0052cc',
-    '#5319e7',
-    '#e99695',
-    '#f9d0c4',
-    '#fef2c0',
-    '#c2e0c6',
-    '#bfdadc',
-    '#c5def5',
-    '#bfd4f2',
-    '#d4c5f9'
-  ];
-
   private editorView: EditorView;
   showPopup = false;
   isActive = false;

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -31,10 +31,15 @@ export interface NodeViews {
   ) => NodeView;
 }
 
+export interface Menu {
+  toolbar: Toolbar;
+  colorPresets?: string[];
+}
+
 export interface NgxEditorConfig {
   schema?: Schema;
   plugins?: Plugin[];
   nodeViews?: NodeViews;
-  menu?: Toolbar;
+  menu?: Menu | Toolbar;
   locals?: Partial<Record<LocalsKeys, string>>;
 }