Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit c6367c4

Browse files
peterpeterparkerpeterpeterparker
authored
Merge pull request #1157 from deckgo/feat/exec-cmd
feat: re-introduce execCommand
2 parents 6eddade + 5d821f1 commit c6367c4

File tree

19 files changed

+180
-86
lines changed

19 files changed

+180
-86
lines changed

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export namespace Components {
2121
}
2222
interface DeckgoIeAlignActions {
2323
"anchorEvent": MouseEvent | TouchEvent;
24+
"command": 'native' | 'custom';
2425
"containers": string;
2526
"contentAlign": ContentAlign;
2627
"mobile": boolean;
@@ -31,7 +32,6 @@ export namespace Components {
3132
"containers": string;
3233
"mobile": boolean;
3334
"palette": DeckdeckgoPalette[];
34-
"selection": Selection;
3535
}
3636
interface DeckgoIeFontSizeActions {
3737
"fontSize": FontSize;
@@ -52,14 +52,12 @@ export namespace Components {
5252
"containers": string;
5353
"linkCreated": EventEmitter<HTMLElement>;
5454
"mobile": boolean;
55-
"selection": Selection;
5655
"toolbarActions": ToolbarActions;
5756
}
5857
interface DeckgoIeListActions {
5958
"contentList": ContentList;
6059
"disabledTitle": boolean;
6160
"mobile": boolean;
62-
"selection": Selection;
6361
"sticky": boolean;
6462
}
6563
interface DeckgoIeSeparator {
@@ -70,7 +68,6 @@ export namespace Components {
7068
"disabledTitle": boolean;
7169
"italic": boolean;
7270
"mobile": boolean;
73-
"selection": Selection;
7471
"strikethrough": boolean;
7572
"underline": boolean;
7673
}
@@ -90,6 +87,10 @@ export namespace Components {
9087
* To hide the option to select a background-color
9188
*/
9289
"backgroundColor": boolean;
90+
/**
91+
* Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation
92+
*/
93+
"command": 'native' | 'custom';
9394
/**
9495
* 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
9596
*/
@@ -251,6 +252,7 @@ declare namespace LocalJSX {
251252
}
252253
interface DeckgoIeAlignActions {
253254
"anchorEvent"?: MouseEvent | TouchEvent;
255+
"command"?: 'native' | 'custom';
254256
"containers"?: string;
255257
"contentAlign"?: ContentAlign;
256258
"mobile"?: boolean;
@@ -263,7 +265,6 @@ declare namespace LocalJSX {
263265
"mobile"?: boolean;
264266
"onExecCommand"?: (event: CustomEvent<ExecCommandAction>) => void;
265267
"palette"?: DeckdeckgoPalette[];
266-
"selection"?: Selection;
267268
}
268269
interface DeckgoIeFontSizeActions {
269270
"fontSize"?: FontSize;
@@ -287,15 +288,13 @@ declare namespace LocalJSX {
287288
"linkCreated"?: EventEmitter<HTMLElement>;
288289
"mobile"?: boolean;
289290
"onLinkModified"?: (event: CustomEvent<boolean>) => void;
290-
"selection"?: Selection;
291291
"toolbarActions"?: ToolbarActions;
292292
}
293293
interface DeckgoIeListActions {
294294
"contentList"?: ContentList;
295295
"disabledTitle"?: boolean;
296296
"mobile"?: boolean;
297297
"onExecCommand"?: (event: CustomEvent<ExecCommandAction>) => void;
298-
"selection"?: Selection;
299298
"sticky"?: boolean;
300299
}
301300
interface DeckgoIeSeparator {
@@ -307,7 +306,6 @@ declare namespace LocalJSX {
307306
"italic"?: boolean;
308307
"mobile"?: boolean;
309308
"onExecCommand"?: (event: CustomEvent<ExecCommandAction>) => void;
310-
"selection"?: Selection;
311309
"strikethrough"?: boolean;
312310
"underline"?: boolean;
313311
}
@@ -327,6 +325,10 @@ declare namespace LocalJSX {
327325
* To hide the option to select a background-color
328326
*/
329327
"backgroundColor"?: boolean;
328+
/**
329+
* Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation
330+
*/
331+
"command"?: 'native' | 'custom';
330332
/**
331333
* 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
332334
*/

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import {Component, EventEmitter, h, Prop, Event, Host} from '@stencil/core';
22

33
import {ContentAlign} from '../../../types/enums';
44

5-
import {DeckdeckgoInlineEditorUtils} from '../../../utils/utils';
5+
import { execCommandAlign } from "../../../utils/execcommand-align.utils";
6+
import { execCommandNativeAlign } from "../../../utils/execcommnad-native.utils";
67

78
@Component({
89
tag: 'deckgo-ie-align-actions',
@@ -25,23 +26,22 @@ export class AlignActions {
2526
@Prop()
2627
containers: string;
2728

29+
@Prop()
30+
command: 'native' | 'custom' = 'native';
31+
2832
@Event()
2933
private alignModified: EventEmitter;
3034

31-
private justifyContent(e: UIEvent, align: ContentAlign): Promise<void> {
35+
private justifyContent($event: UIEvent, align: ContentAlign): Promise<void> {
3236
return new Promise<void>(async (resolve) => {
33-
e.stopPropagation();
37+
$event.stopPropagation();
3438

35-
const anchorElement: HTMLElement = this.anchorEvent.target as HTMLElement;
36-
const container: HTMLElement | undefined = await DeckdeckgoInlineEditorUtils.findContainer(this.containers, anchorElement);
37-
38-
if (!container) {
39-
resolve();
40-
return;
39+
if (this.command === 'native') {
40+
execCommandNativeAlign(align);
41+
} else {
42+
await execCommandAlign(this.anchorEvent, this.containers, align);
4143
}
4244

43-
container.style.textAlign = container?.style.textAlign === align ? '' : align;
44-
4545
await this.alignModified.emit();
4646

4747
resolve();

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
| Property | Attribute | Description | Type | Default |
1111
| -------------- | --------------- | ----------- | ---------------------------------------------------------------- | ----------- |
1212
| `anchorEvent` | -- | | `MouseEvent \| TouchEvent` | `undefined` |
13+
| `command` | `command` | | `"custom" \| "native"` | `'native'` |
1314
| `containers` | `containers` | | `string` | `undefined` |
1415
| `contentAlign` | `content-align` | | `ContentAlign.CENTER \| ContentAlign.LEFT \| ContentAlign.RIGHT` | `undefined` |
1516
| `mobile` | `mobile` | | `boolean` | `undefined` |

‎webcomponents/inline-editor/src/components/actions/color-actions/color-actions.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@ import {ExecCommandAction} from '../../../interfaces/interfaces';
1515
shadow: true,
1616
})
1717
export class ColorActions {
18-
@Prop()
19-
selection: Selection;
20-
2118
@Prop()
2219
action: 'color' | 'background-color';
2320

@@ -36,16 +33,13 @@ export class ColorActions {
3633
@Event()
3734
private execCommand: EventEmitter<ExecCommandAction>;
3835

39-
private range: Range | undefined;
40-
4136
async componentWillLoad() {
42-
this.range = this.selection?.getRangeAt(0);
43-
4437
await this.initColor();
4538
}
4639

4740
private async initColor() {
48-
const container: HTMLElement | undefined = getAnchorNode(this.selection);
41+
const selection: Selection | undefined = await getSelection();
42+
const container: HTMLElement | undefined = getAnchorNode(selection);
4943

5044
if (!container) {
5145
return;
@@ -63,28 +57,31 @@ export class ColorActions {
6357
}
6458

6559
private async selectColor($event: CustomEvent) {
66-
if (!this.selection || !$event || !$event.detail) {
60+
const selection: Selection | undefined = await getSelection();
61+
62+
if (!selection || !$event || !$event.detail) {
6763
return;
6864
}
6965

7066
if (!this.action) {
7167
return;
7268
}
7369

74-
if (!this.selection || this.selection.rangeCount <= 0 || !document) {
70+
if (selection.rangeCount <= 0 || !document) {
7571
return;
7672
}
7773

78-
const text: string = this.range.toString();
74+
const range: Range | undefined = selection.getRangeAt(0);
75+
76+
const text: string = range?.toString();
7977

8078
if (!text || text.length <= 0) {
8179
return;
8280
}
8381

84-
const selection: Selection | undefined = await getSelection();
8582
await clearTheSelection();
8683

87-
selection?.addRange(this.range);
84+
selection?.addRange(range);
8885

8986
this.execCommand.emit({
9087
cmd: 'style',

‎webcomponents/inline-editor/src/components/actions/color-actions/readme.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
| `containers` | `containers` | | `string` | `undefined` |
1212
| `mobile` | `mobile` | | `boolean` | `undefined` |
1313
| `palette` | -- | | `DeckdeckgoPalette[]` | `undefined` |
14-
| `selection` | -- | | `Selection` | `undefined` |
1514

1615

1716
## Events

‎webcomponents/inline-editor/src/components/actions/link-actions/link-actions.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import {Component, Event, EventEmitter, h, Prop, Host} from '@stencil/core';
33
import {AnchorLink, InputTargetEvent} from '../../../interfaces/interfaces';
44

55
import {ToolbarActions} from '../../../types/enums';
6+
67
import {DeckdeckgoInlineEditorUtils} from '../../../utils/utils';
8+
import { getSelection } from "../../../utils/selection.utils";
79

810
@Component({
911
tag: 'deckgo-ie-link-actions',
@@ -19,9 +21,6 @@ export class LinkActions {
1921
@Prop()
2022
anchorLink: AnchorLink;
2123

22-
@Prop()
23-
selection: Selection;
24-
2524
@Prop()
2625
linkCreated: EventEmitter<HTMLElement>;
2726

@@ -55,7 +54,8 @@ export class LinkActions {
5554
return;
5655
}
5756

58-
let targetContainer: Node = this.anchorLink.range.commonAncestorContainer ? this.anchorLink.range.commonAncestorContainer : this.selection.anchorNode;
57+
const selection: Selection | undefined = await getSelection();
58+
let targetContainer: Node = this.anchorLink.range.commonAncestorContainer ? this.anchorLink.range.commonAncestorContainer : selection?.anchorNode;
5959

6060
if (!targetContainer) {
6161
resolve();

‎webcomponents/inline-editor/src/components/actions/link-actions/readme.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
| `containers` | `containers` | | `string` | `undefined` |
1414
| `linkCreated` | -- | | `EventEmitter<HTMLElement>` | `undefined` |
1515
| `mobile` | `mobile` | | `boolean` | `undefined` |
16-
| `selection` | -- | | `Selection` | `undefined` |
1716
| `toolbarActions` | `toolbar-actions` | | `ToolbarActions.ALIGNMENT \| ToolbarActions.BACKGROUND_COLOR \| ToolbarActions.COLOR \| ToolbarActions.FONT_SIZE \| ToolbarActions.IMAGE \| ToolbarActions.LINK \| ToolbarActions.LIST \| ToolbarActions.SELECTION` | `undefined` |
1817

1918

‎webcomponents/inline-editor/src/components/actions/list-actions/list-actions.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ import {ExecCommandAction} from '../../../interfaces/interfaces';
99
shadow: true,
1010
})
1111
export class AlignActions {
12-
@Prop()
13-
selection: Selection;
14-
1512
@Prop()
1613
disabledTitle: boolean = false;
1714

‎webcomponents/inline-editor/src/components/actions/list-actions/readme.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
| `contentList` | `content-list` | | `ContentList.ORDERED \| ContentList.UNORDERED` | `undefined` |
1313
| `disabledTitle` | `disabled-title` | | `boolean` | `false` |
1414
| `mobile` | `mobile` | | `boolean` | `undefined` |
15-
| `selection` | -- | | `Selection` | `undefined` |
1615
| `sticky` | `sticky` | | `boolean` | `undefined` |
1716

1817

‎webcomponents/inline-editor/src/components/actions/style-actions/readme.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@
77

88
## Properties
99

10-
| Property | Attribute | Description | Type | Default |
11-
| --------------- | ---------------- | ----------- | ----------- | ----------- |
12-
| `bold` | `bold` | | `boolean` | `undefined` |
13-
| `disabledTitle` | `disabled-title` | | `boolean` | `false` |
14-
| `italic` | `italic` | | `boolean` | `undefined` |
15-
| `mobile` | `mobile` | | `boolean` | `undefined` |
16-
| `selection` | -- | | `Selection` | `undefined` |
17-
| `strikethrough` | `strikethrough` | | `boolean` | `undefined` |
18-
| `underline` | `underline` | | `boolean` | `undefined` |
10+
| Property | Attribute | Description | Type | Default |
11+
| --------------- | ---------------- | ----------- | --------- | ----------- |
12+
| `bold` | `bold` | | `boolean` | `undefined` |
13+
| `disabledTitle` | `disabled-title` | | `boolean` | `false` |
14+
| `italic` | `italic` | | `boolean` | `undefined` |
15+
| `mobile` | `mobile` | | `boolean` | `undefined` |
16+
| `strikethrough` | `strikethrough` | | `boolean` | `undefined` |
17+
| `underline` | `underline` | | `boolean` | `undefined` |
1918

2019

2120
## Events

0 commit comments

Comments
 (0)