fix(editor): fix some bugs on editor related to theming and binding o…

…f variables from editor header.
TemainfoSoftware · Nov 27, 2019 · 382244e · 382244e
1 parent 77e6c1f
commit 382244e
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 24 deletions.
diff --git a/projects/truly-ui/src/components/editor/editor-theme.scss b/projects/truly-ui/src/components/editor/editor-theme.scss
@@ -3,15 +3,22 @@
 @mixin _tl-editor-theme-schema( $theme, $action ) {
 
   border: 1px solid map-deep-get($theme, $action, "default", "border");
+  $primary: map-deep-get($theme, 'primary');
 
   .ui-editor-header {
     background-color: map-deep-get($theme, $action, "default", "background");
     color:  map-deep-get($theme, $action, "default", "foreground");
     transition: background ease-in-out 100ms;
+    &::-webkit-scrollbar-thumb {
+      background: map-deep-get($theme, "primary", "default", "background");
+    }
   }
 
   .ui-editor-footer {
     background-color: map-deep-get($theme, $action, "default", "background");
+    &::-webkit-scrollbar-thumb {
+      background: map-deep-get($theme, "primary", "default", "background");
+    }
   }
 
   .ui-link {
@@ -21,7 +28,7 @@
   .ui-hashtag {
     background-color: map-deep-get($theme, "primary", "default", "background");
     border: 1px solid map-deep-get($theme, "primary", "default", "border");
-    color: map-deep-get($theme, $action, "default", "foreground");
+    color: map-deep-get($primary, "default", "foreground");
   }
 
   .ui-editor-content {
@@ -34,8 +41,8 @@
   }
 
   .ui-active-tool {
-    background-color: map-deep-get($theme, "primary", "default", "background");
-    color:  map-deep-get($theme, "primary", "foreground");
+    background-color: map-deep-get($primary, "default", "background");
+    color: map-deep-get($primary, "default", "foreground");
   }
 
   .ui-command {

diff --git a/projects/truly-ui/src/components/editor/editor.html b/projects/truly-ui/src/components/editor/editor.html
@@ -5,6 +5,9 @@
                       [activeTools]="activeTools"
                       [cursorHighlight]="cursorHighlight"
                       [color]="color"
+                      [colorSelected]="colorSelected"
+                      [fontSelected]="font"
+                      [fontSizeSelected]="fontSize"
                       [fontCollection]="fontCollection"
                       [fontSizeCollection]="fontSizeCollection"
                       (changeColor)="onChangeColor($event)"
@@ -27,7 +30,11 @@
          [style.height]="height"
          (input)="change($event)"
          (focusout)="setAnchorNode()"
+         (click)="setCursorSelection()"
          (focus)="setCursorSelection()"
+         (keydown.enter)="$event.stopPropagation()"
+         (keydown.ArrowUp)="$event.stopPropagation()"
+         (keydown.ArrowDown)="$event.stopPropagation()"
          (keydown)="onKeyDownSave($event)"
          (mouseup)="onMouseUp()"
          [attr.contenteditable]="contentEditable"

diff --git a/projects/truly-ui/src/components/editor/editor.scss b/projects/truly-ui/src/components/editor/editor.scss
@@ -2,13 +2,21 @@
   box-sizing: border-box;
 }
 
+:host {
+  width: 100%;
+}
+
 .ui-editor-footer {
   display: flex;
   align-items: flex-start;
   height: auto;
   width: 100%;
   background: #e9e9e9;
   overflow: auto;
+  &::-webkit-scrollbar {
+    height: 4px;
+    width: 0;
+  }
 }
 
 .ui-hashtag {
@@ -72,5 +80,5 @@
   padding: 10px;
   box-sizing: border-box;
   outline: none;
-  word-break: break-all;
+  word-break: break-word;
 }
diff --git a/projects/truly-ui/src/components/editor/editor.ts b/projects/truly-ui/src/components/editor/editor.ts
@@ -29,7 +29,7 @@ import {ToolbarConfigModel} from './model/toolbar-config.model';
 import {ToolbarConfig} from './interfaces/toolbar-config';
 import {I18nService} from '../i18n/i18n.service';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {DomSanitizer} from '@angular/platform-browser';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 
 @Component({
   selector: 'tl-editor',
@@ -57,7 +57,7 @@ import {DomSanitizer} from '@angular/platform-browser';
 })
 export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChanges {
 
-  @Input() content;
+  @Input() content: SafeHtml;
 
   @Input() color = 'basic';
 
@@ -164,7 +164,8 @@ export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChang
 
   alignContent(align) {
     this.setContentFocus();
-    document.execCommand(align, false, null);
+    const element = this.cursorSelection.baseNode.parentNode;
+    this.renderer.setStyle( element, 'text-align', align.replace('justify', '').toLocaleLowerCase());
     this.setCursorSelection();
   }
 
@@ -218,6 +219,7 @@ export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChang
     this.setContentFocus();
     this.cursorSelection.getRangeAt(0).insertNode( this.createHashTag( value ).nativeElement );
     window.getSelection().collapseToEnd();
+    this.change( { target: this.contentEditor.nativeElement } );
   }
 
   setLink($event) {
@@ -269,6 +271,9 @@ export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChang
   }
 
   onKeyDownSave(event) {
+    if ( event.target.innerHTML.length === 0 || event.target.innerHTML === '<br>' ) {
+      this.writeValue('<div><br></div>');
+    }
     if ((event.ctrlKey || event.metaKey) && event.which === 83) {
       event.preventDefault();
       this.save();
@@ -291,7 +296,9 @@ export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChang
 
   setCursorSelection() {
     this.cursorSelection = window.getSelection();
-    this.handleActiveTools();
+    if ( this.cursorSelection.baseNode ) {
+      this.handleActiveTools();
+    }
   }
 
   private showSavedMessage() {
@@ -419,9 +426,9 @@ export class TlEditor implements ControlValueAccessor, AfterContentInit, OnChang
   }
 
   private hasStyleParentElement(alignment: string) {
-    const childElement = this.cursorSelection.baseNode.parentNode;
-    if (childElement.attributes.length > 0) {
-      return childElement.attributes[0].value.includes(alignment);
+    const element = this.cursorSelection.baseNode.parentNode;
+    if (element.attributes.length > 0) {
+      return element.attributes[0].value.includes(alignment);
     }
     return false;
   }

diff --git a/projects/truly-ui/src/components/editor/parts/editor-header/editor-header.html b/projects/truly-ui/src/components/editor/parts/editor-header/editor-header.html
@@ -2,12 +2,6 @@
   <ul class="ui-tools-list">
      <li class="dropdown" [tooltip]="{text: toolbarConfig.font?.family?.tooltipText, placement: 'top-center'}"
          *ngIf="toolbarConfig.font?.family?.show">
-<!--       <tl-dropdown-list [data]="dataFont"
-                         (ngModelChange)="onChangeFont($event)"
-                         [keyText]="'textItem'"
-                         [keyValue]="'value'"
-                         [(ngModel)]="font">
-       </tl-dropdown-list>-->
        <select class="select-font" [(ngModel)]="fontSelected" (ngModelChange)="changeFont.emit($event)">
          <option *ngFor="let item of fontCollection" [ngValue]="item.value">{{ item?.description }}</option>
        </select>

diff --git a/projects/truly-ui/src/components/editor/parts/editor-header/editor-header.scss b/projects/truly-ui/src/components/editor/parts/editor-header/editor-header.scss
@@ -3,6 +3,11 @@
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-bottom: 0;
+  overflow-x: auto;
+  &::-webkit-scrollbar {
+    height: 4px;
+    width: 0;
+  }
   .ui-tools-list {
     margin: 0;
     padding: 0;

diff --git a/projects/truly-ui/src/components/editor/parts/editor-header/editor-header.ts b/projects/truly-ui/src/components/editor/parts/editor-header/editor-header.ts
@@ -20,6 +20,12 @@ export class TlEditorHeader {
 
   @Input() activeTools;
 
+  @Input() colorSelected = '#000000';
+
+  @Input() fontSelected = 'Arial';
+
+  @Input() fontSizeSelected = '3pt';
+
   @Output() changeColor = new EventEmitter();
 
   @Output() changeFont = new EventEmitter();
@@ -46,12 +52,5 @@ export class TlEditorHeader {
 
   @Output() clickQuote = new EventEmitter();
 
-  public colorSelected = '#000000';
-
-  public fontSelected = 'Arial';
-
-  public fontSizeSelected = '3pt';
-
   constructor() {}
-  // toggleLinkBox(); clickDescriptionLink();
 }