diff --git a/docs/api/component.md b/docs/api/component.md index e28098763..bcd369e51 100644 --- a/docs/api/component.md +++ b/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 diff --git a/docs/api/components.md b/docs/api/components.md index 9ffb1fdcb..f275cb807 100644 --- a/docs/api/components.md +++ b/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 diff --git a/docs/api/editor.md b/docs/api/editor.md index af051b0ed..eed39dbf6 100644 --- a/docs/api/editor.md +++ b/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 diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index 08f4aa30f..7545c3deb 100644 --- a/docs/api/style_manager.md +++ b/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', { - model: {}, - view: {}, - isType: (value) => { - if (value && value.type == 'my-type') { - return value; +styleManager.addType('my-custom-prop', { + create({ props, change }) { + const el = document.createElement('div'); + el.innerHTML = ''; + const inputEl = el.querySelector('.my-input'); + 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. } - }, }) ``` diff --git a/src/style_manager/index.js b/src/style_manager/index.js index feea8bee4..0e69e4d7d 100644 --- a/src/style_manager/index.js +++ b/src/style_manager/index.js @@ -314,31 +314,28 @@ export default () => { * passed entity *@example * styleManager.addType('my-custom-prop', { - create({ props, change }) { - const el = document.createElement('div'); - el.innerHTML = ''; - const inputEl = el.querySelector('.my-input'); - 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. - } - }) + * create({ props, change }) { + * const el = document.createElement('div'); + * el.innerHTML = ''; + * const inputEl = el.querySelector('.my-input'); + * 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. + * } + *}) */ addType(id, definition) { properties.addType(id, definition);