Merge pull request #282 from deckgo/highlight-selected-element

feat(#250): highlight selected element

Author: peterpeterparker

studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx

@@ -638,6 +638,11 @@ export class AppEditorToolbar {
 
     private initSelectedElement(element: HTMLElement): Promise<void> {
         return new Promise<void>(async (resolve) => {
+            // If needed, remove highlight on previous element
+            if (!element && this.selectedElement) {
+                await this.highlightElement(false);
+            }
+
             this.selectedElement = element;
             this.deckOrSlide = this.isElementSlideOrDeck(element);
 
@@ -652,6 +657,26 @@ export class AppEditorToolbar {
                 element.addEventListener('paste', this.cleanOnPaste, false);
 
                 await this.attachMoveToolbarOnElement();
+
+                await this.highlightElement(true);
+            }
+
+            resolve();
+        });
+    }
+
+    private highlightElement(highlight: boolean): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            // No highlight on deck
+            if (!this.selectedElement || this.deckOrSlide) {
+                resolve();
+                return;
+            }
+
+            if (highlight) {
+                this.selectedElement.setAttribute('highlighted', '');
+            } else {
+                this.selectedElement.removeAttribute('highlighted');
             }
 
             resolve();

studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx

@@ -567,6 +567,7 @@ export class DeckEventsHandler {
 
             let result: string = content.replace(/contenteditable=""|contenteditable="true"|contenteditable="false"|contenteditable/gi, '');
             result = result.replace(/editable=""|editable="true"|editable/gi, '');
+            result = result.replace(/highlighted=""|highlighted="true"|highlighted/gi, '');
             result = result.replace(/hydrated/gi, '');
             result = result.replace(/class=""/g, '');
 

studio/src/app/utils/editor/reveal-slot.utils.tsx

@@ -96,5 +96,9 @@ export class RevealSlotUtils {
             element.setAttribute('style', selectedElement.getAttribute('style'));
             selectedElement.removeAttribute('style');
         }
+
+        if (selectedElement.hasAttribute('highlighted')) {
+            selectedElement.removeAttribute('highlighted');
+        }
     }
 }

studio/src/global/theme/editor/editor-deck-placeholder.scss

@@ -67,4 +67,8 @@ deckgo-deck {
     }
   }
 
+  [highlighted] {
+    box-shadow: 1px 2px 8px 2px rgba(var(--ion-color-primary-rgb), 0.2);
+  }
+
 }

studio/src/global/theme/editor/editor-fullscreen.scss

@@ -49,6 +49,10 @@
         h1, h2, h3, section, ol, ul, deckgo-reveal-list, deckgo-highlight-code, *:not([slot="background"]) > deckgo-lazy-img, deckgo-reveal.img {
           border: 1px solid transparent;
         }
+
+        [highlighted] {
+          box-shadow: none;
+        }
       }
     }