Add `delegate` property to Component

src/commands/view/ComponentDelete.ts

@@ -15,7 +15,8 @@ const command: CommandObject<{ component?: Component }> = {
           component,
         });
       }
-      component.remove();
+      const cmp = component.delegate?.remove?.(component) || component;
+      cmp.remove();
     });
 
     ed.select(toSelect);

src/commands/view/DeleteComponent.ts

@@ -1,74 +0,0 @@
-import { bindAll, extend } from 'underscore';
-import { $ } from '../../common';
-import Component from '../../dom_components/model/Component';
-import { CommandObject } from './CommandAbstract';
-import SelectComponent from './SelectComponent';
-
-export default extend({}, SelectComponent, {
-  init() {
-    bindAll(this, 'startDelete', 'stopDelete', 'onDelete');
-    this.hoverClass = this.pfx + 'hover-delete';
-    this.badgeClass = this.pfx + 'badge-red';
-  },
-
-  enable() {
-    var that = this;
-    this.$el.find('*').mouseover(this.startDelete).mouseout(this.stopDelete).click(this.onDelete);
-  },
-
-  /**
-   * Start command
-   * @param {Object}  e
-   * @private
-   */
-  startDelete(e: any) {
-    e.stopPropagation();
-    var $this = $(e.target);
-
-    // Show badge if possible
-    if ($this.data('model').get('removable')) {
-      $this.addClass(this.hoverClass);
-      this.attachBadge($this.get(0));
-    }
-  },
-
-  /**
-   * Stop command
-   * @param {Object}  e
-   * @private
-   */
-  stopDelete(e: any) {
-    e.stopPropagation();
-    var $this = $(e.target);
-    $this.removeClass(this.hoverClass);
-
-    // Hide badge if possible
-    if (this.badge) this.badge.css({ left: -1000, top: -1000 });
-  },
-
-  /**
-   * Delete command
-   * @param {Object}  e
-   * @private
-   */
-  onDelete(e: any) {
-    e.stopPropagation();
-    var $this = $(e.target);
-
-    // Do nothing in case can't remove
-    if (!$this.data('model').get('removable')) return;
-
-    $this.data('model').destroy();
-    this.removeBadge();
-    this.clean();
-  },
-
-  /**
-   * Updates badge label
-   * @param   {Object}  model
-   * @private
-   * */
-  updateBadgeLabel(model: Component) {
-    this.badge.html('Remove ' + model.getName());
-  },
-} as CommandObject<{}, { [k: string]: any }>);

src/common/index.ts

@@ -19,6 +19,8 @@ export type ObjectAny = Record<string, any>;
 
 export type ObjectStrings = Record<string, string>;
 
+export type Nullable = undefined | null | false;
+
 // https://github.com/microsoft/TypeScript/issues/29729#issuecomment-1483854699
 export type LiteralUnion<T, U> = T | (U & NOOP);
 

src/dom_components/model/Component.ts

@@ -154,6 +154,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       propagate: '',
       dmode: '',
       toolbar: null,
+      delegate: null,
       [keySymbol]: 0,
       [keySymbols]: 0,
       [keySymbolOvrd]: 0,
@@ -182,6 +183,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return this.get('resizable')!;
   }
 
+  get delegate() {
+    return this.get('delegate');
+  }
+
   /**
    * Hook method, called once the model is created
    */

src/dom_components/model/types.ts

@@ -1,4 +1,5 @@
 import Frame from '../../canvas/model/Frame';
+import { Nullable } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import Selectors from '../../selector_manager/model/Selectors';
 import { TraitProperties } from '../../trait_manager/model/Trait';
@@ -13,6 +14,10 @@ export type DragMode = 'translate' | 'absolute' | '';
 
 export type DraggableDroppableFn = (source: Component, target: Component, index?: number) => boolean | void;
 
+export interface ComponentDelegateProps {
+  remove?: (cmp: Component) => Component | Nullable;
+}
+
 export interface ComponentProperties {
   /**
    * Component type, eg. `text`, `image`, `video`, etc.
@@ -167,6 +172,11 @@ export interface ComponentProperties {
    * By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`).
    */
   toolbar?: ToolbarButtonProps[];
+
+  /**
+   * Delegate actions to other components.
+   */
+  delegate?: ComponentDelegateProps;
   ///**
   // * Children components. Default: `null`
   // */