feat: dashboard content should not be editable

Author: peterpeterparker

studio/src/app/helpers/editor/editor.helper.tsx

@@ -86,7 +86,7 @@ export class EditorHelper {
         return new Promise<any>(async (resolve) => {
             try {
                 const slide: Slide = await this.slideService.get(deckId, slideId);
-                const element: any = await ParseSlidesUtils.parseSlide(slide);
+                const element: any = await ParseSlidesUtils.parseSlide(slide, true);
 
                 resolve(element);
             } catch (err) {

studio/src/app/pages/core/app-dashboard/app-dashboard.tsx

@@ -85,7 +85,7 @@ export class AppDashboard {
         return new Promise<DeckAndFirstSlide>(async (resolve) => {
             try {
                 const slide: Slide = await this.slideService.get(deck.id, slideId);
-                const element: any = await ParseSlidesUtils.parseSlide(slide);
+                const element: any = await ParseSlidesUtils.parseSlide(slide, false);
 
                 let style: any;
                 if (deck.data && deck.data.attributes && deck.data.attributes.style) {
@@ -94,7 +94,7 @@ export class AppDashboard {
                     style = undefined;
                 }
 
-                const background: any = await ParseBackgroundUtils.convertBackground(deck.data.background);
+                const background: any = await ParseBackgroundUtils.convertBackground(deck.data.background, false);
 
                 resolve({
                     deck: deck,

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -230,7 +230,7 @@ export class AppEditor {
                     this.style = undefined;
                 }
 
-                this.background = await ParseBackgroundUtils.convertBackground(deck.data.background);
+                this.background = await ParseBackgroundUtils.convertBackground(deck.data.background, true);
 
                 resolve();
             });

studio/src/app/utils/editor/parse-background.utils.tsx

@@ -4,7 +4,7 @@ import {ParseElementsUtils} from './parse-elements.utils';
 
 export class ParseBackgroundUtils {
 
-    static convertBackground(background: string): Promise<any> {
+    static convertBackground(background: string, contentEditable: boolean): Promise<any> {
         return new Promise<any>(async (resolve) => {
             if (!background || background === undefined || background === '') {
                 resolve(undefined);
@@ -15,7 +15,7 @@ export class ParseBackgroundUtils {
             div.setAttribute('slot', 'background');
             div.innerHTML = background;
 
-            const content = await ParseElementsUtils.parseElements(div, true);
+            const content = await ParseElementsUtils.parseElements(div, true, contentEditable);
 
             resolve(<div slot="background">
                 {content}

studio/src/app/utils/editor/parse-elements.utils.tsx

@@ -5,7 +5,7 @@ import {SlotType} from './create-slides.utils';
 
 export class ParseElementsUtils {
 
-    static parseElements(element: HTMLElement, root: boolean): Promise<any> {
+    static parseElements(element: HTMLElement, root: boolean, contentEditable: boolean): Promise<any> {
         return new Promise<any>(async (resolve) => {
             if (!element) {
                 resolve(undefined);
@@ -23,18 +23,18 @@ export class ParseElementsUtils {
                 const elements: HTMLElement[] = Array.prototype.slice.call(element.childNodes);
 
                 for (const elem of elements) {
-                    const result = await this.parseElements(elem, false);
+                    const result = await this.parseElements(elem, false, contentEditable);
                     results.push(result);
                 }
 
-                resolve(root ? results : await this.parseElement(element, results));
+                resolve(root ? results : await this.parseElement(element, results, contentEditable));
             } else {
-                resolve(await this.parseElement(element, element.textContent));
+                resolve(await this.parseElement(element, element.textContent, contentEditable));
             }
         });
     }
 
-    private static parseElement(element: HTMLElement, content: any): Promise<any> {
+    private static parseElement(element: HTMLElement, content: any, contentEditable: boolean): Promise<any> {
         return new Promise<any>(async (resolve) => {
             const Elem: string = element.nodeName;
 
@@ -43,7 +43,7 @@ export class ParseElementsUtils {
                 attributes.style = await ParseStyleUtils.convertStyle(attributes.style);
             }
 
-            if (this.isElementContentEditable(element, attributes)) {
+            if (contentEditable && this.isElementContentEditable(element, attributes)) {
                 attributes['contenteditable'] = true;
             }
 

studio/src/app/utils/editor/parse-slides.utils.tsx

@@ -6,22 +6,22 @@ import {Slide, SlideTemplate} from '../../models/data/slide';
 
 export class ParseSlidesUtils {
 
-    static parseSlide(slide: Slide): Promise<any> {
+    static parseSlide(slide: Slide, contentEditable: boolean): Promise<any> {
         return new Promise<any>(async (resolve) => {
             if (!document || !slide || !slide.data || !slide.data.template) {
                 resolve(null);
                 return;
             }
 
             if (SlideTemplate[slide.data.template.toUpperCase()]) {
-                resolve(await this.parseSlideElement(slide, `deckgo-slide-${SlideTemplate[slide.data.template.toUpperCase()].toLowerCase()}`));
+                resolve(await this.parseSlideElement(slide, `deckgo-slide-${SlideTemplate[slide.data.template.toUpperCase()].toLowerCase()}`, contentEditable));
             } else {
                 resolve(null);
             }
         });
     }
 
-    private static parseSlideElement(slide: Slide, slideTag: string): Promise<any> {
+    private static parseSlideElement(slide: Slide, slideTag: string, contentEditable: boolean): Promise<any> {
         return new Promise<any>(async (resolve) => {
             if (!document) {
                 resolve();
@@ -32,7 +32,7 @@ export class ParseSlidesUtils {
             const div = document.createElement('div');
             div.innerHTML = slide.data.content;
 
-            const content = await ParseElementsUtils.parseElements(div, true);
+            const content = await ParseElementsUtils.parseElements(div, true, contentEditable);
 
             const style = slide.data.attributes ? await ParseStyleUtils.convertStyle(slide.data.attributes.style) : undefined;