Merge pull request #1158 from deckgo/fix/color-selection

fix: color selection

Author: peterpeterparker

CHANGELOG.md

@@ -15,7 +15,7 @@
 - color: v4.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/color/CHANGELOG.md))
 - core: v8.1.6 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
 - highlight-code: v2.6.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
-- inline-editor: v4.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
+- inline-editor: v4.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
 - markdown: v2.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/markdown/CHANGELOG.md))
 
 ### Others

webcomponents/inline-editor/CHANGELOG.md

@@ -1,4 +1,10 @@
-# 4.0.0 (2021-05-09)
+# 4.0.2 (2021-05-09)
+
+### Fix
+
+- do not loose range selection focus on color input
+
+# 4.0.1 (2021-05-09)
 
 ### Features
 

webcomponents/inline-editor/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/inline-editor",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "A WYSIWYG HTML Inline Editor Web Component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

webcomponents/inline-editor/package.json

@@ -4,7 +4,7 @@ import {DeckdeckgoPalette} from '@deckdeckgo/color';
 
 import {hexToRgb} from '@deckdeckgo/utils';
 
-import {clearTheSelection, getSelection} from '../../../utils/selection.utils';
+import {getSelection} from '../../../utils/selection.utils';
 import {findStyleNode, getAnchorNode} from '../../../utils/node.utils';
 
 import {ExecCommandAction} from '../../../interfaces/interfaces';
@@ -33,12 +33,17 @@ export class ColorActions {
   @Event()
   private execCommand: EventEmitter<ExecCommandAction>;
 
+  private range: Range | undefined;
+
   async componentWillLoad() {
     await this.initColor();
   }
 
   private async initColor() {
     const selection: Selection | undefined = await getSelection();
+
+    this.range = selection?.getRangeAt(0);
+
     const container: HTMLElement | undefined = getAnchorNode(selection);
 
     if (!container) {
@@ -67,21 +72,19 @@ export class ColorActions {
       return;
     }
 
-    if (selection.rangeCount <= 0 || !document) {
-      return;
-    }
+    selection?.removeAllRanges();
+    selection?.addRange(this.range);
 
-    const range: Range | undefined = selection.getRangeAt(0);
+    const observer: MutationObserver = new MutationObserver( (_mutations: MutationRecord[]) => {
+      observer.disconnect();
 
-    const text: string = range?.toString();
-
-    if (!text || text.length <= 0) {
-      return;
-    }
+      // No node were added so the style was modified
+      this.range = selection?.getRangeAt(0);
+    });
 
-    await clearTheSelection();
+    const anchorNode: HTMLElement | undefined = getAnchorNode(selection);
 
-    selection?.addRange(range);
+    observer.observe(anchorNode, {childList: true});
 
     this.execCommand.emit({
       cmd: 'style',

webcomponents/inline-editor/src/components/actions/color-actions/color-actions.tsx

@@ -388,6 +388,10 @@ export class DeckdeckgoInlineEditor {
   }
 
   private async handleSelectionChange(_$event: UIEvent) {
+    if (this.toolbarActions === ToolbarActions.COLOR || this.toolbarActions === ToolbarActions.BACKGROUND_COLOR) {
+      return;
+    }
+
     if (document && document.activeElement && !this.isContainer(document.activeElement)) {
       if (document.activeElement.nodeName.toLowerCase() !== 'deckgo-inline-editor') {
         await this.reset(false);
@@ -831,15 +835,15 @@ export class DeckdeckgoInlineEditor {
   }
 
   private onAttributesChangesInitStyle() {
-    const anchoreNode: HTMLElement | undefined = getAnchorNode(this.selection);
+    const anchorNode: HTMLElement | undefined = getAnchorNode(this.selection);
 
     const observer: MutationObserver = new MutationObserver(async () => {
       observer.disconnect();
 
-      await this.initStyleForNode(anchoreNode);
+      await this.initStyleForNode(anchorNode);
     });
 
-    observer.observe(anchoreNode, {attributes: true});
+    observer.observe(anchorNode, {attributes: true});
   }
 
   render() {