fix: reorder and cache fixed with slide unique key identificator

Author: peterpeterparker

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

@@ -229,6 +229,10 @@ export class DeckEventsHandler {
             if (persistedSlide && persistedSlide.id) {
                 slide.setAttribute('slide_id', persistedSlide.id);
 
+                // Add a key to uniquely identify the slide. Mandatory notably for the reorder function
+                // See https://stenciljs.com/docs/templating-jsx?#loops
+                slide.setAttribute('key', persistedSlide.id);
+
                 this.busyService.slideEditable(slide);
             }
 

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

@@ -54,7 +54,7 @@ export class ParseSlidesUtils {
             const SlideElement: string = slideTag;
 
             // @ts-ignore
-            const result: any = <SlideElement slide_id={slide.id} style={style} src={src} custom-background={customBackground} img-src={imgSrc} img-alt={imgAlt}>
+            const result: any = <SlideElement key={slide.id} slide_id={slide.id} style={style} src={src} custom-background={customBackground} img-src={imgSrc} img-alt={imgAlt}>
                 {content}
             </SlideElement>;