feat: delete image in inline editor

Author: peterpeterparker

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

@@ -710,7 +710,7 @@ export class AppEditorToolbar {
     private renderDelete() {
         return <a onClick={() => this.deleteElement()} title="Delete"
                   class={this.deckBusy && this.deckOrSlide ? "delete disabled" : "delete"}>
-            <ion-icon name="trash"></ion-icon>
+            <ion-icon ios="md-trash" md="md-trash"></ion-icon>
         </a>
     }
 

webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss

@@ -214,7 +214,7 @@ div.deckgo-tools {
       }
     }
 
-    &.ordered-list, &.unordered-list, &.link, &.image, &.image-align {
+    &.ordered-list, &.unordered-list, &.link, &.image, &.image-align, &.image-delete {
       > div {
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
@@ -291,6 +291,16 @@ div.deckgo-tools {
         }
       }
     }
+
+    &.image-delete {
+      > div {
+        -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M128 405.429C128 428.846 147.198 448 170.667 448h170.667C364.802 448 384 428.846 384 405.429V160H128v245.429zM416 96h-80l-26.785-32H202.786L176 96H96v32h320V96z"/%3E%3C/svg%3E');
+        mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M128 405.429C128 428.846 147.198 448 170.667 448h170.667C364.802 448 384 428.846 384 405.429V160H128v245.429zM416 96h-80l-26.785-32H202.786L176 96H96v32h320V96z"/%3E%3C/svg%3E');
+
+        width: 20px;
+        height: 20px;
+      }
+    }
   }
 
   &.deckgo-tools-mobile {

webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx

@@ -840,9 +840,6 @@ export class DeckdeckgoInlineEditor {
   private setImageWith = async (size: ImageSize) => {
     const anchorImg: HTMLImageElement = this.anchorEvent.target as HTMLImageElement;
     anchorImg.style.setProperty(this.imgPropertyWidth, size.toString());
-
-    const container: HTMLElement = await this.findContainer(anchorImg);
-    this.imgDidChange.emit(container);
   };
 
   private setImageAlignment = (align: ImageAlign) => {
@@ -878,6 +875,40 @@ export class DeckdeckgoInlineEditor {
     });
   }
 
+  private deleteImage(e: UIEvent): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      const isAnchorImg: boolean = await this.isAnchorImage();
+      if (!isAnchorImg) {
+        resolve();
+        return;
+      }
+
+      e.stopPropagation();
+
+      const anchorImg: HTMLImageElement = this.anchorEvent.target as HTMLImageElement;
+
+      if (!anchorImg || !anchorImg.parentElement) {
+        resolve();
+        return;
+      }
+
+      const container: HTMLElement = await this.findContainer(anchorImg);
+
+      if (!container) {
+        resolve();
+        return;
+      }
+
+      anchorImg.parentElement.removeChild(anchorImg);
+
+      this.imgDidChange.emit(container);
+
+      await this.reset(true);
+
+      resolve();
+    });
+  }
+
   render() {
     let classNames: string = this.toolsActivated ? (this.mobile ? 'deckgo-tools deckgo-tools-activated deckgo-tools-mobile' : 'deckgo-tools deckgo-tools-activated') : (this.mobile ? 'deckgo-tools deckgo-tools-mobile' : 'deckgo-tools');
 
@@ -946,10 +977,7 @@ export class DeckdeckgoInlineEditor {
       <div class="separator"></div>,
 
       <button
-        disabled={this.disabledTitle}
-        onClick={() => {
-          this.toggleLink()
-        }} class={this.link ? "link active" : "link"}>
+        disabled={this.disabledTitle} onClick={() => this.toggleLink()} class={this.link ? "link active" : "link"}>
         <div></div>
       </button>
     ];
@@ -989,7 +1017,16 @@ export class DeckdeckgoInlineEditor {
         onClick={(e: UIEvent) => this.styleImage(e, this.setImageAlignment, ImageAlign.START)}
         class={this.imageAlign === ImageAlign.START ? "image-align start active" : "image-align start"}>
         <div></div>
+      </button>,
+
+      <div class="separator"></div>,
+
+      <button
+        onClick={(e: UIEvent) => this.deleteImage(e)} class="image-delete">
+        <div></div>
       </button>
+
+
     ];
   }
 }

webcomponents/inline-editor/src/index.html

@@ -20,9 +20,7 @@ <h3 contenteditable>Credits</h3>
 
   <p contenteditable>The following solution was inspired by the one developed in the Ionic core project. One of the entry point for me was discovering the method setupConfig in their source code. Therefore kudos to the awesome <a href="https://ionicframework.com">Ionic</a> team ❤️</p>
 
-  <p contenteditable style="width: 400px;"><img style="max-width: 100%;" src="https://pixabay.com/get/ea34b50f2cfd033ed1584d05fb1d4794e070e2d71eb80c4090f5c679a2edb4b0d8_1280.jpg"/></p>
-
-  <p><deckgo-lazy-img img-src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjcwODc4fQ" class="hydrated"></deckgo-lazy-img></p>
+  <p contenteditable><img src="https://deckdeckgo.com/assets/img/deckdeckgo.png"/></p>
 
   <deckgo-inline-editor sticky-desktop="false" sticky-mobile="true" containers="h1,h2,h3,h4,h5,h6,p"></deckgo-inline-editor>