From 0c927bccf2fc11a664c23dd75e141cc12ab907bd Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 27 Oct 2021 19:42:36 +0200 Subject: [PATCH 1/3] feat: new util functions for selection Signed-off-by: peterpeterparker --- CHANGELOG.md | 1 + utils/utils/CHANGELOG.md | 6 +++ utils/utils/package.json | 2 +- utils/utils/src/index.ts | 1 + utils/utils/src/utils/selection.utils.ts | 48 ++++++++++++++++++++++++ 5 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 utils/utils/src/utils/selection.utils.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d23cec30..cdbeff084 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Others - deck-utils: v4.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/utils/deck/CHANGELOG.md)) +- utils: v2.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/utils/utils/CHANGELOG.md)) diff --git a/utils/utils/CHANGELOG.md b/utils/utils/CHANGELOG.md index 1e7d57b4a..e3095ce86 100644 --- a/utils/utils/CHANGELOG.md +++ b/utils/utils/CHANGELOG.md @@ -1,3 +1,9 @@ +# 2.2.0 (2021-10-27) + +### Features + +- new util functions to interact with the selection API + # 2.1.0 (2021-10-21) ### Fix diff --git a/utils/utils/package.json b/utils/utils/package.json index 177a7f2ce..0fb87e0c0 100644 --- a/utils/utils/package.json +++ b/utils/utils/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/utils", - "version": "2.1.0", + "version": "2.2.0", "author": "David Dal Busco", "description": "A collection of utils methods and functions developed for DeckDeckGo", "license": "MIT", diff --git a/utils/utils/src/index.ts b/utils/utils/src/index.ts index 41cecf680..92db4e1c4 100644 --- a/utils/utils/src/index.ts +++ b/utils/utils/src/index.ts @@ -2,3 +2,4 @@ export * from './utils/utils'; export * from './utils/image-utils'; export * from './utils/inject-utils'; export * from './utils/color-utils'; +export * from './utils/selection.utils'; diff --git a/utils/utils/src/utils/selection.utils.ts b/utils/utils/src/utils/selection.utils.ts new file mode 100644 index 000000000..1abf0ca1c --- /dev/null +++ b/utils/utils/src/utils/selection.utils.ts @@ -0,0 +1,48 @@ +export const clearTheSelection = () => { + if (window && window.getSelection) { + if (window.getSelection()?.empty) { + window.getSelection()?.empty(); + } else if (window.getSelection()?.removeAllRanges) { + window.getSelection()?.removeAllRanges(); + } + } else if (document && (document as any).selection) { + (document as any).selection.empty(); + } +}; + +export const getSelection = (): Selection | null => { + if (window && window.getSelection) { + return window.getSelection(); + } else if (document && document.getSelection) { + return document.getSelection(); + } else if (document && (document as any).selection) { + return (document as any).selection.createRange().text; + } + + return null; +}; + +export const getAnchorElement = (selection: Selection | undefined): HTMLElement | null => { + const anchorNode: Node | null | undefined = selection?.anchorNode; + + if (!anchorNode) { + return null; + } + + return anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE + ? (anchorNode as HTMLElement) + : anchorNode.parentElement; +}; + +// https://stackoverflow.com/a/3866442/5404186 +export const moveCursorToEnd = (element: HTMLElement) => { + if (window && document && document.createRange && element) { + const range: Range = document.createRange(); + range.selectNodeContents(element); + range.collapse(false); + + const selection: Selection | null = getSelection(); + selection?.removeAllRanges(); + selection?.addRange(range); + } +}; From ef93aced6086727f0b150e07b95d91fae6bd24b7 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 27 Oct 2021 19:52:13 +0200 Subject: [PATCH 2/3] refactor: move selection utils to utils lib Signed-off-by: peterpeterparker --- CHANGELOG.md | 4 ++ package-lock.json | 58 +++++++++++-------- webcomponents/inline-editor/CHANGELOG.md | 6 ++ webcomponents/inline-editor/package.json | 4 +- .../actions/color-actions/color-actions.tsx | 16 +++-- .../actions/link-actions/link-actions.tsx | 5 +- .../deckdeckgo-inline-editor.tsx | 12 ++-- .../src/utils/execcommand-style.utils.ts | 6 +- .../inline-editor/src/utils/node.utils.ts | 12 ---- .../src/utils/selection.utils.ts | 23 -------- 10 files changed, 70 insertions(+), 76 deletions(-) delete mode 100644 webcomponents/inline-editor/src/utils/selection.utils.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index cdbeff084..b8e96c9bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ # [X.Y.Z](https://github.com/deckgo/deckdeckgo/compare/v4.10.0...v5.0.0) (202A-BB-CC) +### Web Components + +- inline-editor: v4.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/inline-editor/CHANGELOG.md)) + ### Others - deck-utils: v4.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/utils/deck/CHANGELOG.md)) diff --git a/package-lock.json b/package-lock.json index 6195be158..bb52d57fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9415,32 +9415,32 @@ }, "providers/api": { "name": "@deckdeckgo/api", - "version": "1.0.0-beta.0", + "version": "1.0.0", "license": "AGPL-3.0-or-later", "devDependencies": { - "@deckdeckgo/editor": "^1.0.0-beta.0", + "@deckdeckgo/editor": "^1.0.0", "esbuild": "^0.12.28", "rimraf": "^3.0.2" } }, "providers/firebase": { "name": "@deckdeckgo/firebase", - "version": "1.0.0-beta.0", + "version": "1.0.1", "license": "AGPL-3.0-or-later", "dependencies": { - "@deckdeckgo/api": "^1.0.0-beta.0", + "@deckdeckgo/api": "^1.0.0", "firebase": "^8.9.1", "idb-keyval": "^6.0.1" }, "devDependencies": { - "@deckdeckgo/editor": "^1.0.0-beta.0", - "@deckdeckgo/lazy-img": "^3.1.0", + "@deckdeckgo/editor": "^1.0.0", + "@deckdeckgo/lazy-img": "^3.2.0", "@deckdeckgo/slide-chart": "^2.5.0" } }, "providers/ic": { "name": "@deckdeckgo/ic", - "version": "1.0.0-beta.9", + "version": "1.0.0", "license": "AGPL-3.0-or-later", "dependencies": { "@dfinity/agent": "^0.10.0", @@ -9453,8 +9453,8 @@ "uuid": "^3.4.0" }, "devDependencies": { - "@deckdeckgo/editor": "^1.0.0-beta.0", - "@deckdeckgo/lazy-img": "^3.1.0", + "@deckdeckgo/editor": "^1.0.0", + "@deckdeckgo/lazy-img": "^3.2.0", "@deckdeckgo/slide-chart": "^2.5.0", "@rollup/plugin-replace": "^3.0.0", "rollup-plugin-node-polyfills": "^0.2.1" @@ -9565,7 +9565,7 @@ }, "utils/deck": { "name": "@deckdeckgo/deck-utils", - "version": "4.1.0", + "version": "4.1.1", "license": "MIT", "devDependencies": { "@deckdeckgo/types": "^2.0.1", @@ -9577,7 +9577,7 @@ }, "utils/editor": { "name": "@deckdeckgo/editor", - "version": "1.0.0-beta.0", + "version": "1.0.0", "license": "AGPL-3.0-or-later", "devDependencies": { "@deckdeckgo/core": "^8.4.0", @@ -9631,7 +9631,7 @@ }, "utils/utils": { "name": "@deckdeckgo/utils", - "version": "2.0.1", + "version": "2.2.0", "license": "MIT", "devDependencies": { "@types/node": "^16.9.0" @@ -9704,7 +9704,7 @@ }, "webcomponents/highlight-code": { "name": "@deckdeckgo/highlight-code", - "version": "3.3.1", + "version": "3.4.0", "license": "MIT", "dependencies": { "@deckdeckgo/utils": "2.0.1", @@ -9716,13 +9716,18 @@ "node-fetch": "^2.6.1" } }, + "webcomponents/highlight-code/node_modules/@deckdeckgo/utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-2.0.1.tgz", + "integrity": "sha512-wS6KqJZYOB5V6lIYauv4ij5Q2S0e9BAHw+786FsFZ0UZ22GOxBHvG3Cq7kIxRs8Zr3wAw2eTvcSOZ0TIj/tfSQ==" + }, "webcomponents/inline-editor": { "name": "@deckdeckgo/inline-editor", "version": "4.1.0", "license": "MIT", "dependencies": { "@deckdeckgo/color": "^4.1.0", - "@deckdeckgo/utils": "^2.0.1" + "@deckdeckgo/utils": "^2.2.0" } }, "webcomponents/laser-pointer": { @@ -9735,7 +9740,7 @@ }, "webcomponents/lazy-img": { "name": "@deckdeckgo/lazy-img", - "version": "3.1.0", + "version": "3.2.0", "license": "MIT" }, "webcomponents/markdown": { @@ -10284,7 +10289,7 @@ "@deckdeckgo/api": { "version": "file:providers/api", "requires": { - "@deckdeckgo/editor": "^1.0.0-beta.0", + "@deckdeckgo/editor": "^1.0.0", "esbuild": "^0.12.28", "rimraf": "^3.0.2" } @@ -10359,9 +10364,9 @@ "@deckdeckgo/firebase": { "version": "file:providers/firebase", "requires": { - "@deckdeckgo/api": "^1.0.0-beta.0", - "@deckdeckgo/editor": "^1.0.0-beta.0", - "@deckdeckgo/lazy-img": "^3.1.0", + "@deckdeckgo/api": "^1.0.0", + "@deckdeckgo/editor": "^1.0.0", + "@deckdeckgo/lazy-img": "^3.2.0", "@deckdeckgo/slide-chart": "^2.5.0", "firebase": "^8.9.1", "idb-keyval": "^6.0.1" @@ -10375,14 +10380,21 @@ "@types/prismjs": "^1.16.6", "node-fetch": "^2.6.1", "prismjs": "^1.24.1" + }, + "dependencies": { + "@deckdeckgo/utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@deckdeckgo/utils/-/utils-2.0.1.tgz", + "integrity": "sha512-wS6KqJZYOB5V6lIYauv4ij5Q2S0e9BAHw+786FsFZ0UZ22GOxBHvG3Cq7kIxRs8Zr3wAw2eTvcSOZ0TIj/tfSQ==" + } } }, "@deckdeckgo/ic": { "version": "file:providers/ic", "requires": { - "@deckdeckgo/editor": "^1.0.0-beta.0", - "@deckdeckgo/lazy-img": "^3.1.0", - "@deckdeckgo/slide-chart": "*", + "@deckdeckgo/editor": "^1.0.0", + "@deckdeckgo/lazy-img": "^3.2.0", + "@deckdeckgo/slide-chart": "^2.5.0", "@dfinity/agent": "^0.10.0", "@dfinity/auth-client": "^0.10.0", "@dfinity/authentication": "^0.10.0", @@ -10399,7 +10411,7 @@ "version": "file:webcomponents/inline-editor", "requires": { "@deckdeckgo/color": "^4.1.0", - "@deckdeckgo/utils": "^2.0.1" + "@deckdeckgo/utils": "*" } }, "@deckdeckgo/kit": { diff --git a/webcomponents/inline-editor/CHANGELOG.md b/webcomponents/inline-editor/CHANGELOG.md index 53ceab4bc..8e77c5dc8 100644 --- a/webcomponents/inline-editor/CHANGELOG.md +++ b/webcomponents/inline-editor/CHANGELOG.md @@ -1,3 +1,9 @@ +# 4.1.1 + +### Refactor + +- selection utils extracted to utils lib + # 4.1.0 (2021-05-29) ### Build diff --git a/webcomponents/inline-editor/package.json b/webcomponents/inline-editor/package.json index b0e1aefe7..cc6395255 100644 --- a/webcomponents/inline-editor/package.json +++ b/webcomponents/inline-editor/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/inline-editor", - "version": "4.1.0", + "version": "4.1.1", "description": "A WYSIWYG HTML Inline Editor Web Component", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@deckdeckgo/color": "^4.1.0", - "@deckdeckgo/utils": "^2.0.1" + "@deckdeckgo/utils": "^2.2.0" }, "repository": { "type": "git", 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 3d39f6d69..069eed435 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 @@ -1,11 +1,11 @@ import {Component, Event, EventEmitter, h, Prop, Host, State} from '@stencil/core'; import {DeckdeckgoPalette} from '@deckdeckgo/color'; +import {getAnchorElement} from '@deckdeckgo/utils'; -import {hexToRgb} from '@deckdeckgo/utils'; +import {hexToRgb, getSelection} from '@deckdeckgo/utils'; -import {getSelection} from '../../../utils/selection.utils'; -import {findStyleNode, getAnchorNode} from '../../../utils/node.utils'; +import {findStyleNode} from '../../../utils/node.utils'; import {ExecCommandAction} from '../../../interfaces/interfaces'; @@ -40,11 +40,11 @@ export class ColorActions { } private async initColor() { - const selection: Selection | undefined = await getSelection(); + const selection: Selection | null = getSelection(); this.range = selection?.getRangeAt(0); - const container: HTMLElement | undefined = getAnchorNode(selection); + const container: HTMLElement | null = getAnchorElement(selection); if (!container) { return; @@ -82,7 +82,11 @@ export class ColorActions { this.range = selection?.getRangeAt(0); }); - const anchorNode: HTMLElement | undefined = getAnchorNode(selection); + const anchorNode: HTMLElement | null = getAnchorElement(selection); + + if (!anchorNode) { + return; + } observer.observe(anchorNode, {childList: true}); 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 ecd207112..029f00a11 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 @@ -1,11 +1,12 @@ import {Component, Event, EventEmitter, h, Prop, Host} from '@stencil/core'; +import {getSelection} from '@deckdeckgo/utils'; + 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', @@ -54,7 +55,7 @@ export class LinkActions { return; } - const selection: Selection | undefined = await getSelection(); + const selection: Selection | null = getSelection(); let targetContainer: Node = this.anchorLink.range.commonAncestorContainer ? this.anchorLink.range.commonAncestorContainer : selection?.anchorNode; 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 ac05dd671..d2ccce1bf 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 @@ -5,14 +5,14 @@ import {debounce, isIOS, isMobile, isRTL, unifyEvent} from '@deckdeckgo/utils'; import '@deckdeckgo/color'; import {DeckdeckgoPalette, DEFAULT_PALETTE} from '@deckdeckgo/color'; +import {clearTheSelection, getSelection, getAnchorElement} from '@deckdeckgo/utils'; + import {ContentAlign, ContentList, FontSize, ToolbarActions} from '../../types/enums'; import {AnchorLink, ExecCommandAction, InlineAction} from '../../interfaces/interfaces'; 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'; /** @@ -413,7 +413,7 @@ export class DeckdeckgoInlineEditor { public displayTools(selection?: Selection): Promise { return new Promise(async (resolve) => { if (!selection) { - selection = await getSelection(); + selection = getSelection(); } if (!this.anchorEvent) { @@ -551,7 +551,7 @@ export class DeckdeckgoInlineEditor { return; } - const content: Node = getAnchorNode(selection); + const content: HTMLElement | null = getAnchorElement(selection); if (!content) { resolve(); @@ -674,7 +674,7 @@ export class DeckdeckgoInlineEditor { reset(clearSelection: boolean, blurActiveElement?: boolean): Promise { return new Promise(async (resolve) => { if (clearSelection) { - await clearTheSelection(); + clearTheSelection(); } await this.setToolsActivated(false); @@ -836,7 +836,7 @@ export class DeckdeckgoInlineEditor { } private onAttributesChangesInitStyle() { - const anchorNode: HTMLElement | undefined = getAnchorNode(this.selection); + const anchorNode: HTMLElement | null = getAnchorElement(this.selection); const observer: MutationObserver = new MutationObserver(async () => { observer.disconnect(); diff --git a/webcomponents/inline-editor/src/utils/execcommand-style.utils.ts b/webcomponents/inline-editor/src/utils/execcommand-style.utils.ts index d66f0d453..de8bb6f22 100644 --- a/webcomponents/inline-editor/src/utils/execcommand-style.utils.ts +++ b/webcomponents/inline-editor/src/utils/execcommand-style.utils.ts @@ -1,10 +1,12 @@ import {ExecCommandStyle} from '../interfaces/interfaces'; +import {getAnchorElement} from '@deckdeckgo/utils'; + import {DeckdeckgoInlineEditorUtils} from './utils'; -import {findStyleNode, getAnchorNode} from './node.utils'; +import {findStyleNode} from './node.utils'; export async function execCommandStyle(selection: Selection, action: ExecCommandStyle, containers: string) { - const container: HTMLElement | undefined = getAnchorNode(selection); + const container: HTMLElement | null = getAnchorElement(selection); if (!container) { return; diff --git a/webcomponents/inline-editor/src/utils/node.utils.ts b/webcomponents/inline-editor/src/utils/node.utils.ts index 468069295..38fc56739 100644 --- a/webcomponents/inline-editor/src/utils/node.utils.ts +++ b/webcomponents/inline-editor/src/utils/node.utils.ts @@ -25,15 +25,3 @@ export const findStyleNode = async (node: Node, style: string, containers: strin return await findStyleNode(node.parentNode, style, containers); }; - -export const getAnchorNode = (selection: Selection | undefined): HTMLElement | undefined => { - const anchorNode: Node = selection?.anchorNode; - - if (!anchorNode) { - return undefined; - } - - return anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE - ? (anchorNode as HTMLElement) - : anchorNode.parentElement; -}; diff --git a/webcomponents/inline-editor/src/utils/selection.utils.ts b/webcomponents/inline-editor/src/utils/selection.utils.ts deleted file mode 100644 index b4117ab93..000000000 --- a/webcomponents/inline-editor/src/utils/selection.utils.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const clearTheSelection = async () => { - if (window && window.getSelection) { - if (window.getSelection().empty) { - window.getSelection().empty(); - } else if (window.getSelection().removeAllRanges) { - window.getSelection().removeAllRanges(); - } - } else if (document && (document as any).selection) { - (document as any).selection.empty(); - } -}; - -export const getSelection = async (): Promise => { - if (window && window.getSelection) { - return window.getSelection(); - } else if (document && document.getSelection) { - return document.getSelection(); - } else if (document && (document as any).selection) { - return (document as any).selection.createRange().text; - } - - return undefined; -}; From 63442b39eaee222be1c7c5372dd65cc26a41785e Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Wed, 27 Oct 2021 19:56:32 +0200 Subject: [PATCH 3/3] refactor: move selection utils to utils lib Signed-off-by: peterpeterparker --- CHANGELOG.md | 3 ++- package-lock.json | 8 ++++---- webcomponents/drag-resize-rotate/CHANGELOG.md | 6 ++++++ webcomponents/drag-resize-rotate/package.json | 10 +++++----- .../src/components/deckdeckgo-drr.tsx | 17 ++--------------- 5 files changed, 19 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b8e96c9bf..ab08d0e4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,8 @@ ### Web Components -- inline-editor: v4.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/inline-editor/CHANGELOG.md)) +- drag-resize-rotate: v2.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/drag-resize-rotate/CHANGELOG.md)) +- inline-editor: v4.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/inline-editor/CHANGELOG.md) ### Others diff --git a/package-lock.json b/package-lock.json index bb52d57fb..204632060 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9699,7 +9699,7 @@ "version": "2.2.0", "license": "MIT", "dependencies": { - "@deckdeckgo/utils": "^2.0.1" + "@deckdeckgo/utils": "^2.2.0" } }, "webcomponents/highlight-code": { @@ -9723,7 +9723,7 @@ }, "webcomponents/inline-editor": { "name": "@deckdeckgo/inline-editor", - "version": "4.1.0", + "version": "4.1.1", "license": "MIT", "dependencies": { "@deckdeckgo/color": "^4.1.0", @@ -10350,7 +10350,7 @@ "@deckdeckgo/drag-resize-rotate": { "version": "file:webcomponents/drag-resize-rotate", "requires": { - "@deckdeckgo/utils": "^2.0.1" + "@deckdeckgo/utils": "*" } }, "@deckdeckgo/editor": { @@ -10411,7 +10411,7 @@ "version": "file:webcomponents/inline-editor", "requires": { "@deckdeckgo/color": "^4.1.0", - "@deckdeckgo/utils": "*" + "@deckdeckgo/utils": "^2.2.0" } }, "@deckdeckgo/kit": { diff --git a/webcomponents/drag-resize-rotate/CHANGELOG.md b/webcomponents/drag-resize-rotate/CHANGELOG.md index 57f009205..c7cf81eb1 100644 --- a/webcomponents/drag-resize-rotate/CHANGELOG.md +++ b/webcomponents/drag-resize-rotate/CHANGELOG.md @@ -1,3 +1,9 @@ +# 2.2.1 (2021-10-27) + +### Refactor + +- move function to utils lib + # 2.2.0 (2021-05-29) ### Build diff --git a/webcomponents/drag-resize-rotate/package.json b/webcomponents/drag-resize-rotate/package.json index f2615a7a6..3629d626e 100644 --- a/webcomponents/drag-resize-rotate/package.json +++ b/webcomponents/drag-resize-rotate/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/drag-resize-rotate", - "version": "2.2.0", + "version": "2.2.1", "description": "A Web Component to drag, resize and rotate any element", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -23,9 +23,6 @@ "test.watch": "stencil test --spec --e2e --watchAll", "generate": "stencil generate" }, - "dependencies": { - "@deckdeckgo/utils": "^2.0.1" - }, "license": "MIT", "repository": { "type": "git", @@ -49,5 +46,8 @@ "talk", "draggable", "resizable" - ] + ], + "dependencies": { + "@deckdeckgo/utils": "^2.2.0" + } } diff --git a/webcomponents/drag-resize-rotate/src/components/deckdeckgo-drr.tsx b/webcomponents/drag-resize-rotate/src/components/deckdeckgo-drr.tsx index e7c84e741..cc30de481 100644 --- a/webcomponents/drag-resize-rotate/src/components/deckdeckgo-drr.tsx +++ b/webcomponents/drag-resize-rotate/src/components/deckdeckgo-drr.tsx @@ -1,6 +1,6 @@ import {Component, h, Host, Prop, State, Element, Event, EventEmitter, Build, Watch} from '@stencil/core'; -import {unifyEvent} from '@deckdeckgo/utils'; +import {moveCursorToEnd, unifyEvent} from '@deckdeckgo/utils'; interface ResizeMatrix { a: 0 | 1; @@ -607,23 +607,10 @@ export class DeckdeckgoDragResizeRotate { if (element) { element.focus(); - await this.moveCursorToEnd(element); + moveCursorToEnd(element); } }; - // https://stackoverflow.com/a/3866442/5404186 - private async moveCursorToEnd(contentEditableElement: HTMLElement) { - if (window && document && document.createRange && contentEditableElement) { - const range: Range = document.createRange(); - range.selectNodeContents(contentEditableElement); - range.collapse(false); - - const selection: Selection = window.getSelection(); - selection.removeAllRanges(); - selection.addRange(range); - } - } - render() { const widthUnit: string = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit; const heightUnit: string = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vh' : this.unit;