@pie-element/graphing 5.12.1-next.5 → 5.12.2-next.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.12.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/graphing@5.12.0...@pie-element/graphing@5.12.1) (2024-04-01)
+
+
+### Bug Fixes
+
+* check for pie-author when configuration is set PD-3614 ([a40d3d9](https://github.com/pie-framework/pie-elements/commit/a40d3d954486cc782d5e80a7c6120c2912c58b39))
+
+
+
+
+
 # [5.12.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/graphing@5.11.1...@pie-element/graphing@5.12.0) (2024-04-01)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.11.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/graphing-configure@5.11.0...@pie-element/graphing-configure@5.11.1) (2024-04-01)
+
+
+### Bug Fixes
+
+* check for pie-author when configuration is set PD-3614 ([a40d3d9](https://github.com/pie-framework/pie-elements/commit/a40d3d954486cc782d5e80a7c6120c2912c58b39))
+
+
+
+
+
 # [5.11.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/graphing-configure@5.10.1...@pie-element/graphing-configure@5.11.0) (2024-04-01)
 
 

package/configure/lib/index.js

@@ -70,6 +70,16 @@ var GraphLinesConfigure = /*#__PURE__*/function (_HTMLElement) {
     (0, _classCallCheck2["default"])(this, GraphLinesConfigure);
     _this = _super.call(this);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetModelAfterConfigurationIsSet", function () {
+      // In environments that use pie-player-components, model is set before configuration.
+      // This is the reason why sometimes the model gets altered non-reversible
+      // (altered using default configuration instead of client configuration, because at that point client configuration was not set yet)
+      // Therefore, in such environments, we will make sure to keep a modelCopy (initialised in set model) and use it to reset
+      // the model in set configuration (resetModelAfterConfigurationIsSet) if set configuration is ever called
+      var pieAuthors = document.querySelectorAll('pie-author');
+      _this.hasPlayerAsParent = Array.from(pieAuthors).some(function (author) {
+        return author.contains((0, _assertThisInitialized2["default"])(_this));
+      });
+
       if (_this.hasPlayerAsParent) {
         if (_this._modelCopy) {
           _this._model = _this._modelCopy;
@@ -99,16 +109,7 @@ var GraphLinesConfigure = /*#__PURE__*/function (_HTMLElement) {
       _this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
     });
     _this._model = GraphLinesConfigure.createDefaultModel();
-    _this._configuration = _defaults["default"].configuration; // In environments that use pie-player-components, model is set before configuration.
-    // This is the reason why sometimes the model gets altered non-reversible
-    // (altered using default configuration instead of client configuration, because at that point client configuration was not set yet)
-    // Therefore, in such environments, we will make sure to keep a modelCopy (initialised in set model) and use it to reset
-    // the model in set configuration (resetModelAfterConfigurationIsSet) if set configuration is ever called
-
-    var pieAuthors = document.querySelectorAll('pie-author');
-    _this.hasPlayerAsParent = Array.from(pieAuthors).some(function (author) {
-      return author.contains((0, _assertThisInitialized2["default"])(_this));
-    });
+    _this._configuration = _defaults["default"].configuration;
     return _this;
   }
 

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","sortedAnswers","answers","Object","keys","sort","reduce","result","key","GraphLinesConfigure","hasPlayerAsParent","_modelCopy","_model","model","_render","dispatchEvent","ModelUpdatedEvent","config","_configuration","handler","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","defaultValues","configuration","pieAuthors","document","querySelectorAll","Array","from","some","author","contains","m","c","resetModelAfterConfigurationIsSet","language","enabled","languageChoices","options","length","value","settings","InsertSoundEvent","DeleteSoundEvent","el","React","createElement","Configure","onModelChanged","onConfigurationChanged","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","bind","onDeleteSound","ReactDOM","render","HTMLElement","normalizedModel","domain","defaultTool","graph","range","standardGrid","toolbarTools","toolbarToolsNoLabel","filter","tool","normalizedDefaultTool","correctAnswer","min","max","step","labelStep","height","width"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Configure from './configure';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\nimport debug from 'debug';\nimport defaultValues from './defaults';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst log = debug('pie-elements:graphing:configure');\n\n// this function is implemented in controller as well\nconst sortedAnswers = (answers) =>\n  Object.keys(answers || {})\n    .sort()\n    .reduce((result, key) => {\n      if (key !== 'correctAnswer') {\n        result[key] = answers[key];\n      }\n\n      return result;\n    }, {});\n\nexport default class GraphLinesConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => {\n    const normalizedModel = { ...defaultValues.model, ...model };\n    const {\n      answers = {},\n      domain = {},\n      defaultTool,\n      graph = {},\n      range = {},\n      standardGrid,\n      toolbarTools,\n    } = normalizedModel;\n\n    // added support for models without defaultTool defined; also used in packages/graphing/controller/src/index.js\n    const toolbarToolsNoLabel = (toolbarTools || []).filter((tool) => tool !== 'label');\n    const normalizedDefaultTool = defaultTool || (toolbarToolsNoLabel.length && toolbarToolsNoLabel[0]) || '';\n\n    return {\n      ...normalizedModel,\n      answers:\n        (answers &&\n          answers.correctAnswer && {\n            correctAnswer: answers.correctAnswer,\n            ...sortedAnswers(answers),\n          }) ||\n        answers,\n      defaultTool: normalizedDefaultTool,\n      range:\n        (standardGrid && {\n          ...range,\n          min: domain.min,\n          max: domain.max,\n          step: domain.step,\n          labelStep: domain.labelStep,\n        }) ||\n        range,\n      graph: (standardGrid && { ...graph, height: graph.width }) || graph,\n    };\n  };\n\n  constructor() {\n    super();\n    this._model = GraphLinesConfigure.createDefaultModel();\n    this._configuration = defaultValues.configuration;\n\n    // In environments that use pie-player-components, model is set before configuration.\n    // This is the reason why sometimes the model gets altered non-reversible\n    // (altered using default configuration instead of client configuration, because at that point client configuration was not set yet)\n    // Therefore, in such environments, we will make sure to keep a modelCopy (initialised in set model) and use it to reset\n      // the model in set configuration (resetModelAfterConfigurationIsSet) if set configuration is ever called\n    const pieAuthors = document.querySelectorAll('pie-author');\n    this.hasPlayerAsParent = Array.from(pieAuthors).some(author => author.contains(this));\n  }\n\n  set model(m) {\n    this._model = GraphLinesConfigure.createDefaultModel(m);\n    this._modelCopy = cloneDeep(this._model);\n\n    this._render();\n  }\n\n  resetModelAfterConfigurationIsSet = () => {\n    if (this.hasPlayerAsParent) {\n      if (this._modelCopy) {\n        this._model = this._modelCopy;\n      } else {\n        delete this._modelCopy;\n      }\n    }\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n\n    this.resetModelAfterConfigurationIsSet();\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    //TODO: add logic in controller and add tests\n    if (c.language?.enabled) {\n      if (c.languageChoices?.options?.length) {\n        this._model.language = c.languageChoices.options[0].value;\n      }\n    } else {\n      if (c.language.settings) {\n        if (this._model.language) {\n          this._configuration.language.enabled = true;\n        }\n      } else {\n        delete this._model.language;\n      }\n    }\n\n    this._render();\n  }\n\n  onModelChanged = (model) => {\n    this._model = model;\n    this._render();\n\n    log('[onModelChanged]: ', this._model);\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model));\n  };\n\n  onConfigurationChanged = (config) => {\n    this._configuration = config;\n    this._render();\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    if (this._model) {\n      const el = React.createElement(Configure, {\n        onModelChanged: this.onModelChanged,\n        onConfigurationChanged: this.onConfigurationChanged,\n        model: this._model,\n        configuration: this._configuration,\n        imageSupport: {\n          add: this.insertImage,\n          delete: this.onDeleteImage,\n        },\n        uploadSoundSupport: {\n          add: this.insertSound.bind(this),\n          delete: this.onDeleteSound.bind(this),\n        },\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","sortedAnswers","answers","Object","keys","sort","reduce","result","key","GraphLinesConfigure","pieAuthors","document","querySelectorAll","hasPlayerAsParent","Array","from","some","author","contains","_modelCopy","_model","model","_render","dispatchEvent","ModelUpdatedEvent","config","_configuration","handler","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","defaultValues","configuration","m","c","resetModelAfterConfigurationIsSet","language","enabled","languageChoices","options","length","value","settings","InsertSoundEvent","DeleteSoundEvent","el","React","createElement","Configure","onModelChanged","onConfigurationChanged","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","bind","onDeleteSound","ReactDOM","render","HTMLElement","normalizedModel","domain","defaultTool","graph","range","standardGrid","toolbarTools","toolbarToolsNoLabel","filter","tool","normalizedDefaultTool","correctAnswer","min","max","step","labelStep","height","width"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Configure from './configure';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\nimport debug from 'debug';\nimport defaultValues from './defaults';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst log = debug('pie-elements:graphing:configure');\n\n// this function is implemented in controller as well\nconst sortedAnswers = (answers) =>\n  Object.keys(answers || {})\n    .sort()\n    .reduce((result, key) => {\n      if (key !== 'correctAnswer') {\n        result[key] = answers[key];\n      }\n\n      return result;\n    }, {});\n\nexport default class GraphLinesConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => {\n    const normalizedModel = { ...defaultValues.model, ...model };\n    const {\n      answers = {},\n      domain = {},\n      defaultTool,\n      graph = {},\n      range = {},\n      standardGrid,\n      toolbarTools,\n    } = normalizedModel;\n\n    // added support for models without defaultTool defined; also used in packages/graphing/controller/src/index.js\n    const toolbarToolsNoLabel = (toolbarTools || []).filter((tool) => tool !== 'label');\n    const normalizedDefaultTool = defaultTool || (toolbarToolsNoLabel.length && toolbarToolsNoLabel[0]) || '';\n\n    return {\n      ...normalizedModel,\n      answers:\n        (answers &&\n          answers.correctAnswer && {\n            correctAnswer: answers.correctAnswer,\n            ...sortedAnswers(answers),\n          }) ||\n        answers,\n      defaultTool: normalizedDefaultTool,\n      range:\n        (standardGrid && {\n          ...range,\n          min: domain.min,\n          max: domain.max,\n          step: domain.step,\n          labelStep: domain.labelStep,\n        }) ||\n        range,\n      graph: (standardGrid && { ...graph, height: graph.width }) || graph,\n    };\n  };\n\n  constructor() {\n    super();\n    this._model = GraphLinesConfigure.createDefaultModel();\n    this._configuration = defaultValues.configuration;\n  }\n\n  set model(m) {\n    this._model = GraphLinesConfigure.createDefaultModel(m);\n    this._modelCopy = cloneDeep(this._model);\n\n    this._render();\n  }\n\n  resetModelAfterConfigurationIsSet = () => {\n    // In environments that use pie-player-components, model is set before configuration.\n    // This is the reason why sometimes the model gets altered non-reversible\n    // (altered using default configuration instead of client configuration, because at that point client configuration was not set yet)\n    // Therefore, in such environments, we will make sure to keep a modelCopy (initialised in set model) and use it to reset\n    // the model in set configuration (resetModelAfterConfigurationIsSet) if set configuration is ever called\n    const pieAuthors = document.querySelectorAll('pie-author');\n    this.hasPlayerAsParent = Array.from(pieAuthors).some(author => author.contains(this));\n\n    if (this.hasPlayerAsParent) {\n      if (this._modelCopy) {\n        this._model = this._modelCopy;\n      } else {\n        delete this._modelCopy;\n      }\n    }\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n\n    this.resetModelAfterConfigurationIsSet();\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    //TODO: add logic in controller and add tests\n    if (c.language?.enabled) {\n      if (c.languageChoices?.options?.length) {\n        this._model.language = c.languageChoices.options[0].value;\n      }\n    } else {\n      if (c.language.settings) {\n        if (this._model.language) {\n          this._configuration.language.enabled = true;\n        }\n      } else {\n        delete this._model.language;\n      }\n    }\n\n    this._render();\n  }\n\n  onModelChanged = (model) => {\n    this._model = model;\n    this._render();\n\n    log('[onModelChanged]: ', this._model);\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model));\n  };\n\n  onConfigurationChanged = (config) => {\n    this._configuration = config;\n    this._render();\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    if (this._model) {\n      const el = React.createElement(Configure, {\n        onModelChanged: this.onModelChanged,\n        onConfigurationChanged: this.onConfigurationChanged,\n        model: this._model,\n        configuration: this._configuration,\n        imageSupport: {\n          add: this.insertImage,\n          delete: this.onDeleteImage,\n        },\n        uploadSoundSupport: {\n          add: this.insertSound.bind(this),\n          delete: this.onDeleteSound.bind(this),\n        },\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/graphing-configure",
   "private": true,
-  "version": "5.11.0",
+  "version": "5.11.1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",

package/docs/config-schema.json

@@ -50,6 +50,43 @@
               "title": "disabled"
             }
           }
+        },
+        "customPlugins": {
+          "description": "An array of objects that determine custom plugins.\nA custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).\nExample can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.",
+          "type": "array",
+          "items": {
+            "title": "CustomPlugin",
+            "type": "object",
+            "properties": {
+              "event": {
+                "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+                "type": "string",
+                "title": "event"
+              },
+              "iconAlt": {
+                "description": "The alt for the custom button icon",
+                "type": "string",
+                "title": "iconAlt"
+              },
+              "iconType": {
+                "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+                "type": "string",
+                "title": "iconType"
+              },
+              "icon": {
+                "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+                "type": "string",
+                "title": "icon"
+              }
+            },
+            "required": [
+              "event",
+              "icon",
+              "iconAlt",
+              "iconType"
+            ]
+          },
+          "title": "customPlugins"
         }
       }
     },
@@ -665,6 +702,43 @@
                   "title": "disabled"
                 }
               }
+            },
+            "customPlugins": {
+              "description": "An array of objects that determine custom plugins.\nA custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).\nExample can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.",
+              "type": "array",
+              "items": {
+                "title": "CustomPlugin",
+                "type": "object",
+                "properties": {
+                  "event": {
+                    "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+                    "type": "string",
+                    "title": "event"
+                  },
+                  "iconAlt": {
+                    "description": "The alt for the custom button icon",
+                    "type": "string",
+                    "title": "iconAlt"
+                  },
+                  "iconType": {
+                    "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+                    "type": "string",
+                    "title": "iconType"
+                  },
+                  "icon": {
+                    "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+                    "type": "string",
+                    "title": "icon"
+                  }
+                },
+                "required": [
+                  "event",
+                  "icon",
+                  "iconAlt",
+                  "iconType"
+                ]
+              },
+              "title": "customPlugins"
             }
           }
         },
@@ -757,6 +831,43 @@
                   "title": "disabled"
                 }
               }
+            },
+            "customPlugins": {
+              "description": "An array of objects that determine custom plugins.\nA custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).\nExample can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.",
+              "type": "array",
+              "items": {
+                "title": "CustomPlugin",
+                "type": "object",
+                "properties": {
+                  "event": {
+                    "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+                    "type": "string",
+                    "title": "event"
+                  },
+                  "iconAlt": {
+                    "description": "The alt for the custom button icon",
+                    "type": "string",
+                    "title": "iconAlt"
+                  },
+                  "iconType": {
+                    "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+                    "type": "string",
+                    "title": "iconType"
+                  },
+                  "icon": {
+                    "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+                    "type": "string",
+                    "title": "icon"
+                  }
+                },
+                "required": [
+                  "event",
+                  "icon",
+                  "iconAlt",
+                  "iconType"
+                ]
+              },
+              "title": "customPlugins"
             }
           }
         },
@@ -860,6 +971,43 @@
                   "title": "disabled"
                 }
               }
+            },
+            "customPlugins": {
+              "description": "An array of objects that determine custom plugins.\nA custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).\nExample can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.",
+              "type": "array",
+              "items": {
+                "title": "CustomPlugin",
+                "type": "object",
+                "properties": {
+                  "event": {
+                    "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+                    "type": "string",
+                    "title": "event"
+                  },
+                  "iconAlt": {
+                    "description": "The alt for the custom button icon",
+                    "type": "string",
+                    "title": "iconAlt"
+                  },
+                  "iconType": {
+                    "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+                    "type": "string",
+                    "title": "iconType"
+                  },
+                  "icon": {
+                    "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+                    "type": "string",
+                    "title": "icon"
+                  }
+                },
+                "required": [
+                  "event",
+                  "icon",
+                  "iconAlt",
+                  "iconType"
+                ]
+              },
+              "title": "customPlugins"
             }
           }
         },
@@ -1094,6 +1242,43 @@
               "title": "disabled"
             }
           }
+        },
+        "customPlugins": {
+          "description": "An array of objects that determine custom plugins.\nA custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).\nExample can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.",
+          "type": "array",
+          "items": {
+            "title": "CustomPlugin",
+            "type": "object",
+            "properties": {
+              "event": {
+                "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+                "type": "string",
+                "title": "event"
+              },
+              "iconAlt": {
+                "description": "The alt for the custom button icon",
+                "type": "string",
+                "title": "iconAlt"
+              },
+              "iconType": {
+                "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+                "type": "string",
+                "title": "iconType"
+              },
+              "icon": {
+                "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+                "type": "string",
+                "title": "icon"
+              }
+            },
+            "required": [
+              "event",
+              "icon",
+              "iconAlt",
+              "iconType"
+            ]
+          },
+          "title": "customPlugins"
         }
       }
     },
@@ -1108,6 +1293,38 @@
         }
       }
     },
+    "CustomPlugin": {
+      "title": "CustomPlugin",
+      "type": "object",
+      "properties": {
+        "event": {
+          "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+          "type": "string",
+          "title": "event"
+        },
+        "iconAlt": {
+          "description": "The alt for the custom button icon",
+          "type": "string",
+          "title": "iconAlt"
+        },
+        "iconType": {
+          "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+          "type": "string",
+          "title": "iconType"
+        },
+        "icon": {
+          "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+          "type": "string",
+          "title": "icon"
+        }
+      },
+      "required": [
+        "event",
+        "icon",
+        "iconAlt",
+        "iconType"
+      ]
+    },
     "AuthoringConfigProp": {
       "title": "AuthoringConfigProp",
       "type": "object",
@@ -1827,6 +2044,43 @@
                   "title": "disabled"
                 }
               }
+            },
+            "customPlugins": {
+              "description": "An array of objects that determine custom plugins.\nA custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).\nExample can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.",
+              "type": "array",
+              "items": {
+                "title": "CustomPlugin",
+                "type": "object",
+                "properties": {
+                  "event": {
+                    "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+                    "type": "string",
+                    "title": "event"
+                  },
+                  "iconAlt": {
+                    "description": "The alt for the custom button icon",
+                    "type": "string",
+                    "title": "iconAlt"
+                  },
+                  "iconType": {
+                    "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+                    "type": "string",
+                    "title": "iconType"
+                  },
+                  "icon": {
+                    "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+                    "type": "string",
+                    "title": "icon"
+                  }
+                },
+                "required": [
+                  "event",
+                  "icon",
+                  "iconAlt",
+                  "iconType"
+                ]
+              },
+              "title": "customPlugins"
             }
           }
         },

package/docs/config-schema.json.md

@@ -38,6 +38,35 @@ Properties of the `image` object:
 
 Indicates if the plugin is disabled or not
 
+## `customPlugins` (array)
+
+An array of objects that determine custom plugins.
+A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
+Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 # `authoring` (object)
 
 Properties of the `authoring` object:
@@ -473,6 +502,35 @@ Properties of the `image` object:
 
 Indicates if the plugin is disabled or not
 
+### `customPlugins` (array)
+
+An array of objects that determine custom plugins.
+A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
+Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+#### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+#### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+#### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+#### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ## `required` (boolean)
 
 Indicates if the item is required and the value cannot be empty
@@ -541,6 +599,35 @@ Properties of the `image` object:
 
 Indicates if the plugin is disabled or not
 
+### `customPlugins` (array)
+
+An array of objects that determine custom plugins.
+A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
+Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+#### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+#### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+#### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+#### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ## `required` (boolean)
 
 Indicates if the item is required and the value cannot be empty
@@ -617,6 +704,35 @@ Properties of the `image` object:
 
 Indicates if the plugin is disabled or not
 
+### `customPlugins` (array)
+
+An array of objects that determine custom plugins.
+A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
+Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+#### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+#### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+#### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+#### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ## `required` (boolean)
 
 Indicates if the item is required and the value cannot be empty
@@ -800,6 +916,35 @@ Properties of the `image` object:
 
 Indicates if the plugin is disabled or not
 
+### `customPlugins` (array)
+
+An array of objects that determine custom plugins.
+A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
+Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+#### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+#### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+#### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+#### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ## `EditableHtmlButtonConfigure` (object)
 
 Properties of the `EditableHtmlButtonConfigure` object:
@@ -808,6 +953,29 @@ Properties of the `EditableHtmlButtonConfigure` object:
 
 Indicates if the plugin is disabled or not
 
+## `CustomPlugin` (object)
+
+Properties of the `CustomPlugin` object:
+
+### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ## `AuthoringConfigProp` (object)
 
 Properties of the `AuthoringConfigProp` object:
@@ -1310,6 +1478,35 @@ Properties of the `image` object:
 
 Indicates if the plugin is disabled or not
 
+#### `customPlugins` (array)
+
+An array of objects that determine custom plugins.
+A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
+Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+##### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+##### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+##### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+##### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ### `required` (boolean)
 
 Indicates if the item is required and the value cannot be empty

package/docs/pie-schema.json

@@ -1622,6 +1622,43 @@
               "title": "disabled"
             }
           }
+        },
+        "customPlugins": {
+          "description": "An array of objects that determine custom plugins.\nA custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).\nExample can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.",
+          "type": "array",
+          "items": {
+            "title": "CustomPlugin",
+            "type": "object",
+            "properties": {
+              "event": {
+                "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+                "type": "string",
+                "title": "event"
+              },
+              "iconAlt": {
+                "description": "The alt for the custom button icon",
+                "type": "string",
+                "title": "iconAlt"
+              },
+              "iconType": {
+                "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+                "type": "string",
+                "title": "iconType"
+              },
+              "icon": {
+                "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+                "type": "string",
+                "title": "icon"
+              }
+            },
+            "required": [
+              "event",
+              "icon",
+              "iconAlt",
+              "iconType"
+            ]
+          },
+          "title": "customPlugins"
         }
       }
     },
@@ -1636,6 +1673,38 @@
         }
       }
     },
+    "CustomPlugin": {
+      "title": "CustomPlugin",
+      "type": "object",
+      "properties": {
+        "event": {
+          "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+          "type": "string",
+          "title": "event"
+        },
+        "iconAlt": {
+          "description": "The alt for the custom button icon",
+          "type": "string",
+          "title": "iconAlt"
+        },
+        "iconType": {
+          "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+          "type": "string",
+          "title": "iconType"
+        },
+        "icon": {
+          "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+          "type": "string",
+          "title": "icon"
+        }
+      },
+      "required": [
+        "event",
+        "icon",
+        "iconAlt",
+        "iconType"
+      ]
+    },
     "AuthoringConfigProp": {
       "title": "AuthoringConfigProp",
       "type": "object",
@@ -2355,6 +2424,43 @@
                   "title": "disabled"
                 }
               }
+            },
+            "customPlugins": {
+              "description": "An array of objects that determine custom plugins.\nA custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).\nExample can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.",
+              "type": "array",
+              "items": {
+                "title": "CustomPlugin",
+                "type": "object",
+                "properties": {
+                  "event": {
+                    "description": "The name of the custom event. It needs to be valid (only letters, numbers and \"_\" can be used).\nPIE will emit the event prefixed with \"PIE-\".\nEg: event = 'client_custom_event_A' => the emitted event will be \"PIE-client_custom_event_A\"",
+                    "type": "string",
+                    "title": "event"
+                  },
+                  "iconAlt": {
+                    "description": "The alt for the custom button icon",
+                    "type": "string",
+                    "title": "iconAlt"
+                  },
+                  "iconType": {
+                    "description": "The icon type.\nCurrently, only \"SVG\" is supported.",
+                    "type": "string",
+                    "title": "iconType"
+                  },
+                  "icon": {
+                    "description": "The icon string. Currently, only \"SVG\" is supported, so it needs to be a valid svg.",
+                    "type": "string",
+                    "title": "icon"
+                  }
+                },
+                "required": [
+                  "event",
+                  "icon",
+                  "iconAlt",
+                  "iconType"
+                ]
+              },
+              "title": "customPlugins"
             }
           }
         },

package/docs/pie-schema.json.md

@@ -320,6 +320,35 @@ Properties of the `image` object:
 
 Indicates if the plugin is disabled or not
 
+### `customPlugins` (array)
+
+An array of objects that determine custom plugins.
+A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
+Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+#### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+#### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+#### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+#### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ## `EditableHtmlButtonConfigure` (object)
 
 Properties of the `EditableHtmlButtonConfigure` object:
@@ -328,6 +357,29 @@ Properties of the `EditableHtmlButtonConfigure` object:
 
 Indicates if the plugin is disabled or not
 
+## `CustomPlugin` (object)
+
+Properties of the `CustomPlugin` object:
+
+### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ## `AuthoringConfigProp` (object)
 
 Properties of the `AuthoringConfigProp` object:
@@ -830,6 +882,35 @@ Properties of the `image` object:
 
 Indicates if the plugin is disabled or not
 
+#### `customPlugins` (array)
+
+An array of objects that determine custom plugins.
+A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
+Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+##### `event` (string, required)
+
+The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
+PIE will emit the event prefixed with "PIE-".
+Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
+
+##### `iconAlt` (string, required)
+
+The alt for the custom button icon
+
+##### `iconType` (string, required)
+
+The icon type.
+Currently, only "SVG" is supported.
+
+##### `icon` (string, required)
+
+The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
+
 ### `required` (boolean)
 
 Indicates if the item is required and the value cannot be empty

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "5.12.1-next.5+579694d54",
+  "version": "5.12.2-next.4+44cb8eb36",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
@@ -20,7 +20,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "579694d5468995065657b651f06ec9513d0476b6",
+  "gitHead": "44cb8eb36e997cd5218007c604c8d94137022f6e",
   "main": "lib/index.js",
   "module": "src/index.js"
 }