feat: align native or custom

Author: peterpeterparker

webcomponents/inline-editor/src/components.d.ts

@@ -21,6 +21,7 @@ export namespace Components {
     }
     interface DeckgoIeAlignActions {
         "anchorEvent": MouseEvent | TouchEvent;
+        "command": 'native' | 'custom';
         "containers": string;
         "contentAlign": ContentAlign;
         "mobile": boolean;
@@ -251,6 +252,7 @@ declare namespace LocalJSX {
     }
     interface DeckgoIeAlignActions {
         "anchorEvent"?: MouseEvent | TouchEvent;
+        "command"?: 'native' | 'custom';
         "containers"?: string;
         "contentAlign"?: ContentAlign;
         "mobile"?: boolean;

webcomponents/inline-editor/src/components/actions/align-actions/align-actions.tsx

@@ -2,7 +2,8 @@ import {Component, EventEmitter, h, Prop, Event, Host} from '@stencil/core';
 
 import {ContentAlign} from '../../../types/enums';
 
-import {DeckdeckgoInlineEditorUtils} from '../../../utils/utils';
+import { execCommandAlign } from "../../../utils/execcommand-align.utils";
+import { execCommandNativeAlign } from "../../../utils/execcommnad-native.utils";
 
 @Component({
   tag: 'deckgo-ie-align-actions',
@@ -25,23 +26,22 @@ export class AlignActions {
   @Prop()
   containers: string;
 
+  @Prop()
+  command: 'native' | 'custom' = 'native';
+
   @Event()
   private alignModified: EventEmitter;
 
-  private justifyContent(e: UIEvent, align: ContentAlign): Promise<void> {
+  private justifyContent($event: UIEvent, align: ContentAlign): Promise<void> {
     return new Promise<void>(async (resolve) => {
-      e.stopPropagation();
+      $event.stopPropagation();
 
-      const anchorElement: HTMLElement = this.anchorEvent.target as HTMLElement;
-      const container: HTMLElement | undefined = await DeckdeckgoInlineEditorUtils.findContainer(this.containers, anchorElement);
-
-      if (!container) {
-        resolve();
-        return;
+      if (this.command === 'native') {
+        execCommandNativeAlign(align);
+      } else {
+        await execCommandAlign(this.anchorEvent, this.containers, align);
       }
 
-      container.style.textAlign = container?.style.textAlign === align ? '' : align;
-
       await this.alignModified.emit();
 
       resolve();

webcomponents/inline-editor/src/components/actions/align-actions/readme.md

@@ -10,6 +10,7 @@
 | Property       | Attribute       | Description | Type                                                             | Default     |
 | -------------- | --------------- | ----------- | ---------------------------------------------------------------- | ----------- |
 | `anchorEvent`  | --              |             | `MouseEvent \| TouchEvent`                                       | `undefined` |
+| `command`      | `command`       |             | `"custom" \| "native"`                                           | `'native'`  |
 | `containers`   | `containers`    |             | `string`                                                         | `undefined` |
 | `contentAlign` | `content-align` |             | `ContentAlign.CENTER \| ContentAlign.LEFT \| ContentAlign.RIGHT` | `undefined` |
 | `mobile`       | `mobile`        |             | `boolean`                                                        | `undefined` |

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

@@ -909,6 +909,7 @@ export class DeckdeckgoInlineEditor {
           mobile={this.mobile}
           sticky={sticky}
           contentAlign={this.contentAlign}
+          command={this.command}
           onAlignModified={() => this.reset(true)}></deckgo-ie-align-actions>
       );
     } else if (this.toolbarActions === ToolbarActions.LIST) {

webcomponents/inline-editor/src/utils/execcommand-align.utils.ts

@@ -0,0 +1,13 @@
+import { DeckdeckgoInlineEditorUtils } from "./utils";
+import { ContentAlign } from "../types/enums";
+
+export const execCommandAlign = async (anchorEvent: MouseEvent | TouchEvent, containers: string, align: ContentAlign) => {
+  const anchorElement: HTMLElement = anchorEvent.target as HTMLElement;
+  const container: HTMLElement | undefined = await DeckdeckgoInlineEditorUtils.findContainer(containers, anchorElement);
+
+  if (!container) {
+    return;
+  }
+
+  container.style.textAlign = container?.style.textAlign === align ? '' : align;
+}

webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts

@@ -1,5 +1,5 @@
 import { ExecCommandAction, ExecCommandList, ExecCommandStyle } from "../interfaces/interfaces";
-import { FontSize } from "../types/enums";
+import { ContentAlign, FontSize } from "../types/enums";
 
 export const execCommandNative = (action: ExecCommandAction) => {
   if (action.cmd === 'style') {
@@ -49,3 +49,16 @@ const execCommandNativeList = (action: ExecCommandAction) => {
       break;
   }
 }
+
+export const execCommandNativeAlign = (align: ContentAlign) => {
+  switch (align) {
+    case ContentAlign.CENTER:
+      document.execCommand('justifyCenter', false, null);
+      break;
+    case ContentAlign.RIGHT:
+      document.execCommand('justifyRight', false, null);
+      break;
+    default:
+      document.execCommand('justifyLeft', false, null);
+  }
+}