From 88dfd8c4ac600e04c46dc75d705bfdd7b0d8267a Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sun, 9 May 2021 12:56:48 +0200 Subject: [PATCH 1/7] refactor: use current selection --- .../inline-editor/src/components.d.ts | 2 -- .../actions/color-actions/color-actions.tsx | 23 ++++++++----------- .../deckdeckgo-inline-editor.tsx | 5 +++- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/webcomponents/inline-editor/src/components.d.ts b/webcomponents/inline-editor/src/components.d.ts index 43412265a..cd5f7d5b4 100644 --- a/webcomponents/inline-editor/src/components.d.ts +++ b/webcomponents/inline-editor/src/components.d.ts @@ -31,7 +31,6 @@ export namespace Components { "containers": string; "mobile": boolean; "palette": DeckdeckgoPalette[]; - "selection": Selection; } interface DeckgoIeFontSizeActions { "fontSize": FontSize; @@ -263,7 +262,6 @@ declare namespace LocalJSX { "mobile"?: boolean; "onExecCommand"?: (event: CustomEvent) => void; "palette"?: DeckdeckgoPalette[]; - "selection"?: Selection; } interface DeckgoIeFontSizeActions { "fontSize"?: FontSize; 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 index 2c002d31a..11c4161cc 100644 --- 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; - 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,7 +57,9 @@ 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; } @@ -71,20 +67,21 @@ export class ColorActions { 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/inline-editor/deckdeckgo-inline-editor.tsx b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx index 85af454b1..eba76a0f2 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx +++ b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx @@ -401,6 +401,10 @@ export class DeckdeckgoInlineEditor { @Method() public displayTools(selection?: Selection): Promise { return new Promise(async (resolve) => { + + console.log('here', await getSelection()); + + if (!selection) selection = await getSelection(); if (!this.anchorEvent) { @@ -871,7 +875,6 @@ export class DeckdeckgoInlineEditor { } else if (this.toolbarActions === ToolbarActions.COLOR || this.toolbarActions === ToolbarActions.BACKGROUND_COLOR) { return ( Date: Sun, 9 May 2021 13:00:10 +0200 Subject: [PATCH 2/7] refactor: remove unuseful prop selection --- webcomponents/inline-editor/src/components.d.ts | 6 ------ .../components/actions/color-actions/readme.md | 1 - .../actions/link-actions/link-actions.tsx | 8 ++++---- .../components/actions/link-actions/readme.md | 1 - .../actions/list-actions/list-actions.tsx | 3 --- .../components/actions/list-actions/readme.md | 1 - .../components/actions/style-actions/readme.md | 17 ++++++++--------- .../actions/style-actions/style-actions.tsx | 3 --- .../inline-editor/deckdeckgo-inline-editor.tsx | 11 +++-------- 9 files changed, 15 insertions(+), 36 deletions(-) diff --git a/webcomponents/inline-editor/src/components.d.ts b/webcomponents/inline-editor/src/components.d.ts index cd5f7d5b4..85497d58f 100644 --- a/webcomponents/inline-editor/src/components.d.ts +++ b/webcomponents/inline-editor/src/components.d.ts @@ -51,14 +51,12 @@ export namespace Components { "containers": string; "linkCreated": EventEmitter; "mobile": boolean; - "selection": Selection; "toolbarActions": ToolbarActions; } interface DeckgoIeListActions { "contentList": ContentList; "disabledTitle": boolean; "mobile": boolean; - "selection": Selection; "sticky": boolean; } interface DeckgoIeSeparator { @@ -69,7 +67,6 @@ export namespace Components { "disabledTitle": boolean; "italic": boolean; "mobile": boolean; - "selection": Selection; "strikethrough": boolean; "underline": boolean; } @@ -285,7 +282,6 @@ declare namespace LocalJSX { "linkCreated"?: EventEmitter; "mobile"?: boolean; "onLinkModified"?: (event: CustomEvent) => void; - "selection"?: Selection; "toolbarActions"?: ToolbarActions; } interface DeckgoIeListActions { @@ -293,7 +289,6 @@ declare namespace LocalJSX { "disabledTitle"?: boolean; "mobile"?: boolean; "onExecCommand"?: (event: CustomEvent) => void; - "selection"?: Selection; "sticky"?: boolean; } interface DeckgoIeSeparator { @@ -305,7 +300,6 @@ declare namespace LocalJSX { "italic"?: boolean; "mobile"?: boolean; "onExecCommand"?: (event: CustomEvent) => void; - "selection"?: Selection; "strikethrough"?: boolean; "underline"?: boolean; } diff --git a/webcomponents/inline-editor/src/components/actions/color-actions/readme.md b/webcomponents/inline-editor/src/components/actions/color-actions/readme.md index 95f9f40b1..dbebf46bc 100644 --- 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 index 67f1605b2..dd2c97b3f 100644 --- 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; @@ -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 index e58093080..eae6cff06 100644 --- 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` | `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 index eaebcea24..678ce58ba 100644 --- 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 index 9f2968818..e29674b60 100644 --- 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 index 4bce8e607..4439ec67b 100644 --- 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 index a125b8515..cfd6504b0 100644 --- 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 index eba76a0f2..89fbe2e95 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx +++ b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx @@ -401,11 +401,9 @@ export class DeckdeckgoInlineEditor { @Method() public displayTools(selection?: Selection): Promise { return new Promise(async (resolve) => { - - console.log('here', await getSelection()); - - - if (!selection) selection = await getSelection(); + if (!selection) { + selection = await getSelection(); + } if (!this.anchorEvent) { await this.reset(false); @@ -866,7 +864,6 @@ export class DeckdeckgoInlineEditor { Date: Sun, 9 May 2021 13:24:20 +0200 Subject: [PATCH 3/7] refactor: typescript file extension --- .../{execcommand-list.utils.tsx => execcommand-list.utils.ts} | 0 .../{execcommand-style.utils.tsx => execcommand-style.utils.ts} | 0 .../src/utils/{execcommand.utils.tsx => execcommand.utils.ts} | 0 webcomponents/inline-editor/src/utils/{utils.tsx => utils.ts} | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename webcomponents/inline-editor/src/utils/{execcommand-list.utils.tsx => execcommand-list.utils.ts} (100%) rename webcomponents/inline-editor/src/utils/{execcommand-style.utils.tsx => execcommand-style.utils.ts} (100%) rename webcomponents/inline-editor/src/utils/{execcommand.utils.tsx => execcommand.utils.ts} (100%) rename webcomponents/inline-editor/src/utils/{utils.tsx => utils.ts} (100%) diff --git a/webcomponents/inline-editor/src/utils/execcommand-list.utils.tsx b/webcomponents/inline-editor/src/utils/execcommand-list.utils.ts similarity index 100% rename from webcomponents/inline-editor/src/utils/execcommand-list.utils.tsx rename to webcomponents/inline-editor/src/utils/execcommand-list.utils.ts diff --git a/webcomponents/inline-editor/src/utils/execcommand-style.utils.tsx b/webcomponents/inline-editor/src/utils/execcommand-style.utils.ts similarity index 100% rename from webcomponents/inline-editor/src/utils/execcommand-style.utils.tsx rename to webcomponents/inline-editor/src/utils/execcommand-style.utils.ts diff --git a/webcomponents/inline-editor/src/utils/execcommand.utils.tsx b/webcomponents/inline-editor/src/utils/execcommand.utils.ts similarity index 100% rename from webcomponents/inline-editor/src/utils/execcommand.utils.tsx rename to webcomponents/inline-editor/src/utils/execcommand.utils.ts diff --git a/webcomponents/inline-editor/src/utils/utils.tsx b/webcomponents/inline-editor/src/utils/utils.ts similarity index 100% rename from webcomponents/inline-editor/src/utils/utils.tsx rename to webcomponents/inline-editor/src/utils/utils.ts From b9a3094add26da4afa7b80e31f3683d65c5d3481 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sun, 9 May 2021 13:34:23 +0200 Subject: [PATCH 4/7] feat: re-introduce native execcommand --- .../inline-editor/src/components.d.ts | 8 ++++ .../deckdeckgo-inline-editor.tsx | 13 +++++- .../src/components/inline-editor/readme.md | 45 +++++++++++-------- .../src/utils/execcommnad-native.utils.ts | 32 +++++++++++++ 4 files changed, 79 insertions(+), 19 deletions(-) create mode 100644 webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts diff --git a/webcomponents/inline-editor/src/components.d.ts b/webcomponents/inline-editor/src/components.d.ts index 85497d58f..369985f15 100644 --- a/webcomponents/inline-editor/src/components.d.ts +++ b/webcomponents/inline-editor/src/components.d.ts @@ -86,6 +86,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 */ @@ -319,6 +323,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/inline-editor/deckdeckgo-inline-editor.tsx b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx index 89fbe2e95..f49d0043a 100644 --- 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 */ @@ -801,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); diff --git a/webcomponents/inline-editor/src/components/inline-editor/readme.md b/webcomponents/inline-editor/src/components/inline-editor/readme.md index 75a09e161..b5022e51d 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/readme.md +++ b/webcomponents/inline-editor/src/components/inline-editor/readme.md @@ -75,29 +75,38 @@ document.addEventListeners('selectionchange', (event) => { ``` +## ExecCommand + +According the [MDN Web Docs](https://developer.mozilla.org/fr/docs/Web/API/Document/execCommand) the API `document.execCommand` is deprecated. +This component relies on such command, notable to support undo/redo. + +In case it would be deprecated or, you would not like to use it, turn the property `command` to `custom`. +Note that it currently do no support undo/redo. + ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------- | -| `align` | `align` | Actions to manipulat | `boolean` | `true` | -| `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` | -| `backgroundColor` | `background-color` | To hide the option to select a background-color | `boolean` | `true` | -| `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'` | -| `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` | -| `fontSize` | `font-size` | Actions to modify the selection font-size enabled? | `boolean` | `true` | -| `handleGlobalEvents` | `handle-global-events` | Handle the selection change "manually". See chapter "Usage within shadow dom" | `boolean` | `true` | -| `imgAnchor` | `img-anchor` | The type of element to attach the image toolbar | `string` | `'img'` | -| `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` | -| `imgPropertyCssFloat` | `img-property-css-float` | In case you would like to use a specific property to specify the float on your image | `string` | `'float'` | -| `imgPropertyWidth` | `img-property-width` | In case you would like to use a specific property to specify the width on your image | `string` | `'width'` | -| `list` | `list` | Actions to manipulate the selection as list enabled? | `boolean` | `true` | -| `mobile` | `mobile` | The mobile mode is automatically recognize, but just it case you would like to "force" it | `boolean` | `false` | -| `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` | -| `stickyDesktop` | `sticky-desktop` | Use a sticky footer toolbar on desktop | `boolean` | `false` | -| `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` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------- | +| `align` | `align` | Actions to manipulat | `boolean` | `true` | +| `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` | +| `backgroundColor` | `background-color` | To hide the option to select a background-color | `boolean` | `true` | +| `command` | `command` | Use `document.execCommand` (= "native") to modify the document or, alternatively use the `custom` implementation | `"custom" \| "native"` | `'native'` | +| `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'` | +| `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` | +| `fontSize` | `font-size` | Actions to modify the selection font-size enabled? | `boolean` | `true` | +| `handleGlobalEvents` | `handle-global-events` | Handle the selection change "manually". See chapter "Usage within shadow dom" | `boolean` | `true` | +| `imgAnchor` | `img-anchor` | The type of element to attach the image toolbar | `string` | `'img'` | +| `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` | +| `imgPropertyCssFloat` | `img-property-css-float` | In case you would like to use a specific property to specify the float on your image | `string` | `'float'` | +| `imgPropertyWidth` | `img-property-width` | In case you would like to use a specific property to specify the width on your image | `string` | `'width'` | +| `list` | `list` | Actions to manipulate the selection as list enabled? | `boolean` | `true` | +| `mobile` | `mobile` | The mobile mode is automatically recognize, but just it case you would like to "force" it | `boolean` | `false` | +| `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` | +| `stickyDesktop` | `sticky-desktop` | Use a sticky footer toolbar on desktop | `boolean` | `false` | +| `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` | ## Events diff --git a/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts b/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts new file mode 100644 index 000000000..2baa0b33c --- /dev/null +++ b/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts @@ -0,0 +1,32 @@ +import { ExecCommandAction, ExecCommandStyle } from "../interfaces/interfaces"; +import { FontSize } from "../types/enums"; + +export const execCommandNative = (action: ExecCommandAction) => { + if (action.cmd === 'style') { + const detail: ExecCommandStyle = action.detail as ExecCommandStyle; + + // @ts-ignore + document.execCommand("styleWithCSS", false, true); + + switch (detail.style) { + case 'color': + document.execCommand('foreColor', false, detail.value); + break; + case 'background-color' : + document.execCommand('backColor', false, detail.value); + break; + case 'font-size': + document.execCommand('fontSize', false, FontSize[detail.value.replace('-', '_').toUpperCase()]); + break; + case 'font-weight': + document.execCommand('bold', false, null); + break; + case 'font-style': + document.execCommand('italic', false, null); + break; + case 'text-decoration': + document.execCommand(detail.value === 'line-through' ? 'strikeThrough' : 'underline', false, null); + break; + } + } +} From ad2f28dcaad4f1e353f0a3a1ced4560ceffcd47b Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sun, 9 May 2021 13:39:04 +0200 Subject: [PATCH 5/7] feat: detect underline and line-through --- .../inline-editor/src/utils/utils.ts | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/webcomponents/inline-editor/src/utils/utils.ts b/webcomponents/inline-editor/src/utils/utils.ts index 17e1b3e0c..8bd92435a 100644 --- a/webcomponents/inline-editor/src/utils/utils.ts +++ b/webcomponents/inline-editor/src/utils/utils.ts @@ -55,11 +55,11 @@ export class DeckdeckgoInlineEditorUtils { return 'underline'; } - if (element.style.textDecoration === 'underline') { + if (element.style.textDecoration?.indexOf('underline') > -1 || element.style.textDecorationLine?.indexOf('underline') > -1) { return 'underline'; } - if (element.style.textDecoration === 'initial') { + if (element.style.textDecoration?.indexOf('initial') > -1 || element.style.textDecorationLine?.indexOf('initial') > -1) { return 'initial'; } @@ -70,11 +70,15 @@ export class DeckdeckgoInlineEditorUtils { const children: HTMLCollection = element.children; if (children && children.length > 0) { const selectedChild: HTMLElement = Array.from(children).find((child: HTMLElement) => { - return child.style.textDecorationLine === 'underline' || child.style.textDecorationLine === 'initial'; + return ( + child.style.textDecoration?.indexOf('underline') > -1 || + child.style.textDecorationLine?.indexOf('underline') > -1 || + child.style.textDecorationLine?.indexOf('initial') > -1 + ); }) as HTMLElement; if (selectedChild) { - return selectedChild.style.fontStyle === 'underline' ? 'underline' : 'initial'; + return selectedChild.style.fontStyle?.indexOf('underline') > -1 ? 'underline' : 'initial'; } } @@ -86,11 +90,11 @@ export class DeckdeckgoInlineEditorUtils { return 'strikethrough'; } - if (element.style.textDecoration === 'line-through') { + if (element.style.textDecoration?.indexOf('line-through') > -1 || element.style.textDecorationLine?.indexOf('line-through') > -1) { return 'strikethrough'; } - if (element.style.textDecoration === 'initial') { + if (element.style.textDecoration?.indexOf('initial') > -1 || element.style.textDecorationLine?.indexOf('initial') > -1) { return 'initial'; } @@ -101,11 +105,15 @@ export class DeckdeckgoInlineEditorUtils { const children: HTMLCollection = element.children; if (children && children.length > 0) { const selectedChild: HTMLElement = Array.from(children).find((child: HTMLElement) => { - return child.style.textDecoration === 'line-through' || child.style.textDecoration === 'initial'; + return ( + child.style.textDecoration?.indexOf('line-through') > -1 || + child.style.textDecorationLine?.indexOf('line-through') > -1 || + child.style.textDecorationLine?.indexOf('initial') > -1 + ); }) as HTMLElement; if (selectedChild) { - return selectedChild.style.fontStyle === 'line-through' ? 'strikethrough' : 'initial'; + return selectedChild.style.fontStyle?.indexOf('line-through') > -1 ? 'strikethrough' : 'initial'; } } From 957c244d4ee5a1308f9f5f9bde3a1fbe04aabbf0 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sun, 9 May 2021 13:42:44 +0200 Subject: [PATCH 6/7] feat: native list --- .../src/utils/execcommnad-native.utils.ts | 67 ++++++++++++------- 1 file changed, 43 insertions(+), 24 deletions(-) diff --git a/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts b/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts index 2baa0b33c..6d007d747 100644 --- a/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts +++ b/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts @@ -1,32 +1,51 @@ -import { ExecCommandAction, ExecCommandStyle } from "../interfaces/interfaces"; +import { ExecCommandAction, ExecCommandList, ExecCommandStyle } from "../interfaces/interfaces"; import { FontSize } from "../types/enums"; export const execCommandNative = (action: ExecCommandAction) => { if (action.cmd === 'style') { - const detail: ExecCommandStyle = action.detail as ExecCommandStyle; + execCommandNativeStyle(action); + } else if (action.cmd === 'list') { + execCommandNativeList(action); + } +} + +const execCommandNativeStyle = (action: ExecCommandAction) => { + const detail: ExecCommandStyle = action.detail as ExecCommandStyle; + + // @ts-ignore + document.execCommand("styleWithCSS", false, true); + + switch (detail.style) { + case 'color': + document.execCommand('foreColor', false, detail.value); + break; + case 'background-color' : + document.execCommand('backColor', false, detail.value); + break; + case 'font-size': + document.execCommand('fontSize', false, FontSize[detail.value.replace('-', '_').toUpperCase()]); + break; + case 'font-weight': + document.execCommand('bold', false, null); + break; + case 'font-style': + document.execCommand('italic', false, null); + break; + case 'text-decoration': + document.execCommand(detail.value === 'line-through' ? 'strikeThrough' : 'underline', false, null); + break; + } +} - // @ts-ignore - document.execCommand("styleWithCSS", false, true); +const execCommandNativeList = (action: ExecCommandAction) => { + const detail: ExecCommandList = action.detail as ExecCommandList; - switch (detail.style) { - case 'color': - document.execCommand('foreColor', false, detail.value); - break; - case 'background-color' : - document.execCommand('backColor', false, detail.value); - break; - case 'font-size': - document.execCommand('fontSize', false, FontSize[detail.value.replace('-', '_').toUpperCase()]); - break; - case 'font-weight': - document.execCommand('bold', false, null); - break; - case 'font-style': - document.execCommand('italic', false, null); - break; - case 'text-decoration': - document.execCommand(detail.value === 'line-through' ? 'strikeThrough' : 'underline', false, null); - break; - } + switch (detail.type) { + case 'ol': + document.execCommand('insertOrderedList', false, null); + break; + case 'ul' : + document.execCommand('insertUnorderedList', false, null); + break; } } From 5d821f1520434cde074f53c9eb0a0b7f3dbe8856 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Sun, 9 May 2021 13:54:39 +0200 Subject: [PATCH 7/7] feat: align native or custom --- .../inline-editor/src/components.d.ts | 2 ++ .../actions/align-actions/align-actions.tsx | 22 +++++++++---------- .../actions/align-actions/readme.md | 1 + .../deckdeckgo-inline-editor.tsx | 1 + .../src/utils/execcommand-align.utils.ts | 13 +++++++++++ .../src/utils/execcommnad-native.utils.ts | 15 ++++++++++++- 6 files changed, 42 insertions(+), 12 deletions(-) create mode 100644 webcomponents/inline-editor/src/utils/execcommand-align.utils.ts diff --git a/webcomponents/inline-editor/src/components.d.ts b/webcomponents/inline-editor/src/components.d.ts index 369985f15..33892c4d4 100644 --- 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; @@ -251,6 +252,7 @@ declare namespace LocalJSX { } interface DeckgoIeAlignActions { "anchorEvent"?: MouseEvent | TouchEvent; + "command"?: 'native' | 'custom'; "containers"?: string; "contentAlign"?: ContentAlign; "mobile"?: boolean; 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 index 238a34ff8..5f9b7072b 100644 --- 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 { + private justifyContent($event: UIEvent, align: ContentAlign): Promise { return new Promise(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 index c233680ce..99ce00616 100644 --- 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/inline-editor/deckdeckgo-inline-editor.tsx b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx index f49d0043a..dc9cc8871 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx +++ b/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)}> ); } else if (this.toolbarActions === ToolbarActions.LIST) { diff --git a/webcomponents/inline-editor/src/utils/execcommand-align.utils.ts b/webcomponents/inline-editor/src/utils/execcommand-align.utils.ts new file mode 100644 index 000000000..c555d998f --- /dev/null +++ b/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; +} diff --git a/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts b/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts index 6d007d747..f0d95d010 100644 --- a/webcomponents/inline-editor/src/utils/execcommnad-native.utils.ts +++ b/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); + } +}