Update API docs

docs/api/component.md

@@ -216,6 +216,7 @@ Update attributes of the component
 
 -   `attrs` **[Object][2]** Key value attributes
 -   `opts`   (optional, default `{}`)
+-   `options` **[Object][2]** Options for the model update
 
 ### Examples
 
@@ -232,6 +233,8 @@ Add attributes to the component
 ### Parameters
 
 -   `attrs` **[Object][2]** Key value attributes
+-   `opts`   (optional, default `{}`)
+-   `options` **[Object][2]** Options for the model update
 
 ### Examples
 

docs/api/components.md

@@ -119,6 +119,7 @@ as 'domComponents.getComponents().add(...)'
     -   `component.content` **[string][15]** String inside component (optional, default `''`)
     -   `component.style` **[Object][12]** Style object (optional, default `{}`)
     -   `component.attributes` **[Object][12]** Attribute object (optional, default `{}`)
+-   `opt` **[Object][12]** the options object to be used by the [Components.add][getComponents][3] method (optional, default `{}`)
 
 ### Examples
 

docs/api/editor.md

@@ -186,6 +186,7 @@ Set components inside editor's canvas. This method overrides actual components
 ### Parameters
 
 -   `components` **([Array][5]<[Object][3]> | [Object][3] \| [string][2])** HTML string or components model
+-   `opt` **[Object][3]** the options object to be used by the [setComponents][em#setComponents][6] method (optional, default `{}`)
 
 ### Examples
 
@@ -240,6 +241,7 @@ Set style inside editor's canvas. This method overrides actual style
 ### Parameters
 
 -   `style` **([Array][5]<[Object][3]> | [Object][3] \| [string][2])** CSS string or style model
+-   `opt` **[Object][3]** the options object to be used by the [setStyle][em#setStyle][7] method (optional, default `{}`)
 
 ### Examples
 
@@ -282,7 +284,7 @@ Select a component
 
 ### Parameters
 
--   `el` **(Component | [HTMLElement][6])** Component to select
+-   `el` **(Component | [HTMLElement][8])** Component to select
 -   `opts` **[Object][3]?** Options
     -   `opts.scroll` **[Boolean][4]?** Scroll canvas to the selected element
 
@@ -303,7 +305,7 @@ Add component to selection
 
 ### Parameters
 
--   `el` **(Component | [HTMLElement][6] \| [Array][5])** Component to select
+-   `el` **(Component | [HTMLElement][8] \| [Array][5])** Component to select
 
 ### Examples
 
@@ -319,7 +321,7 @@ Remove component from selection
 
 ### Parameters
 
--   `el` **(Component | [HTMLElement][6] \| [Array][5])** Component to select
+-   `el` **(Component | [HTMLElement][8] \| [Array][5])** Component to select
 
 ### Examples
 
@@ -335,7 +337,7 @@ Toggle component selection
 
 ### Parameters
 
--   `el` **(Component | [HTMLElement][6] \| [Array][5])** Component to select
+-   `el` **(Component | [HTMLElement][8] \| [Array][5])** Component to select
 
 ### Examples
 
@@ -416,7 +418,7 @@ Store data to the current storage
 
 ### Parameters
 
--   `clb` **[Function][7]** Callback function
+-   `clb` **[Function][9]** Callback function
 
 Returns **[Object][3]** Stored data
 
@@ -426,7 +428,7 @@ Load data from the current storage
 
 ### Parameters
 
--   `clb` **[Function][7]** Callback function
+-   `clb` **[Function][9]** Callback function
 
 Returns **[Object][3]** Stored data
 
@@ -435,14 +437,14 @@ Returns **[Object][3]** Stored data
 Returns container element. The one which was indicated as 'container'
 on init method
 
-Returns **[HTMLElement][6]** 
+Returns **[HTMLElement][8]** 
 
 ## getDirtyCount
 
 Return the count of changes made to the content and not yet stored.
 This count resets at any `store()`
 
-Returns **[number][8]** 
+Returns **[number][10]** 
 
 ## setCustomRte
 
@@ -490,7 +492,7 @@ custom parser, pass `null` as the argument
 
 ### Parameters
 
--   `parser` **([Function][7] | null)** Parser function
+-   `parser` **([Function][9] | null)** Parser function
 
 ### Examples
 
@@ -512,7 +514,7 @@ Returns **this**
 ## setDragMode
 
 Change the global drag mode of components.
-To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][9]
+To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][11]
 
 ### Parameters
 
@@ -575,7 +577,7 @@ Attach event
 ### Parameters
 
 -   `event` **[string][2]** Event name
--   `callback` **[Function][7]** Callback function
+-   `callback` **[Function][9]** Callback function
 
 Returns **this** 
 
@@ -586,7 +588,7 @@ Attach event and detach it after the first run
 ### Parameters
 
 -   `event` **[string][2]** Event name
--   `callback` **[Function][7]** Callback function
+-   `callback` **[Function][9]** Callback function
 
 Returns **this** 
 
@@ -597,7 +599,7 @@ Detach event
 ### Parameters
 
 -   `event` **[string][2]** Event name
--   `callback` **[Function][7]** Callback function
+-   `callback` **[Function][9]** Callback function
 
 Returns **this** 
 
@@ -619,7 +621,7 @@ Destroy the editor
 
 Render editor
 
-Returns **[HTMLElement][6]** 
+Returns **[HTMLElement][8]** 
 
 [1]: https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js
 
@@ -631,10 +633,14 @@ Returns **[HTMLElement][6]**
 
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[6]: https://developer.mozilla.org/docs/Web/HTML/Element
+[6]: em#setComponents
 
-[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[7]: em#setStyle
 
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[8]: https://developer.mozilla.org/docs/Web/HTML/Element
 
-[9]: https://github.com/artf/grapesjs/issues/1936
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+
+[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+
+[11]: https://github.com/artf/grapesjs/issues/1936

docs/api/style_manager.md

@@ -161,7 +161,7 @@ Get property by its CSS name and sector id
 ### Parameters
 
 -   `sectorId` **[string][17]** Sector id
--   `name` **[string][17]** CSS property name, eg. 'min-height'
+-   `name` **[string][17]** CSS property name (or id), eg. 'min-height'
 
 ### Examples
 
@@ -233,14 +233,28 @@ Add new property type
 ### Examples
 
 ```javascript
-styleManager.addType('my-type', {
+styleManager.addType('my-custom-prop', {
- model: {},
+   create({ props, change }) {
- view: {},
+     const el = document.createElement('div');
- isType: (value) => {
+     el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
-   if (value && value.type == 'my-type') {
+     const inputEl = el.querySelector('.my-input');
-     return value;
+     inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit
+     inputEl.addEventListener('input', event => change({ event, complete: false }));
+     return el;
+   },
+   emit({ props, updateStyle }, { event, complete }) {
+     const { value } = event.target;
+     const valueRes = value + 'px';
+     // Pass a string value for the exact CSS property or an object containing multiple properties
+     // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
+     updateStyle(valueRes, { complete });
+   },
+   update({ value, el }) {
+     el.querySelector('.my-input').value = parseInt(value, 10);
+   },
+   destroy() {
+     // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.
    }
- },
 })
 ```
 

src/style_manager/index.js

@@ -314,31 +314,28 @@ export default () => {
      *                            passed entity
      *@example
      * styleManager.addType('my-custom-prop', {
-        create({ props, change }) {
+     *    create({ props, change }) {
-          const el = document.createElement('div');
+     *      const el = document.createElement('div');
-          el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
+     *      el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
-          const inputEl = el.querySelector('.my-input');
+     *      const inputEl = el.querySelector('.my-input');
-          inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit
+     *      inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit
-          inputEl.addEventListener('input', event => change({ event, complete: false }));
+     *      inputEl.addEventListener('input', event => change({ event, complete: false }));
-          return el;
+     *      return el;
-        },
+     *    },
-
+     *    emit({ props, updateStyle }, { event, complete }) {
-        emit({ props, updateStyle }, { event, complete }) {
+     *      const { value } = event.target;
-          const { value } = event.target;
+     *      const valueRes = value + 'px';
-          const valueRes = value + 'px';
+     *      // Pass a string value for the exact CSS property or an object containing multiple properties
-          // Pass a string value for the exact CSS property or an object containing multiple properties
+     *      // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
-          // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
+     *      updateStyle(valueRes, { complete });
-          updateStyle(valueRes, { complete });
+     *    },
-        },
+     *    update({ value, el }) {
-
+     *      el.querySelector('.my-input').value = parseInt(value, 10);
-        update({ value, el }) {
+     *    },
-          el.querySelector('.my-input').value = parseInt(value, 10);
+     *    destroy() {
-        },
+     *      // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.
-
+     *    }
-        destroy() {
+     *})
-          // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.
-        }
-      })
      */
     addType(id, definition) {
       properties.addType(id, definition);