diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d23cec30..ab08d0e4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,15 @@
# [X.Y.Z](https://github.com/deckgo/deckdeckgo/compare/v4.10.0...v5.0.0) (202A-BB-CC)
+### Web Components
+
+- 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
- 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/package-lock.json b/package-lock.json
index 6195be158..204632060 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"
@@ -9699,12 +9699,12 @@
"version": "2.2.0",
"license": "MIT",
"dependencies": {
- "@deckdeckgo/utils": "^2.0.1"
+ "@deckdeckgo/utils": "^2.2.0"
}
},
"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",
+ "version": "4.1.1",
"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"
}
@@ -10345,7 +10350,7 @@
"@deckdeckgo/drag-resize-rotate": {
"version": "file:webcomponents/drag-resize-rotate",
"requires": {
- "@deckdeckgo/utils": "^2.0.1"
+ "@deckdeckgo/utils": "*"
}
},
"@deckdeckgo/editor": {
@@ -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": "^2.2.0"
}
},
"@deckdeckgo/kit": {
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);
+ }
+};
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;
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;
-};