@pie-lib/editable-html 7.17.4-next.308 → 7.17.4-next.333

package/CHANGELOG.md

@@ -3,6 +3,292 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.22.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.22.4...@pie-lib/editable-html@7.22.5) (2022-05-30)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.22.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.22.3...@pie-lib/editable-html@7.22.4) (2022-05-24)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.22.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.22.2...@pie-lib/editable-html@7.22.3) (2022-05-10)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.22.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.22.1...@pie-lib/editable-html@7.22.2) (2022-05-09)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.22.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.22.0...@pie-lib/editable-html@7.22.1) (2022-05-03)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+# [7.22.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.21.0...@pie-lib/editable-html@7.22.0) (2022-05-03)
+
+
+### Bug Fixes
+
+* use error as a function ([c767c8b](https://github.com/pie-framework/pie-lib/commit/c767c8bdc5ace6006e86862704a26095fa4b16f6))
+
+
+### Features
+
+* PD-1707 ([9762d1f](https://github.com/pie-framework/pie-lib/commit/9762d1f4ac1bd615db4f03dfd06809010213052d))
+* PD-1707 show validation errors in ecr ([bb7e95c](https://github.com/pie-framework/pie-lib/commit/bb7e95c824ae802452720856ad1117aa21c5766f))
+
+
+
+
+
+# [7.21.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.20.0...@pie-lib/editable-html@7.21.0) (2022-04-28)
+
+
+### Features
+
+* **editable-html:** disabled add response area button when maxResponseArea value is reached PD-1699 ([9c28e5b](https://github.com/pie-framework/pie-lib/commit/9c28e5b1702995a497e8528038a1b9e71b72c84f))
+* **editable-html:** PD-1707 add validation ui/ux to responses areas in ecr ([7381c58](https://github.com/pie-framework/pie-lib/commit/7381c581e9f1099f48f8cfbe307f23dbd8776773))
+
+
+
+
+
+# [7.20.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.19.3...@pie-lib/editable-html@7.20.0) (2022-04-12)
+
+
+### Bug Fixes
+
+* **editable-html:** Removed overflow property that prevent body content from scrolling after closing dialog PD-1659 ([da2dc24](https://github.com/pie-framework/pie-lib/commit/da2dc2421448fa56d83369a043d864a568b1f886))
+* **list:** fixed list in list issues [PD-1229] ([46dcec0](https://github.com/pie-framework/pie-lib/commit/46dcec0e20fc2d09969c45fd75426f647931ec08))
+
+
+### Features
+
+* **config-ui, editable-html:** add ui/ux validation for choices and editable html fields ([d40148f](https://github.com/pie-framework/pie-lib/commit/d40148f0f4b1232ce1506867a7424aa56e26c5ec))
+
+
+
+
+
+## [7.19.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.19.2...@pie-lib/editable-html@7.19.3) (2022-03-21)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.19.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.19.1...@pie-lib/editable-html@7.19.2) (2022-03-08)
+
+
+### Bug Fixes
+
+* **editable-html:** Added default values for responseAreaProps ([b49a919](https://github.com/pie-framework/pie-lib/commit/b49a919b4d5e336cb2a82e4e7926d72372369d3c))
+
+
+
+
+
+## [7.19.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.19.0...@pie-lib/editable-html@7.19.1) (2022-03-07)
+
+
+### Bug Fixes
+
+* **editable-html:** Called onHandleAreaChange only for delete ([ad1c8aa](https://github.com/pie-framework/pie-lib/commit/ad1c8aa83eef71bd8201cb55ec21513c008f77a6))
+
+
+
+
+
+# [7.19.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.18.0...@pie-lib/editable-html@7.19.0) (2022-03-07)
+
+
+### Features
+
+* **editor:** added func callback property, called when the resp area els nr is changed in the markup [PD-1592] ([d35feee](https://github.com/pie-framework/pie-lib/commit/d35feee5c68c13375963aa5cad25b2ef6ffc39f3))
+
+
+
+
+
+# [7.18.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.19...@pie-lib/editable-html@7.18.0) (2022-02-21)
+
+
+### Bug Fixes
+
+* **editable-html:** fix style for table rendering PD-1459 ([7c139b5](https://github.com/pie-framework/pie-lib/commit/7c139b5))
+* **editable-html:** Insert button from video/audio modal can't be pressed if the URL is empty PD-1488 ([6c7c1f6](https://github.com/pie-framework/pie-lib/commit/6c7c1f6))
+* **editor:** made sure space is added after table even when there is a div wrapper [PD-1614] ([5aa8bd1](https://github.com/pie-framework/pie-lib/commit/5aa8bd1))
+
+
+### Features
+
+* **editable-html:** drag-in-the-blank visually indicate when response area is selected, hide non-applicable tools PD-1383 ([a3b7d08](https://github.com/pie-framework/pie-lib/commit/a3b7d08))
+* **editor:** made sure cursor is visible before and after custom void elements [PD-1474] ([189ee2d](https://github.com/pie-framework/pie-lib/commit/189ee2d))
+* **editor:** made sure x<y is not removed from the math latex [PD-1475] ([ea94ad0](https://github.com/pie-framework/pie-lib/commit/ea94ad0))
+* **table:** made sure default border is 1 for tables [PD-1459] ([e8bd0d7](https://github.com/pie-framework/pie-lib/commit/e8bd0d7))
+* **table:** made sure focus is switched to first cell of the table when adding one [PD-1455] ([907c230](https://github.com/pie-framework/pie-lib/commit/907c230))
+
+
+
+
+
+## [7.17.19](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.18...@pie-lib/editable-html@7.17.19) (2022-02-21)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.18](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.17...@pie-lib/editable-html@7.17.18) (2022-02-04)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.17](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.16...@pie-lib/editable-html@7.17.17) (2022-02-03)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.16](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.15...@pie-lib/editable-html@7.17.16) (2022-01-24)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.15](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.14...@pie-lib/editable-html@7.17.15) (2022-01-10)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.14](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.13...@pie-lib/editable-html@7.17.14) (2021-12-22)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.12...@pie-lib/editable-html@7.17.13) (2021-12-13)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.11...@pie-lib/editable-html@7.17.12) (2021-11-29)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.10...@pie-lib/editable-html@7.17.11) (2021-10-04)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.9...@pie-lib/editable-html@7.17.10) (2021-10-04)
+
+
+### Bug Fixes
+
+* **serialization:** made sure that units are not added to numbered values when they are encountered [PD-722] ([8d229cf](https://github.com/pie-framework/pie-lib/commit/8d229cf))
+
+
+
+
+
+## [7.17.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.8...@pie-lib/editable-html@7.17.9) (2021-09-20)
+
+
+### Bug Fixes
+
+* **editor:** used dom refs in order to check if the editor is still in focus [PD-1126] ([99e0f72](https://github.com/pie-framework/pie-lib/commit/99e0f72))
+
+
+
+
+
+## [7.17.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.7...@pie-lib/editable-html@7.17.8) (2021-09-20)
+
+
+### Bug Fixes
+
+* **editor:** made sure that if the editor loses focus, the onBlur function is called only if the focus is still not inside the dom element [PD-1126] ([e74f00a](https://github.com/pie-framework/pie-lib/commit/e74f00a))
+
+
+
+
+
+## [7.17.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.6...@pie-lib/editable-html@7.17.7) (2021-09-20)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.5...@pie-lib/editable-html@7.17.6) (2021-09-16)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.4...@pie-lib/editable-html@7.17.5) (2021-09-08)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
+## [7.17.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.3...@pie-lib/editable-html@7.17.4) (2021-09-08)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
 ## [7.17.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@7.17.2...@pie-lib/editable-html@7.17.3) (2021-08-30)
 
 

package/lib/editor.js

@@ -90,6 +90,7 @@ var defaultResponseAreaProps = {
   respAreaToolbar: function respAreaToolbar() {},
   onHandleAreaChange: function onHandleAreaChange() {}
 };
+var defaultLanguageCharactersProps = [];
 
 var createToolbarOpts = function createToolbarOpts(toolbarOpts) {
   return _objectSpread(_objectSpread({}, defaultToolbarOpts), toolbarOpts);
@@ -100,12 +101,108 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Editor);
 
-  function Editor(props) {
+  function Editor(_props) {
     var _this;
 
     _classCallCheck(this, Editor);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, _props);
+
+    _defineProperty(_assertThisInitialized(_this), "handlePlugins", function (props) {
+      var normalizedResponseAreaProps = _objectSpread(_objectSpread({}, defaultResponseAreaProps), props.responseAreaProps);
+
+      _this.plugins = (0, _plugins.buildPlugins)(props.activePlugins, {
+        math: {
+          onClick: _this.onMathClick,
+          onFocus: _this.onPluginFocus,
+          onBlur: _this.onPluginBlur
+        },
+        image: {
+          onDelete: props.imageSupport && props.imageSupport["delete"] && function (src, done) {
+            props.imageSupport["delete"](src, function (e) {
+              done(e, _this.state.value);
+            });
+          },
+          insertImageRequested: props.imageSupport && function (getHandler) {
+            /**
+             * The handler is the object through which the outer context
+             * communicates file upload events like: fileChosen, cancel, progress
+             */
+            var handler = getHandler(function () {
+              return _this.state.value;
+            });
+            props.imageSupport.add(handler);
+          },
+          onFocus: _this.onPluginFocus,
+          onBlur: _this.onPluginBlur
+        },
+        toolbar: {
+          /**
+           * To minimize converting html -> state -> html
+           * We only emit markup once 'done' is clicked.
+           */
+          disableUnderline: props.disableUnderline,
+          autoWidth: props.autoWidthToolbar,
+          onDone: function onDone() {
+            var nonEmpty = props.nonEmpty;
+            log('[onDone]');
+
+            _this.setState({
+              toolbarInFocus: false,
+              focusedNode: null
+            });
+
+            _this.editor.blur();
+
+            if (nonEmpty && _this.state.value.startText.text.length === 0) {
+              _this.resetValue(true).then(function () {
+                _this.onEditingDone();
+              });
+            } else {
+              _this.onEditingDone();
+            }
+          }
+        },
+        table: {
+          onFocus: function onFocus() {
+            log('[table:onFocus]...');
+
+            _this.onPluginFocus();
+          },
+          onBlur: function onBlur() {
+            log('[table:onBlur]...');
+
+            _this.onPluginBlur();
+          }
+        },
+        responseArea: {
+          type: normalizedResponseAreaProps.type,
+          options: normalizedResponseAreaProps.options,
+          maxResponseAreas: normalizedResponseAreaProps.maxResponseAreas,
+          respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,
+          onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,
+          error: normalizedResponseAreaProps.error,
+          onFocus: function onFocus() {
+            log('[table:onFocus]...');
+
+            _this.onPluginFocus();
+          },
+          onBlur: function onBlur() {
+            log('[table:onBlur]...');
+
+            _this.onPluginBlur();
+          }
+        },
+        languageCharacters: props.languageCharactersProps,
+        media: {
+          focus: _this.focus,
+          createChange: function createChange() {
+            return _this.state.value.change();
+          },
+          onChange: _this.onChange
+        }
+      });
+    });
 
     _defineProperty(_assertThisInitialized(_this), "onPluginBlur", function (e) {
       log('[onPluginBlur]', e && e.relatedTarget);
@@ -321,9 +418,15 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (change, done) {
       log('[onChange]');
+      var value = change.value;
+      var charactersLimit = _this.props.charactersLimit;
+
+      if (value && value.document && value.document.text && value.document.text.length > charactersLimit) {
+        return;
+      }
 
       _this.setState({
-        value: change.value
+        value: value
       }, function () {
         log('[onChange], call done()');
 
@@ -397,107 +500,16 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     });
 
     _this.state = {
-      value: props.value,
-      toolbarOpts: createToolbarOpts(props.toolbarOpts)
+      value: _props.value,
+      toolbarOpts: createToolbarOpts(_props.toolbarOpts)
     };
 
-    var normalizedResponseAreaProps = _objectSpread(_objectSpread({}, defaultResponseAreaProps), props.responseAreaProps);
-
     _this.onResize = function () {
-      props.onChange(_this.state.value, true);
+      _props.onChange(_this.state.value, true);
     };
 
-    _this.plugins = (0, _plugins.buildPlugins)(props.activePlugins, {
-      math: {
-        onClick: _this.onMathClick,
-        onFocus: _this.onPluginFocus,
-        onBlur: _this.onPluginBlur
-      },
-      image: {
-        onDelete: _this.props.imageSupport && _this.props.imageSupport["delete"] && function (src, done) {
-          _this.props.imageSupport["delete"](src, function (e) {
-            done(e, _this.state.value);
-          });
-        },
-        insertImageRequested: _this.props.imageSupport && function (getHandler) {
-          /**
-           * The handler is the object through which the outer context
-           * communicates file upload events like: fileChosen, cancel, progress
-           */
-          var handler = getHandler(function () {
-            return _this.state.value;
-          });
+    _this.handlePlugins(_this.props);
 
-          _this.props.imageSupport.add(handler);
-        },
-        onFocus: _this.onPluginFocus,
-        onBlur: _this.onPluginBlur
-      },
-      toolbar: {
-        /**
-         * To minimize converting html -> state -> html
-         * We only emit markup once 'done' is clicked.
-         */
-        disableUnderline: props.disableUnderline,
-        autoWidth: props.autoWidthToolbar,
-        onDone: function onDone() {
-          var nonEmpty = _this.props.nonEmpty;
-          log('[onDone]');
-
-          _this.setState({
-            toolbarInFocus: false,
-            focusedNode: null
-          });
-
-          _this.editor.blur();
-
-          if (nonEmpty && _this.state.value.startText.text.length === 0) {
-            _this.resetValue(true).then(function () {
-              _this.onEditingDone();
-            });
-          } else {
-            _this.onEditingDone();
-          }
-        }
-      },
-      table: {
-        onFocus: function onFocus() {
-          log('[table:onFocus]...');
-
-          _this.onPluginFocus();
-        },
-        onBlur: function onBlur() {
-          log('[table:onBlur]...');
-
-          _this.onPluginBlur();
-        }
-      },
-      responseArea: {
-        type: normalizedResponseAreaProps.type,
-        options: normalizedResponseAreaProps.options,
-        maxResponseAreas: normalizedResponseAreaProps.maxResponseAreas,
-        respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,
-        onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,
-        error: normalizedResponseAreaProps.error,
-        onFocus: function onFocus() {
-          log('[table:onFocus]...');
-
-          _this.onPluginFocus();
-        },
-        onBlur: function onBlur() {
-          log('[table:onBlur]...');
-
-          _this.onPluginBlur();
-        }
-      },
-      media: {
-        focus: _this.focus,
-        createChange: function createChange() {
-          return _this.state.value.change();
-        },
-        onChange: _this.onChange
-      }
-    });
     return _this;
   }
 
@@ -535,6 +547,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           toolbarOpts: newToolbarOpts
         });
       }
+
+      if (!(0, _isEqual["default"])(nextProps.languageCharactersProps, this.props.languageCharactersProps)) {
+        this.handlePlugins(nextProps);
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -669,6 +685,7 @@ _defineProperty(Editor, "propTypes", {
   focus: _propTypes["default"].func.isRequired,
   value: _slatePropTypes["default"].value.isRequired,
   imageSupport: _propTypes["default"].object,
+  charactersLimit: _propTypes["default"].number,
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   minHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
@@ -688,6 +705,11 @@ _defineProperty(Editor, "propTypes", {
     respAreaToolbar: _propTypes["default"].func,
     onHandleAreaChange: _propTypes["default"].func
   }),
+  languageCharactersProps: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    language: _propTypes["default"].string,
+    characterIcon: _propTypes["default"].string,
+    characters: _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].string))
+  })),
   toolbarOpts: _propTypes["default"].shape({
     position: _propTypes["default"].oneOf(['bottom', 'top']),
     alignment: _propTypes["default"].oneOf(['left', 'right']),
@@ -710,7 +732,8 @@ _defineProperty(Editor, "defaultProps", {
   onBlur: function onBlur() {},
   onKeyDown: function onKeyDown() {},
   toolbarOpts: defaultToolbarOpts,
-  responseAreaProps: defaultResponseAreaProps
+  responseAreaProps: defaultResponseAreaProps,
+  languageCharactersProps: defaultLanguageCharactersProps
 });
 
 var styles = {