Update device docs

docs/api.js

@@ -36,9 +36,11 @@ async function generateDocs () {
     ['parser/index.js', 'parser.md'],
   ].map(async (file) =>
     documentation.build([`${srcRoot}/${file[0]}`], { shallow: true })
-      .then(documentation.formats.md)
+      .then(cm => documentation.formats.md(cm, /*{ markdownToc: true }*/))
       .then(output => {
-        const res = output.replace(/\*\*\\\[/g, '**[');
+        const res = output
+          .replace(/\*\*\\\[/g, '**[')
+          .replace('**Extends Model**', '');
         fs.writeFileSync(`${docRoot}/api/${file[1]}`, res);
         log('Created', file[1]);
       })

docs/api/device.md

@@ -1,9 +1,23 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
-## getWidth
+## Device
+
+
+
+### Properties
+
+*   `name` **[String][1]?** Device type, eg. `Mobile`
+*   `width` **[String][1]?** Width to set for the editor iframe, eg. '900px'
+*   `height` **[String][1]?** Height to set for the editor iframe, eg. '600px'
+*   `widthMedia` **[String][1]?** The width which will be used in media queries, If empty the width will be used
+*   `priority` **[Number][2]?** Setup the order of media queries
+
+### getWidth
 
 Get device width.
 
 Returns **[String][1]** 
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

docs/api/device_manager.md

@@ -36,24 +36,28 @@ const deviceManager = editor.Devices;
 
 ## add
 
-Add new device.
+Add new device
 
 ### Parameters
 
-*   `id` **[String][5]** Device id
+*   `props` **[Object][5]** Device properties
-*   `width` **[String][5]** Width of the device
+*   `options`   (optional, default `{}`)
-*   `options` **[Object][6]?** Custom options (optional, default `{}`)
 
 ### Examples
 
 ```javascript
-deviceManager.add('tablet', '900px');
+const device1 = deviceManager.add({
-deviceManager.add('tablet2', '900px', {
+ // Without an explicit ID, the `name` will be taken. In case of missing `name`, a random ID will be created.
- height: '300px',
+ id: 'tablet',
- // At first, GrapesJS tries to localize the name by device id.
+ name: 'Tablet',
- // In case is not found, the `name` property is used (or `id` if name is missing)
+ width: '900px', // This width will be applied on the canvas frame and for the CSS media
+});
+const device2 = deviceManager.add({
+ id: 'tablet2',
  name: 'Tablet 2',
- widthMedia: '810px', // the width that will be used for the CSS media
+ width: '800px', // This width will be applied on the canvas frame
+ widthMedia: '810px', // This width that will be used for the CSS media
+ height: '600px', // Height will be applied on the canvas frame
 });
 ```
 
@@ -61,11 +65,11 @@ Returns **[Device]** Added device
 
 ## get
 
-Return device by name.
+Return device by name
 
 ### Parameters
 
-*   `name` **[String][5]** Name of the device
+*   `name` **[String][6]** Name of the device
 
 ### Examples
 
@@ -99,6 +103,6 @@ Returns **Collection**
 
 [4]: #getAll
 
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

src/device_manager/model/Device.js

@@ -1,21 +1,20 @@
 import { Model } from 'backbone';
 
+/**
+ * @typedef Component
+ * @property {String} [name=''] Device type, eg. `Mobile`
+ * @property {String} [width] Width to set for the editor iframe, eg. '900px'
+ * @property {String} [height=''] Height to set for the editor iframe, eg. '600px'
+ * @property {String} [widthMedia=''] The width which will be used in media queries, If empty the width will be used
+ * @property {Number} [priority=null] Setup the order of media queries
+ */
 export default class Device extends Model {
   defaults() {
     return {
       name: '',
-
-      // Width to set for the editor iframe
       width: null,
-
-      // Height to set for the editor iframe
       height: '',
-
-      // The width which will be used in media queries,
-      // If empty the width will be used
       widthMedia: null,
-
-      // Setup the order of media queries
       priority: null
     };
   }