Refactor Asset models

docs/.vuepress/config.js

@@ -61,6 +61,7 @@ module.exports = {
         ['/api/i18n', 'I18n'],
         ['/api/canvas', 'Canvas'],
         ['/api/assets', 'Asset Manager'],
+        ['/api/asset', `${subDivider}Asset`],
         ['/api/block_manager', 'Block Manager'],
         ['/api/block', `${subDivider}Block`],
         ['/api/commands', 'Commands'],

docs/api.js

@@ -13,6 +13,7 @@ async function generateDocs () {
   await Promise.all([
     ['editor/index.js', 'editor.md'],
     ['asset_manager/index.js', 'assets.md'],
+    ['asset_manager/model/Asset.js', 'asset.md'],
     ['block_manager/index.js', 'block_manager.md'],
     ['block_manager/model/Block.js', 'block.md'],
     ['commands/index.js', 'commands.md'],

docs/api/asset.md

@@ -0,0 +1,44 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## Asset
+
+
+
+### Properties
+
+*   `type` **[String][1]** Asset type, eg. 'image'.
+*   `src` **[String][1]** Asset URL, eg. '[https://.../image.png][2]'.
+
+### getFilename
+
+Get filename of the asset (based on `src`).
+
+#### Examples
+
+```javascript
+// Asset: { src: 'https://.../image.png' }
+asset.getFilename(); // -> 'image.png'
+// Asset: { src: 'https://.../image' }
+asset.getFilename(); // -> 'image'
+```
+
+Returns **[String][1]** 
+
+### getExtension
+
+Get extension of the asset (based on `src`).
+
+#### Examples
+
+```javascript
+// Asset: { src: 'https://.../image.png' }
+asset.getExtension(); // -> 'png'
+// Asset: { src: 'https://.../image' }
+asset.getExtension(); // -> ''
+```
+
+Returns **[String][1]** 
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[2]: https://.../image.png

docs/api/assets.md

@@ -18,6 +18,19 @@ Once the editor is instantiated you can use its API. Before using these methods
 const assetManager = editor.AssetManager;
 ```
 
+## Available Events
+
+*   `asset:add` - Added new asset. The [Asset] is passed as an argument to the callback.
+*   `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback.
+*   `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback.
+*   `asset:upload:start` - Before the upload is started.
+*   `asset:upload:end` - After the upload is ended.
+*   `asset:upload:error` - On any error in upload, passes the error as an argument.
+*   `asset:upload:response` - On upload response, passes the result as an argument.
+*   `asset` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
+
+## Methods
+
 *   [add][2]
 *   [get][3]
 *   [getAll][4]
@@ -31,81 +44,111 @@ const assetManager = editor.AssetManager;
 *   [getType][12]
 *   [getTypes][13]
 
+[Asset]: asset.html
+
+## open
+
+Open the asset manager.
+
+### Parameters
+
+*   `options` **[Object][14]?** Options for the asset manager. (optional, default `{}`)
+
+    *   `options.types` **[Array][15]<[String][16]>** Types of assets to show. (optional, default `['image']`)
+
+### Examples
+
+```javascript
+assetManager.open();
+// with your custom types (you should have assets with those types declared)
+assetManager.open({ types: ['doc'] });
+```
+
+## close
+
+Close the asset manager.
+
+### Examples
+
+```javascript
+assetManager.close();
+```
+
 ## add
 
 Add new asset/s to the collection. URLs are supposed to be unique
 
 ### Parameters
 
-*   `asset` **([string][14] | [Object][15] | [Array][16]<[string][14]> | [Array][16]<[Object][15]>)** URL strings or an objects representing the resource.
-*   `opts` **[Object][15]?** Options (optional, default `{}`)
+*   `asset` **([String][16] | [Object][14] | [Array][15]<[String][16]> | [Array][15]<[Object][14]>)** URL strings or an objects representing the resource.
+*   `opts` **[Object][14]?** Options (optional, default `{}`)
 
 ### Examples
 
 ```javascript
-// In case of strings, would be interpreted as images
+// As strings
 assetManager.add('http://img.jpg');
 assetManager.add(['http://img.jpg', './path/to/img.png']);
 
-// Using objects you could indicate the type and other meta informations
+// Using objects you can indicate the type and other meta informations
 assetManager.add({
+ // type: 'image',	// image is default
 	src: 'http://img.jpg',
-	//type: 'image',	//image is default
 	height: 300,
 width: 200,
 });
-assetManager.add([{
-	src: 'http://img.jpg',
-},{
-	src: './path/to/img.png',
-}]);
+assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
 ```
 
-Returns **Model** 
+Returns **[Asset]** 
 
 ## get
 
-Returns the asset by URL
+Return asset by URL
 
 ### Parameters
 
-*   `src` **[string][14]** URL of the asset
+*   `src` **[String][16]** URL of the asset
 
 ### Examples
 
 ```javascript
-var asset = assetManager.get('http://img.jpg');
+const asset = assetManager.get('http://img.jpg');
 ```
 
-Returns **[Object][15]** Object representing the asset
+Returns **([Asset] | null)** Object representing the asset
 
 ## getAll
 
 Return the global collection, containing all the assets
 
-Returns **Collection** 
+Returns **Collection<[Asset]>** 
 
 ## getAllVisible
 
 Return the visible collection, which contains assets actually rendered
 
-Returns **Collection** 
+Returns **Collection<[Asset]>** 
 
 ## remove
 
-Remove the asset by its URL
+Remove asset
 
 ### Parameters
 
-*   `src` **[string][14]** URL of the asset
+*   `asset` **([String][16] | [Asset])** Asset or asset URL
+*   `opts`  
 
 ### Examples
 
 ```javascript
-assetManager.remove('http://img.jpg');
+const removed = assetManager.remove('http://img.jpg');
+// or by passing the Asset
+const asset = assetManager.get('http://img.jpg');
+assetManager.remove(asset);
 ```
 
-Returns **this** 
+Returns **[Asset]** Removed asset
 
 ## store
 
@@ -121,7 +164,7 @@ Store assets data to the selected storage
 var assets = assetManager.store();
 ```
 
-Returns **[Object][15]** Data to store
+Returns **[Object][14]** Data to store
 
 ## load
 
@@ -130,7 +173,7 @@ The fetched data will be added to the collection.
 
 ### Parameters
 
-*   `data` **[Object][15]** Object of data to load (optional, default `{}`)
+*   `data` **[Object][14]** Object of data to load (optional, default `{}`)
 
 ### Examples
 
@@ -140,7 +183,7 @@ var assets = assetManager.load({
 })
 ```
 
-Returns **[Object][15]** Loaded assets
+Returns **[Object][14]** Loaded assets
 
 ## getContainer
 
@@ -161,7 +204,7 @@ Render assets
 ### Parameters
 
 *   `assts`  
-*   `assets` **[array][16]** Assets to render, without the argument will render all global assets
+*   `assets` **[array][15]** Assets to render, without the argument will render all global assets
 
 ### Examples
 
@@ -184,8 +227,8 @@ Add new type. If you want to get more about type definition we suggest to read t
 
 ### Parameters
 
-*   `id` **[string][14]** Type ID
-*   `definition` **[Object][15]** Definition of the type. Each definition contains
+*   `id` **[string][16]** Type ID
+*   `definition` **[Object][14]** Definition of the type. Each definition contains
     `model` (business logic), `view` (presentation logic)
     and `isType` function which recognize the type of the
     passed entity
@@ -206,15 +249,15 @@ Get type
 
 ### Parameters
 
-*   `id` **[string][14]** Type ID
+*   `id` **[string][16]** Type ID
 
-Returns **[Object][15]** Type definition
+Returns **[Object][14]** Type definition
 
 ## getTypes
 
 Get types
 
-Returns **[Array][16]** 
+Returns **[Array][15]** 
 
 [1]: https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js
 
@@ -242,11 +285,11 @@ Returns **[Array][16]**
 
 [13]: #gettypes
 
-[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
 [17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 

docs/api/editor.md

@@ -50,15 +50,6 @@ editor.on('EVENT-NAME', (some, argument) => {
 *   `block:drag` - Dragging block, the block's model and the drag event are passed as arguments
 *   `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
 
-### Assets
-
-*   `asset:add` - New asset added
-*   `asset:remove` - Asset removed
-*   `asset:upload:start` - Before the upload is started
-*   `asset:upload:end` - After the upload is ended
-*   `asset:upload:error` - On any error in upload, passes the error as an argument
-*   `asset:upload:response` - On upload response, passes the result as an argument
-
 ### Keymaps
 
 *   `keymap:add` - New keymap added. The new keyamp object is passed as an argument
@@ -118,21 +109,25 @@ By changing `result.content` you're able to customize what is dropped
 *   `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
 *   `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
 
+### Assets
+
+Check the [Assets][2] module.
+
 ### Modal
 
-Check the [Modal][2] module.
+Check the [Modal][3] module.
 
 ### Devices
 
-Check the [Devices][3] module.
+Check the [Devices][4] module.
 
 ### Parser
 
-Check the [Parser][4] module.
+Check the [Parser][5] module.
 
 ### Pages
 
-Check the [Pages][5] module.
+Check the [Pages][6] module.
 
 ### General
 
@@ -148,7 +143,7 @@ Returns configuration object
 
 ### Parameters
 
-*   `prop` **[string][6]?** Property name
+*   `prop` **[string][7]?** Property name
 
 Returns **any** Returns the configuration object or
 the value of the specified property
@@ -159,12 +154,12 @@ Returns HTML built inside canvas
 
 ### Parameters
 
-*   `opts` **[Object][7]** Options (optional, default `{}`)
+*   `opts` **[Object][8]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Return the HTML of a specific Component
-    *   `opts.cleanId` **[Boolean][8]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
+    *   `opts.cleanId` **[Boolean][9]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
 
-Returns **[string][6]** HTML string
+Returns **[string][7]** HTML string
 
 ## getCss
 
@@ -172,13 +167,13 @@ Returns CSS built inside canvas
 
 ### Parameters
 
-*   `opts` **[Object][7]** Options (optional, default `{}`)
+*   `opts` **[Object][8]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Return the CSS of a specific Component
-    *   `opts.json` **[Boolean][8]** Return an array of CssRules instead of the CSS string (optional, default `false`)
-    *   `opts.avoidProtected` **[Boolean][8]** Don't include protected CSS (optional, default `false`)
+    *   `opts.json` **[Boolean][9]** Return an array of CssRules instead of the CSS string (optional, default `false`)
+    *   `opts.avoidProtected` **[Boolean][9]** Don't include protected CSS (optional, default `false`)
 
-Returns **([String][6] | [Array][9]\<CssRule>)** CSS string or array of CssRules
+Returns **([String][7] | [Array][10]\<CssRule>)** CSS string or array of CssRules
 
 ## getJs
 
@@ -186,11 +181,11 @@ Returns JS of all components
 
 ### Parameters
 
-*   `opts` **[Object][7]** Options (optional, default `{}`)
+*   `opts` **[Object][8]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Get the JS of a specific component
 
-Returns **[String][6]** JS string
+Returns **[String][7]** JS string
 
 ## getComponents
 
@@ -210,8 +205,8 @@ Set components inside editor's canvas. This method overrides actual components
 
 ### Parameters
 
-*   `components` **([Array][9]<[Object][7]> | [Object][7] | [string][6])** HTML string or components model
-*   `opt` **[Object][7]** the options object to be used by the \[setComponents][em#setComponents][10] method (optional, default `{}`)
+*   `components` **([Array][10]<[Object][8]> | [Object][8] | [string][7])** HTML string or components model
+*   `opt` **[Object][8]** the options object to be used by the \[setComponents][em#setComponents][11] method (optional, default `{}`)
 
 ### Examples
 
@@ -233,10 +228,10 @@ Add components
 
 ### Parameters
 
-*   `components` **([Array][9]<[Object][7]> | [Object][7] | [string][6])** HTML string or components model
-*   `opts` **[Object][7]** Options
+*   `components` **([Array][10]<[Object][8]> | [Object][8] | [string][7])** HTML string or components model
+*   `opts` **[Object][8]** Options
 
-    *   `opts.avoidUpdateStyle` **[Boolean][8]** If the HTML string contains styles,
+    *   `opts.avoidUpdateStyle` **[Boolean][9]** If the HTML string contains styles,
         by default, they will be created and, if already exist, updated. When this option
         is true, styles already created will not be updated. (optional, default `false`)
 
@@ -252,13 +247,13 @@ editor.addComponents({
 });
 ```
 
-Returns **[Array][9]\<Component>** 
+Returns **[Array][10]\<Component>** 
 
 ## getStyle
 
 Returns style in JSON format object
 
-Returns **[Object][7]** 
+Returns **[Object][8]** 
 
 ## setStyle
 
@@ -266,7 +261,7 @@ Set style inside editor's canvas. This method overrides actual style
 
 ### Parameters
 
-*   `style` **([Array][9]<[Object][7]> | [Object][7] | [string][6])** CSS string or style model
+*   `style` **([Array][10]<[Object][8]> | [Object][8] | [string][7])** CSS string or style model
 *   `opt`   (optional, default `{}`)
 
 ### Examples
@@ -288,7 +283,7 @@ Add styles to the editor
 
 ### Parameters
 
-*   `style` **([Array][9]<[Object][7]> | [Object][7] | [string][6])** CSS string or style model
+*   `style` **([Array][10]<[Object][8]> | [Object][8] | [string][7])** CSS string or style model
 *   `opts`   (optional, default `{}`)
 
 ### Examples
@@ -297,7 +292,7 @@ Add styles to the editor
 editor.addStyle('.cls{color: red}');
 ```
 
-Returns **[Array][9]\<CssRule>** Array of created CssRule instances
+Returns **[Array][10]\<CssRule>** Array of created CssRule instances
 
 ## getSelected
 
@@ -309,7 +304,7 @@ Returns **Model**
 
 Returns an array of all selected components
 
-Returns **[Array][9]** 
+Returns **[Array][10]** 
 
 ## getSelectedToStyle
 
@@ -327,10 +322,10 @@ Select a component
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][11])** Component to select
-*   `opts` **[Object][7]?** Options
+*   `el` **(Component | [HTMLElement][12])** Component to select
+*   `opts` **[Object][8]?** Options
 
-    *   `opts.scroll` **[Boolean][8]?** Scroll canvas to the selected element
+    *   `opts.scroll` **[Boolean][9]?** Scroll canvas to the selected element
 
 ### Examples
 
@@ -349,7 +344,7 @@ Add component to selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][11] | [Array][9])** Component to select
+*   `el` **(Component | [HTMLElement][12] | [Array][10])** Component to select
 
 ### Examples
 
@@ -365,7 +360,7 @@ Remove component from selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][11] | [Array][9])** Component to select
+*   `el` **(Component | [HTMLElement][12] | [Array][10])** Component to select
 
 ### Examples
 
@@ -381,7 +376,7 @@ Toggle component selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][11] | [Array][9])** Component to select
+*   `el` **(Component | [HTMLElement][12] | [Array][10])** Component to select
 
 ### Examples
 
@@ -413,7 +408,7 @@ change the canvas to the proper width
 
 ### Parameters
 
-*   `name` **[string][6]** Name of the device
+*   `name` **[string][7]** Name of the device
 
 ### Examples
 
@@ -435,7 +430,7 @@ console.log(device);
 // 'Tablet'
 ```
 
-Returns **[string][6]** Device name
+Returns **[string][7]** Device name
 
 ## runCommand
 
@@ -443,8 +438,8 @@ Execute command
 
 ### Parameters
 
-*   `id` **[string][6]** Command ID
-*   `options` **[Object][7]** Custom options (optional, default `{}`)
+*   `id` **[string][7]** Command ID
+*   `options` **[Object][8]** Custom options (optional, default `{}`)
 
 ### Examples
 
@@ -460,8 +455,8 @@ Stop the command if stop method was provided
 
 ### Parameters
 
-*   `id` **[string][6]** Command ID
-*   `options` **[Object][7]** Custom options (optional, default `{}`)
+*   `id` **[string][7]** Command ID
+*   `options` **[Object][8]** Custom options (optional, default `{}`)
 
 ### Examples
 
@@ -477,9 +472,9 @@ Store data to the current storage
 
 ### Parameters
 
-*   `clb` **[Function][12]** Callback function
+*   `clb` **[Function][13]** Callback function
 
-Returns **[Object][7]** Stored data
+Returns **[Object][8]** Stored data
 
 ## storeData
 
@@ -492,7 +487,7 @@ console.log(editor.storeData());
 // { pages: [...], styles: [...], ... }
 ```
 
-Returns **[Object][7]** 
+Returns **[Object][8]** 
 
 ## load
 
@@ -500,9 +495,9 @@ Load data from the current storage
 
 ### Parameters
 
-*   `clb` **[Function][12]** Callback function
+*   `clb` **[Function][13]** Callback function
 
-Returns **[Object][7]** Stored data
+Returns **[Object][8]** Stored data
 
 ## loadData
 
@@ -510,7 +505,7 @@ Load data from the JSON data object
 
 ### Parameters
 
-*   `data` **[Object][7]** Data to load
+*   `data` **[Object][8]** Data to load
 
 ### Examples
 
@@ -518,21 +513,21 @@ Load data from the JSON data object
 editor.loadData({ pages: [...], styles: [...], ... })
 ```
 
-Returns **[Object][7]** Loaded object
+Returns **[Object][8]** Loaded object
 
 ## getContainer
 
 Returns container element. The one which was indicated as 'container'
 on init method
 
-Returns **[HTMLElement][11]** 
+Returns **[HTMLElement][12]** 
 
 ## getDirtyCount
 
 Return the count of changes made to the content and not yet stored.
 This count resets at any `store()`
 
-Returns **[number][13]** 
+Returns **[number][14]** 
 
 ## refresh
 
@@ -545,9 +540,9 @@ refresh you'll get misleading position of tools
 ### Parameters
 
 *   `opts`  
-*   `options` **[Object][7]?** Options
+*   `options` **[Object][8]?** Options
 
-    *   `options.tools` **[Boolean][8]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
+    *   `options.tools` **[Boolean][9]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
 
 ## setCustomRte
 
@@ -555,7 +550,7 @@ Replace the built-in Rich Text Editor with a custom one.
 
 ### Parameters
 
-*   `obj` **[Object][7]** Custom RTE Interface
+*   `obj` **[Object][8]** Custom RTE Interface
 
 ### Examples
 
@@ -595,7 +590,7 @@ custom parser, pass `null` as the argument
 
 ### Parameters
 
-*   `parser` **([Function][12] | null)** Parser function
+*   `parser` **([Function][13] | null)** Parser function
 
 ### Examples
 
@@ -617,11 +612,11 @@ Returns **this**
 ## setDragMode
 
 Change the global drag mode of components.
-To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][14]
+To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][15]
 
 ### Parameters
 
-*   `value` **[String][6]** Drag mode, options: 'absolute' | 'translate'
+*   `value` **[String][7]** Drag mode, options: 'absolute' | 'translate'
 
 Returns **this** 
 
@@ -632,10 +627,10 @@ Trigger event log message
 ### Parameters
 
 *   `msg` **any** Message to log
-*   `opts` **[Object][7]** Custom options (optional, default `{}`)
+*   `opts` **[Object][8]** Custom options (optional, default `{}`)
 
-    *   `opts.ns` **[String][6]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
-    *   `opts.level` **[String][6]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
+    *   `opts.ns` **[String][7]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
+    *   `opts.level` **[String][7]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
 
 ### Examples
 
@@ -657,11 +652,11 @@ Translate label
 ### Parameters
 
 *   `args` **...any** 
-*   `key` **[String][6]** Label to translate
-*   `opts` **[Object][7]?** Options for the translation
+*   `key` **[String][7]** Label to translate
+*   `opts` **[Object][8]?** Options for the translation
 
-    *   `opts.params` **[Object][7]?** Params for the translation
-    *   `opts.noWarn` **[Boolean][8]?** Avoid warnings in case of missing resources
+    *   `opts.params` **[Object][8]?** Params for the translation
+    *   `opts.noWarn` **[Boolean][9]?** Avoid warnings in case of missing resources
 
 ### Examples
 
@@ -673,7 +668,7 @@ editor.t('msg2', { params: { test: 'hello' } });
 editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
 ```
 
-Returns **[String][6]** 
+Returns **[String][7]** 
 
 ## on
 
@@ -681,8 +676,8 @@ Attach event
 
 ### Parameters
 
-*   `event` **[string][6]** Event name
-*   `callback` **[Function][12]** Callback function
+*   `event` **[string][7]** Event name
+*   `callback` **[Function][13]** Callback function
 
 Returns **this** 
 
@@ -692,8 +687,8 @@ Attach event and detach it after the first run
 
 ### Parameters
 
-*   `event` **[string][6]** Event name
-*   `callback` **[Function][12]** Callback function
+*   `event` **[string][7]** Event name
+*   `callback` **[Function][13]** Callback function
 
 Returns **this** 
 
@@ -703,8 +698,8 @@ Detach event
 
 ### Parameters
 
-*   `event` **[string][6]** Event name
-*   `callback` **[Function][12]** Callback function
+*   `event` **[string][7]** Event name
+*   `callback` **[Function][13]** Callback function
 
 Returns **this** 
 
@@ -714,7 +709,7 @@ Trigger event
 
 ### Parameters
 
-*   `event` **[string][6]** Event to trigger
+*   `event` **[string][7]** Event to trigger
 
 Returns **this** 
 
@@ -726,7 +721,7 @@ Destroy the editor
 
 Render editor
 
-Returns **[HTMLElement][11]** 
+Returns **[HTMLElement][12]** 
 
 ## html
 
@@ -734,8 +729,8 @@ Print safe HTML by using ES6 tagged template strings.
 
 ### Parameters
 
-*   `literals` **[Array][9]<[String][6]>** 
-*   `substs` **[Array][9]<[String][6]>** 
+*   `literals` **[Array][10]<[String][7]>** 
+*   `substs` **[Array][10]<[String][7]>** 
 
 ### Examples
 
@@ -746,32 +741,34 @@ const safeStr = '<b>Hello</b>';
 const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
 ```
 
-Returns **[String][6]** 
+Returns **[String][7]** 
 
 [1]: https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js
 
-[2]: /api/modal_dialog.html
+[2]: /api/assets.html
+
+[3]: /api/modal_dialog.html
 
-[3]: /api/device_manager.html
+[4]: /api/device_manager.html
 
-[4]: /api/parser.html
+[5]: /api/parser.html
 
-[5]: /api/pages.html
+[6]: /api/pages.html
 
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[10]: em#setComponents
+[11]: em#setComponents
 
-[11]: https://developer.mozilla.org/docs/Web/HTML/Element
+[12]: https://developer.mozilla.org/docs/Web/HTML/Element
 
-[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 
-[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-[14]: https://github.com/artf/grapesjs/issues/1936
+[15]: https://github.com/artf/grapesjs/issues/1936

src/asset_manager/index.js

@@ -113,7 +113,11 @@ export default () => {
     /**
      * Open the asset manager.
      * @param {Object} [options] Options for the asset manager.
-     * @param {Array<String} [options.types=['image']] Types of assets to show.
+     * @param {Array<String>} [options.types=['image']] Types of assets to show.
+     * @example
+     * assetManager.open();
+     * // with your custom types (you should have assets with those types declared)
+     * assetManager.open({ types: ['doc'] });
      */
     open(options = {}) {
       const cmd = this.em.get('Commands');
@@ -122,6 +126,8 @@ export default () => {
 
     /**
      * Close the asset manager.
+     * @example
+     * assetManager.close();
      */
     close() {
       const cmd = this.em.get('Commands');

src/asset_manager/model/Asset.js

@@ -1,32 +1,53 @@
-import Backbone from 'backbone';
+import { result } from 'underscore';
+import { Model } from 'common';
 
-export default Backbone.Model.extend({
-  idAttribute: 'src',
-
-  defaults: {
-    type: '',
-    src: ''
-  },
+/**
+ * @property {String} type Asset type, eg. 'image'.
+ * @property {String} src Asset URL, eg. 'https://.../image.png'.
+ */
+export default class Asset extends Model {
+  defaults() {
+    return {
+      type: '',
+      src: ''
+    };
+  }
 
   /**
-   * Get filename of the asset
-   * @return  {string}
-   * @private
+   * Get filename of the asset (based on `src`).
+   * @returns {String}
+   * @example
+   * // Asset: { src: 'https://.../image.png' }
+   * asset.getFilename(); // -> 'image.png'
+   * // Asset: { src: 'https://.../image' }
+   * asset.getFilename(); // -> 'image'
    * */
   getFilename() {
     return this.get('src')
       .split('/')
-      .pop();
-  },
+      .pop()
+      .split('?')
+      .shift();
+  }
 
   /**
-   * Get extension of the asset
-   * @return  {string}
-   * @private
+   * Get extension of the asset (based on `src`).
+   * @returns {String}
+   * @example
+   * // Asset: { src: 'https://.../image.png' }
+   * asset.getExtension(); // -> 'png'
+   * // Asset: { src: 'https://.../image' }
+   * asset.getExtension(); // -> ''
    * */
   getExtension() {
     return this.getFilename()
       .split('.')
       .pop();
   }
-});
+}
+
+Asset.prototype.idAttribute = 'src';
+
+Asset.getDefaults = function() {
+  return result(this.prototype, 'defaults');
+};

src/asset_manager/model/AssetImage.js

@@ -1,11 +1,13 @@
 import Asset from './Asset';
 
-export default Asset.extend({
-  defaults: {
-    ...Asset.prototype.defaults,
-    type: 'image',
-    unitDim: 'px',
-    height: 0,
-    width: 0
+export default class AssetImage extends Asset {
+  defaults() {
+    return {
+      ...Asset.getDefaults(),
+      type: 'image',
+      unitDim: 'px',
+      height: 0,
+      width: 0
+    };
   }
-});
+}