feat: add new slide as next slide not last (#1297)

Author: peterpeterparker

studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx

@@ -6,6 +6,7 @@ import {debounce} from '@deckdeckgo/utils';
 
 import {isSlide} from '../../../../../../../utils/deck/src';
 import {deckSelector, slideTo} from '../../../../utils/editor/deck.utils';
+import {SlideUtils} from '../../../../utils/editor/slide.utils';
 
 @Component({
   tag: 'app-slides-aside',
@@ -76,21 +77,17 @@ export class AppSlidesAside {
   }
 
   private async updateSlide(updatedSlide: HTMLElement) {
-    const slideIndex: number = this.slideIndex(updatedSlide);
+    const slideIndex: number = SlideUtils.slideIndex(updatedSlide);
 
     this.slides = [...this.slides.map((slide: HTMLElement, index: number) => (slideIndex === index ? (updatedSlide.cloneNode(true) as HTMLElement) : slide))];
   }
 
   private async deleteSlide(deletedSlide: HTMLElement) {
-    const slideIndex: number = this.slideIndex(deletedSlide);
+    const slideIndex: number = SlideUtils.slideIndex(deletedSlide);
 
     this.slides = [...this.slides.filter((_slide: HTMLElement, index: number) => slideIndex !== index)];
   }
 
-  private slideIndex(slide: HTMLElement): number {
-    return Array.from(slide.parentNode.children).indexOf(slide);
-  }
-
   private async updateAllSlides() {
     const slides: NodeListOf<HTMLElement> = document.querySelectorAll(`${deckSelector} > *`);
 

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

@@ -116,11 +116,8 @@ export class DeckEventsHandler {
     }
   };
 
-  private onSlidesDidLoad = async ($event: CustomEvent) => {
-    if ($event) {
-      await this.initSlideSize();
-      await this.slideToLastSlide();
-    }
+  private onSlidesDidLoad = async () => {
+    await this.initSlideSize();
   };
 
   private onDeckChange = async ($event: CustomEvent) => {
@@ -227,7 +224,7 @@ export class DeckEventsHandler {
 
         // Because of the offline mode, is kind of handy to handle the list on the client side too.
         // But maybe in the future it is something which could be moved to the cloud.
-        await this.updateDeckSlideList(deckStore.state.deck, persistedSlide);
+        await this.updateDeckSlideList(deckStore.state.deck, persistedSlide, slide);
 
         busyStore.state.deckBusy = false;
 
@@ -299,7 +296,7 @@ export class DeckEventsHandler {
     });
   }
 
-  private updateDeckSlideList(deck: Deck, slide: Slide): Promise<void> {
+  private updateDeckSlideList(deck: Deck, slide: Slide, slideElement: HTMLElement): Promise<void> {
     return new Promise<void>(async (resolve, reject) => {
       try {
         if (!deck && !deck.data) {
@@ -316,7 +313,8 @@ export class DeckEventsHandler {
           deck.data.slides = [];
         }
 
-        deck.data.slides.push(slide.id);
+        const slideIndex: number = SlideUtils.slideIndex(slideElement);
+        deck.data.slides = [...deck.data.slides.slice(0, slideIndex), slide.id, ...deck.data.slides.slice(slideIndex)];
 
         const updatedDeck: Deck = await this.deckService.update(deck);
         deckStore.state.deck = {...updatedDeck};
@@ -891,30 +889,6 @@ export class DeckEventsHandler {
     };
   }
 
-  private async slideToLastSlide(): Promise<void> {
-    const deck: HTMLDeckgoDeckElement = this.mainRef.querySelector('deckgo-deck');
-
-    if (!deck || !deck.children || deck.children.length <= 0) {
-      return;
-    }
-
-    const slides: Element[] = Array.from(deck.children).filter((slide: Element) => {
-      return isSlide(slide as HTMLElement);
-    });
-
-    if (!slides || slides.length <= 0) {
-      return;
-    }
-
-    const lastSlide: Element = slides[slides.length - 1];
-
-    if (!lastSlide || lastSlide.getAttribute('slide_id')) {
-      return;
-    }
-
-    await deck.slideTo(slides.length - 1);
-  }
-
   async initSlideSize() {
     const deck: HTMLDeckgoDeckElement = this.mainRef.querySelector('deckgo-deck');
     await deck?.initSlideSize();

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

@@ -332,9 +332,12 @@ export class AppEditor {
   }
 
   private async concatSlide(extraSlide: JSX.IntrinsicElements) {
-    this.slides = [...this.slides, extraSlide];
+    const slideIndex: number = this.activeIndex + 1;
+    this.slides = [...this.slides.slice(0, slideIndex), extraSlide, ...this.slides.slice(slideIndex)];
 
     await ParseDeckSlotsUtils.stickLastChildren(this.mainRef);
+
+    await this.deckRef?.slideTo(slideIndex);
   }
 
   private async replaceSlide(slide: JSX.IntrinsicElements) {

studio/src/app/utils/editor/slide.utils.ts

@@ -8,4 +8,8 @@ export class SlideUtils {
   static slideScope(element: HTMLElement | undefined): SlideScope {
     return element?.hasAttribute('scope') ? <SlideScope>element.getAttribute('scope') : SlideScope.DEFAULT;
   }
+
+  static slideIndex(slide: HTMLElement): number {
+    return Array.from(slide.parentNode.children).indexOf(slide);
+  }
 }