@jotforminc/dnd-builder 2.0.2 → 2.2.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.2.1](https://github.com/jotform/dnd-builder/compare/v2.0.2...v2.2.1) (2022-06-24)
+
+
+### Bug Fixes
+
+* changed withclickoutside logic ([5b0cac3](https://github.com/jotform/dnd-builder/commit/5b0cac338e740ede76de9bfe04eebe13bfb135ef))
+* **readme:** readme img height fix ([18cf8cb](https://github.com/jotform/dnd-builder/commit/18cf8cbf2c653caebc7d7a6f6a17e8a3b2c4dc20))
+* **TextEditor:** fix for content ([f0a8327](https://github.com/jotform/dnd-builder/commit/f0a83275905ec98ff200c34237e6f88793cdde22))
+
+## [2.2.0](https://github.com/jotform/dnd-builder/compare/v2.0.3...v2.2.0) (2022-06-14)
+
+### [2.0.3](https://github.com/jotform/dnd-builder/compare/v2.0.2...v2.0.3) (2022-03-10)
+
+
+### Bug Fixes
+
+* changed withclickoutside logic ([5b0cac3](https://github.com/jotform/dnd-builder/commit/5b0cac338e740ede76de9bfe04eebe13bfb135ef))
+* **readme:** readme img height fix ([18cf8cb](https://github.com/jotform/dnd-builder/commit/18cf8cbf2c653caebc7d7a6f6a17e8a3b2c4dc20))
+
 ### [2.0.2](https://github.com/jotform/dnd-builder/compare/v2.0.0...v2.0.2) (2021-12-02)
 
 

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://cdn.jotfor.ms/assets/img/logo2021/jotform-logo-dnd.png" alt="Jotform DND Builder" style="max-height: 50px;" />
+  <img src="https://cdn.jotfor.ms/assets/img/logo2021/jotform-logo-dnd.png" alt="Jotform DND Builder" height="50px" />
 </p>
 <h1 align="center">Jotform - React Page Builder <small></small></h1>
 

package/lib/cjs/components/TextEditor/QuillEditor.js

@@ -4,7 +4,6 @@ require('core-js/modules/es.array.map.js');
 var React = require('react');
 var ReactQuill = require('react-quill');
 var PropTypes = require('prop-types');
-var withClickOutside = require('../withClickOutside.js');
 var textEditorConstants = require('./textEditorConstants.js');
 var fonts = require('../../constants/fonts.js');
 require('react-quill/dist/quill.snow.css');
@@ -12,58 +11,111 @@ var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactQuill__default = /*#__PURE__*/_interopDefaultLegacy(ReactQuill);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var Size = ReactQuill__default['default'].Quill.import('attributors/style/size');
 Size.whitelist = fonts.fontSizes.map(function (s) {
   return "".concat(s, "px");
 });
 ReactQuill__default['default'].Quill.register(Size, true);
 
-var QuillEditor = function QuillEditor(_ref) {
-  var content = _ref.content,
-      handleSave = _ref.handleSave,
-      placeholder = _ref.placeholder,
-      setIsTextEditorOpen = _ref.setIsTextEditorOpen;
-  var quill = React.useRef(null);
-
-  var saveAndQuit = function saveAndQuit() {
-    if (quill.current === null) return;
-    var editor = quill.current.getEditor();
-    var unprivilegedEditor = quill.current.makeUnprivilegedEditor(editor);
-    handleSave(unprivilegedEditor.getHTML());
-    setIsTextEditorOpen(false);
-  };
-
-  React.useEffect(function () {
-    if (quill.current !== null) {
-      var editor = quill.current.getEditor();
-      editor.setSelection(0, content.length);
-    }
+var QuillEditor = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(QuillEditor, _React$PureComponent);
 
-    return saveAndQuit;
-  }, []);
-  var handleKeyDown = React.useCallback(function (e) {
-    e.stopPropagation();
+  var _super = _createSuper(QuillEditor);
 
-    if (e.keyCode === 27) {
-      saveAndQuit();
+  function QuillEditor(props) {
+    var _this;
+
+    _classCallCheck(this, QuillEditor);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "saveAndQuit", function () {
+      var _this$props = _this.props,
+          content = _this$props.content,
+          handleSave = _this$props.handleSave,
+          setIsTextEditorOpen = _this$props.setIsTextEditorOpen;
+      setIsTextEditorOpen(false);
+      handleSave(content);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
+      e.stopPropagation();
+
+      if (e.keyCode === 27) {
+        _this.saveAndQuit();
+      }
+    });
+
+    _this.quill = /*#__PURE__*/React__default['default'].createRef();
+    return _this;
+  }
+
+  _createClass(QuillEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.quill.current !== null) {
+        var content = this.props.content;
+        var editor = this.quill.current.getEditor();
+        editor.setSelection(0, content.length);
+      }
     }
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "f-all",
-    onKeyDown: handleKeyDown,
-    children: /*#__PURE__*/jsxRuntime.jsx(ReactQuill__default['default'], {
-      ref: quill,
-      defaultValue: content,
-      formats: QuillEditor.formats,
-      modules: QuillEditor.modules,
-      placeholder: placeholder,
-      preserveWhitespace: true
-    })
-  });
-};
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.saveAndQuit();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          content = _this$props2.content,
+          placeholder = _this$props2.placeholder,
+          setContent = _this$props2.setContent;
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "f-all",
+        onKeyDown: this.handleKeyDown,
+        children: /*#__PURE__*/jsxRuntime.jsx(ReactQuill__default['default'], {
+          ref: this.quill,
+          formats: QuillEditor.formats,
+          modules: QuillEditor.modules,
+          onChange: setContent,
+          placeholder: placeholder,
+          preserveWhitespace: true,
+          value: content
+        })
+      });
+    }
+  }]);
+
+  return QuillEditor;
+}(React__default['default'].PureComponent);
 
 QuillEditor.modules = textEditorConstants.modules;
 QuillEditor.formats = textEditorConstants.formats;
@@ -71,15 +123,16 @@ QuillEditor.propTypes = {
   content: PropTypes__default['default'].string,
   handleSave: PropTypes__default['default'].func,
   placeholder: PropTypes__default['default'].string,
+  setContent: PropTypes__default['default'].func,
   setIsTextEditorOpen: PropTypes__default['default'].func
 };
 QuillEditor.defaultProps = {
   content: '',
   handleSave: function handleSave() {},
   placeholder: 'Click to edit text',
-  setIsTextEditorOpen: {}
+  setContent: function setContent() {},
+  setIsTextEditorOpen: function setIsTextEditorOpen() {}
 };
-var QuillEditor$1 = withClickOutside(QuillEditor);
 
-module.exports = QuillEditor$1;
+module.exports = QuillEditor;
 //# sourceMappingURL=QuillEditor.js.map

package/lib/cjs/components/TextEditor/QuillEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuillEditor.js","sources":["../../../../src/components/TextEditor/QuillEditor.js"],"sourcesContent":["import { useEffect, useRef, useCallback } from 'react';\nimport ReactQuill from 'react-quill';\nimport PropTypes from 'prop-types';\nimport withClickOutside from '../withClickOutside';\nimport { formats, modules } from './textEditorConstants';\nimport { fontSizes } from '../../constants/fonts';\nimport 'react-quill/dist/quill.snow.css';\n\nconst Size = ReactQuill.Quill.import('attributors/style/size');\nSize.whitelist = fontSizes.map(s => `${s}px`);\nReactQuill.Quill.register(Size, true);\n\nconst QuillEditor = ({\n  content,\n  handleSave,\n  placeholder,\n  setIsTextEditorOpen,\n}) => {\n  const quill = useRef(null);\n  const saveAndQuit = () => {\n    if (quill.current === null) return;\n    const editor = quill.current.getEditor();\n    const unprivilegedEditor = quill.current.makeUnprivilegedEditor(editor);\n    handleSave(unprivilegedEditor.getHTML());\n    setIsTextEditorOpen(false);\n  };\n\n  useEffect(() => {\n    if (quill.current !== null) {\n      const editor = quill.current.getEditor();\n      editor.setSelection(0, content.length);\n    }\n    return saveAndQuit;\n  }, []);\n\n  const handleKeyDown = useCallback(e => {\n    e.stopPropagation();\n    if (e.keyCode === 27) {\n      saveAndQuit();\n    }\n  }, []);\n\n  return (\n    <div\n      className=\"f-all\"\n      onKeyDown={handleKeyDown}\n    >\n      <ReactQuill\n        ref={quill}\n        defaultValue={content}\n        formats={QuillEditor.formats}\n        modules={QuillEditor.modules}\n        placeholder={placeholder}\n        preserveWhitespace\n      />\n    </div>\n  );\n};\n\nQuillEditor.modules = modules;\nQuillEditor.formats = formats;\n\nQuillEditor.propTypes = {\n  content: PropTypes.string,\n  handleSave: PropTypes.func,\n  placeholder: PropTypes.string,\n  setIsTextEditorOpen: PropTypes.func,\n};\n\nQuillEditor.defaultProps = {\n  content: '',\n  handleSave: () => {},\n  placeholder: 'Click to edit text',\n  setIsTextEditorOpen: {},\n};\n\nexport default withClickOutside(QuillEditor);\n"],"names":["Size","ReactQuill","Quill","import","whitelist","fontSizes","map","s","register","QuillEditor","content","handleSave","placeholder","setIsTextEditorOpen","quill","useRef","saveAndQuit","current","editor","getEditor","unprivilegedEditor","makeUnprivilegedEditor","getHTML","useEffect","setSelection","length","handleKeyDown","useCallback","e","stopPropagation","keyCode","_jsx","formats","modules","propTypes","PropTypes","string","func","defaultProps","withClickOutside"],"mappings":";;;;;;;;;;;;;;;;;AAQA,IAAMA,IAAI,GAAGC,8BAAU,CAACC,KAAX,CAAiBC,MAAjB,CAAwB,wBAAxB,CAAb;AACAH,IAAI,CAACI,SAAL,GAAiBC,eAAS,CAACC,GAAV,CAAc,UAAAC,CAAC;AAAA,mBAAOA,CAAP;AAAA,CAAf,CAAjB;AACAN,8BAAU,CAACC,KAAX,CAAiBM,QAAjB,CAA0BR,IAA1B,EAAgC,IAAhC;;AAEA,IAAMS,WAAW,GAAG,SAAdA,WAAc,OAKd;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,WAEI,QAFJA,WAEI;AAAA,MADJC,mBACI,QADJA,mBACI;AACJ,MAAMC,KAAK,GAAGC,YAAM,CAAC,IAAD,CAApB;;AACA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIF,KAAK,CAACG,OAAN,KAAkB,IAAtB,EAA4B;AAC5B,QAAMC,MAAM,GAAGJ,KAAK,CAACG,OAAN,CAAcE,SAAd,EAAf;AACA,QAAMC,kBAAkB,GAAGN,KAAK,CAACG,OAAN,CAAcI,sBAAd,CAAqCH,MAArC,CAA3B;AACAP,IAAAA,UAAU,CAACS,kBAAkB,CAACE,OAAnB,EAAD,CAAV;AACAT,IAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD,GAND;;AAQAU,EAAAA,eAAS,CAAC,YAAM;AACd,QAAIT,KAAK,CAACG,OAAN,KAAkB,IAAtB,EAA4B;AAC1B,UAAMC,MAAM,GAAGJ,KAAK,CAACG,OAAN,CAAcE,SAAd,EAAf;AACAD,MAAAA,MAAM,CAACM,YAAP,CAAoB,CAApB,EAAuBd,OAAO,CAACe,MAA/B;AACD;;AACD,WAAOT,WAAP;AACD,GANQ,EAMN,EANM,CAAT;AAQA,MAAMU,aAAa,GAAGC,iBAAW,CAAC,UAAAC,CAAC,EAAI;AACrCA,IAAAA,CAAC,CAACC,eAAF;;AACA,QAAID,CAAC,CAACE,OAAF,KAAc,EAAlB,EAAsB;AACpBd,MAAAA,WAAW;AACZ;AACF,GALgC,EAK9B,EAL8B,CAAjC;AAOA,sBACEe;AACE,IAAA,SAAS,EAAC,OADZ;AAEE,IAAA,SAAS,EAAEL,aAFb;AAAA,2BAIEK,eAAC9B,8BAAD;AACE,MAAA,GAAG,EAAEa,KADP;AAEE,MAAA,YAAY,EAAEJ,OAFhB;AAGE,MAAA,OAAO,EAAED,WAAW,CAACuB,OAHvB;AAIE,MAAA,OAAO,EAAEvB,WAAW,CAACwB,OAJvB;AAKE,MAAA,WAAW,EAAErB,WALf;AAME,MAAA,kBAAkB;AANpB;AAJF,IADF;AAeD,CA7CD;;AA+CAH,WAAW,CAACwB,OAAZ,GAAsBA,2BAAtB;AACAxB,WAAW,CAACuB,OAAZ,GAAsBA,2BAAtB;AAEAvB,WAAW,CAACyB,SAAZ,GAAwB;AACtBxB,EAAAA,OAAO,EAAEyB,6BAAS,CAACC,MADG;AAEtBzB,EAAAA,UAAU,EAAEwB,6BAAS,CAACE,IAFA;AAGtBzB,EAAAA,WAAW,EAAEuB,6BAAS,CAACC,MAHD;AAItBvB,EAAAA,mBAAmB,EAAEsB,6BAAS,CAACE;AAJT,CAAxB;AAOA5B,WAAW,CAAC6B,YAAZ,GAA2B;AACzB5B,EAAAA,OAAO,EAAE,EADgB;AAEzBC,EAAAA,UAAU,EAAE,sBAAM,EAFO;AAGzBC,EAAAA,WAAW,EAAE,oBAHY;AAIzBC,EAAAA,mBAAmB,EAAE;AAJI,CAA3B;AAOA,oBAAe0B,gBAAgB,CAAC9B,WAAD,CAA/B;;;;"}
+{"version":3,"file":"QuillEditor.js","sources":["../../../../src/components/TextEditor/QuillEditor.js"],"sourcesContent":["import React from 'react';\nimport ReactQuill from 'react-quill';\nimport PropTypes from 'prop-types';\nimport { formats, modules } from './textEditorConstants';\nimport { fontSizes } from '../../constants/fonts';\nimport 'react-quill/dist/quill.snow.css';\n\nconst Size = ReactQuill.Quill.import('attributors/style/size');\nSize.whitelist = fontSizes.map(s => `${s}px`);\nReactQuill.Quill.register(Size, true);\n\nclass QuillEditor extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.quill = React.createRef();\n  }\n\n  componentDidMount() {\n    if (this.quill.current !== null) {\n      const { content } = this.props;\n      const editor = this.quill.current.getEditor();\n      editor.setSelection(0, content.length);\n    }\n  }\n\n  componentWillUnmount() {\n    this.saveAndQuit();\n  }\n\n  saveAndQuit = () => {\n    const { content, handleSave, setIsTextEditorOpen } = this.props;\n    setIsTextEditorOpen(false);\n    handleSave(content);\n  }\n\n  handleKeyDown = e => {\n    e.stopPropagation();\n    if (e.keyCode === 27) {\n      this.saveAndQuit();\n    }\n  }\n\n  render() {\n    const {\n      content,\n      placeholder,\n      setContent,\n    } = this.props;\n\n    return (\n      <div\n        className=\"f-all\"\n        onKeyDown={this.handleKeyDown}\n      >\n        <ReactQuill\n          ref={this.quill}\n          formats={QuillEditor.formats}\n          modules={QuillEditor.modules}\n          onChange={setContent}\n          placeholder={placeholder}\n          preserveWhitespace\n          value={content}\n        />\n      </div>\n    );\n  }\n}\n\nQuillEditor.modules = modules;\nQuillEditor.formats = formats;\n\nQuillEditor.propTypes = {\n  content: PropTypes.string,\n  handleSave: PropTypes.func,\n  placeholder: PropTypes.string,\n  setContent: PropTypes.func,\n  setIsTextEditorOpen: PropTypes.func,\n};\n\nQuillEditor.defaultProps = {\n  content: '',\n  handleSave: () => {},\n  placeholder: 'Click to edit text',\n  setContent: () => {},\n  setIsTextEditorOpen: () => {},\n};\n\nexport default QuillEditor;\n"],"names":["Size","ReactQuill","Quill","import","whitelist","fontSizes","map","s","register","QuillEditor","props","content","handleSave","setIsTextEditorOpen","e","stopPropagation","keyCode","saveAndQuit","quill","React","createRef","current","editor","getEditor","setSelection","length","placeholder","setContent","_jsx","handleKeyDown","formats","modules","PureComponent","propTypes","PropTypes","string","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,IAAI,GAAGC,8BAAU,CAACC,KAAX,CAAiBC,MAAjB,CAAwB,wBAAxB,CAAb;AACAH,IAAI,CAACI,SAAL,GAAiBC,eAAS,CAACC,GAAV,CAAc,UAAAC,CAAC;AAAA,mBAAOA,CAAP;AAAA,CAAf,CAAjB;AACAN,8BAAU,CAACC,KAAX,CAAiBM,QAAjB,CAA0BR,IAA1B,EAAgC,IAAhC;;IAEMS;;;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA;;AACjB,8BAAMA,KAAN;;AADiB,kEAkBL,YAAM;AAClB,wBAAqD,MAAKA,KAA1D;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,UAAjB,eAAiBA,UAAjB;AAAA,UAA6BC,mBAA7B,eAA6BA,mBAA7B;AACAA,MAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACAD,MAAAA,UAAU,CAACD,OAAD,CAAV;AACD,KAtBkB;;AAAA,oEAwBH,UAAAG,CAAC,EAAI;AACnBA,MAAAA,CAAC,CAACC,eAAF;;AACA,UAAID,CAAC,CAACE,OAAF,KAAc,EAAlB,EAAsB;AACpB,cAAKC,WAAL;AACD;AACF,KA7BkB;;AAGjB,UAAKC,KAAL,gBAAaC,yBAAK,CAACC,SAAN,EAAb;AAHiB;AAIlB;;;;WAED,6BAAoB;AAClB,UAAI,KAAKF,KAAL,CAAWG,OAAX,KAAuB,IAA3B,EAAiC;AAC/B,YAAQV,OAAR,GAAoB,KAAKD,KAAzB,CAAQC,OAAR;AACA,YAAMW,MAAM,GAAG,KAAKJ,KAAL,CAAWG,OAAX,CAAmBE,SAAnB,EAAf;AACAD,QAAAA,MAAM,CAACE,YAAP,CAAoB,CAApB,EAAuBb,OAAO,CAACc,MAA/B;AACD;AACF;;;WAED,gCAAuB;AACrB,WAAKR,WAAL;AACD;;;WAeD,kBAAS;AACP,yBAII,KAAKP,KAJT;AAAA,UACEC,OADF,gBACEA,OADF;AAAA,UAEEe,WAFF,gBAEEA,WAFF;AAAA,UAGEC,UAHF,gBAGEA,UAHF;AAMA,0BACEC;AACE,QAAA,SAAS,EAAC,OADZ;AAEE,QAAA,SAAS,EAAE,KAAKC,aAFlB;AAAA,+BAIED,eAAC3B,8BAAD;AACE,UAAA,GAAG,EAAE,KAAKiB,KADZ;AAEE,UAAA,OAAO,EAAET,WAAW,CAACqB,OAFvB;AAGE,UAAA,OAAO,EAAErB,WAAW,CAACsB,OAHvB;AAIE,UAAA,QAAQ,EAAEJ,UAJZ;AAKE,UAAA,WAAW,EAAED,WALf;AAME,UAAA,kBAAkB,MANpB;AAOE,UAAA,KAAK,EAAEf;AAPT;AAJF,QADF;AAgBD;;;;EAvDuBQ,yBAAK,CAACa;;AA0DhCvB,WAAW,CAACsB,OAAZ,GAAsBA,2BAAtB;AACAtB,WAAW,CAACqB,OAAZ,GAAsBA,2BAAtB;AAEArB,WAAW,CAACwB,SAAZ,GAAwB;AACtBtB,EAAAA,OAAO,EAAEuB,6BAAS,CAACC,MADG;AAEtBvB,EAAAA,UAAU,EAAEsB,6BAAS,CAACE,IAFA;AAGtBV,EAAAA,WAAW,EAAEQ,6BAAS,CAACC,MAHD;AAItBR,EAAAA,UAAU,EAAEO,6BAAS,CAACE,IAJA;AAKtBvB,EAAAA,mBAAmB,EAAEqB,6BAAS,CAACE;AALT,CAAxB;AAQA3B,WAAW,CAAC4B,YAAZ,GAA2B;AACzB1B,EAAAA,OAAO,EAAE,EADgB;AAEzBC,EAAAA,UAAU,EAAE,sBAAM,EAFO;AAGzBc,EAAAA,WAAW,EAAE,oBAHY;AAIzBC,EAAAA,UAAU,EAAE,sBAAM,EAJO;AAKzBd,EAAAA,mBAAmB,EAAE,+BAAM;AALF,CAA3B;;;;"}

package/lib/cjs/components/TextEditor/TextEditor.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
+var domPurify = require('dompurify');
 var QuillEditor = require('./QuillEditor.js');
 var builderContext = require('../../utils/builderContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -9,6 +10,19 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var domPurify__default = /*#__PURE__*/_interopDefaultLegacy(domPurify);
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var TextEditor = function TextEditor(_ref) {
   var content = _ref.content,
@@ -17,6 +31,11 @@ var TextEditor = function TextEditor(_ref) {
       isSelected = _ref.isSelected,
       placeholder = _ref.placeholder;
 
+  var _useState = React.useState(content),
+      _useState2 = _slicedToArray(_useState, 2),
+      _content = _useState2[0],
+      setContent = _useState2[1];
+
   var _useBuilderContext = builderContext.useBuilderContext(),
       isTextEditorOpen = _useBuilderContext.isTextEditorOpen,
       setIsTextEditorOpen = _useBuilderContext.setIsTextEditorOpen;
@@ -28,26 +47,19 @@ var TextEditor = function TextEditor(_ref) {
   }, [isSelected, isLocked]);
   var isNotEmpty = React.useMemo(function () {
     var el = document.createElement('div');
-    el.innerHTML = content;
+    el.innerHTML = domPurify__default['default'].sanitize(_content);
     return !!el.innerText;
-  }, [content]);
-  var onClickOutside = React.useCallback(function () {
-    setTimeout(function () {
-      return setIsTextEditorOpen(false);
-    }, 1000);
-  }, [isTextEditorOpen]);
+  }, [_content]);
   return isSelected && isTextEditorOpen ? /*#__PURE__*/jsxRuntime.jsx(QuillEditor, {
-    content: content,
-    exceptionalClasses: ['ql-toolbar'],
+    content: _content,
     handleSave: handleSave,
-    onClickOutside: onClickOutside,
     placeholder: placeholder,
-    setIsTextEditorOpen: setIsTextEditorOpen,
-    withClickOutsideWrapperClass: "textEditorWrapper f-all"
+    setContent: setContent,
+    setIsTextEditorOpen: setIsTextEditorOpen
   }) : /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "f-all ql-editor".concat(isNotEmpty ? '' : ' isEmptyTextElement'),
     dangerouslySetInnerHTML: {
-      __html: isNotEmpty ? content : placeholder
+      __html: isNotEmpty ? _content : placeholder
     },
     onClick: onClick,
     onKeyDown: function onKeyDown() {}

package/lib/cjs/components/TextEditor/TextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.js","sources":["../../../../src/components/TextEditor/TextEditor.js"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport QuillEditor from './QuillEditor';\nimport { useBuilderContext } from '../../utils/builderContext';\n\nconst TextEditor = ({\n  content,\n  handleSave,\n  isLocked,\n  isSelected,\n  placeholder,\n}) => {\n  const { isTextEditorOpen, setIsTextEditorOpen } = useBuilderContext();\n\n  const onClick = useCallback(() => {\n    if (isSelected && !isLocked) {\n      setIsTextEditorOpen(true);\n    }\n  }, [isSelected, isLocked]);\n\n  const isNotEmpty = useMemo(() => {\n    const el = document.createElement('div');\n    el.innerHTML = content;\n    return !!el.innerText;\n  }, [content]);\n\n  const onClickOutside = useCallback(() => {\n    setTimeout(() => setIsTextEditorOpen(false), 1000);\n  }, [isTextEditorOpen]);\n\n  return isSelected && isTextEditorOpen ? (\n    <QuillEditor\n      content={content}\n      exceptionalClasses={['ql-toolbar']}\n      handleSave={handleSave}\n      onClickOutside={onClickOutside}\n      placeholder={placeholder}\n      setIsTextEditorOpen={setIsTextEditorOpen}\n      withClickOutsideWrapperClass=\"textEditorWrapper f-all\"\n    />\n  ) : (\n    <div\n      className={`f-all ql-editor${isNotEmpty ? '' : ' isEmptyTextElement'}`}\n      dangerouslySetInnerHTML={{\n        __html: isNotEmpty ? content : placeholder,\n      }}\n      onClick={onClick}\n      onKeyDown={() => {}}\n    />\n  );\n};\n\nTextEditor.propTypes = {\n  content: PropTypes.string,\n  handleSave: PropTypes.func,\n  isLocked: PropTypes.bool,\n  isSelected: PropTypes.bool,\n  placeholder: PropTypes.string,\n};\n\nTextEditor.defaultProps = {\n  content: '',\n  handleSave: () => {},\n  isLocked: false,\n  isSelected: false,\n  placeholder: 'Click to edit text',\n};\n\nexport default TextEditor;\n"],"names":["TextEditor","content","handleSave","isLocked","isSelected","placeholder","useBuilderContext","isTextEditorOpen","setIsTextEditorOpen","onClick","useCallback","isNotEmpty","useMemo","el","document","createElement","innerHTML","innerText","onClickOutside","setTimeout","_jsx","__html","propTypes","PropTypes","string","func","bool","defaultProps"],"mappings":";;;;;;;;;;;;IAKMA,UAAU,GAAG,SAAbA,UAAa,OAMb;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,UAEI,QAFJA,UAEI;AAAA,MADJC,WACI,QADJA,WACI;;AACJ,2BAAkDC,gCAAiB,EAAnE;AAAA,MAAQC,gBAAR,sBAAQA,gBAAR;AAAA,MAA0BC,mBAA1B,sBAA0BA,mBAA1B;;AAEA,MAAMC,OAAO,GAAGC,iBAAW,CAAC,YAAM;AAChC,QAAIN,UAAU,IAAI,CAACD,QAAnB,EAA6B;AAC3BK,MAAAA,mBAAmB,CAAC,IAAD,CAAnB;AACD;AACF,GAJ0B,EAIxB,CAACJ,UAAD,EAAaD,QAAb,CAJwB,CAA3B;AAMA,MAAMQ,UAAU,GAAGC,aAAO,CAAC,YAAM;AAC/B,QAAMC,EAAE,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAX;AACAF,IAAAA,EAAE,CAACG,SAAH,GAAef,OAAf;AACA,WAAO,CAAC,CAACY,EAAE,CAACI,SAAZ;AACD,GAJyB,EAIvB,CAAChB,OAAD,CAJuB,CAA1B;AAMA,MAAMiB,cAAc,GAAGR,iBAAW,CAAC,YAAM;AACvCS,IAAAA,UAAU,CAAC;AAAA,aAAMX,mBAAmB,CAAC,KAAD,CAAzB;AAAA,KAAD,EAAmC,IAAnC,CAAV;AACD,GAFiC,EAE/B,CAACD,gBAAD,CAF+B,CAAlC;AAIA,SAAOH,UAAU,IAAIG,gBAAd,gBACLa,eAAC,WAAD;AACE,IAAA,OAAO,EAAEnB,OADX;AAEE,IAAA,kBAAkB,EAAE,CAAC,YAAD,CAFtB;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,cAAc,EAAEgB,cAJlB;AAKE,IAAA,WAAW,EAAEb,WALf;AAME,IAAA,mBAAmB,EAAEG,mBANvB;AAOE,IAAA,4BAA4B,EAAC;AAP/B,IADK,gBAWLY;AACE,IAAA,SAAS,2BAAoBT,UAAU,GAAG,EAAH,GAAQ,qBAAtC,CADX;AAEE,IAAA,uBAAuB,EAAE;AACvBU,MAAAA,MAAM,EAAEV,UAAU,GAAGV,OAAH,GAAaI;AADR,KAF3B;AAKE,IAAA,OAAO,EAAEI,OALX;AAME,IAAA,SAAS,EAAE,qBAAM;AANnB,IAXF;AAoBD;;AAEDT,UAAU,CAACsB,SAAX,GAAuB;AACrBrB,EAAAA,OAAO,EAAEsB,6BAAS,CAACC,MADE;AAErBtB,EAAAA,UAAU,EAAEqB,6BAAS,CAACE,IAFD;AAGrBtB,EAAAA,QAAQ,EAAEoB,6BAAS,CAACG,IAHC;AAIrBtB,EAAAA,UAAU,EAAEmB,6BAAS,CAACG,IAJD;AAKrBrB,EAAAA,WAAW,EAAEkB,6BAAS,CAACC;AALF,CAAvB;AAQAxB,UAAU,CAAC2B,YAAX,GAA0B;AACxB1B,EAAAA,OAAO,EAAE,EADe;AAExBC,EAAAA,UAAU,EAAE,sBAAM,EAFM;AAGxBC,EAAAA,QAAQ,EAAE,KAHc;AAIxBC,EAAAA,UAAU,EAAE,KAJY;AAKxBC,EAAAA,WAAW,EAAE;AALW,CAA1B;;;;"}
+{"version":3,"file":"TextEditor.js","sources":["../../../../src/components/TextEditor/TextEditor.js"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport domPurify from 'dompurify';\nimport QuillEditor from './QuillEditor';\nimport { useBuilderContext } from '../../utils/builderContext';\n\nconst TextEditor = ({\n  content,\n  handleSave,\n  isLocked,\n  isSelected,\n  placeholder,\n}) => {\n  const [_content, setContent] = useState(content);\n\n  const { isTextEditorOpen, setIsTextEditorOpen } = useBuilderContext();\n\n  const onClick = useCallback(() => {\n    if (isSelected && !isLocked) {\n      setIsTextEditorOpen(true);\n    }\n  }, [isSelected, isLocked]);\n\n  const isNotEmpty = useMemo(() => {\n    const el = document.createElement('div');\n    el.innerHTML = domPurify.sanitize(_content);\n    return !!el.innerText;\n  }, [_content]);\n\n  return isSelected && isTextEditorOpen ? (\n    <QuillEditor\n      content={_content}\n      handleSave={handleSave}\n      placeholder={placeholder}\n      setContent={setContent}\n      setIsTextEditorOpen={setIsTextEditorOpen}\n    />\n  ) : (\n    <div\n      className={`f-all ql-editor${isNotEmpty ? '' : ' isEmptyTextElement'}`}\n      dangerouslySetInnerHTML={{\n        __html: isNotEmpty ? _content : placeholder,\n      }}\n      onClick={onClick}\n      onKeyDown={() => {}}\n    />\n  );\n};\n\nTextEditor.propTypes = {\n  content: PropTypes.string,\n  handleSave: PropTypes.func,\n  isLocked: PropTypes.bool,\n  isSelected: PropTypes.bool,\n  placeholder: PropTypes.string,\n};\n\nTextEditor.defaultProps = {\n  content: '',\n  handleSave: () => {},\n  isLocked: false,\n  isSelected: false,\n  placeholder: 'Click to edit text',\n};\n\nexport default TextEditor;\n"],"names":["TextEditor","content","handleSave","isLocked","isSelected","placeholder","useState","_content","setContent","useBuilderContext","isTextEditorOpen","setIsTextEditorOpen","onClick","useCallback","isNotEmpty","useMemo","el","document","createElement","innerHTML","domPurify","sanitize","innerText","_jsx","__html","propTypes","PropTypes","string","func","bool","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;IAMMA,UAAU,GAAG,SAAbA,UAAa,OAMb;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,UAEI,QAFJA,UAEI;AAAA,MADJC,WACI,QADJA,WACI;;AACJ,kBAA+BC,cAAQ,CAACL,OAAD,CAAvC;AAAA;AAAA,MAAOM,QAAP;AAAA,MAAiBC,UAAjB;;AAEA,2BAAkDC,gCAAiB,EAAnE;AAAA,MAAQC,gBAAR,sBAAQA,gBAAR;AAAA,MAA0BC,mBAA1B,sBAA0BA,mBAA1B;;AAEA,MAAMC,OAAO,GAAGC,iBAAW,CAAC,YAAM;AAChC,QAAIT,UAAU,IAAI,CAACD,QAAnB,EAA6B;AAC3BQ,MAAAA,mBAAmB,CAAC,IAAD,CAAnB;AACD;AACF,GAJ0B,EAIxB,CAACP,UAAD,EAAaD,QAAb,CAJwB,CAA3B;AAMA,MAAMW,UAAU,GAAGC,aAAO,CAAC,YAAM;AAC/B,QAAMC,EAAE,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAX;AACAF,IAAAA,EAAE,CAACG,SAAH,GAAeC,6BAAS,CAACC,QAAV,CAAmBd,QAAnB,CAAf;AACA,WAAO,CAAC,CAACS,EAAE,CAACM,SAAZ;AACD,GAJyB,EAIvB,CAACf,QAAD,CAJuB,CAA1B;AAMA,SAAOH,UAAU,IAAIM,gBAAd,gBACLa,eAAC,WAAD;AACE,IAAA,OAAO,EAAEhB,QADX;AAEE,IAAA,UAAU,EAAEL,UAFd;AAGE,IAAA,WAAW,EAAEG,WAHf;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,mBAAmB,EAAEG;AALvB,IADK,gBASLY;AACE,IAAA,SAAS,2BAAoBT,UAAU,GAAG,EAAH,GAAQ,qBAAtC,CADX;AAEE,IAAA,uBAAuB,EAAE;AACvBU,MAAAA,MAAM,EAAEV,UAAU,GAAGP,QAAH,GAAcF;AADT,KAF3B;AAKE,IAAA,OAAO,EAAEO,OALX;AAME,IAAA,SAAS,EAAE,qBAAM;AANnB,IATF;AAkBD;;AAEDZ,UAAU,CAACyB,SAAX,GAAuB;AACrBxB,EAAAA,OAAO,EAAEyB,6BAAS,CAACC,MADE;AAErBzB,EAAAA,UAAU,EAAEwB,6BAAS,CAACE,IAFD;AAGrBzB,EAAAA,QAAQ,EAAEuB,6BAAS,CAACG,IAHC;AAIrBzB,EAAAA,UAAU,EAAEsB,6BAAS,CAACG,IAJD;AAKrBxB,EAAAA,WAAW,EAAEqB,6BAAS,CAACC;AALF,CAAvB;AAQA3B,UAAU,CAAC8B,YAAX,GAA0B;AACxB7B,EAAAA,OAAO,EAAE,EADe;AAExBC,EAAAA,UAAU,EAAE,sBAAM,EAFM;AAGxBC,EAAAA,QAAQ,EAAE,KAHc;AAIxBC,EAAAA,UAAU,EAAE,KAJY;AAKxBC,EAAAA,WAAW,EAAE;AALW,CAA1B;;;;"}

package/lib/cjs/styles/_jfReportsHelpers.scss

@@ -5,6 +5,8 @@
 
 // Mixins //
 
+@use "sass:math";
+
 @mixin text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -35,7 +37,7 @@
     $base: $base * 1px;
   }
 
-  @return $pxval / $base * 1em;
+  @return math.div($pxval, $base) * 1em;
 }
 
 // Functions //

package/lib/esm/components/TextEditor/QuillEditor.js

@@ -1,62 +1,113 @@
 import 'core-js/modules/es.array.map.js';
-import { useRef, useEffect, useCallback } from 'react';
+import React from 'react';
 import ReactQuill from 'react-quill';
 import PropTypes from 'prop-types';
-import withClickOutside from '../withClickOutside.js';
 import { modules, formats } from './textEditorConstants.js';
 import { fontSizes } from '../../constants/fonts.js';
 import 'react-quill/dist/quill.snow.css';
 import { jsx } from 'react/jsx-runtime';
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var Size = ReactQuill.Quill.import('attributors/style/size');
 Size.whitelist = fontSizes.map(function (s) {
   return "".concat(s, "px");
 });
 ReactQuill.Quill.register(Size, true);
 
-var QuillEditor = function QuillEditor(_ref) {
-  var content = _ref.content,
-      handleSave = _ref.handleSave,
-      placeholder = _ref.placeholder,
-      setIsTextEditorOpen = _ref.setIsTextEditorOpen;
-  var quill = useRef(null);
-
-  var saveAndQuit = function saveAndQuit() {
-    if (quill.current === null) return;
-    var editor = quill.current.getEditor();
-    var unprivilegedEditor = quill.current.makeUnprivilegedEditor(editor);
-    handleSave(unprivilegedEditor.getHTML());
-    setIsTextEditorOpen(false);
-  };
-
-  useEffect(function () {
-    if (quill.current !== null) {
-      var editor = quill.current.getEditor();
-      editor.setSelection(0, content.length);
-    }
+var QuillEditor = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(QuillEditor, _React$PureComponent);
 
-    return saveAndQuit;
-  }, []);
-  var handleKeyDown = useCallback(function (e) {
-    e.stopPropagation();
+  var _super = _createSuper(QuillEditor);
 
-    if (e.keyCode === 27) {
-      saveAndQuit();
+  function QuillEditor(props) {
+    var _this;
+
+    _classCallCheck(this, QuillEditor);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "saveAndQuit", function () {
+      var _this$props = _this.props,
+          content = _this$props.content,
+          handleSave = _this$props.handleSave,
+          setIsTextEditorOpen = _this$props.setIsTextEditorOpen;
+      setIsTextEditorOpen(false);
+      handleSave(content);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
+      e.stopPropagation();
+
+      if (e.keyCode === 27) {
+        _this.saveAndQuit();
+      }
+    });
+
+    _this.quill = /*#__PURE__*/React.createRef();
+    return _this;
+  }
+
+  _createClass(QuillEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.quill.current !== null) {
+        var content = this.props.content;
+        var editor = this.quill.current.getEditor();
+        editor.setSelection(0, content.length);
+      }
     }
-  }, []);
-  return /*#__PURE__*/jsx("div", {
-    className: "f-all",
-    onKeyDown: handleKeyDown,
-    children: /*#__PURE__*/jsx(ReactQuill, {
-      ref: quill,
-      defaultValue: content,
-      formats: QuillEditor.formats,
-      modules: QuillEditor.modules,
-      placeholder: placeholder,
-      preserveWhitespace: true
-    })
-  });
-};
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.saveAndQuit();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          content = _this$props2.content,
+          placeholder = _this$props2.placeholder,
+          setContent = _this$props2.setContent;
+      return /*#__PURE__*/jsx("div", {
+        className: "f-all",
+        onKeyDown: this.handleKeyDown,
+        children: /*#__PURE__*/jsx(ReactQuill, {
+          ref: this.quill,
+          formats: QuillEditor.formats,
+          modules: QuillEditor.modules,
+          onChange: setContent,
+          placeholder: placeholder,
+          preserveWhitespace: true,
+          value: content
+        })
+      });
+    }
+  }]);
+
+  return QuillEditor;
+}(React.PureComponent);
 
 QuillEditor.modules = modules;
 QuillEditor.formats = formats;
@@ -64,15 +115,16 @@ QuillEditor.propTypes = {
   content: PropTypes.string,
   handleSave: PropTypes.func,
   placeholder: PropTypes.string,
+  setContent: PropTypes.func,
   setIsTextEditorOpen: PropTypes.func
 };
 QuillEditor.defaultProps = {
   content: '',
   handleSave: function handleSave() {},
   placeholder: 'Click to edit text',
-  setIsTextEditorOpen: {}
+  setContent: function setContent() {},
+  setIsTextEditorOpen: function setIsTextEditorOpen() {}
 };
-var QuillEditor$1 = withClickOutside(QuillEditor);
 
-export default QuillEditor$1;
+export default QuillEditor;
 //# sourceMappingURL=QuillEditor.js.map

package/lib/esm/components/TextEditor/QuillEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuillEditor.js","sources":["../../../../src/components/TextEditor/QuillEditor.js"],"sourcesContent":["import { useEffect, useRef, useCallback } from 'react';\nimport ReactQuill from 'react-quill';\nimport PropTypes from 'prop-types';\nimport withClickOutside from '../withClickOutside';\nimport { formats, modules } from './textEditorConstants';\nimport { fontSizes } from '../../constants/fonts';\nimport 'react-quill/dist/quill.snow.css';\n\nconst Size = ReactQuill.Quill.import('attributors/style/size');\nSize.whitelist = fontSizes.map(s => `${s}px`);\nReactQuill.Quill.register(Size, true);\n\nconst QuillEditor = ({\n  content,\n  handleSave,\n  placeholder,\n  setIsTextEditorOpen,\n}) => {\n  const quill = useRef(null);\n  const saveAndQuit = () => {\n    if (quill.current === null) return;\n    const editor = quill.current.getEditor();\n    const unprivilegedEditor = quill.current.makeUnprivilegedEditor(editor);\n    handleSave(unprivilegedEditor.getHTML());\n    setIsTextEditorOpen(false);\n  };\n\n  useEffect(() => {\n    if (quill.current !== null) {\n      const editor = quill.current.getEditor();\n      editor.setSelection(0, content.length);\n    }\n    return saveAndQuit;\n  }, []);\n\n  const handleKeyDown = useCallback(e => {\n    e.stopPropagation();\n    if (e.keyCode === 27) {\n      saveAndQuit();\n    }\n  }, []);\n\n  return (\n    <div\n      className=\"f-all\"\n      onKeyDown={handleKeyDown}\n    >\n      <ReactQuill\n        ref={quill}\n        defaultValue={content}\n        formats={QuillEditor.formats}\n        modules={QuillEditor.modules}\n        placeholder={placeholder}\n        preserveWhitespace\n      />\n    </div>\n  );\n};\n\nQuillEditor.modules = modules;\nQuillEditor.formats = formats;\n\nQuillEditor.propTypes = {\n  content: PropTypes.string,\n  handleSave: PropTypes.func,\n  placeholder: PropTypes.string,\n  setIsTextEditorOpen: PropTypes.func,\n};\n\nQuillEditor.defaultProps = {\n  content: '',\n  handleSave: () => {},\n  placeholder: 'Click to edit text',\n  setIsTextEditorOpen: {},\n};\n\nexport default withClickOutside(QuillEditor);\n"],"names":["Size","ReactQuill","Quill","import","whitelist","fontSizes","map","s","register","QuillEditor","content","handleSave","placeholder","setIsTextEditorOpen","quill","useRef","saveAndQuit","current","editor","getEditor","unprivilegedEditor","makeUnprivilegedEditor","getHTML","useEffect","setSelection","length","handleKeyDown","useCallback","e","stopPropagation","keyCode","_jsx","formats","modules","propTypes","PropTypes","string","func","defaultProps","withClickOutside"],"mappings":";;;;;;;;;;AAQA,IAAMA,IAAI,GAAGC,UAAU,CAACC,KAAX,CAAiBC,MAAjB,CAAwB,wBAAxB,CAAb;AACAH,IAAI,CAACI,SAAL,GAAiBC,SAAS,CAACC,GAAV,CAAc,UAAAC,CAAC;AAAA,mBAAOA,CAAP;AAAA,CAAf,CAAjB;AACAN,UAAU,CAACC,KAAX,CAAiBM,QAAjB,CAA0BR,IAA1B,EAAgC,IAAhC;;AAEA,IAAMS,WAAW,GAAG,SAAdA,WAAc,OAKd;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,WAEI,QAFJA,WAEI;AAAA,MADJC,mBACI,QADJA,mBACI;AACJ,MAAMC,KAAK,GAAGC,MAAM,CAAC,IAAD,CAApB;;AACA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIF,KAAK,CAACG,OAAN,KAAkB,IAAtB,EAA4B;AAC5B,QAAMC,MAAM,GAAGJ,KAAK,CAACG,OAAN,CAAcE,SAAd,EAAf;AACA,QAAMC,kBAAkB,GAAGN,KAAK,CAACG,OAAN,CAAcI,sBAAd,CAAqCH,MAArC,CAA3B;AACAP,IAAAA,UAAU,CAACS,kBAAkB,CAACE,OAAnB,EAAD,CAAV;AACAT,IAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD,GAND;;AAQAU,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIT,KAAK,CAACG,OAAN,KAAkB,IAAtB,EAA4B;AAC1B,UAAMC,MAAM,GAAGJ,KAAK,CAACG,OAAN,CAAcE,SAAd,EAAf;AACAD,MAAAA,MAAM,CAACM,YAAP,CAAoB,CAApB,EAAuBd,OAAO,CAACe,MAA/B;AACD;;AACD,WAAOT,WAAP;AACD,GANQ,EAMN,EANM,CAAT;AAQA,MAAMU,aAAa,GAAGC,WAAW,CAAC,UAAAC,CAAC,EAAI;AACrCA,IAAAA,CAAC,CAACC,eAAF;;AACA,QAAID,CAAC,CAACE,OAAF,KAAc,EAAlB,EAAsB;AACpBd,MAAAA,WAAW;AACZ;AACF,GALgC,EAK9B,EAL8B,CAAjC;AAOA,sBACEe;AACE,IAAA,SAAS,EAAC,OADZ;AAEE,IAAA,SAAS,EAAEL,aAFb;AAAA,2BAIEK,IAAC,UAAD;AACE,MAAA,GAAG,EAAEjB,KADP;AAEE,MAAA,YAAY,EAAEJ,OAFhB;AAGE,MAAA,OAAO,EAAED,WAAW,CAACuB,OAHvB;AAIE,MAAA,OAAO,EAAEvB,WAAW,CAACwB,OAJvB;AAKE,MAAA,WAAW,EAAErB,WALf;AAME,MAAA,kBAAkB;AANpB;AAJF,IADF;AAeD,CA7CD;;AA+CAH,WAAW,CAACwB,OAAZ,GAAsBA,OAAtB;AACAxB,WAAW,CAACuB,OAAZ,GAAsBA,OAAtB;AAEAvB,WAAW,CAACyB,SAAZ,GAAwB;AACtBxB,EAAAA,OAAO,EAAEyB,SAAS,CAACC,MADG;AAEtBzB,EAAAA,UAAU,EAAEwB,SAAS,CAACE,IAFA;AAGtBzB,EAAAA,WAAW,EAAEuB,SAAS,CAACC,MAHD;AAItBvB,EAAAA,mBAAmB,EAAEsB,SAAS,CAACE;AAJT,CAAxB;AAOA5B,WAAW,CAAC6B,YAAZ,GAA2B;AACzB5B,EAAAA,OAAO,EAAE,EADgB;AAEzBC,EAAAA,UAAU,EAAE,sBAAM,EAFO;AAGzBC,EAAAA,WAAW,EAAE,oBAHY;AAIzBC,EAAAA,mBAAmB,EAAE;AAJI,CAA3B;AAOA,oBAAe0B,gBAAgB,CAAC9B,WAAD,CAA/B;;;;"}
+{"version":3,"file":"QuillEditor.js","sources":["../../../../src/components/TextEditor/QuillEditor.js"],"sourcesContent":["import React from 'react';\nimport ReactQuill from 'react-quill';\nimport PropTypes from 'prop-types';\nimport { formats, modules } from './textEditorConstants';\nimport { fontSizes } from '../../constants/fonts';\nimport 'react-quill/dist/quill.snow.css';\n\nconst Size = ReactQuill.Quill.import('attributors/style/size');\nSize.whitelist = fontSizes.map(s => `${s}px`);\nReactQuill.Quill.register(Size, true);\n\nclass QuillEditor extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.quill = React.createRef();\n  }\n\n  componentDidMount() {\n    if (this.quill.current !== null) {\n      const { content } = this.props;\n      const editor = this.quill.current.getEditor();\n      editor.setSelection(0, content.length);\n    }\n  }\n\n  componentWillUnmount() {\n    this.saveAndQuit();\n  }\n\n  saveAndQuit = () => {\n    const { content, handleSave, setIsTextEditorOpen } = this.props;\n    setIsTextEditorOpen(false);\n    handleSave(content);\n  }\n\n  handleKeyDown = e => {\n    e.stopPropagation();\n    if (e.keyCode === 27) {\n      this.saveAndQuit();\n    }\n  }\n\n  render() {\n    const {\n      content,\n      placeholder,\n      setContent,\n    } = this.props;\n\n    return (\n      <div\n        className=\"f-all\"\n        onKeyDown={this.handleKeyDown}\n      >\n        <ReactQuill\n          ref={this.quill}\n          formats={QuillEditor.formats}\n          modules={QuillEditor.modules}\n          onChange={setContent}\n          placeholder={placeholder}\n          preserveWhitespace\n          value={content}\n        />\n      </div>\n    );\n  }\n}\n\nQuillEditor.modules = modules;\nQuillEditor.formats = formats;\n\nQuillEditor.propTypes = {\n  content: PropTypes.string,\n  handleSave: PropTypes.func,\n  placeholder: PropTypes.string,\n  setContent: PropTypes.func,\n  setIsTextEditorOpen: PropTypes.func,\n};\n\nQuillEditor.defaultProps = {\n  content: '',\n  handleSave: () => {},\n  placeholder: 'Click to edit text',\n  setContent: () => {},\n  setIsTextEditorOpen: () => {},\n};\n\nexport default QuillEditor;\n"],"names":["Size","ReactQuill","Quill","import","whitelist","fontSizes","map","s","register","QuillEditor","props","content","handleSave","setIsTextEditorOpen","e","stopPropagation","keyCode","saveAndQuit","quill","React","createRef","current","editor","getEditor","setSelection","length","placeholder","setContent","_jsx","handleKeyDown","formats","modules","PureComponent","propTypes","PropTypes","string","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,IAAI,GAAGC,UAAU,CAACC,KAAX,CAAiBC,MAAjB,CAAwB,wBAAxB,CAAb;AACAH,IAAI,CAACI,SAAL,GAAiBC,SAAS,CAACC,GAAV,CAAc,UAAAC,CAAC;AAAA,mBAAOA,CAAP;AAAA,CAAf,CAAjB;AACAN,UAAU,CAACC,KAAX,CAAiBM,QAAjB,CAA0BR,IAA1B,EAAgC,IAAhC;;IAEMS;;;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA;;AACjB,8BAAMA,KAAN;;AADiB,kEAkBL,YAAM;AAClB,wBAAqD,MAAKA,KAA1D;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,UAAjB,eAAiBA,UAAjB;AAAA,UAA6BC,mBAA7B,eAA6BA,mBAA7B;AACAA,MAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACAD,MAAAA,UAAU,CAACD,OAAD,CAAV;AACD,KAtBkB;;AAAA,oEAwBH,UAAAG,CAAC,EAAI;AACnBA,MAAAA,CAAC,CAACC,eAAF;;AACA,UAAID,CAAC,CAACE,OAAF,KAAc,EAAlB,EAAsB;AACpB,cAAKC,WAAL;AACD;AACF,KA7BkB;;AAGjB,UAAKC,KAAL,gBAAaC,KAAK,CAACC,SAAN,EAAb;AAHiB;AAIlB;;;;WAED,6BAAoB;AAClB,UAAI,KAAKF,KAAL,CAAWG,OAAX,KAAuB,IAA3B,EAAiC;AAC/B,YAAQV,OAAR,GAAoB,KAAKD,KAAzB,CAAQC,OAAR;AACA,YAAMW,MAAM,GAAG,KAAKJ,KAAL,CAAWG,OAAX,CAAmBE,SAAnB,EAAf;AACAD,QAAAA,MAAM,CAACE,YAAP,CAAoB,CAApB,EAAuBb,OAAO,CAACc,MAA/B;AACD;AACF;;;WAED,gCAAuB;AACrB,WAAKR,WAAL;AACD;;;WAeD,kBAAS;AACP,yBAII,KAAKP,KAJT;AAAA,UACEC,OADF,gBACEA,OADF;AAAA,UAEEe,WAFF,gBAEEA,WAFF;AAAA,UAGEC,UAHF,gBAGEA,UAHF;AAMA,0BACEC;AACE,QAAA,SAAS,EAAC,OADZ;AAEE,QAAA,SAAS,EAAE,KAAKC,aAFlB;AAAA,+BAIED,IAAC,UAAD;AACE,UAAA,GAAG,EAAE,KAAKV,KADZ;AAEE,UAAA,OAAO,EAAET,WAAW,CAACqB,OAFvB;AAGE,UAAA,OAAO,EAAErB,WAAW,CAACsB,OAHvB;AAIE,UAAA,QAAQ,EAAEJ,UAJZ;AAKE,UAAA,WAAW,EAAED,WALf;AAME,UAAA,kBAAkB,MANpB;AAOE,UAAA,KAAK,EAAEf;AAPT;AAJF,QADF;AAgBD;;;;EAvDuBQ,KAAK,CAACa;;AA0DhCvB,WAAW,CAACsB,OAAZ,GAAsBA,OAAtB;AACAtB,WAAW,CAACqB,OAAZ,GAAsBA,OAAtB;AAEArB,WAAW,CAACwB,SAAZ,GAAwB;AACtBtB,EAAAA,OAAO,EAAEuB,SAAS,CAACC,MADG;AAEtBvB,EAAAA,UAAU,EAAEsB,SAAS,CAACE,IAFA;AAGtBV,EAAAA,WAAW,EAAEQ,SAAS,CAACC,MAHD;AAItBR,EAAAA,UAAU,EAAEO,SAAS,CAACE,IAJA;AAKtBvB,EAAAA,mBAAmB,EAAEqB,SAAS,CAACE;AALT,CAAxB;AAQA3B,WAAW,CAAC4B,YAAZ,GAA2B;AACzB1B,EAAAA,OAAO,EAAE,EADgB;AAEzBC,EAAAA,UAAU,EAAE,sBAAM,EAFO;AAGzBc,EAAAA,WAAW,EAAE,oBAHY;AAIzBC,EAAAA,UAAU,EAAE,sBAAM,EAJO;AAKzBd,EAAAA,mBAAmB,EAAE,+BAAM;AALF,CAA3B;;;;"}

package/lib/esm/components/TextEditor/TextEditor.js

@@ -1,9 +1,22 @@
-import { useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import domPurify from 'dompurify';
 import QuillEditor from './QuillEditor.js';
 import { useBuilderContext } from '../../utils/builderContext.js';
 import { jsx } from 'react/jsx-runtime';
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var TextEditor = function TextEditor(_ref) {
   var content = _ref.content,
       handleSave = _ref.handleSave,
@@ -11,6 +24,11 @@ var TextEditor = function TextEditor(_ref) {
       isSelected = _ref.isSelected,
       placeholder = _ref.placeholder;
 
+  var _useState = useState(content),
+      _useState2 = _slicedToArray(_useState, 2),
+      _content = _useState2[0],
+      setContent = _useState2[1];
+
   var _useBuilderContext = useBuilderContext(),
       isTextEditorOpen = _useBuilderContext.isTextEditorOpen,
       setIsTextEditorOpen = _useBuilderContext.setIsTextEditorOpen;
@@ -22,26 +40,19 @@ var TextEditor = function TextEditor(_ref) {
   }, [isSelected, isLocked]);
   var isNotEmpty = useMemo(function () {
     var el = document.createElement('div');
-    el.innerHTML = content;
+    el.innerHTML = domPurify.sanitize(_content);
     return !!el.innerText;
-  }, [content]);
-  var onClickOutside = useCallback(function () {
-    setTimeout(function () {
-      return setIsTextEditorOpen(false);
-    }, 1000);
-  }, [isTextEditorOpen]);
+  }, [_content]);
   return isSelected && isTextEditorOpen ? /*#__PURE__*/jsx(QuillEditor, {
-    content: content,
-    exceptionalClasses: ['ql-toolbar'],
+    content: _content,
     handleSave: handleSave,
-    onClickOutside: onClickOutside,
     placeholder: placeholder,
-    setIsTextEditorOpen: setIsTextEditorOpen,
-    withClickOutsideWrapperClass: "textEditorWrapper f-all"
+    setContent: setContent,
+    setIsTextEditorOpen: setIsTextEditorOpen
   }) : /*#__PURE__*/jsx("div", {
     className: "f-all ql-editor".concat(isNotEmpty ? '' : ' isEmptyTextElement'),
     dangerouslySetInnerHTML: {
-      __html: isNotEmpty ? content : placeholder
+      __html: isNotEmpty ? _content : placeholder
     },
     onClick: onClick,
     onKeyDown: function onKeyDown() {}

package/lib/esm/components/TextEditor/TextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.js","sources":["../../../../src/components/TextEditor/TextEditor.js"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport QuillEditor from './QuillEditor';\nimport { useBuilderContext } from '../../utils/builderContext';\n\nconst TextEditor = ({\n  content,\n  handleSave,\n  isLocked,\n  isSelected,\n  placeholder,\n}) => {\n  const { isTextEditorOpen, setIsTextEditorOpen } = useBuilderContext();\n\n  const onClick = useCallback(() => {\n    if (isSelected && !isLocked) {\n      setIsTextEditorOpen(true);\n    }\n  }, [isSelected, isLocked]);\n\n  const isNotEmpty = useMemo(() => {\n    const el = document.createElement('div');\n    el.innerHTML = content;\n    return !!el.innerText;\n  }, [content]);\n\n  const onClickOutside = useCallback(() => {\n    setTimeout(() => setIsTextEditorOpen(false), 1000);\n  }, [isTextEditorOpen]);\n\n  return isSelected && isTextEditorOpen ? (\n    <QuillEditor\n      content={content}\n      exceptionalClasses={['ql-toolbar']}\n      handleSave={handleSave}\n      onClickOutside={onClickOutside}\n      placeholder={placeholder}\n      setIsTextEditorOpen={setIsTextEditorOpen}\n      withClickOutsideWrapperClass=\"textEditorWrapper f-all\"\n    />\n  ) : (\n    <div\n      className={`f-all ql-editor${isNotEmpty ? '' : ' isEmptyTextElement'}`}\n      dangerouslySetInnerHTML={{\n        __html: isNotEmpty ? content : placeholder,\n      }}\n      onClick={onClick}\n      onKeyDown={() => {}}\n    />\n  );\n};\n\nTextEditor.propTypes = {\n  content: PropTypes.string,\n  handleSave: PropTypes.func,\n  isLocked: PropTypes.bool,\n  isSelected: PropTypes.bool,\n  placeholder: PropTypes.string,\n};\n\nTextEditor.defaultProps = {\n  content: '',\n  handleSave: () => {},\n  isLocked: false,\n  isSelected: false,\n  placeholder: 'Click to edit text',\n};\n\nexport default TextEditor;\n"],"names":["TextEditor","content","handleSave","isLocked","isSelected","placeholder","useBuilderContext","isTextEditorOpen","setIsTextEditorOpen","onClick","useCallback","isNotEmpty","useMemo","el","document","createElement","innerHTML","innerText","onClickOutside","setTimeout","_jsx","__html","propTypes","PropTypes","string","func","bool","defaultProps"],"mappings":";;;;;;IAKMA,UAAU,GAAG,SAAbA,UAAa,OAMb;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,UAEI,QAFJA,UAEI;AAAA,MADJC,WACI,QADJA,WACI;;AACJ,2BAAkDC,iBAAiB,EAAnE;AAAA,MAAQC,gBAAR,sBAAQA,gBAAR;AAAA,MAA0BC,mBAA1B,sBAA0BA,mBAA1B;;AAEA,MAAMC,OAAO,GAAGC,WAAW,CAAC,YAAM;AAChC,QAAIN,UAAU,IAAI,CAACD,QAAnB,EAA6B;AAC3BK,MAAAA,mBAAmB,CAAC,IAAD,CAAnB;AACD;AACF,GAJ0B,EAIxB,CAACJ,UAAD,EAAaD,QAAb,CAJwB,CAA3B;AAMA,MAAMQ,UAAU,GAAGC,OAAO,CAAC,YAAM;AAC/B,QAAMC,EAAE,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAX;AACAF,IAAAA,EAAE,CAACG,SAAH,GAAef,OAAf;AACA,WAAO,CAAC,CAACY,EAAE,CAACI,SAAZ;AACD,GAJyB,EAIvB,CAAChB,OAAD,CAJuB,CAA1B;AAMA,MAAMiB,cAAc,GAAGR,WAAW,CAAC,YAAM;AACvCS,IAAAA,UAAU,CAAC;AAAA,aAAMX,mBAAmB,CAAC,KAAD,CAAzB;AAAA,KAAD,EAAmC,IAAnC,CAAV;AACD,GAFiC,EAE/B,CAACD,gBAAD,CAF+B,CAAlC;AAIA,SAAOH,UAAU,IAAIG,gBAAd,gBACLa,IAAC,WAAD;AACE,IAAA,OAAO,EAAEnB,OADX;AAEE,IAAA,kBAAkB,EAAE,CAAC,YAAD,CAFtB;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,cAAc,EAAEgB,cAJlB;AAKE,IAAA,WAAW,EAAEb,WALf;AAME,IAAA,mBAAmB,EAAEG,mBANvB;AAOE,IAAA,4BAA4B,EAAC;AAP/B,IADK,gBAWLY;AACE,IAAA,SAAS,2BAAoBT,UAAU,GAAG,EAAH,GAAQ,qBAAtC,CADX;AAEE,IAAA,uBAAuB,EAAE;AACvBU,MAAAA,MAAM,EAAEV,UAAU,GAAGV,OAAH,GAAaI;AADR,KAF3B;AAKE,IAAA,OAAO,EAAEI,OALX;AAME,IAAA,SAAS,EAAE,qBAAM;AANnB,IAXF;AAoBD;;AAEDT,UAAU,CAACsB,SAAX,GAAuB;AACrBrB,EAAAA,OAAO,EAAEsB,SAAS,CAACC,MADE;AAErBtB,EAAAA,UAAU,EAAEqB,SAAS,CAACE,IAFD;AAGrBtB,EAAAA,QAAQ,EAAEoB,SAAS,CAACG,IAHC;AAIrBtB,EAAAA,UAAU,EAAEmB,SAAS,CAACG,IAJD;AAKrBrB,EAAAA,WAAW,EAAEkB,SAAS,CAACC;AALF,CAAvB;AAQAxB,UAAU,CAAC2B,YAAX,GAA0B;AACxB1B,EAAAA,OAAO,EAAE,EADe;AAExBC,EAAAA,UAAU,EAAE,sBAAM,EAFM;AAGxBC,EAAAA,QAAQ,EAAE,KAHc;AAIxBC,EAAAA,UAAU,EAAE,KAJY;AAKxBC,EAAAA,WAAW,EAAE;AALW,CAA1B;;;;"}
+{"version":3,"file":"TextEditor.js","sources":["../../../../src/components/TextEditor/TextEditor.js"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport domPurify from 'dompurify';\nimport QuillEditor from './QuillEditor';\nimport { useBuilderContext } from '../../utils/builderContext';\n\nconst TextEditor = ({\n  content,\n  handleSave,\n  isLocked,\n  isSelected,\n  placeholder,\n}) => {\n  const [_content, setContent] = useState(content);\n\n  const { isTextEditorOpen, setIsTextEditorOpen } = useBuilderContext();\n\n  const onClick = useCallback(() => {\n    if (isSelected && !isLocked) {\n      setIsTextEditorOpen(true);\n    }\n  }, [isSelected, isLocked]);\n\n  const isNotEmpty = useMemo(() => {\n    const el = document.createElement('div');\n    el.innerHTML = domPurify.sanitize(_content);\n    return !!el.innerText;\n  }, [_content]);\n\n  return isSelected && isTextEditorOpen ? (\n    <QuillEditor\n      content={_content}\n      handleSave={handleSave}\n      placeholder={placeholder}\n      setContent={setContent}\n      setIsTextEditorOpen={setIsTextEditorOpen}\n    />\n  ) : (\n    <div\n      className={`f-all ql-editor${isNotEmpty ? '' : ' isEmptyTextElement'}`}\n      dangerouslySetInnerHTML={{\n        __html: isNotEmpty ? _content : placeholder,\n      }}\n      onClick={onClick}\n      onKeyDown={() => {}}\n    />\n  );\n};\n\nTextEditor.propTypes = {\n  content: PropTypes.string,\n  handleSave: PropTypes.func,\n  isLocked: PropTypes.bool,\n  isSelected: PropTypes.bool,\n  placeholder: PropTypes.string,\n};\n\nTextEditor.defaultProps = {\n  content: '',\n  handleSave: () => {},\n  isLocked: false,\n  isSelected: false,\n  placeholder: 'Click to edit text',\n};\n\nexport default TextEditor;\n"],"names":["TextEditor","content","handleSave","isLocked","isSelected","placeholder","useState","_content","setContent","useBuilderContext","isTextEditorOpen","setIsTextEditorOpen","onClick","useCallback","isNotEmpty","useMemo","el","document","createElement","innerHTML","domPurify","sanitize","innerText","_jsx","__html","propTypes","PropTypes","string","func","bool","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;IAMMA,UAAU,GAAG,SAAbA,UAAa,OAMb;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,UAEI,QAFJA,UAEI;AAAA,MADJC,WACI,QADJA,WACI;;AACJ,kBAA+BC,QAAQ,CAACL,OAAD,CAAvC;AAAA;AAAA,MAAOM,QAAP;AAAA,MAAiBC,UAAjB;;AAEA,2BAAkDC,iBAAiB,EAAnE;AAAA,MAAQC,gBAAR,sBAAQA,gBAAR;AAAA,MAA0BC,mBAA1B,sBAA0BA,mBAA1B;;AAEA,MAAMC,OAAO,GAAGC,WAAW,CAAC,YAAM;AAChC,QAAIT,UAAU,IAAI,CAACD,QAAnB,EAA6B;AAC3BQ,MAAAA,mBAAmB,CAAC,IAAD,CAAnB;AACD;AACF,GAJ0B,EAIxB,CAACP,UAAD,EAAaD,QAAb,CAJwB,CAA3B;AAMA,MAAMW,UAAU,GAAGC,OAAO,CAAC,YAAM;AAC/B,QAAMC,EAAE,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAX;AACAF,IAAAA,EAAE,CAACG,SAAH,GAAeC,SAAS,CAACC,QAAV,CAAmBd,QAAnB,CAAf;AACA,WAAO,CAAC,CAACS,EAAE,CAACM,SAAZ;AACD,GAJyB,EAIvB,CAACf,QAAD,CAJuB,CAA1B;AAMA,SAAOH,UAAU,IAAIM,gBAAd,gBACLa,IAAC,WAAD;AACE,IAAA,OAAO,EAAEhB,QADX;AAEE,IAAA,UAAU,EAAEL,UAFd;AAGE,IAAA,WAAW,EAAEG,WAHf;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,mBAAmB,EAAEG;AALvB,IADK,gBASLY;AACE,IAAA,SAAS,2BAAoBT,UAAU,GAAG,EAAH,GAAQ,qBAAtC,CADX;AAEE,IAAA,uBAAuB,EAAE;AACvBU,MAAAA,MAAM,EAAEV,UAAU,GAAGP,QAAH,GAAcF;AADT,KAF3B;AAKE,IAAA,OAAO,EAAEO,OALX;AAME,IAAA,SAAS,EAAE,qBAAM;AANnB,IATF;AAkBD;;AAEDZ,UAAU,CAACyB,SAAX,GAAuB;AACrBxB,EAAAA,OAAO,EAAEyB,SAAS,CAACC,MADE;AAErBzB,EAAAA,UAAU,EAAEwB,SAAS,CAACE,IAFD;AAGrBzB,EAAAA,QAAQ,EAAEuB,SAAS,CAACG,IAHC;AAIrBzB,EAAAA,UAAU,EAAEsB,SAAS,CAACG,IAJD;AAKrBxB,EAAAA,WAAW,EAAEqB,SAAS,CAACC;AALF,CAAvB;AAQA3B,UAAU,CAAC8B,YAAX,GAA0B;AACxB7B,EAAAA,OAAO,EAAE,EADe;AAExBC,EAAAA,UAAU,EAAE,sBAAM,EAFM;AAGxBC,EAAAA,QAAQ,EAAE,KAHc;AAIxBC,EAAAA,UAAU,EAAE,KAJY;AAKxBC,EAAAA,WAAW,EAAE;AALW,CAA1B;;;;"}

package/lib/esm/styles/_jfReportsHelpers.scss

@@ -5,6 +5,8 @@
 
 // Mixins //
 
+@use "sass:math";
+
 @mixin text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -35,7 +37,7 @@
     $base: $base * 1px;
   }
 
-  @return $pxval / $base * 1em;
+  @return math.div($pxval, $base) * 1em;
 }
 
 // Functions //

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jotforminc/dnd-builder",
-  "version": "2.0.2",
+  "version": "2.2.1",
   "files": [
     "lib"
   ],
@@ -83,11 +83,11 @@
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
     "lint-staged": "10.5.4",
-    "node-sass": "5.0.0",
     "rollup": "2.39.0",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-sourcemaps": "0.6.3",
     "rollup-plugin-static-import": "0.1.1",
+    "sass": "1.52.3",
     "sass-loader": "10.1.1",
     "standard-version": "9.3.0",
     "style-loader": "2.0.0",