fix: delete slide and DOM JSX update

CHANGELOG.md

@@ -8,7 +8,7 @@
 
 ### Web Components
 
-- core: v8.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
+- core: v8.4.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
 - highlight-code: v3.3.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
 
 ### Others

studio/package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@deckdeckgo/charts": "^2.1.0",
     "@deckdeckgo/color": "^4.1.0",
-    "@deckdeckgo/core": "^8.3.0",
+    "@deckdeckgo/core": "^8.4.0",
     "@deckdeckgo/deck-utils": "^4.1.0",
     "@deckdeckgo/demo": "^2.1.0",
     "@deckdeckgo/drag-resize-rotate": "^2.2.0",

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

@@ -544,8 +544,6 @@ export class DeckEventsHandler {
           }
         }
 
-        await this.deleteSlideElement();
-
         busyStore.state.deckBusy = false;
 
         resolve();
@@ -557,11 +555,6 @@ export class DeckEventsHandler {
     });
   }
 
-  private async deleteSlideElement() {
-    const deck: HTMLDeckgoDeckElement = this.mainRef.querySelector('deckgo-deck');
-    await deck?.deleteActiveSlide();
-  }
-
   private async getSlideAttributes(slide: HTMLElement, cleanFields: boolean): Promise<SlideAttributes> {
     if (SlideUtils.slideScope(slide) !== SlideScope.DEFAULT) {
       return this.getSlideUserAttributes(slide);

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

@@ -30,7 +30,9 @@ import {ChartEventsHandler} from '../../../handlers/core/events/chart/chart-even
 import {SlideHelper} from '../../../helpers/editor/slide.helper';
 
 import {SlotType} from '../../../types/editor/slot-type';
+
 import {signIn as navigateSignIn} from '../../../utils/core/signin.utils';
+import {SlideUtils} from '../../../utils/editor/slide.utils';
 
 import {AuthService} from '../../../services/auth/auth.service';
 import {AnonymousService} from '../../../services/editor/anonymous/anonymous.service';
@@ -380,6 +382,16 @@ export class AppEditor {
     await this.replaceSlide($event.detail);
   }
 
+  @Listen('slideDelete', {target: 'document'})
+  async deleteSlide({detail: deletedSlide}: CustomEvent<HTMLElement>) {
+    const slideIndex: number = SlideUtils.slideIndex(deletedSlide);
+
+    this.slides = [...this.slides.filter((_slide: JSX.IntrinsicElements, index: number) => slideIndex !== index)];
+
+    // Update deck length and slide to an active slide
+    await this.deckRef.deleteActiveSlide(false);
+  }
+
   @Listen('addSlide', {target: 'document'})
   async addSlide($event: CustomEvent<JSX.IntrinsicElements>) {
     if (!$event) {

webcomponents/core/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 8.4.0 (2021-08-19)
+
+### Features
+
+- `deleteActiveSlide` make removal of DOM child optional
+
 # 8.3.0 (2021-08-19)
 
 ### Features

webcomponents/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/core",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "description": "Add a presentation to your web application using HTML and Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

webcomponents/core/src/components.d.ts

@@ -13,7 +13,7 @@ export namespace Components {
         "autoSlideInterval": number;
         "blockSlide": (block: boolean) => Promise<void>;
         "cloneBackground": boolean;
-        "deleteActiveSlide": () => Promise<void>;
+        "deleteActiveSlide": (removeChild?: boolean) => Promise<void>;
         "direction": 'horizontal' | 'vertical' | 'papyrus';
         "directionMobile": 'horizontal' | 'vertical' | 'papyrus';
         "doPrint": () => Promise<void>;

webcomponents/core/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

@@ -957,19 +957,16 @@ export class DeckdeckgoDeck {
   }
 
   @Method()
-  async deleteActiveSlide() {
+  async deleteActiveSlide(removeChild: boolean = true) {
     if (this.activeIndex > this.length || this.activeIndex < 0) {
       return;
     }
 
-    const slide: HTMLElement = this.el.querySelector('.deckgo-slide-container:nth-child(' + (this.activeIndex + 1) + ')');
-
-    if (!slide) {
-      return;
+    if (removeChild) {
+      const slide: HTMLElement | null = this.el.querySelector('.deckgo-slide-container:nth-child(' + (this.activeIndex + 1) + ')');
+      slide?.parentElement.removeChild(slide);
     }
 
-    slide.parentElement.removeChild(slide);
-
     this.activeIndex = this.activeIndex > 0 ? this.activeIndex - 1 : 0;
     this.length = this.length > 0 ? this.length - 1 : 0;