PavtchManager for all objects

docs/api/assets.md

@@ -85,6 +85,8 @@ editor.on('asset:custom', ({ container, assets, ... }) => { ... });
 editor.on('asset', ({ event, model, ... }) => { ... });
 ```
 
+* AssetsEventCallback
+
 ## Methods
 
 *   [open][2]

docs/api/datasources.md

@@ -113,6 +113,18 @@ const ds = dsm.get('my_data_source_id');
 
 Returns **[DataSource]** Data source.
 
+## getAll
+
+Return all data sources.
+
+### Examples
+
+```javascript
+const ds = dsm.getAll();
+```
+
+Returns **[Array][8]<[DataSource]>**&#x20;
+
 ## getValue
 
 Get value from data sources by path.
@@ -121,6 +133,7 @@ Get value from data sources by path.
 
 *   `path` **[String][7]** Path to value.
 *   `defValue` **any** Default value if the path is not found.
+*   `opts` **{context: Record<[string][7], any>?}?**&#x20;
 
 Returns **any** const value = dsm.getValue('ds\_id.record\_id.propName', 'defaultValue');
 
@@ -139,7 +152,7 @@ Set value in data sources by path.
 dsm.setValue('ds_id.record_id.propName', 'new value');
 ```
 
-Returns **[Boolean][8]** Returns true if the value was set successfully
+Returns **[Boolean][9]** Returns true if the value was set successfully
 
 ## remove
 
@@ -183,7 +196,7 @@ data record, and optional property path.
 
 Store data sources to a JSON object.
 
-Returns **[Array][9]** Stored data sources.
+Returns **[Array][8]** Stored data sources.
 
 ## load
 
@@ -209,6 +222,6 @@ Returns **[Object][6]** Loaded data sources.
 
 [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

docs/api/device.md

@@ -2,7 +2,7 @@
 
 ## Device
 
-
+**Extends ModelWithPatches**
 
 ### Properties
 

docs/api/editor.md

@@ -30,6 +30,24 @@ editor.on('undo', () => { ... });
 editor.on('redo', () => { ... });
 ```
 
+* `patch:update` Patch finalized.
+
+```javascript
+editor.on('patch:update', (patch) => { ... });
+```
+
+* `patch:undo` Patch undo executed.
+
+```javascript
+editor.on('patch:undo', (patch) => { ... });
+```
+
+* `patch:redo` Patch redo executed.
+
+```javascript
+editor.on('patch:redo', (patch) => { ... });
+```
+
 * `load` Editor is loaded. At this stage, the project is loaded in the editor and elements in the canvas are rendered.
 
 ```javascript

docs/api/selector.md

@@ -2,7 +2,7 @@
 
 ## Selector
 
-
+**Extends ModelWithPatches**
 
 ### Properties
 

packages/core/package.json

@@ -30,6 +30,7 @@
     "url": "https://github.com/GrapesJS/grapesjs.git"
   },
   "dependencies": {
+    "immer": "^10.1.1",
     "@types/backbone": "1.4.15",
     "backbone": "1.4.1",
     "backbone-undo": "0.2.6",

packages/core/src/abstract/CollectionWithCategories.ts

@@ -1,16 +1,19 @@
 import { isString } from 'underscore';
-import { Collection, Model } from '../common';
+import { Model } from '../common';
 import Categories from './ModuleCategories';
 import Category, { CategoryProperties } from './ModuleCategory';
 import { isObject } from '../utils/mixins';
+import CollectionWithPatches from '../patch_manager/CollectionWithPatches';
 
 interface ModelWithCategoryProps {
   category?: string | CategoryProperties;
 }
 
 const CATEGORY_KEY = 'category';
 
-export abstract class CollectionWithCategories<T extends Model<ModelWithCategoryProps>> extends Collection<T> {
+export abstract class CollectionWithCategories<
+  T extends Model<ModelWithCategoryProps>,
+> extends CollectionWithPatches<T> {
   abstract getCategories(): Categories;
 
   initCategory(model: T) {

packages/core/src/asset_manager/index.ts

@@ -63,7 +63,13 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
    */
   constructor(em: EditorModel) {
     // @ts-ignore
-    super(em, 'AssetManager', new Assets([], em), AssetsEvents, defConfig());
+    super(
+      em,
+      'AssetManager',
+      new Assets([], { em, patchObjectType: 'assets', collectionId: 'global' } as any),
+      AssetsEvents,
+      defConfig(),
+    );
     const { all, config } = this;
     // @ts-ignore
     this.assetsVis = new Assets([]);

packages/core/src/asset_manager/model/Asset.ts

@@ -1,13 +1,14 @@
 import { result } from 'underscore';
-import { Model } from '../../common';
+import ModelWithPatches from '../../patch_manager/ModelWithPatches';
 
 /**
  * @property {String} type Asset type, eg. `'image'`.
  * @property {String} src Asset URL, eg. `'https://.../image.png'`.
  *
  * @module docsjs.Asset
  */
-export default class Asset extends Model {
+export default class Asset extends ModelWithPatches {
+  patchObjectType = 'asset';
   static getDefaults() {
     return result(this.prototype, 'defaults');
   }

packages/core/src/asset_manager/model/Assets.ts

@@ -1,13 +1,25 @@
-import { Collection } from '../../common';
+import CollectionWithPatches from '../../patch_manager/CollectionWithPatches';
 import Asset from './Asset';
 import AssetImage from './AssetImage';
 import AssetImageView from '../view/AssetImageView';
 import TypeableCollection from '../../domain_abstract/model/TypeableCollection';
 
-const TypeableCollectionExt = Collection.extend(TypeableCollection);
+export class Assets extends CollectionWithPatches<Asset> {
+  types: any[] | undefined;
+  target?: any;
+  onSelect?: any;
+  getTypes!: () => any[];
+  getType!: (id: string) => any;
+  getBaseType!: () => any;
+  recognizeType!: (value: any) => any;
+  addType!: (id: string, definition: any) => void;
 
-export default class Assets extends TypeableCollectionExt<Asset> {}
+  constructor(models?: any, options?: any) {
+    super(models, options);
+  }
+}
 
+Object.assign(Assets.prototype, TypeableCollection);
 Assets.prototype.types = [
   {
     id: 'image',
@@ -24,3 +36,5 @@ Assets.prototype.types = [
     },
   },
 ];
+
+export default Assets;

packages/core/src/block_manager/index.ts

@@ -61,7 +61,7 @@ export default class BlockManager extends ItemManagerModule<BlockManagerConfig,
   constructor(em: EditorModel) {
     super(em, 'BlockManager', new Blocks([], { em }), BlocksEvents, defConfig());
     this.blocks = this.all;
-    this.blocksVisible = new Blocks(this.blocks.models, { em });
+    this.blocksVisible = new Blocks(this.blocks.models, { em, collectionId: 'visible' } as any);
     this.categories = new Categories([], { em, events: { update: BlocksEvents.categoryUpdate } });
     this.__onAllEvent = debounce(() => this.__trgCustom(), 0);
 
@@ -335,7 +335,7 @@ export default class BlockManager extends ItemManagerModule<BlockManagerConfig,
     const toRender = blocks || this.getAll().models;
 
     if (opts.external) {
-      const collection = new Blocks(toRender, { em });
+      const collection = new Blocks(toRender, { em, collectionId: 'render' } as any);
       return new BlocksView({ collection, categories }, { em, ...config, ...opts }).render().el;
     }
 

packages/core/src/block_manager/model/Blocks.ts

@@ -1,20 +1,48 @@
-import { CollectionWithCategories } from '../../abstract/CollectionWithCategories';
+import { isString } from 'underscore';
+import { Collection } from '../../common';
+import Categories from '../../abstract/ModuleCategories';
+import Category from '../../abstract/ModuleCategory';
+import { isObject } from '../../utils/mixins';
 import EditorModel from '../../editor/model/Editor';
 import Block from './Block';
 
-export default class Blocks extends CollectionWithCategories<Block> {
+const CATEGORY_KEY = 'category';
+
+export default class Blocks extends Collection<Block> {
   em: EditorModel;
 
   constructor(coll: any[], options: { em: EditorModel }) {
-    super(coll);
+    super(coll, options);
     this.em = options.em;
     this.on('add', this.handleAdd);
   }
 
-  getCategories() {
+  getCategories(): Categories {
     return this.em.Blocks.getCategories();
   }
 
+  initCategory(model: Block) {
+    let category = (model as any).get(CATEGORY_KEY);
+    const isDefined = category instanceof Category;
+
+    // Ensure the category exists and it's not already initialized
+    if (category && !isDefined) {
+      if (isString(category)) {
+        category = { id: category, label: category };
+      } else if (isObject(category) && !category.id) {
+        category.id = category.label;
+      }
+
+      const catModel = this.getCategories().add(category);
+      (model as any).set(CATEGORY_KEY, catModel as any, { silent: true });
+      return catModel;
+    } else if (isDefined) {
+      const catModel = category as unknown as Category;
+      this.getCategories().add(catModel);
+      return catModel;
+    }
+  }
+
   handleAdd(model: Block) {
     this.initCategory(model);
   }

packages/core/src/commands/view/OpenAssets.ts

@@ -49,7 +49,7 @@ export default {
       am.__trgCustom();
     } else {
       if (!this.rendered || types) {
-        let assets: Asset[] = am.getAll().filter((i: Asset) => i);
+        let assets: Asset[] = am.getAll().filter((i: Asset) => !!i);
 
         if (types && types.length) {
           assets = assets.filter((a) => types.indexOf(a.get('type')) !== -1);

packages/core/src/css_composer/index.ts

@@ -103,7 +103,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     // @ts-ignore
     config.rules = this.em.config.style || config.rules || '';
 
-    this.rules = new CssRules([], config);
+    this.rules = new CssRules([], { ...config, em });
     this._setupCacheListeners();
   }
 

packages/core/src/css_composer/model/CssRule.ts

@@ -97,6 +97,7 @@ const { CSS } = hasWin() ? window : {};
  * [Component]: component.html
  */
 export default class CssRule extends StyleableModel<CssRuleProperties> {
+  patchObjectType = 'css-rule';
   config: CssRuleProperties;
   em?: EditorModel;
   opt: any;

packages/core/src/css_composer/model/CssRules.ts

@@ -1,14 +1,15 @@
-import { Collection } from '../../common';
+import CollectionWithPatches from '../../patch_manager/CollectionWithPatches';
 import EditorModel from '../../editor/model/Editor';
 import CssRule, { CssRuleProperties } from './CssRule';
 
-export default class CssRules extends Collection<CssRule> {
+export default class CssRules extends CollectionWithPatches<CssRule> {
   editor: EditorModel;
 
   constructor(props: any, opt: any) {
-    super(props);
+    const em: EditorModel = opt?.em || opt?.editor;
+    super(props, { ...opt, em, patchObjectType: 'css-rules', collectionId: opt?.collectionId || 'global' });
     // Inject editor
-    this.editor = opt?.em;
+    this.editor = em;
 
     // This will put the listener post CssComposer.postLoad
     setTimeout(() => {
@@ -18,7 +19,7 @@ export default class CssRules extends Collection<CssRule> {
   }
 
   toJSON(opts?: any) {
-    const result = Collection.prototype.toJSON.call(this, opts);
+    const result = CollectionWithPatches.prototype.toJSON.call(this, opts);
     return result.filter((rule: CssRuleProperties) => rule.style && !rule.shallow);
   }
 
@@ -38,7 +39,7 @@ export default class CssRules extends Collection<CssRule> {
       models = this.editor.get('Parser').parseCss(models);
     }
     opt.em = this.editor;
-    return Collection.prototype.add.apply(this, [models, opt]);
+    return CollectionWithPatches.prototype.add.apply(this, [models, opt]);
   }
 }
 

packages/core/src/device_manager/index.ts

@@ -51,7 +51,7 @@ export default class DeviceManager extends ItemManagerModule<
   storageKey = '';
 
   constructor(em: EditorModel) {
-    super(em, 'DeviceManager', new Devices(), DeviceEvents, defConfig());
+    super(em, 'DeviceManager', new Devices([], { em } as any), DeviceEvents, defConfig());
     this.devices = this.all;
     this.config.devices?.forEach((device) => this.add(device, { silent: true }));
     this.select(this.config.default || this.devices.at(0));

packages/core/src/device_manager/model/Devices.ts

@@ -1,6 +1,10 @@
 import { Collection } from '../../common';
 import Device from './Device';
 
-export default class Devices extends Collection<Device> {}
+export default class Devices extends Collection<Device> {
+  constructor(models?: any, opts: any = {}) {
+    super(models, opts);
+  }
+}
 
 Devices.prototype.model = Device;

packages/core/src/dom_components/index.ts

@@ -364,7 +364,7 @@ export default class ComponentManager extends ItemManagerModule<DomComponentsCon
    * @private
    */
   constructor(em: EditorModel) {
-    super(em, 'DomComponents', new Components(undefined, { em }), ComponentsEvents, defConfig());
+    super(em, 'DomComponents', new Components(undefined, { em, collectionId: 'root' }), ComponentsEvents, defConfig());
     const { config } = this;
     this.symbols = new Symbols([], { em, config, domc: this });