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

Commit b9a3094

Browse files
peterpeterparkerpeterpeterparker
committed
feat: re-introduce native execcommand
1 parent 1adb81c commit b9a3094

File tree

4 files changed

+79
-19
lines changed

4 files changed

+79
-19
lines changed

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,10 @@ export namespace Components {
8686
* To hide the option to select a background-color
8787
*/
8888
"backgroundColor": boolean;
89+
/**
90+
* Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation
91+
*/
92+
"command": 'native' | 'custom';
8993
/**
9094
* 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
9195
*/
@@ -319,6 +323,10 @@ declare namespace LocalJSX {
319323
* To hide the option to select a background-color
320324
*/
321325
"backgroundColor"?: boolean;
326+
/**
327+
* Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation
328+
*/
329+
"command"?: 'native' | 'custom';
322330
/**
323331
* 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
324332
*/

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {DeckdeckgoInlineEditorUtils} from '../../utils/utils';
1313
import {execCommand} from '../../utils/execcommand.utils';
1414
import {clearTheSelection, getSelection} from '../../utils/selection.utils';
1515
import {getAnchorNode} from '../../utils/node.utils';
16+
import {execCommandNative} from '../../utils/execcommnad-native.utils';
1617

1718
/**
1819
* @slot - related to the customActions propery
@@ -185,6 +186,12 @@ export class DeckdeckgoInlineEditor {
185186
@Prop()
186187
handleGlobalEvents: boolean = true;
187188

189+
/**
190+
* Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation
191+
*/
192+
@Prop()
193+
command: 'native' | 'custom' = 'native';
194+
188195
/**
189196
* Triggered when a custom action is selected. Its detail provide an action name, the Selection and an anchorLink
190197
*/
@@ -801,7 +808,11 @@ export class DeckdeckgoInlineEditor {
801808
// onSelectionChange is triggered if DOM changes, we still need to detect attributes changes to refresh style
802809
this.onAttributesChangesInitStyle();
803810

804-
await execCommand(this.selection, $event.detail, this.containers);
811+
if (this.command === 'native') {
812+
execCommandNative($event.detail);
813+
} else {
814+
await execCommand(this.selection, $event.detail, this.containers);
815+
}
805816

806817
if ($event.detail.cmd === 'list' || isIOS()) {
807818
await this.reset(true);

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

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -75,29 +75,38 @@ document.addEventListeners('selectionchange', (event) => {
7575

7676
```
7777
78+
## ExecCommand
79+
80+
According the [MDN Web Docs](https://developer.mozilla.org/fr/docs/Web/API/Document/execCommand) the API `document.execCommand` is deprecated.
81+
This component relies on such command, notable to support undo/redo.
82+
83+
In case it would be deprecated or, you would not like to use it, turn the property `command` to `custom`.
84+
Note that it currently do no support undo/redo.
85+
7886
<!-- Auto Generated Below -->
7987
8088
8189
## Properties
8290
83-
| Property | Attribute | Description | Type | Default |
84-
| --------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------- |
85-
| `align` | `align` | Actions to manipulat | `boolean` | `true` |
86-
| `attachTo` | -- | Could be use to attach the inline editor event listeners (mousedown, touchstart and keydown) to a specific element instead of the document | `HTMLElement` | `undefined` |
87-
| `backgroundColor` | `background-color` | To hide the option to select a background-color | `boolean` | `true` |
88-
| `containers` | `containers` | 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 | `string` | `'h1,h2,h3,h4,h5,h6,div'` |
89-
| `customActions` | `custom-actions` | You might to display and add further actions to the component ? Use this property to provide a comma separated list of actions | `string` | `undefined` |
90-
| `fontSize` | `font-size` | Actions to modify the selection font-size enabled? | `boolean` | `true` |
91-
| `handleGlobalEvents` | `handle-global-events` | Handle the selection change "manually". See chapter "Usage within shadow dom" | `boolean` | `true` |
92-
| `imgAnchor` | `img-anchor` | The type of element to attach the image toolbar | `string` | `'img'` |
93-
| `imgEditable` | `img-editable` | Per default, the component will not consider images as editable. Turn this option to true to activate the edition of images | `boolean` | `false` |
94-
| `imgPropertyCssFloat` | `img-property-css-float` | In case you would like to use a specific property to specify the float on your image | `string` | `'float'` |
95-
| `imgPropertyWidth` | `img-property-width` | In case you would like to use a specific property to specify the width on your image | `string` | `'width'` |
96-
| `list` | `list` | Actions to manipulate the selection as list enabled? | `boolean` | `true` |
97-
| `mobile` | `mobile` | The mobile mode is automatically recognize, but just it case you would like to "force" it | `boolean` | `false` |
98-
| `palette` | -- | In case you would like to define a custom list of colors for the palette of colors. See @deckdeckgo/color for the default list of colors | `DeckdeckgoPalette[]` | `DEFAULT_PALETTE` |
99-
| `stickyDesktop` | `sticky-desktop` | Use a sticky footer toolbar on desktop | `boolean` | `false` |
100-
| `stickyMobile` | `sticky-mobile` | Use a sticky footer toolbar on mobile. The sticky bar is positioned bottom except on iOS for which it will be positioned top | `boolean` | `false` |
91+
| Property | Attribute | Description | Type | Default |
92+
| --------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------- |
93+
| `align` | `align` | Actions to manipulat | `boolean` | `true` |
94+
| `attachTo` | -- | Could be use to attach the inline editor event listeners (mousedown, touchstart and keydown) to a specific element instead of the document | `HTMLElement` | `undefined` |
95+
| `backgroundColor` | `background-color` | To hide the option to select a background-color | `boolean` | `true` |
96+
| `command` | `command` | Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation | `"custom" \| "native"` | `'native'` |
97+
| `containers` | `containers` | 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 | `string` | `'h1,h2,h3,h4,h5,h6,div'` |
98+
| `customActions` | `custom-actions` | You might to display and add further actions to the component ? Use this property to provide a comma separated list of actions | `string` | `undefined` |
99+
| `fontSize` | `font-size` | Actions to modify the selection font-size enabled? | `boolean` | `true` |
100+
| `handleGlobalEvents` | `handle-global-events` | Handle the selection change "manually". See chapter "Usage within shadow dom" | `boolean` | `true` |
101+
| `imgAnchor` | `img-anchor` | The type of element to attach the image toolbar | `string` | `'img'` |
102+
| `imgEditable` | `img-editable` | Per default, the component will not consider images as editable. Turn this option to true to activate the edition of images | `boolean` | `false` |
103+
| `imgPropertyCssFloat` | `img-property-css-float` | In case you would like to use a specific property to specify the float on your image | `string` | `'float'` |
104+
| `imgPropertyWidth` | `img-property-width` | In case you would like to use a specific property to specify the width on your image | `string` | `'width'` |
105+
| `list` | `list` | Actions to manipulate the selection as list enabled? | `boolean` | `true` |
106+
| `mobile` | `mobile` | The mobile mode is automatically recognize, but just it case you would like to "force" it | `boolean` | `false` |
107+
| `palette` | -- | In case you would like to define a custom list of colors for the palette of colors. See @deckdeckgo/color for the default list of colors | `DeckdeckgoPalette[]` | `DEFAULT_PALETTE` |
108+
| `stickyDesktop` | `sticky-desktop` | Use a sticky footer toolbar on desktop | `boolean` | `false` |
109+
| `stickyMobile` | `sticky-mobile` | Use a sticky footer toolbar on mobile. The sticky bar is positioned bottom except on iOS for which it will be positioned top | `boolean` | `false` |
101110
102111
103112
## Events

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { ExecCommandAction, ExecCommandStyle } from "../interfaces/interfaces";
2+
import { FontSize } from "../types/enums";
3+
4+
export const execCommandNative = (action: ExecCommandAction) => {
5+
if (action.cmd === 'style') {
6+
const detail: ExecCommandStyle = action.detail as ExecCommandStyle;
7+
8+
// @ts-ignore
9+
document.execCommand("styleWithCSS", false, true);
10+
11+
switch (detail.style) {
12+
case 'color':
13+
document.execCommand('foreColor', false, detail.value);
14+
break;
15+
case 'background-color' :
16+
document.execCommand('backColor', false, detail.value);
17+
break;
18+
case 'font-size':
19+
document.execCommand('fontSize', false, FontSize[detail.value.replace('-', '_').toUpperCase()]);
20+
break;
21+
case 'font-weight':
22+
document.execCommand('bold', false, null);
23+
break;
24+
case 'font-style':
25+
document.execCommand('italic', false, null);
26+
break;
27+
case 'text-decoration':
28+
document.execCommand(detail.value === 'line-through' ? 'strikeThrough' : 'underline', false, null);
29+
break;
30+
}
31+
}
32+
}

0 commit comments

Comments
 (0)