refactor: move selection utils to utils lib (#1377)

* feat: new util functions for selection

Signed-off-by: peterpeterparker <[email protected]>

* refactor: move selection utils to utils lib

Signed-off-by: peterpeterparker <[email protected]>

* refactor: move selection utils to utils lib

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

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))
 
 <a name="5.0.0"></a>
 

package-lock.json

@@ -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

utils/utils/CHANGELOG.md

@@ -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",

utils/utils/package.json

@@ -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';

utils/utils/src/index.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);
+  }
+};

utils/utils/src/utils/selection.utils.ts

@@ -1,3 +1,9 @@
+# 2.2.1 (2021-10-27)
+
+### Refactor
+
+- move function to utils lib
+
 # 2.2.0 (2021-05-29)
 
 ### Build

webcomponents/drag-resize-rotate/CHANGELOG.md

@@ -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"
+  }
 }

webcomponents/drag-resize-rotate/package.json

@@ -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;

webcomponents/drag-resize-rotate/src/components/deckdeckgo-drr.tsx

@@ -1,3 +1,9 @@
+# 4.1.1
+
+### Refactor
+
+- selection utils extracted to utils lib
+
 # 4.1.0 (2021-05-29)
 
 ### Build