deckgo · peterpeterparker · May 9, 2021 · May 9, 2021 · May 9, 2021 · May 9, 2021
diff --git a/webcomponents/inline-editor/src/components.d.ts b/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;
@@ -31,7 +32,6 @@ export namespace Components {
         "containers": string;
         "mobile": boolean;
         "palette": DeckdeckgoPalette[];
-        "selection": Selection;
     }
     interface DeckgoIeFontSizeActions {
         "fontSize": FontSize;
@@ -52,14 +52,12 @@ export namespace Components {
         "containers": string;
         "linkCreated": EventEmitter<HTMLElement>;
         "mobile": boolean;
-        "selection": Selection;
         "toolbarActions": ToolbarActions;
     }
     interface DeckgoIeListActions {
         "contentList": ContentList;
         "disabledTitle": boolean;
         "mobile": boolean;
-        "selection": Selection;
         "sticky": boolean;
     }
     interface DeckgoIeSeparator {
@@ -70,7 +68,6 @@ export namespace Components {
         "disabledTitle": boolean;
         "italic": boolean;
         "mobile": boolean;
-        "selection": Selection;
         "strikethrough": boolean;
         "underline": boolean;
     }
@@ -90,6 +87,10 @@ export namespace Components {
           * To hide the option to select a background-color
          */
         "backgroundColor": boolean;
+        /**
+          * Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation
+         */
+        "command": 'native' | 'custom';
         /**
           * A comma separated list of containers where the inline editor should/could be use. Used in order to allow the component to detect some information like the current style or color
          */
@@ -251,6 +252,7 @@ declare namespace LocalJSX {
     }
     interface DeckgoIeAlignActions {
         "anchorEvent"?: MouseEvent | TouchEvent;
+        "command"?: 'native' | 'custom';
         "containers"?: string;
         "contentAlign"?: ContentAlign;
         "mobile"?: boolean;
@@ -263,7 +265,6 @@ declare namespace LocalJSX {
         "mobile"?: boolean;
         "onExecCommand"?: (event: CustomEvent<ExecCommandAction>) => void;
         "palette"?: DeckdeckgoPalette[];
-        "selection"?: Selection;
     }
     interface DeckgoIeFontSizeActions {
         "fontSize"?: FontSize;
@@ -287,15 +288,13 @@ declare namespace LocalJSX {
         "linkCreated"?: EventEmitter<HTMLElement>;
         "mobile"?: boolean;
         "onLinkModified"?: (event: CustomEvent<boolean>) => void;
-        "selection"?: Selection;
         "toolbarActions"?: ToolbarActions;
     }
     interface DeckgoIeListActions {
         "contentList"?: ContentList;
         "disabledTitle"?: boolean;
         "mobile"?: boolean;
         "onExecCommand"?: (event: CustomEvent<ExecCommandAction>) => void;
-        "selection"?: Selection;
         "sticky"?: boolean;
     }
     interface DeckgoIeSeparator {
@@ -307,7 +306,6 @@ declare namespace LocalJSX {
         "italic"?: boolean;
         "mobile"?: boolean;
         "onExecCommand"?: (event: CustomEvent<ExecCommandAction>) => void;
-        "selection"?: Selection;
         "strikethrough"?: boolean;
         "underline"?: boolean;
     }
@@ -327,6 +325,10 @@ declare namespace LocalJSX {
           * To hide the option to select a background-color
          */
         "backgroundColor"?: boolean;
+        /**
+          * Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation
+         */
+        "command"?: 'native' | 'custom';
         /**
           * A comma separated list of containers where the inline editor should/could be use. Used in order to allow the component to detect some information like the current style or color
          */

diff --git a/webcomponents/inline-editor/src/components/actions/align-actions/align-actions.tsx b/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();

diff --git a/webcomponents/inline-editor/src/components/actions/align-actions/readme.md b/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` |

diff --git a/webcomponents/inline-editor/src/components/actions/color-actions/color-actions.tsx b/webcomponents/inline-editor/src/components/actions/color-actions/color-actions.tsx
@@ -15,9 +15,6 @@ import {ExecCommandAction} from '../../../interfaces/interfaces';
   shadow: true,
 })
 export class ColorActions {
-  @Prop()
-  selection: Selection;
-
   @Prop()
   action: 'color' | 'background-color';
 
@@ -36,16 +33,13 @@ export class ColorActions {
   @Event()
   private execCommand: EventEmitter<ExecCommandAction>;
 
-  private range: Range | undefined;
-
   async componentWillLoad() {
-    this.range = this.selection?.getRangeAt(0);
-
     await this.initColor();
   }
 
   private async initColor() {
-    const container: HTMLElement | undefined = getAnchorNode(this.selection);
+    const selection: Selection | undefined = await getSelection();
+    const container: HTMLElement | undefined = getAnchorNode(selection);
 
     if (!container) {
       return;
@@ -63,28 +57,31 @@ export class ColorActions {
   }
 
   private async selectColor($event: CustomEvent) {
-    if (!this.selection || !$event || !$event.detail) {
+    const selection: Selection | undefined = await getSelection();
+
+    if (!selection || !$event || !$event.detail) {
       return;
     }
 
     if (!this.action) {
       return;
     }
 
-    if (!this.selection || this.selection.rangeCount <= 0 || !document) {
+    if (selection.rangeCount <= 0 || !document) {
       return;
     }
 
-    const text: string = this.range.toString();
+    const range: Range | undefined = selection.getRangeAt(0);
+
+    const text: string = range?.toString();
 
     if (!text || text.length <= 0) {
       return;
     }
 
-    const selection: Selection | undefined = await getSelection();
     await clearTheSelection();
 
-    selection?.addRange(this.range);
+    selection?.addRange(range);
 
     this.execCommand.emit({
       cmd: 'style',

diff --git a/webcomponents/inline-editor/src/components/actions/color-actions/readme.md b/webcomponents/inline-editor/src/components/actions/color-actions/readme.md
@@ -11,7 +11,6 @@
 | `containers` | `containers` |             | `string`                        | `undefined` |
 | `mobile`     | `mobile`     |             | `boolean`                       | `undefined` |
 | `palette`    | --           |             | `DeckdeckgoPalette[]`           | `undefined` |
-| `selection`  | --           |             | `Selection`                     | `undefined` |
 
 
 ## Events

diff --git a/webcomponents/inline-editor/src/components/actions/link-actions/link-actions.tsx b/webcomponents/inline-editor/src/components/actions/link-actions/link-actions.tsx
@@ -3,7 +3,9 @@ import {Component, Event, EventEmitter, h, Prop, Host} from '@stencil/core';
 import {AnchorLink, InputTargetEvent} from '../../../interfaces/interfaces';
 
 import {ToolbarActions} from '../../../types/enums';
+
 import {DeckdeckgoInlineEditorUtils} from '../../../utils/utils';
+import { getSelection } from "../../../utils/selection.utils";
 
 @Component({
   tag: 'deckgo-ie-link-actions',
@@ -19,9 +21,6 @@ export class LinkActions {
   @Prop()
   anchorLink: AnchorLink;
 
-  @Prop()
-  selection: Selection;
-
   @Prop()
   linkCreated: EventEmitter<HTMLElement>;
 
@@ -55,7 +54,8 @@ export class LinkActions {
         return;
       }
 
-      let targetContainer: Node = this.anchorLink.range.commonAncestorContainer ? this.anchorLink.range.commonAncestorContainer : this.selection.anchorNode;
+      const selection: Selection | undefined = await getSelection();
+      let targetContainer: Node = this.anchorLink.range.commonAncestorContainer ? this.anchorLink.range.commonAncestorContainer : selection?.anchorNode;
 
       if (!targetContainer) {
         resolve();

diff --git a/webcomponents/inline-editor/src/components/actions/link-actions/readme.md b/webcomponents/inline-editor/src/components/actions/link-actions/readme.md
@@ -13,7 +13,6 @@
 | `containers`     | `containers`      |             | `string`                                                                                                                                                                                                            | `undefined` |
 | `linkCreated`    | --                |             | `EventEmitter<HTMLElement>`                                                                                                                                                                                         | `undefined` |
 | `mobile`         | `mobile`          |             | `boolean`                                                                                                                                                                                                           | `undefined` |
-| `selection`      | --                |             | `Selection`                                                                                                                                                                                                         | `undefined` |
 | `toolbarActions` | `toolbar-actions` |             | `ToolbarActions.ALIGNMENT \| ToolbarActions.BACKGROUND_COLOR \| ToolbarActions.COLOR \| ToolbarActions.FONT_SIZE \| ToolbarActions.IMAGE \| ToolbarActions.LINK \| ToolbarActions.LIST \| ToolbarActions.SELECTION` | `undefined` |
 
 

diff --git a/webcomponents/inline-editor/src/components/actions/list-actions/list-actions.tsx b/webcomponents/inline-editor/src/components/actions/list-actions/list-actions.tsx
@@ -9,9 +9,6 @@ import {ExecCommandAction} from '../../../interfaces/interfaces';
   shadow: true,
 })
 export class AlignActions {
-  @Prop()
-  selection: Selection;
-
   @Prop()
   disabledTitle: boolean = false;
 

diff --git a/webcomponents/inline-editor/src/components/actions/list-actions/readme.md b/webcomponents/inline-editor/src/components/actions/list-actions/readme.md
@@ -12,7 +12,6 @@
 | `contentList`   | `content-list`   |             | `ContentList.ORDERED \| ContentList.UNORDERED` | `undefined` |
 | `disabledTitle` | `disabled-title` |             | `boolean`                                      | `false`     |
 | `mobile`        | `mobile`         |             | `boolean`                                      | `undefined` |
-| `selection`     | --               |             | `Selection`                                    | `undefined` |
 | `sticky`        | `sticky`         |             | `boolean`                                      | `undefined` |
 
 

diff --git a/webcomponents/inline-editor/src/components/actions/style-actions/readme.md b/webcomponents/inline-editor/src/components/actions/style-actions/readme.md
@@ -7,15 +7,14 @@
 
 ## Properties
 
-| Property        | Attribute        | Description | Type        | Default     |
-| --------------- | ---------------- | ----------- | ----------- | ----------- |
-| `bold`          | `bold`           |             | `boolean`   | `undefined` |
-| `disabledTitle` | `disabled-title` |             | `boolean`   | `false`     |
-| `italic`        | `italic`         |             | `boolean`   | `undefined` |
-| `mobile`        | `mobile`         |             | `boolean`   | `undefined` |
-| `selection`     | --               |             | `Selection` | `undefined` |
-| `strikethrough` | `strikethrough`  |             | `boolean`   | `undefined` |
-| `underline`     | `underline`      |             | `boolean`   | `undefined` |
+| Property        | Attribute        | Description | Type      | Default     |
+| --------------- | ---------------- | ----------- | --------- | ----------- |
+| `bold`          | `bold`           |             | `boolean` | `undefined` |
+| `disabledTitle` | `disabled-title` |             | `boolean` | `false`     |
+| `italic`        | `italic`         |             | `boolean` | `undefined` |
+| `mobile`        | `mobile`         |             | `boolean` | `undefined` |
+| `strikethrough` | `strikethrough`  |             | `boolean` | `undefined` |
+| `underline`     | `underline`      |             | `boolean` | `undefined` |
 
 
 ## Events

diff --git a/webcomponents/inline-editor/src/components/actions/style-actions/style-actions.tsx b/webcomponents/inline-editor/src/components/actions/style-actions/style-actions.tsx
@@ -11,9 +11,6 @@ export class StyleActions {
   @Prop()
   disabledTitle: boolean = false;
 
-  @Prop()
-  selection: Selection;
-
   @Prop()
   mobile: boolean;
 

diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx
@@ -13,6 +13,7 @@ import {DeckdeckgoInlineEditorUtils} from '../../utils/utils';
 import {execCommand} from '../../utils/execcommand.utils';
 import {clearTheSelection, getSelection} from '../../utils/selection.utils';
 import {getAnchorNode} from '../../utils/node.utils';
+import {execCommandNative} from '../../utils/execcommnad-native.utils';
 
 /**
  * @slot - related to the customActions propery
@@ -185,6 +186,12 @@ export class DeckdeckgoInlineEditor {
   @Prop()
   handleGlobalEvents: boolean = true;
 
+  /**
+   * Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation
+   */
+  @Prop()
+  command: 'native' | 'custom' = 'native';
+
   /**
    * Triggered when a custom action is selected. Its detail provide an action name, the Selection and an anchorLink
    */
@@ -401,7 +408,9 @@ export class DeckdeckgoInlineEditor {
   @Method()
   public displayTools(selection?: Selection): Promise<void> {
     return new Promise<void>(async (resolve) => {
-      if (!selection) selection = await getSelection();
+      if (!selection) {
+        selection = await getSelection();
+      }
 
       if (!this.anchorEvent) {
         await this.reset(false);
@@ -799,7 +808,11 @@ export class DeckdeckgoInlineEditor {
     // onSelectionChange is triggered if DOM changes, we still need to detect attributes changes to refresh style
     this.onAttributesChangesInitStyle();
 
-    await execCommand(this.selection, $event.detail, this.containers);
+    if (this.command === 'native') {
+      execCommandNative($event.detail);
+    } else {
+      await execCommand(this.selection, $event.detail, this.containers);
+    }
 
     if ($event.detail.cmd === 'list' || isIOS()) {
       await this.reset(true);
@@ -862,7 +875,6 @@ export class DeckdeckgoInlineEditor {
         <deckgo-ie-link-actions
           toolbarActions={this.toolbarActions}
           anchorLink={this.anchorLink}
-          selection={this.selection}
           linkCreated={this.linkCreated}
           containers={this.containers}
           mobile={this.mobile}
@@ -871,7 +883,6 @@ export class DeckdeckgoInlineEditor {
     } else if (this.toolbarActions === ToolbarActions.COLOR || this.toolbarActions === ToolbarActions.BACKGROUND_COLOR) {
       return (
         <deckgo-ie-color-actions
-          selection={this.selection}
           action={this.toolbarActions === ToolbarActions.BACKGROUND_COLOR ? 'background-color' : 'color'}
           palette={this.palette}
           mobile={this.mobile}
@@ -898,12 +909,12 @@ 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) {
       return (
         <deckgo-ie-list-actions
-          selection={this.selection}
           disabledTitle={this.disabledTitle}
           mobile={this.mobile}
           sticky={sticky}
@@ -928,7 +939,6 @@ export class DeckdeckgoInlineEditor {
       <deckgo-ie-style-actions
         mobile={this.mobile}
         disabledTitle={this.disabledTitle}
-        selection={this.selection}
         bold={this.bold === 'bold'}
         italic={this.italic === 'italic'}
         underline={this.underline === 'underline'}
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,9 +11,6 @@ export class StyleActions { @@
       @Prop()
       disabledTitle: boolean = false;
-      @Prop()
-      selection: Selection;
       @Prop()
       mobile: boolean;
@@ Expand Down @@