pull upstream into lexoyo

src/canvas/types.ts

@@ -100,6 +100,36 @@ export enum CanvasEvents {
    * });
    */
   pointer = 'canvas:pointer',
+
+  /**
+   * @event `canvas:frame:load` Frame loaded in canvas.
+   * The event is triggered right after iframe's `onload`.
+   * @example
+   * editor.on('canvas:frame:load', ({ window }) => {
+   *  console.log('Frame loaded', window);
+   * });
+   */
+  frameLoad = 'canvas:frame:load',
+
+  /**
+   * @event `canvas:frame:load:head` Frame head loaded in canvas.
+   * The event is triggered right after iframe's finished to load the head elemenets (eg. scripts)
+   * @example
+   * editor.on('canvas:frame:load:head', ({ window }) => {
+   *  console.log('Frame head loaded', window);
+   * });
+   */
+  frameLoadHead = 'canvas:frame:load:head',
+
+  /**
+   * @event `canvas:frame:load:body` Frame body loaded in canvas.
+   * The event is triggered when the body is rendered with components.
+   * @example
+   * editor.on('canvas:frame:load:body', ({ window }) => {
+   *  console.log('Frame completed the body render', window);
+   * });
+   */
+  frameLoadBody = 'canvas:frame:load:body',
 }
 /**{END_EVENTS}*/
 

src/canvas/view/FrameView.ts

@@ -1,6 +1,6 @@
 import { bindAll, debounce, isString, isUndefined } from 'underscore';
 import { ModuleView } from '../../abstract';
-import { BoxRect } from '../../common';
+import { BoxRect, ObjectAny } from '../../common';
 import CssRulesView from '../../css_composer/view/CssRulesView';
 import ComponentWrapperView from '../../dom_components/view/ComponentWrapperView';
 import Droppable from '../../utils/Droppable';
@@ -18,6 +18,7 @@ import { hasDnd, setViewEl } from '../../utils/mixins';
 import Canvas from '../model/Canvas';
 import Frame from '../model/Frame';
 import FrameWrapView from './FrameWrapView';
+import CanvasEvents from '../types';
 
 export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
   /** @ts-ignore */
@@ -290,14 +291,14 @@ export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
     const { $el, ppfx, em } = this;
     $el.attr({ class: `${ppfx}frame` });
     this.renderScripts();
-    em.trigger('frame:render', this);
+    em.trigger('frame:render', this); // deprecated
     return this;
   }
 
   renderScripts() {
     const { el, model, em } = this;
     const evLoad = 'frame:load';
-    const evOpts = { el, model, view: this };
+    const evOpts: ObjectAny = { el, model, view: this };
     const canvas = this.getCanvasModel();
     const appendScript = (scripts: any[]) => {
       if (scripts.length > 0) {
@@ -306,11 +307,18 @@ export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
           type: 'text/javascript',
           ...(isString(src) ? { src } : src),
         });
-        scriptEl.onerror = scriptEl.onload = appendScript.bind(null, scripts);
         el.contentDocument?.head.appendChild(scriptEl);
+
+        if (scriptEl.hasAttribute('nomodule') && 'noModule' in HTMLScriptElement.prototype) {
+          appendScript(scripts);
+        } else {
+          scriptEl.onerror = scriptEl.onload = appendScript.bind(null, scripts);
+        }
       } else {
+        em?.trigger(CanvasEvents.frameLoadHead, evOpts);
         this.renderBody();
-        em && em.trigger(evLoad, evOpts);
+        em?.trigger(CanvasEvents.frameLoadBody, evOpts);
+        em?.trigger(evLoad, evOpts); // deprecated
       }
     };
 
@@ -322,7 +330,9 @@ export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
         doc.write(frameContent);
         doc.close();
       }
-      em && em.trigger(`${evLoad}:before`, evOpts);
+      evOpts.window = this.getWindow();
+      em?.trigger(`${evLoad}:before`, evOpts); // deprecated
+      em?.trigger(CanvasEvents.frameLoad, evOpts);
       appendScript([...canvas.get('scripts')]);
     };
   }

src/commands/index.ts

@@ -46,7 +46,7 @@ import { isFunction, includes } from 'underscore';
 import CommandAbstract, { Command, CommandOptions, CommandObject, CommandFunction } from './view/CommandAbstract';
 import defaults, { CommandsConfig } from './config/config';
 import { Module } from '../abstract';
-import { eventDrag } from '../dom_components/model/Component';
+import Component, { eventDrag } from '../dom_components/model/Component';
 import Editor from '../editor/model/Editor';
 import { ObjectAny } from '../common';
 
@@ -79,6 +79,27 @@ const commandsDef = [
   ['component-drag', 'ComponentDrag'],
 ];
 
+const defComOptions = { preserveSelected: 1 };
+
+export const getOnComponentDragStart = (em: Editor) => (data: any) => em.trigger(`${eventDrag}:start`, data);
+
+export const getOnComponentDrag = (em: Editor) => (data: any) => em.trigger(eventDrag, data);
+
+export const getOnComponentDragEnd =
+  (em: Editor, targets: Component[], opts: { altMode?: boolean } = {}) =>
+  (a: any, b: any, data: any) => {
+    targets.forEach(trg => trg.set('status', trg.get('selectable') ? 'selected' : ''));
+    em.setSelected(targets);
+    targets[0].emitUpdate();
+    em.trigger(`${eventDrag}:end`, data);
+
+    // Defer selectComponent in order to prevent canvas "freeze" #2692
+    setTimeout(() => em.runDefault(defComOptions));
+
+    // Dirty patch to prevent parent selection on drop
+    (opts.altMode || data.cancelled) && em.set('_cmpDrag', 1);
+  };
+
 export default class CommandsModule extends Module<CommandsConfig & { pStylePrefix?: string }> {
   CommandAbstract = CommandAbstract;
   defaultCommands: Record<string, Command> = {};
@@ -118,62 +139,47 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
     };
 
     defaultCommands['tlb-move'] = {
-      run(ed, sender, opts = {}) {
+      run(ed, s, opts = {}) {
         let dragger;
         const em = ed.getModel();
-        const event = opts && opts.event;
-        const { target } = opts;
-        const sel = target || ed.getSelected();
-        const selAll = target ? [target] : [...ed.getSelectedAll()];
-        const nativeDrag = event && event.type == 'dragstart';
-        const defComOptions = { preserveSelected: 1 };
+        const { event } = opts;
+        const trg = opts.target as Component | undefined;
+        const trgs = trg ? [trg] : [...ed.getSelectedAll()];
+        const targets = trgs.map(trg => trg.delegate?.move?.(trg) || trg).filter(Boolean);
+        const target = targets[0] as Component | undefined;
+        const nativeDrag = event?.type === 'dragstart';
         const modes = ['absolute', 'translate'];
 
-        if (!sel || !sel.get('draggable')) {
+        if (!target?.get('draggable')) {
           return em.logWarning('The element is not draggable');
         }
 
-        const mode = sel.get('dmode') || em.get('dmode');
+        const mode = target.get('dmode') || em.get('dmode');
         const hideTlb = () => em.stopDefault(defComOptions);
         const altMode = includes(modes, mode);
-        selAll.forEach(sel => sel.trigger('disable'));
+        targets.forEach(trg => trg.trigger('disable'));
 
         // Without setTimeout the ghost image disappears
         nativeDrag ? setTimeout(hideTlb, 0) : hideTlb();
 
-        const onStart = (data: any) => {
-          em.trigger(`${eventDrag}:start`, data);
-        };
-        const onDrag = (data: any) => {
-          em.trigger(eventDrag, data);
-        };
-        const onEnd = (e: any, opts: any, data: any) => {
-          selAll.forEach(sel => sel.set('status', 'selected'));
-          ed.select(selAll);
-          sel.emitUpdate();
-          em.trigger(`${eventDrag}:end`, data);
-
-          // Defer selectComponent in order to prevent canvas "freeze" #2692
-          setTimeout(() => em.runDefault(defComOptions));
-
-          // Dirty patch to prevent parent selection on drop
-          (altMode || data.cancelled) && em.set('_cmpDrag', 1);
-        };
+        const onStart = getOnComponentDragStart(em);
+        const onDrag = getOnComponentDrag(em);
+        const onEnd = getOnComponentDragEnd(em, targets, { altMode });
 
         if (altMode) {
           // TODO move grabbing func in editor/canvas from the Sorter
           dragger = ed.runCommand('core:component-drag', {
             guidesInfo: 1,
             mode,
-            target: sel,
+            target,
             onStart,
             onDrag,
             onEnd,
             event,
           });
         } else {
           if (nativeDrag) {
-            event.dataTransfer.setDragImage(sel.view.el, 0, 0);
+            event.dataTransfer.setDragImage(target.view?.el, 0, 0);
             //sel.set('status', 'freezed');
           }
 
@@ -182,10 +188,10 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
           cmdMove.onDrag = onDrag;
           cmdMove.onEndMoveFromModel = onEnd;
           // @ts-ignore
-          cmdMove.initSorterFromModels(selAll);
+          cmdMove.initSorterFromModels(targets);
         }
 
-        selAll.forEach(sel => sel.set('status', 'freezed-selected'));
+        targets.filter(sel => sel.get('selectable')).forEach(sel => sel.set('status', 'freezed-selected'));
       },
     };
 

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/CopyComponent.ts

@@ -3,7 +3,7 @@ import { CommandObject } from './CommandAbstract';
 export default {
   run(ed) {
     const em = ed.getModel();
-    const models = [...ed.getSelectedAll()];
+    const models = [...ed.getSelectedAll()].map(md => md.delegate?.copy?.(md) || md).filter(Boolean);
     models.length && em.set('clipboard', models);
   },
 } as CommandObject;

src/commands/view/PasteComponent.ts

@@ -6,11 +6,12 @@ import Editor from '../../editor';
 export default {
   run(ed, s, opts = {}) {
     const em = ed.getModel();
-    const clp: Component[] = em.get('clipboard');
+    const clp: Component[] | null = em.get('clipboard');
     const lastSelected = ed.getSelected();
 
-    if (clp && lastSelected) {
-      ed.getSelectedAll().forEach(selected => {
+    if (clp?.length && lastSelected) {
+      ed.getSelectedAll().forEach(sel => {
+        const selected = sel.delegate?.copy?.(sel) || sel;
         const { collection } = selected;
         let added;
         if (collection) {

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/config/config.ts

@@ -53,6 +53,13 @@ export interface DomComponentsConfig {
    * https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#void-elements
    */
   voidElements?: string[];
+
+  /**
+   * Experimental: Use the frame document for DOM element creation.
+   * This option might be useful when elements require the local document context to
+   * work properly (eg. Web Components).
+   */
+  useFrameDoc?: boolean;
 }
 
 export default {
@@ -61,6 +68,7 @@ export default {
   draggableComponents: true,
   disableTextInnerChilds: false,
   processor: undefined,
+  useFrameDoc: false,
   voidElements: [
     'area',
     'base',