Bump

dist/grapes.mjs

@@ -17919,20 +17919,24 @@ var showOffsets;
         if (em.get('_cmpDrag'))
             return em.set('_cmpDrag');
         var el = ev.target;
-        var model = (0,mixins.getComponentModel)(el);
+        var cmp = (0,mixins.getComponentModel)(el);
-        if (!model) {
+        if (!cmp) {
             var parentEl = el.parentNode;
-            while (!model && parentEl && !(0,dom/* isDoc */.Mx)(parentEl)) {
+            while (!cmp && parentEl && !(0,dom/* isDoc */.Mx)(parentEl)) {
-                model = (0,mixins.getComponentModel)(parentEl);
+                cmp = (0,mixins.getComponentModel)(parentEl);
                 parentEl = parentEl.parentNode;
             }
         }
-        if (model) {
+        if (cmp) {
-            // Avoid selection of inner text components during editing
+            if (em.isEditing() &&
-            if (em.isEditing() && !model.get('textable') && model.isChildOf('text')) {
+                // Avoid selection of inner text components during editing
+                ((!cmp.get('textable') && cmp.isChildOf('text')) ||
+                    // Prevents selecting another component if the pointer was pressed and
+                    // dragged outside of the editing component
+                    em.getEditing() !== cmp)) {
                 return;
             }
-            this.select(model, ev);
+            this.select(cmp, ev);
         }
     },
     /**
@@ -27273,14 +27277,24 @@ var updateSymbolComps = function (symbol, m, c, o) {
     var isTemp = m.opt.temporary;
     // Reset
     if (!o) {
+        var coll = m;
         var toUp = getSymbolsToUpdate(symbol, SymbolUtils_assign(SymbolUtils_assign({}, toUpOpts), { changed: 'components:reset' }));
-        // @ts-ignore
+        var cmps_1 = coll.models;
-        var cmps_1 = m.models;
+        var newSymbols_1 = new Set();
         logSymbol(symbol, 'reset', toUp, { components: cmps_1 });
-        toUp.forEach(function (symb) {
+        toUp.forEach(function (rel) {
-            var newMods = cmps_1.map(function (mod) { return mod.clone({ symbol: true }); });
+            var relCmps = rel.components();
-            // @ts-ignore
+            var toReset = cmps_1.map(function (cmp, i) {
-            symb.components().reset(newMods, SymbolUtils_assign({ fromInstance: symbol }, c));
+                // This particular case here is to handle reset from `resetFromString`
+                // where we can receive an array of regulat components or already
+                // existing symbols (updated already before reset)
+                if (!isSymbol(cmp) || newSymbols_1.has(cmp)) {
+                    newSymbols_1.add(cmp);
+                    return cmp.clone({ symbol: true });
+                }
+                return relCmps.at(i);
+            });
+            relCmps.reset(toReset, SymbolUtils_assign({ fromInstance: symbol }, c));
         });
         // Add
     }
@@ -27320,7 +27334,7 @@ var updateSymbolComps = function (symbol, m, c, o) {
             !o.temporary &&
             symb.set(keySymbols, getSymbolInstances(symb).filter(function (i) { return i !== m; }));
         // Propagate remove only if the component is an inner symbol
-        if (!isSymbolRoot(m)) {
+        if (!isSymbolRoot(m) && !o.skipRefsUp) {
             var changed_1 = 'components:remove';
             var index_1 = o.index;
             var parent_1 = m.parent();
@@ -27559,7 +27573,10 @@ var Components = /** @class */ (function (_super) {
                 }
             }
             var inner_1 = removed.components();
-            inner_1.forEach(function (it) { return _this.removeChildren(it, coll, opts); });
+            inner_1.forEach(function (it) {
+                updateSymbolComps(it, it, inner_1, Components_assign(Components_assign({}, opts), { skipRefsUp: true }));
+                _this.removeChildren(it, coll, opts);
+            });
         }
         // Remove stuff registered in DomComponents.handleChanges
         var inner = removed.components();
@@ -29019,7 +29036,7 @@ var Component = /** @class */ (function (_super) {
     };
     Component.prototype.__postRemove = function () {
         var em = this.em;
-        var um = em === null || em === void 0 ? void 0 : em.get('UndoManager');
+        var um = em === null || em === void 0 ? void 0 : em.UndoManager;
         if (um) {
             um.remove(this.components());
             um.remove(this.getSelectors());
@@ -29861,8 +29878,7 @@ var Component = /** @class */ (function (_super) {
     /**
      * Override original clone method
      * @private
-     */
+     * @ts-ignore */
-    /** @ts-ignore */
     Component.prototype.clone = function (opt) {
         if (opt === void 0) { opt = {}; }
         var em = this.em;
@@ -29973,6 +29989,14 @@ var Component = /** @class */ (function (_super) {
             (0,mixins.capitalize)(defName) // Use component `type` key
         );
     };
+    /**
+     * Update component name.
+     * @param {String} name New name.
+     */
+    Component.prototype.setName = function (name, opts) {
+        if (opts === void 0) { opts = {}; }
+        this.set('custom-name', name, opts);
+    };
     /**
      * Get the icon string
      * @return {String}
@@ -30362,7 +30386,9 @@ var Component = /** @class */ (function (_super) {
         var cmp = (_b = (_a = this.em) === null || _a === void 0 ? void 0 : _a.Components.getType(type)) === null || _b === void 0 ? void 0 : _b.model;
         if (!cmp)
             return false;
-        return this instanceof cmp;
+        // A tiny hack to make isInstanceOf work properly where there a multiple inheritance
+        var typeExtends = this.constructor.typeExtends;
+        return this instanceof cmp || typeExtends.has(type);
     };
     /**
      * Check if the component is a child of some other component (or component type)
@@ -30543,6 +30569,7 @@ var Component = /** @class */ (function (_super) {
             components && Component.checkId(components, styles, list, opts);
         });
     };
+    Component.typeExtends = new Set();
     return Component;
 }(model_StyleableModel));
 /* harmony default export */ const model_Component = (Component);
@@ -36969,7 +36996,7 @@ var ComponentManager = /** @class */ (function (_super) {
      */
     ComponentManager.prototype.addType = function (type, methods) {
         var em = this.em;
-        var _a = methods.model, model = _a === void 0 ? {} : _a, _b = methods.view, view = _b === void 0 ? {} : _b, isComponent = methods.isComponent, extend = methods.extend, extendView = methods.extendView, _c = methods.extendFn, extendFn = _c === void 0 ? [] : _c, _d = methods.extendFnView, extendFnView = _d === void 0 ? [] : _d;
+        var _a = methods.model, model = _a === void 0 ? {} : _a, _b = methods.view, view = _b === void 0 ? {} : _b, isComponent = methods.isComponent, extend = methods.extend, extendView = methods.extendView, _c = methods.extendFn, extendFn = _c === void 0 ? [] : _c, _d = methods.extendFnView, extendFnView = _d === void 0 ? [] : _d, block = methods.block;
         var compType = this.getType(type);
         var extendType = this.getType(extend);
         var extendViewType = this.getType(extendView);
@@ -36998,7 +37025,10 @@ var ComponentManager = /** @class */ (function (_super) {
         if (typeof model === 'object') {
             var modelDefaults_1 = { defaults: model.defaults };
             delete model.defaults;
+            var typeExtends = new Set(modelToExt.typeExtends);
+            typeExtends.add(modelToExt.getDefaults().type);
             methods.model = modelToExt.extend(dom_components_assign(dom_components_assign({}, model), getExtendedObj(extendFn, model, modelToExt)), {
+                typeExtends: typeExtends,
                 isComponent: compType && !extendType && !isComponent ? modelToExt.isComponent : isComponent || (function () { return 0; }),
             });
             // Reassign the defaults getter to the model
@@ -37018,6 +37048,15 @@ var ComponentManager = /** @class */ (function (_super) {
             methods.id = type;
             this.componentTypes.unshift(methods);
         }
+        if (block) {
+            var defBlockProps = {
+                id: type,
+                label: type,
+                content: { type: type },
+            };
+            var blockProps = block === true ? defBlockProps : dom_components_assign(dom_components_assign({}, defBlockProps), block);
+            em.Blocks.add(blockProps.id || type, blockProps);
+        }
         var event = "component:type:".concat(compType ? 'update' : 'add');
         em === null || em === void 0 ? void 0 : em.trigger(event, compType || methods);
         return this;
@@ -46538,21 +46577,17 @@ var ItemView = /** @class */ (function (_super) {
      */
     ItemView.prototype.handleEditEnd = function (ev) {
         ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-        var _a = this, em = _a.em, $el = _a.$el, clsNoEdit = _a.clsNoEdit, clsEdit = _a.clsEdit;
+        var _a = this, em = _a.em, $el = _a.$el, clsNoEdit = _a.clsNoEdit, clsEdit = _a.clsEdit, model = _a.model;
         var inputEl = this.getInputName();
         var name = inputEl.textContent;
         inputEl.scrollLeft = 0;
         inputEl[ItemView_inputProp] = 'false';
-        this.setName(name, { component: this.model, propName: 'custom-name' });
+        model.setName(name);
         em.setEditing(false);
         $el.find(".".concat(this.inputNameCls)).addClass(clsNoEdit).removeClass(clsEdit);
         // Ensure to always update the layer name #4544
         this.updateName();
     };
-    ItemView.prototype.setName = function (name, _a) {
-        var propName = _a.propName;
-        this.model.set(propName, name);
-    };
     /**
      * Get the input containing the name of the component
      * @return {HTMLElement}
@@ -62765,7 +62800,7 @@ var grapesjs = {
     plugins: plugins,
     usePlugin: usePlugin,
     // @ts-ignore Will be replaced on build
-    version: '0.21.11',
+    version: '0.21.12',
     /**
      * Initialize the editor with passed options
      * @param {Object} config Configuration object

dist/index.d.ts

@@ -4140,6 +4140,125 @@ declare class Symbols extends Components {
 	refresh(): void;
 	__trgEvent(event: string, props: ObjectAny, isInstance?: boolean): void;
 }
+export declare class Blocks extends CollectionWithCategories<Block> {
+	em: EditorModel;
+	constructor(coll: any[], options: {
+		em: EditorModel;
+	});
+	getCategories(): Categories;
+	handleAdd(model: Block): void;
+}
+/** @private */
+export interface BlockProperties {
+	/**
+	 * Block label, eg. `My block`
+	 */
+	label: string;
+	/**
+	 * The content of the block. Might be an HTML string or a [Component Defintion](/modules/Components.html#component-definition)
+	 */
+	content: string | ComponentDefinition | (string | ComponentDefinition)[];
+	/**
+	 * HTML string for the media/icon of the block, eg. `<svg ...`, `<img ...`, etc.
+	 * @default ''
+	 */
+	media?: string;
+	/**
+	 * Block category, eg. `Basic blocks`
+	 * @default ''
+	 */
+	category?: string | CategoryProperties;
+	/**
+	 * If true, triggers the `active` event on the dropped component.
+	 * @default false
+	 */
+	activate?: boolean;
+	/**
+	 * If true, the dropped component will be selected.
+	 * @default false
+	 */
+	select?: boolean;
+	/**
+	 * If true, all IDs of dropped components and their styles will be changed.
+	 * @default false
+	 */
+	resetId?: boolean;
+	/**
+	 * Disable the block from being interacted.
+	 * @default false
+	 */
+	disable?: boolean;
+	/**
+	 * Custom behavior on click.
+	 * @example
+	 * onClick: (block, editor) => editor.getWrapper().append(block.get('content'))
+	 */
+	onClick?: (block: Block, editor: Editor) => void;
+	/**
+	 * Block attributes
+	 */
+	attributes?: Record<string, any>;
+	id?: string;
+	/**
+	 * @deprecated
+	 */
+	activeOnRender?: boolean;
+}
+/**
+ * @property {String} label Block label, eg. `My block`
+ * @property {String|Object} content The content of the block. Might be an HTML string or a [Component Defintion](/modules/Components.html#component-definition)
+ * @property {String} [media=''] HTML string for the media/icon of the block, eg. `<svg ...`, `<img ...`, etc.
+ * @property {String} [category=''] Block category, eg. `Basic blocks`
+ * @property {Boolean} [activate=false] If true, triggers the `active` event on the dropped component.
+ * @property {Boolean} [select=false] If true, the dropped component will be selected.
+ * @property {Boolean} [resetId=false] If true, all IDs of dropped components and their styles will be changed.
+ * @property {Boolean} [disable=false] Disable the block from being interacted
+ * @property {Function} [onClick] Custom behavior on click, eg. `(block, editor) => editor.getWrapper().append(block.get('content'))`
+ * @property {Object} [attributes={}] Block attributes to apply in the view element
+ *
+ * @module docsjs.Block
+ */
+export declare class Block extends Model<BlockProperties> {
+	defaults(): {
+		label: string;
+		content: string;
+		media: string;
+		category: string;
+		activate: boolean;
+		select: undefined;
+		resetId: boolean;
+		disable: boolean;
+		onClick: undefined;
+		attributes: {};
+	};
+	get category(): Category | undefined;
+	get parent(): Blocks;
+	/**
+	 * Get block id
+	 * @returns {String}
+	 */
+	getId(): string;
+	/**
+	 * Get block label
+	 * @returns {String}
+	 */
+	getLabel(): string;
+	/**
+	 * Get block media
+	 * @returns {String}
+	 */
+	getMedia(): string | undefined;
+	/**
+	 * Get block content
+	 * @returns {Object|String|Array<Object|String>}
+	 */
+	getContent(): string | ComponentDefinition | (string | ComponentDefinition)[] | undefined;
+	/**
+	 * Get block category label
+	 * @returns {String}
+	 */
+	getCategoryLabel(): string;
+}
 export type ComponentEvent = "component:create" | "component:mount" | "component:add" | "component:remove" | "component:remove:before" | "component:clone" | "component:update" | "component:styleUpdate" | "component:selected" | "component:deselected" | "component:toggled" | "component:type:add" | "component:type:update" | "component:drag:start" | "component:drag" | "component:drag:end" | "component:resize";
 export interface ComponentModelDefinition extends IComponent {
 	defaults?: ComponentDefinition | (() => ComponentDefinition);
@@ -4152,6 +4271,7 @@ export interface AddComponentTypeOptions {
 	isComponent?: (el: HTMLElement) => boolean | ComponentDefinitionDefined | undefined;
 	model?: Partial<ComponentModelDefinition> & ThisType<ComponentModelDefinition & Component>;
 	view?: Partial<ComponentViewDefinition> & ThisType<ComponentViewDefinition & ComponentView>;
+	block?: boolean | Partial<BlockProperties>;
 	extend?: string;
 	extendView?: string;
 	extendFn?: string[];
@@ -4795,10 +4915,6 @@ declare class ItemView extends View {
 	 * Handle with the end of editing of the component name
 	 */
 	handleEditEnd(ev?: KeyboardEvent): void;
-	setName(name: string, { propName }: {
-		propName: string;
-		component?: Component;
-	}): void;
 	/**
 	 * Get the input containing the name of the component
 	 * @return {HTMLElement}
@@ -5349,8 +5465,7 @@ export declare class Component extends StyleableModel<ComponentProperties> {
 	/**
 	 * Override original clone method
 	 * @private
-	 */
+	 * @ts-ignore */
-	/** @ts-ignore */
 	clone(opt?: {
 		symbol?: boolean;
 		symbolInv?: boolean;
@@ -5364,6 +5479,11 @@ export declare class Component extends StyleableModel<ComponentProperties> {
 	getName(opts?: {
 		noCustom?: boolean;
 	}): any;
+	/**
+	 * Update component name.
+	 * @param {String} name New name.
+	 */
+	setName(name?: string, opts?: SetOptions): void;
 	/**
 	 * Get the icon string
 	 * @return {String}
@@ -5543,6 +5663,7 @@ export declare class Component extends StyleableModel<ComponentProperties> {
 	_idUpdated(m: any, v: any, opts?: {
 		idUpdate?: boolean;
 	}): this | undefined;
+	static typeExtends: Set<string>;
 	static getDefaults(): any;
 	static isComponent(el: HTMLElement, opts?: any): ComponentDefinitionDefined | boolean | undefined;
 	static ensureInList(model: Component): void;
@@ -5714,125 +5835,6 @@ export interface AssetManagerConfig {
 	 */
 	dropzoneContent?: string;
 }
-export declare class Blocks extends CollectionWithCategories<Block> {
-	em: EditorModel;
-	constructor(coll: any[], options: {
-		em: EditorModel;
-	});
-	getCategories(): Categories;
-	handleAdd(model: Block): void;
-}
-/** @private */
-export interface BlockProperties {
-	/**
-	 * Block label, eg. `My block`
-	 */
-	label: string;
-	/**
-	 * The content of the block. Might be an HTML string or a [Component Defintion](/modules/Components.html#component-definition)
-	 */
-	content: string | ComponentDefinition | (string | ComponentDefinition)[];
-	/**
-	 * HTML string for the media/icon of the block, eg. `<svg ...`, `<img ...`, etc.
-	 * @default ''
-	 */
-	media?: string;
-	/**
-	 * Block category, eg. `Basic blocks`
-	 * @default ''
-	 */
-	category?: string | CategoryProperties;
-	/**
-	 * If true, triggers the `active` event on the dropped component.
-	 * @default false
-	 */
-	activate?: boolean;
-	/**
-	 * If true, the dropped component will be selected.
-	 * @default false
-	 */
-	select?: boolean;
-	/**
-	 * If true, all IDs of dropped components and their styles will be changed.
-	 * @default false
-	 */
-	resetId?: boolean;
-	/**
-	 * Disable the block from being interacted.
-	 * @default false
-	 */
-	disable?: boolean;
-	/**
-	 * Custom behavior on click.
-	 * @example
-	 * onClick: (block, editor) => editor.getWrapper().append(block.get('content'))
-	 */
-	onClick?: (block: Block, editor: Editor) => void;
-	/**
-	 * Block attributes
-	 */
-	attributes?: Record<string, any>;
-	id?: string;
-	/**
-	 * @deprecated
-	 */
-	activeOnRender?: boolean;
-}
-/**
- * @property {String} label Block label, eg. `My block`
- * @property {String|Object} content The content of the block. Might be an HTML string or a [Component Defintion](/modules/Components.html#component-definition)
- * @property {String} [media=''] HTML string for the media/icon of the block, eg. `<svg ...`, `<img ...`, etc.
- * @property {String} [category=''] Block category, eg. `Basic blocks`
- * @property {Boolean} [activate=false] If true, triggers the `active` event on the dropped component.
- * @property {Boolean} [select=false] If true, the dropped component will be selected.
- * @property {Boolean} [resetId=false] If true, all IDs of dropped components and their styles will be changed.
- * @property {Boolean} [disable=false] Disable the block from being interacted
- * @property {Function} [onClick] Custom behavior on click, eg. `(block, editor) => editor.getWrapper().append(block.get('content'))`
- * @property {Object} [attributes={}] Block attributes to apply in the view element
- *
- * @module docsjs.Block
- */
-export declare class Block extends Model<BlockProperties> {
-	defaults(): {
-		label: string;
-		content: string;
-		media: string;
-		category: string;
-		activate: boolean;
-		select: undefined;
-		resetId: boolean;
-		disable: boolean;
-		onClick: undefined;
-		attributes: {};
-	};
-	get category(): Category | undefined;
-	get parent(): Blocks;
-	/**
-	 * Get block id
-	 * @returns {String}
-	 */
-	getId(): string;
-	/**
-	 * Get block label
-	 * @returns {String}
-	 */
-	getLabel(): string;
-	/**
-	 * Get block media
-	 * @returns {String}
-	 */
-	getMedia(): string | undefined;
-	/**
-	 * Get block content
-	 * @returns {Object|String|Array<Object|String>}
-	 */
-	getContent(): string | ComponentDefinition | (string | ComponentDefinition)[] | undefined;
-	/**
-	 * Get block category label
-	 * @returns {String}
-	 */
-	getCategoryLabel(): string;
-}
 export interface BlockManagerConfig {
 	/**
 	 * Specify the element to use as a container, string (query) or HTMLElement.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.21.11",
+  "version": "0.21.12",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",