Update Adding new types doc

docs/modules/Style-manager.md

@@ -484,32 +484,51 @@ The default types should cover most of the common styling properties but in case
 In order to add a new type you have to use the `styleManager.addType` API call and indicate all the necessary methods to make it work properly with the editor. Here an example of implementation by using the native `range` input.
 
 ```js
-styleManager.addType('my-custom-prop', {
+const customType = (editor) => {
-   // Create UI
+  editor.StyleManager.addType('my-custom-prop', {
-   create({ props, change }) {
+    // Create UI
-     const el = document.createElement('div');
+    create({ props, change }) {
-     el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
+      const el = document.createElement('div');
-     const inputEl = el.querySelector('.my-input');
+      el.innerHTML = `<input type="range" class="my-input" min="${props.min}" max="${props.max}"/>`;
-     inputEl.addEventListener('change', event => change({ event })); // `change` will trigger the emit
+      const inputEl = el.querySelector('.my-input');
-     inputEl.addEventListener('input', event => change({ event, complete: false }));
+      inputEl.addEventListener('change', event => change({ event })); // `change` will trigger the emit
-     return el;
+      inputEl.addEventListener('input', event => change({ event, partial: true }));
-   },
+      return el;
-   // Propagate UI changes up to the targets
+    },
-   emit({ props, updateStyle }, { event, complete }) {
+    // Propagate UI changes up to the targets
-     const { value } = event.target;
+    emit({ props, updateStyle }, { event, partial }) {
-     const valueRes = value + 'px';
+      const { value } = event.target;
-     // Pass a string value for the current CSS property or an object containing multiple properties
+      updateStyle(`${value}px`, { partial });
-     updateStyle(valueRes, { complete });
+    },
-     // Update target style with multiple properties
+    // Update UI (eg. when the target is changed)
-     // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
+    update({ value, el }) {
-   },
+      el.querySelector('.my-input').value = parseInt(value, 10);
-   // Update UI (eg. when the target is changed)
+    },
-   update({ value, el }) {
+    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
-     el.querySelector('.my-input').value = parseInt(value, 10);
+    destroy() {
-   },
+    },
-   // Clean the memory from side effects if necessary (eg. event listeners)
+  });
-   destroy() {
+};
-   }
+
+grapesjs.init({
+  // ...
+  plugins: [customType],
+  styleManager: {
+    sectors: [
+      {
+        name: 'My sector',
+        properties: [
+          {
+            type: 'my-custom-prop',
+            property: 'font-size',
+            default: '15',
+            min: 10,
+            max: 70,
+          },
+        ],
+      },
+    ],
+  },
 })
 ```
 

src/style_manager/index.js

@@ -512,33 +512,29 @@ export default () => {
     /**
      * Add new property type
      * @param {string} id Type ID
-     * @param {Object} definition Definition of the type. Each definition contains
+     * @param {Object} definition Definition of the type.
-     *                            `model` (business logic), `view` (presentation logic)
+     * @example
-     *                            and `isType` function which recognize the type of the
-     *                            passed entity
-     *@example
      * styleManager.addType('my-custom-prop', {
+     *    // Create UI
      *    create({ props, change }) {
      *      const el = document.createElement('div');
      *      el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
      *      const inputEl = el.querySelector('.my-input');
-     *      inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit
+     *      inputEl.addEventListener('change', event => change({ event }));
-     *      inputEl.addEventListener('input', event => change({ event, complete: false }));
+     *      inputEl.addEventListener('input', event => change({ event, partial: true }));
      *      return el;
      *    },
-     *    emit({ props, updateStyle }, { event, complete }) {
+     *    // Propagate UI changes up to the targets
+     *    emit({ props, updateStyle }, { event, partial }) {
      *      const { value } = event.target;
-     *      const valueRes = value + 'px';
+     *      updateStyle(`${value}px`, { partial });
-     *      // 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 UI (eg. when the target is changed)
      *    update({ value, el }) {
      *      el.querySelector('.my-input').value = parseInt(value, 10);
      *    },
-     *    destroy() {
+     *    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
-     *      // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.
+     *    destroy() {}
-     *    }
      *})
      */
     addType(id, definition) {