Merge branch 'dev' of https://github.com/artf/grapesjs into dev

src/commands/view/PasteComponent.ts

@@ -1,6 +1,7 @@
 import { isArray, contains } from 'underscore';
 import Component from '../../dom_components/model/Component';
 import { CommandObject } from './CommandAbstract';
+import Editor from '../../editor';
 
 export default {
   run(ed, s, opts = {}) {
@@ -12,21 +13,24 @@ export default {
       ed.getSelectedAll().forEach(sel => {
         const selected = sel.delegate?.copy?.(sel) || sel;
         const { collection } = selected;
-        if (!collection) return;
-
         let added;
-        const at = selected.index() + 1;
-        const addOpts = { at, action: opts.action || 'paste-component' };
+        if (collection) {
+          const at = selected.index() + 1;
+          const addOpts = { at, action: opts.action || 'paste-component' };
 
-        if (contains(clp, selected) && selected.get('copyable')) {
-          added = collection.add(selected.clone(), addOpts);
+          if (contains(clp, selected) && selected.get('copyable')) {
+            // @ts-ignore
+            added = collection.add(selected.clone(), addOpts);
+          } else {
+            added = doAdd(ed, clp, selected.parent()!, addOpts);
+          }
         } else {
-          const copyable = clp.filter(cop => cop.get('copyable'));
-          const pasteable = copyable.filter(cop => ed.Components.canMove(selected.parent()!, cop).result);
-          added = collection.add(
-            pasteable.map(cop => cop.clone()),
-            addOpts
-          );
+          // Page body is selected
+          // Paste at the end of the body
+          const pageBody = em.Pages.getSelected()?.getMainComponent();
+          const addOpts = { at: pageBody?.components().length || 0, action: opts.action || 'paste-component' };
+
+          added = doAdd(ed, clp, pageBody as Component, addOpts);
         }
 
         added = isArray(added) ? added : [added];
@@ -37,3 +41,13 @@ export default {
     }
   },
 } as CommandObject;
+
+function doAdd(ed: Editor, clp: Component[], parent: Component, addOpts: any): Component[] | Component {
+  const copyable = clp.filter(cop => cop.get('copyable'));
+  const pasteable = copyable.filter(cop => ed.Components.canMove(parent, cop).result);
+  return parent.components().add(
+    // @ts-ignore
+    pasteable.map(cop => cop.clone()),
+    addOpts
+  );
+}