fix: do not loose range selection focus on color input

Author: peterpeterparker

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

@@ -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/inline-editor/deckdeckgo-inline-editor.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() {