feat: trigger an event linkCreated when a link is, well, created by the inline editor

Author: peterpeterparker

docs/docs/components/app-components-inline-editor/app-components-inline-editor.md

@@ -127,6 +127,7 @@ The event `input` will be automatically triggered when the content will be modif
 | Event          | Description | Type                       |
 | -------------- | ----------- | -------------------------- |
 | `imgDidChange` | Triggered when an image is manipulated. Note: the event won't provide directly the image but rather its container element. | `CustomEvent<HTMLElement>` |
+| `linkCreated` | Triggered when a link is created by the user using this component |
 | `stickyToolbarActivated` | Triggered when the sticky toolbar would be activated or not. Useful for example if you want to catch the event to hide things in your footer, as the sticky toolbar is display above it. | `CustomEvent<boolean>` | 
 
 ### Methods

docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx

@@ -337,6 +337,11 @@ export class AppComponentsInlineEditor {
 <td><code>CustomEvent&lt;HTMLElement&gt;</code></td>
 </tr>
 <tr>
+<td><code>linkCreated</code></td>
+<td>Triggered when a link is created by the user using this component</td>
+<td></td>
+</tr>
+<tr>
 <td><code>stickyToolbarActivated</code></td>
 <td>Triggered when the sticky toolbar would be activated or not. Useful for example if you want to catch the event to hide things in your footer, as the sticky toolbar is display above it.</td>
 <td><code>CustomEvent&lt;boolean&gt;</code></td>

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

@@ -61,6 +61,7 @@ export class DeckEventsHandler {
             this.el.addEventListener('slideDelete', this.onSlideDelete, false);
             this.el.addEventListener('codeDidChange', this.onCustomEventChange, false);
             this.el.addEventListener('imgDidChange', this.onCustomEventChange, false);
+            this.el.addEventListener('linkCreated', this.onCustomEventChange, false);
 
             this.updateSlideSubscription = this.updateSlideSubject.pipe(debounceTime(500)).subscribe(async (element: HTMLElement) => {
                 await this.updateSlide(element);
@@ -83,6 +84,7 @@ export class DeckEventsHandler {
         this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
         this.el.removeEventListener('codeDidChange', this.onCustomEventChange, true);
         this.el.removeEventListener('imgDidChange', this.onCustomEventChange, true);
+        this.el.removeEventListener('linkCreated', this.onCustomEventChange, true);
 
         if (this.updateSlideSubscription) {
             this.updateSlideSubscription.unsubscribe();

webcomponents/inline-editor/CHANGELOG.md

@@ -1,3 +1,8 @@
+<a name="1.0.0-alpha.13"></a>
+# 1.0.0-alpha.13 (Not released yet)
+
+* trigger an event `linkCreated` when a link is created
+
 <a name="1.0.0-alpha.12"></a>
 # 1.0.0-alpha.12 (2019-08-06)
 

webcomponents/inline-editor/src/components.d.ts

@@ -46,6 +46,7 @@ declare namespace LocalJSX {
     'imgPropertyWidth'?: string;
     'mobile'?: boolean;
     'onImgDidChange'?: (event: CustomEvent<HTMLElement>) => void;
+    'onLinkCreated'?: (event: CustomEvent<HTMLElement>) => void;
     'onStickyToolbarActivated'?: (event: CustomEvent<boolean>) => void;
     'stickyDesktop'?: boolean;
     'stickyMobile'?: boolean;

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

@@ -102,6 +102,8 @@ export class DeckdeckgoInlineEditor {
 
   @Event() private imgDidChange: EventEmitter<HTMLElement>;
 
+  @Event() private linkCreated: EventEmitter<HTMLElement>;
+
   @Prop()
   imgAnchor: string = 'img';
 
@@ -806,6 +808,8 @@ export class DeckdeckgoInlineEditor {
         target.parentElement.replaceChild(a, target);
       }
 
+      this.linkCreated.emit(container as HTMLElement);
+
       this.toolbarActions = ToolbarActions.SELECTION;
 
       resolve();