feat: option to set font-size

closes #31

extras/docs/toolbar.md

@@ -5,6 +5,7 @@ Toolbar option is an array of arrays. The default is
 ```JSON
 [
     ["bold", "italic", "underline", "strikeThrough", "superscript", "subscript"],
+    ["fontSize", "color"],
     ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "indent", "outdent"],
     ["cut", "copy", "delete", "removeFormat", "undo", "redo"],
     ["paragraph", "blockquote", "removeBlockquote", "horizontalLine", "orderedList", "unorderedList"],

package.json

@@ -81,7 +81,6 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "ng-packagr": "^2.1.0",
     "ngx-bootstrap": "^2.0.2",
-    "node-sass": "^4.7.2",
     "protractor": "~5.1.2",
     "rxjs": "^5.5.6",
     "ts-node": "~4.1.0",

src/app/ngx-editor/common/ngx-editor.defaults.ts

@@ -15,7 +15,7 @@ export const ngxEditorConfig = {
     imageEndPoint: '',
     toolbar: [
         ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
-        ['color'],
+        ['fontSize', 'color'],
         ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
         ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
         ['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList'],

src/app/ngx-editor/common/services/command-executor.service.ts

@@ -110,7 +110,7 @@ export class CommandExecutorService {
         if (document.getSelection().type !== 'Range') {
           const restored = Utils.restoreSelection(this.savedSelection);
           if (restored) {
-            document.execCommand('insertHTML', false, newUrl);
+            this.insertHtml(newUrl);
           }
         } else {
           throw new Error('Only new links can be inserted. You cannot edit URL`s');
@@ -150,4 +150,68 @@ export class CommandExecutorService {
     return;
   }
 
+  /** set font size for text */
+  setFontSize(fontSize: string): void {
+
+    if (this.savedSelection) {
+      const deletedValue = this.deleteAndGetElement();
+
+      if (deletedValue) {
+
+        const restored = Utils.restoreSelection(this.savedSelection);
+
+        if (restored) {
+          if (this.isNumeric(fontSize)) {
+            const fontPx = '<span style="font-size: ' + fontSize + 'px;">' + deletedValue + '</spanp>';
+            this.insertHtml(fontPx);
+          } else {
+            const font = '<span style="font-size: ' + fontSize + ';">' + deletedValue + '</span>';
+            this.insertHtml(font);
+          }
+        }
+      } else {
+
+      }
+
+    } else {
+      throw new Error('Range out of the editor');
+    }
+  }
+
+  /** insert HTML */
+  private insertHtml(html: string): void {
+
+    const isHTMLInserted = document.execCommand('insertHTML', false, html);
+
+    if (!isHTMLInserted) {
+      throw new Error('Unable to perform the operation');
+    }
+
+    return;
+  }
+
+  /**
+   * check whether the value is a number or string
+   * if number return true
+   * else return false
+   */
+  private isNumeric(value: any): boolean {
+    return /^-{0,1}\d+$/.test(value);
+  }
+
+  /** delete the text at selected range and return the value */
+  private deleteAndGetElement(): any {
+
+    let slectedText;
+
+    if (this.savedSelection) {
+      slectedText = this.savedSelection.toString();
+      this.savedSelection.deleteContents();
+      return slectedText;
+    }
+
+    return false;
+
+  }
+
 }

src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.html

@@ -26,6 +26,10 @@
     </button>
   </div>
   <div class="ngx-toolbar-set">
+    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('fontSize')" title="Font Size" [popover]="fontSizeTemplate"
+      #urlPopover="bs-popover" [disabled]="!config['enableToolbar']">
+      <i class="fa fa-text-height" aria-hidden="true"></i>
+    </button>
     <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('color')" title="Color Picker" [popover]="insertColorTemplate"
       #colorPopover="bs-popover" [disabled]="!config['enableToolbar']">
       <i class="fa fa-tint" aria-hidden="true"></i>
@@ -207,10 +211,25 @@
       <form autocomplete="off">
         <div class="form-group">
           <label for="hexInput" class="small">Hex Color</label>
-          <input type="text" class="form-control-sm" id="hexInput" name="hexInput" placeholder="HEX Color" [(ngModel)]="hexColor" required>
+          <input type="text" class="form-control-sm" id="hexInput" name="hexInput" maxlength="7" placeholder="HEX Color" [(ngModel)]="hexColor"
+            required>
         </div>
-        <button type="submit" class="btn-primary btn-sm btn" max-length="7" (click)="insertColor(hexColor, selectedColorTab)">Submit</button>
+        <button type="submit" class="btn-primary btn-sm btn" (click)="insertColor(hexColor, selectedColorTab)">Submit</button>
       </form>
     </div>
   </div>
 </ng-template>
+
+<!-- font size template -->
+<ng-template #fontSizeTemplate>
+  <div class="ngxe-popover extra-gt1">
+    <form autocomplete="off">
+      <div class="form-group">
+        <label for="fontSize" class="small">Font Size</label>
+        <input type="text" class="form-control-sm" id="fontSize" name="fontSize" placeholder="Font size in px/rem" [(ngModel)]="fontSize"
+          required>
+      </div>
+      <button type="submit" class="btn-primary btn-sm btn" (click)="setFontSize(fontSize)">Submit</button>
+    </form>
+  </div>
+</ng-template>

src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.ts

@@ -178,6 +178,17 @@ export class NgxEditorToolbarComponent implements OnInit {
     return;
   }
 
+  /** set font size */
+  setFontSize(fontSize: string): void {
+
+    try {
+      this._commandExecutorService.setFontSize(fontSize);
+    } catch (error) {
+      this._messageService.sendMessage(error.message);
+    }
+    return;
+  }
+
   ngOnInit() {
     this.buildUrlForm();
     this.buildInsertImageForm();