feat: text aligment in inline-editor

webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss

@@ -236,7 +236,7 @@ div.deckgo-tools {
     &.image,
     &.image-align,
     &.image-delete,
-    &.pick-color {
+    &.pick-color &.left-align &.center-align &.right-align {
       > div {
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
@@ -252,6 +252,27 @@ div.deckgo-tools {
       margin: 0;
     }
 
+    &.left-align {
+      > div {
+        -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e ");
+        mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e ");
+      }
+    }
+
+    &.center-align {
+      > div {
+        -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='76.5' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='76.5' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e ");
+        mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='76.5' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='76.5' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e ");
+      }
+    }
+
+    &.right-align {
+      > div {
+        -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='153' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='153' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e ");
+        mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='153' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='153' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e ");
+      }
+    }
+
     &.pick-color {
       > div {
         -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M136.5 77.7l37 67L32 285.7 216.4 464l152.4-148.6 54.4-11.4L166.4 48l-29.9 29.7zm184 208H114.9l102.8-102.3 102.8 102.3zM423.3 304s-56.7 61.5-56.7 92.1c0 30.7 25.4 55.5 56.7 55.5 31.3 0 56.7-24.9 56.7-55.5S423.3 304 423.3 304z'/%3E%3C/svg%3E");

webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx

@@ -6,7 +6,7 @@ import '@deckdeckgo/color';
 import {DeckdeckgoPalette, DEFAULT_PALETTE} from '@deckdeckgo/color';
 
 import {DeckdeckgoInlineEditorUtils} from '../../types/inline-editor/deckdeckgo-inline-editor-utils';
-import {ImageSize, ImageAlign, ToolbarActions} from '../../utils/enums';
+import {ImageSize, ImageAlign, ToolbarActions, ContentAlign} from '../../utils/enums';
 import {AnchorLink, InlineAction, InputTargetEvent} from './deckdeckgo-inline-editor.interface';
 
 @Component({
@@ -28,6 +28,9 @@ export class DeckdeckgoInlineEditor {
   @State()
   private underline: boolean = false;
 
+  @State()
+  private contentAlign: ContentAlign = ContentAlign.LEFT;
+
   @State()
   private orderedList: boolean = false;
 
@@ -459,6 +462,7 @@ export class DeckdeckgoInlineEditor {
         this.orderedList = false;
         this.unorderedList = false;
         this.color = null;
+        this.contentAlign = ContentAlign.LEFT;
 
         await this.findStyle(content);
       } else if (content.parentElement) {
@@ -468,6 +472,7 @@ export class DeckdeckgoInlineEditor {
         this.orderedList = false;
         this.unorderedList = false;
         this.color = null;
+        this.contentAlign = ContentAlign.LEFT;
 
         await this.findStyle(content.parentElement);
       }
@@ -508,7 +513,7 @@ export class DeckdeckgoInlineEditor {
         this.bold = await DeckdeckgoInlineEditorUtils.isBold(node as HTMLElement);
         this.italic = await DeckdeckgoInlineEditorUtils.isItalic(node as HTMLElement);
         this.underline = await DeckdeckgoInlineEditorUtils.isUnderline(node as HTMLElement);
-
+        this.contentAlign = await DeckdeckgoInlineEditorUtils.getContentAlignment(node as HTMLElement);
         if (!this.orderedList) {
           this.orderedList = await DeckdeckgoInlineEditorUtils.isList(node as HTMLElement, 'ol');
         }
@@ -669,6 +674,18 @@ export class DeckdeckgoInlineEditor {
     });
   }
 
+  private justifyContent(e: UIEvent, align: ContentAlign): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      e.stopPropagation();
+
+      await this.execCommand(align.toString());
+
+      //this.contentAlign = align;
+      await this.initStyle(this.selection);
+      resolve();
+    });
+  }
+
   private toggleList(e: UIEvent, cmd: string): Promise<void> {
     return new Promise<void>(async (resolve) => {
       e.stopPropagation();
@@ -904,6 +921,33 @@ export class DeckdeckgoInlineEditor {
       resolve();
     });
   }
+  private openAlignmentActions(): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      this.toolbarActions = ToolbarActions.ALIGNMENT;
+
+      resolve();
+    });
+  }
+
+  renderAlignmentActions() {
+    return [
+      <button
+        onClick={(e: UIEvent) => this.justifyContent(e, ContentAlign.LEFT)}
+        class={this.contentAlign === ContentAlign.LEFT ? 'left-align active' : 'left-align'}>
+        <div></div>
+      </button>,
+      <button
+        onClick={(e: UIEvent) => this.justifyContent(e, ContentAlign.CENTER)}
+        class={this.contentAlign === ContentAlign.CENTER ? 'center-align active' : 'center-align'}>
+        <div></div>
+      </button>,
+      <button
+        onClick={(e: UIEvent) => this.justifyContent(e, ContentAlign.RIGHT)}
+        class={this.contentAlign === ContentAlign.RIGHT ? 'right-align active' : 'right-align'}>
+        <div></div>
+      </button>
+    ];
+  }
 
   private styleImage(e: UIEvent, applyFunction: Function, param: ImageSize | ImageAlign): Promise<void> {
     return new Promise<void>(async (resolve) => {
@@ -1046,6 +1090,8 @@ export class DeckdeckgoInlineEditor {
       );
     } else if (this.toolbarActions === ToolbarActions.IMAGE) {
       return this.renderImageActions();
+    } else if (this.toolbarActions === ToolbarActions.ALIGNMENT) {
+      return this.renderAlignmentActions();
     } else {
       return this.renderSelectionActions();
     }
@@ -1066,6 +1112,19 @@ export class DeckdeckgoInlineEditor {
       </button>,
 
       this.renderSeparator(),
+      <button
+        onClick={() => this.openAlignmentActions()}
+        class={
+          this.contentAlign === ContentAlign.LEFT
+            ? 'left-align active'
+            : this.contentAlign === ContentAlign.CENTER
+            ? 'center-align active'
+            : this.contentAlign === ContentAlign.RIGHT
+            ? 'right-align active'
+            : 'left-align active'
+        }>
+        <div></div>
+      </button>,
 
       <button onClick={() => this.openColorPicker()} class="pick-color">
         <div style={styleColor}></div>

webcomponents/inline-editor/src/types/inline-editor/deckdeckgo-inline-editor-utils.tsx

@@ -1,3 +1,5 @@
+import {ContentAlign} from '../../utils/enums';
+
 export class DeckdeckgoInlineEditorUtils {
   static isBold(element: HTMLElement): Promise<boolean> {
     return new Promise<boolean>(async (resolve) => {
@@ -117,6 +119,22 @@ export class DeckdeckgoInlineEditorUtils {
     });
   }
 
+  static getContentAlignment(element: HTMLElement): Promise<ContentAlign> {
+    return new Promise<ContentAlign>(async (resolve) => {
+      var result = element.style.textAlign === 'center';
+      if (result) {
+        resolve(ContentAlign.CENTER);
+        return;
+      }
+      result = element.style.textAlign === 'right';
+      if (result) {
+        resolve(ContentAlign.RIGHT);
+        return;
+      }
+      resolve(ContentAlign.LEFT);
+    });
+  }
+
   private static isTag(element: HTMLElement, tagName: string): Promise<boolean> {
     return new Promise<boolean>((resolve) => {
       if (!element) {

webcomponents/inline-editor/src/utils/enums.ts

@@ -2,7 +2,8 @@ export enum ToolbarActions {
   SELECTION,
   LINK,
   IMAGE,
-  COLOR
+  COLOR,
+  ALIGNMENT
 }
 
 export enum ImageSize {
@@ -16,3 +17,9 @@ export enum ImageAlign {
   STANDARD,
   START
 }
+
+export enum ContentAlign {
+  LEFT = 'justifyLeft',
+  CENTER = 'justifyCenter',
+  RIGHT = 'justifyRight'
+}