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', {
-   // 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('input', event => change({ event, complete: false }));
-     return el;
-   },
-   // Propagate UI changes up to the targets
-   emit({ props, updateStyle }, { event, complete }) {
-     const { value } = event.target;
-     const valueRes = value + 'px';
-     // Pass a string value for the current CSS property or an object containing multiple properties
-     updateStyle(valueRes, { complete });
-     // Update target style with multiple properties
-     // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
-   },
-   // Update UI (eg. when the target is changed)
-   update({ value, el }) {
-     el.querySelector('.my-input').value = parseInt(value, 10);
-   },
-   // Clean the memory from side effects if necessary (eg. event listeners)
-   destroy() {
-   }
+const customType = (editor) => {
+  editor.StyleManager.addType('my-custom-prop', {
+    // Create UI
+    create({ props, change }) {
+      const el = document.createElement('div');
+      el.innerHTML = `<input type="range" class="my-input" min="${props.min}" max="${props.max}"/>`;
+      const inputEl = el.querySelector('.my-input');
+      inputEl.addEventListener('change', event => change({ event })); // `change` will trigger the emit
+      inputEl.addEventListener('input', event => change({ event, partial: true }));
+      return el;
+    },
+    // Propagate UI changes up to the targets
+    emit({ props, updateStyle }, { event, partial }) {
+      const { value } = event.target;
+      updateStyle(`${value}px`, { partial });
+    },
+    // Update UI (eg. when the target is changed)
+    update({ value, el }) {
+      el.querySelector('.my-input').value = parseInt(value, 10);
+    },
+    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
+    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
-     *                            `model` (business logic), `view` (presentation logic)
-     *                            and `isType` function which recognize the type of the
-     *                            passed entity
-     *@example
+     * @param {Object} definition Definition of the type.
+     * @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('input', event => change({ event, complete: false }));
+     *      inputEl.addEventListener('change', event => change({ event }));
+     *      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';
-     *      // 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 });
+     *      updateStyle(`${value}px`, { partial });
      *    },
+     *    // Update UI (eg. when the target is changed)
      *    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.
-     *    }
+     *    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
+     *    destroy() {}
      *})
      */
     addType(id, definition) {