@jotforminc/dnd-builder 2.0.0 → 2.2.0

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.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)
+
+
+### Bug Fixes
+
+* **assets:** logo & readme gif has added ([6385694](https://github.com/jotform/dnd-builder/commit/6385694f86d9bad8ddd27d51b45b620973f07f8a))
+* **storybook:** new branding updates ([f2d28f2](https://github.com/jotform/dnd-builder/commit/f2d28f221c1b6debd9ba71a9bdf0a5c418a12e56))
+* **storybook:** theme added ([f22e8bc](https://github.com/jotform/dnd-builder/commit/f22e8bcdf12709635f9d26a4bf794be7d373a0be))
+
 ## [2.0.0](https://github.com/jotform/dnd-builder/compare/v2.0.0-beta.3...v2.0.0) (2021-11-29)
 
 

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 JotForm
+Copyright (c) 2021 Jotform
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -1,7 +1,7 @@
 <p align="center">
-  <img src="/.storybook/assets/logo.png" alt="react beautiful dnd logo" />
+  <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>
+<h1 align="center">Jotform - React Page Builder <small></small></h1>
 
 <div align="center">
 
@@ -40,13 +40,11 @@ $npm install @jotforminc/dnd-builder --save
 ```
 
 
-## Documentation & API Reference📖
+## Documentation & API Reference 📖
 
 [Stories & Documentation](https://www.jotform.com/open-source/dnd-builder/)
 
-## Features
-
-## Core characteristics
+## Features & Core characteristics
 
 - Ready to use 🎁 💈
 - Draggable Elements 🧤
@@ -62,4 +60,4 @@ $npm install @jotforminc/dnd-builder --save
 
 ## License
 
-Code copyright 2021 JotForm. Code released under [the MIT license](https://github.com/jotform/dnd-builder/blob/master/LICENSE.md).
+Code copyright 2021 Jotform. Code released under [the MIT license](https://github.com/jotform/dnd-builder/blob/master/LICENSE.md).

package/lib/cjs/components/ReportWrapper.js

@@ -73,12 +73,13 @@ ReportWrapper.propTypes = {
   children: PropTypes__default['default'].any,
   mode: PropTypes__default['default'].string,
   pageCount: PropTypes__default['default'].number,
-  theme: PropTypes__default['default'].oneOf(['lightMode', 'darkMode']).isRequired
+  theme: PropTypes__default['default'].oneOf(['lightMode', 'darkMode'])
 };
 ReportWrapper.defaultProps = {
   children: null,
   mode: '',
-  pageCount: 0
+  pageCount: 0,
+  theme: 'lightMode'
 };
 var ReportWrapper$1 = /*#__PURE__*/React.memo(ReportWrapper);
 

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

@@ -1 +1 @@
-{"version":3,"file":"ReportWrapper.js","sources":["../../../src/components/ReportWrapper.js"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBuilderContext } from '../utils/builderContext';\nimport { useFitZoom } from '../utils/hooks';\nimport { usePropContext } from '../utils/propContext';\n\nconst getModeClass = mode => `${mode}Mode`;\n\nconst ReportWrapper = ({\n  children,\n  mode,\n  pageCount,\n  theme,\n}) => {\n  const {\n    isAllSlidesPanelOpen,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    isSlidesPanelOpen,\n    setIsLeftPanelOpen,\n    setIsSlidesPanelOpen,\n    setZoom,\n  } = useBuilderContext();\n  const { settings } = usePropContext();\n  const decidedWhichPanelToOpen = useRef(false);\n\n  useFitZoom({\n    handler: setZoom,\n    isModeCustomize: mode === 'customize',\n    settings,\n  });\n\n  useEffect(() => {\n    if (mode !== 'customize' || decidedWhichPanelToOpen.current) {\n      return;\n    }\n\n    if (pageCount > 1) {\n      if (isLeftPanelOpen) {\n        setIsLeftPanelOpen(false);\n      }\n      setIsSlidesPanelOpen(true);\n    } else {\n      if (isSlidesPanelOpen) {\n        setIsSlidesPanelOpen(false);\n      }\n      setIsLeftPanelOpen(true);\n    }\n\n    decidedWhichPanelToOpen.current = true;\n  }, [mode, pageCount]);\n\n  const wrapperClass = classNames(\n    'jfReport',\n    'f-height',\n    'd-flex',\n    getModeClass(mode),\n    isLeftPanelOpen === true ? 'leftPaneIsActive' : '',\n    isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '',\n    isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '',\n    isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '',\n    theme,\n  );\n  return (\n    <div\n      className={wrapperClass}\n    >\n      {children}\n    </div>\n  );\n};\n\nReportWrapper.propTypes = {\n  children: PropTypes.any,\n  mode: PropTypes.string,\n  pageCount: PropTypes.number,\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']).isRequired,\n};\n\nReportWrapper.defaultProps = {\n  children: null,\n  mode: '',\n  pageCount: 0,\n};\n\nexport default memo(ReportWrapper);\n"],"names":["getModeClass","mode","ReportWrapper","children","pageCount","theme","useBuilderContext","isAllSlidesPanelOpen","isLeftPanelOpen","isRightPanelOpen","isSlidesPanelOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","setZoom","usePropContext","settings","decidedWhichPanelToOpen","useRef","useFitZoom","handler","isModeCustomize","useEffect","current","wrapperClass","classNames","_jsx","propTypes","PropTypes","any","string","number","oneOf","isRequired","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;AAOA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,IAAI;AAAA,mBAAOA,IAAP;AAAA,CAAzB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAKhB;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJF,IAGI,QAHJA,IAGI;AAAA,MAFJG,SAEI,QAFJA,SAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,2BAQIC,gCAAiB,EARrB;AAAA,MACEC,oBADF,sBACEA,oBADF;AAAA,MAEEC,eAFF,sBAEEA,eAFF;AAAA,MAGEC,gBAHF,sBAGEA,gBAHF;AAAA,MAIEC,iBAJF,sBAIEA,iBAJF;AAAA,MAKEC,kBALF,sBAKEA,kBALF;AAAA,MAMEC,oBANF,sBAMEA,oBANF;AAAA,MAOEC,OAPF,sBAOEA,OAPF;;AASA,wBAAqBC,0BAAc,EAAnC;AAAA,MAAQC,QAAR,mBAAQA,QAAR;;AACA,MAAMC,uBAAuB,GAAGC,YAAM,CAAC,KAAD,CAAtC;AAEAC,EAAAA,gBAAU,CAAC;AACTC,IAAAA,OAAO,EAAEN,OADA;AAETO,IAAAA,eAAe,EAAEnB,IAAI,KAAK,WAFjB;AAGTc,IAAAA,QAAQ,EAARA;AAHS,GAAD,CAAV;AAMAM,EAAAA,eAAS,CAAC,YAAM;AACd,QAAIpB,IAAI,KAAK,WAAT,IAAwBe,uBAAuB,CAACM,OAApD,EAA6D;AAC3D;AACD;;AAED,QAAIlB,SAAS,GAAG,CAAhB,EAAmB;AACjB,UAAII,eAAJ,EAAqB;AACnBG,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;;AACDC,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,KALD,MAKO;AACL,UAAIF,iBAAJ,EAAuB;AACrBE,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACD;;AACDD,MAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;;AAEDK,IAAAA,uBAAuB,CAACM,OAAxB,GAAkC,IAAlC;AACD,GAlBQ,EAkBN,CAACrB,IAAD,EAAOG,SAAP,CAlBM,CAAT;AAoBA,MAAMmB,YAAY,GAAGC,8BAAU,CAC7B,UAD6B,EAE7B,UAF6B,EAG7B,QAH6B,EAI7BxB,YAAY,CAACC,IAAD,CAJiB,EAK7BO,eAAe,KAAK,IAApB,GAA2B,kBAA3B,GAAgD,EALnB,EAM7BC,gBAAgB,KAAK,IAArB,IAA6BC,iBAAiB,KAAK,IAAnD,GAA0D,mBAA1D,GAAgF,EANnD,EAO7BA,iBAAiB,KAAK,IAAtB,GAA6B,oBAA7B,GAAoD,EAPvB,EAQ7BH,oBAAoB,KAAK,IAAzB,GAAgC,uBAAhC,GAA0D,EAR7B,EAS7BF,KAT6B,CAA/B;AAWA,sBACEoB;AACE,IAAA,SAAS,EAAEF,YADb;AAAA,cAGGpB;AAHH,IADF;AAOD,CA9DD;;AAgEAD,aAAa,CAACwB,SAAd,GAA0B;AACxBvB,EAAAA,QAAQ,EAAEwB,6BAAS,CAACC,GADI;AAExB3B,EAAAA,IAAI,EAAE0B,6BAAS,CAACE,MAFQ;AAGxBzB,EAAAA,SAAS,EAAEuB,6BAAS,CAACG,MAHG;AAIxBzB,EAAAA,KAAK,EAAEsB,6BAAS,CAACI,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB,EAA2CC;AAJ1B,CAA1B;AAOA9B,aAAa,CAAC+B,YAAd,GAA6B;AAC3B9B,EAAAA,QAAQ,EAAE,IADiB;AAE3BF,EAAAA,IAAI,EAAE,EAFqB;AAG3BG,EAAAA,SAAS,EAAE;AAHgB,CAA7B;AAMA,mCAAe8B,UAAI,CAAChC,aAAD,CAAnB;;;;"}
+{"version":3,"file":"ReportWrapper.js","sources":["../../../src/components/ReportWrapper.js"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBuilderContext } from '../utils/builderContext';\nimport { useFitZoom } from '../utils/hooks';\nimport { usePropContext } from '../utils/propContext';\n\nconst getModeClass = mode => `${mode}Mode`;\n\nconst ReportWrapper = ({\n  children,\n  mode,\n  pageCount,\n  theme,\n}) => {\n  const {\n    isAllSlidesPanelOpen,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    isSlidesPanelOpen,\n    setIsLeftPanelOpen,\n    setIsSlidesPanelOpen,\n    setZoom,\n  } = useBuilderContext();\n  const { settings } = usePropContext();\n  const decidedWhichPanelToOpen = useRef(false);\n\n  useFitZoom({\n    handler: setZoom,\n    isModeCustomize: mode === 'customize',\n    settings,\n  });\n\n  useEffect(() => {\n    if (mode !== 'customize' || decidedWhichPanelToOpen.current) {\n      return;\n    }\n\n    if (pageCount > 1) {\n      if (isLeftPanelOpen) {\n        setIsLeftPanelOpen(false);\n      }\n      setIsSlidesPanelOpen(true);\n    } else {\n      if (isSlidesPanelOpen) {\n        setIsSlidesPanelOpen(false);\n      }\n      setIsLeftPanelOpen(true);\n    }\n\n    decidedWhichPanelToOpen.current = true;\n  }, [mode, pageCount]);\n\n  const wrapperClass = classNames(\n    'jfReport',\n    'f-height',\n    'd-flex',\n    getModeClass(mode),\n    isLeftPanelOpen === true ? 'leftPaneIsActive' : '',\n    isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '',\n    isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '',\n    isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '',\n    theme,\n  );\n  return (\n    <div\n      className={wrapperClass}\n    >\n      {children}\n    </div>\n  );\n};\n\nReportWrapper.propTypes = {\n  children: PropTypes.any,\n  mode: PropTypes.string,\n  pageCount: PropTypes.number,\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']),\n};\n\nReportWrapper.defaultProps = {\n  children: null,\n  mode: '',\n  pageCount: 0,\n  theme: 'lightMode',\n};\n\nexport default memo(ReportWrapper);\n"],"names":["getModeClass","mode","ReportWrapper","children","pageCount","theme","useBuilderContext","isAllSlidesPanelOpen","isLeftPanelOpen","isRightPanelOpen","isSlidesPanelOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","setZoom","usePropContext","settings","decidedWhichPanelToOpen","useRef","useFitZoom","handler","isModeCustomize","useEffect","current","wrapperClass","classNames","_jsx","propTypes","PropTypes","any","string","number","oneOf","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;AAOA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,IAAI;AAAA,mBAAOA,IAAP;AAAA,CAAzB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAKhB;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJF,IAGI,QAHJA,IAGI;AAAA,MAFJG,SAEI,QAFJA,SAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,2BAQIC,gCAAiB,EARrB;AAAA,MACEC,oBADF,sBACEA,oBADF;AAAA,MAEEC,eAFF,sBAEEA,eAFF;AAAA,MAGEC,gBAHF,sBAGEA,gBAHF;AAAA,MAIEC,iBAJF,sBAIEA,iBAJF;AAAA,MAKEC,kBALF,sBAKEA,kBALF;AAAA,MAMEC,oBANF,sBAMEA,oBANF;AAAA,MAOEC,OAPF,sBAOEA,OAPF;;AASA,wBAAqBC,0BAAc,EAAnC;AAAA,MAAQC,QAAR,mBAAQA,QAAR;;AACA,MAAMC,uBAAuB,GAAGC,YAAM,CAAC,KAAD,CAAtC;AAEAC,EAAAA,gBAAU,CAAC;AACTC,IAAAA,OAAO,EAAEN,OADA;AAETO,IAAAA,eAAe,EAAEnB,IAAI,KAAK,WAFjB;AAGTc,IAAAA,QAAQ,EAARA;AAHS,GAAD,CAAV;AAMAM,EAAAA,eAAS,CAAC,YAAM;AACd,QAAIpB,IAAI,KAAK,WAAT,IAAwBe,uBAAuB,CAACM,OAApD,EAA6D;AAC3D;AACD;;AAED,QAAIlB,SAAS,GAAG,CAAhB,EAAmB;AACjB,UAAII,eAAJ,EAAqB;AACnBG,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;;AACDC,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,KALD,MAKO;AACL,UAAIF,iBAAJ,EAAuB;AACrBE,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACD;;AACDD,MAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;;AAEDK,IAAAA,uBAAuB,CAACM,OAAxB,GAAkC,IAAlC;AACD,GAlBQ,EAkBN,CAACrB,IAAD,EAAOG,SAAP,CAlBM,CAAT;AAoBA,MAAMmB,YAAY,GAAGC,8BAAU,CAC7B,UAD6B,EAE7B,UAF6B,EAG7B,QAH6B,EAI7BxB,YAAY,CAACC,IAAD,CAJiB,EAK7BO,eAAe,KAAK,IAApB,GAA2B,kBAA3B,GAAgD,EALnB,EAM7BC,gBAAgB,KAAK,IAArB,IAA6BC,iBAAiB,KAAK,IAAnD,GAA0D,mBAA1D,GAAgF,EANnD,EAO7BA,iBAAiB,KAAK,IAAtB,GAA6B,oBAA7B,GAAoD,EAPvB,EAQ7BH,oBAAoB,KAAK,IAAzB,GAAgC,uBAAhC,GAA0D,EAR7B,EAS7BF,KAT6B,CAA/B;AAWA,sBACEoB;AACE,IAAA,SAAS,EAAEF,YADb;AAAA,cAGGpB;AAHH,IADF;AAOD,CA9DD;;AAgEAD,aAAa,CAACwB,SAAd,GAA0B;AACxBvB,EAAAA,QAAQ,EAAEwB,6BAAS,CAACC,GADI;AAExB3B,EAAAA,IAAI,EAAE0B,6BAAS,CAACE,MAFQ;AAGxBzB,EAAAA,SAAS,EAAEuB,6BAAS,CAACG,MAHG;AAIxBzB,EAAAA,KAAK,EAAEsB,6BAAS,CAACI,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB;AAJiB,CAA1B;AAOA7B,aAAa,CAAC8B,YAAd,GAA6B;AAC3B7B,EAAAA,QAAQ,EAAE,IADiB;AAE3BF,EAAAA,IAAI,EAAE,EAFqB;AAG3BG,EAAAA,SAAS,EAAE,CAHgB;AAI3BC,EAAAA,KAAK,EAAE;AAJoB,CAA7B;AAOA,mCAAe4B,UAAI,CAAC/B,aAAD,CAAnB;;;;"}

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

@@ -10,6 +10,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
+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,
@@ -17,6 +29,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 +45,19 @@ var TextEditor = function TextEditor(_ref) {
   }, [isSelected, isLocked]);
   var isNotEmpty = React.useMemo(function () {
     var el = document.createElement('div');
-    el.innerHTML = content;
+    el.innerHTML = _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 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 = _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","innerText","_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,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,GAAeZ,QAAf;AACA,WAAO,CAAC,CAACS,EAAE,CAACI,SAAZ;AACD,GAJyB,EAIvB,CAACb,QAAD,CAJuB,CAA1B;AAMA,SAAOH,UAAU,IAAIM,gBAAd,gBACLW,eAAC,WAAD;AACE,IAAA,OAAO,EAAEd,QADX;AAEE,IAAA,UAAU,EAAEL,UAFd;AAGE,IAAA,WAAW,EAAEG,WAHf;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,mBAAmB,EAAEG;AALvB,IADK,gBASLU;AACE,IAAA,SAAS,2BAAoBP,UAAU,GAAG,EAAH,GAAQ,qBAAtC,CADX;AAEE,IAAA,uBAAuB,EAAE;AACvBQ,MAAAA,MAAM,EAAER,UAAU,GAAGP,QAAH,GAAcF;AADT,KAF3B;AAKE,IAAA,OAAO,EAAEO,OALX;AAME,IAAA,SAAS,EAAE,qBAAM;AANnB,IATF;AAkBD;;AAEDZ,UAAU,CAACuB,SAAX,GAAuB;AACrBtB,EAAAA,OAAO,EAAEuB,6BAAS,CAACC,MADE;AAErBvB,EAAAA,UAAU,EAAEsB,6BAAS,CAACE,IAFD;AAGrBvB,EAAAA,QAAQ,EAAEqB,6BAAS,CAACG,IAHC;AAIrBvB,EAAAA,UAAU,EAAEoB,6BAAS,CAACG,IAJD;AAKrBtB,EAAAA,WAAW,EAAEmB,6BAAS,CAACC;AALF,CAAvB;AAQAzB,UAAU,CAAC4B,YAAX,GAA0B;AACxB3B,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/_jfLightTheme.scss

@@ -2,7 +2,7 @@
 
 .lightMode {
   .jfReport-toolbox, .jfPresentation-toolbox {
-    background-color: #f1f1f5;
+    background-color: $white;
   }
 
   .jfReport-pane {

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/ReportWrapper.js

@@ -66,12 +66,13 @@ ReportWrapper.propTypes = {
   children: PropTypes.any,
   mode: PropTypes.string,
   pageCount: PropTypes.number,
-  theme: PropTypes.oneOf(['lightMode', 'darkMode']).isRequired
+  theme: PropTypes.oneOf(['lightMode', 'darkMode'])
 };
 ReportWrapper.defaultProps = {
   children: null,
   mode: '',
-  pageCount: 0
+  pageCount: 0,
+  theme: 'lightMode'
 };
 var ReportWrapper$1 = /*#__PURE__*/memo(ReportWrapper);
 

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

@@ -1 +1 @@
-{"version":3,"file":"ReportWrapper.js","sources":["../../../src/components/ReportWrapper.js"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBuilderContext } from '../utils/builderContext';\nimport { useFitZoom } from '../utils/hooks';\nimport { usePropContext } from '../utils/propContext';\n\nconst getModeClass = mode => `${mode}Mode`;\n\nconst ReportWrapper = ({\n  children,\n  mode,\n  pageCount,\n  theme,\n}) => {\n  const {\n    isAllSlidesPanelOpen,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    isSlidesPanelOpen,\n    setIsLeftPanelOpen,\n    setIsSlidesPanelOpen,\n    setZoom,\n  } = useBuilderContext();\n  const { settings } = usePropContext();\n  const decidedWhichPanelToOpen = useRef(false);\n\n  useFitZoom({\n    handler: setZoom,\n    isModeCustomize: mode === 'customize',\n    settings,\n  });\n\n  useEffect(() => {\n    if (mode !== 'customize' || decidedWhichPanelToOpen.current) {\n      return;\n    }\n\n    if (pageCount > 1) {\n      if (isLeftPanelOpen) {\n        setIsLeftPanelOpen(false);\n      }\n      setIsSlidesPanelOpen(true);\n    } else {\n      if (isSlidesPanelOpen) {\n        setIsSlidesPanelOpen(false);\n      }\n      setIsLeftPanelOpen(true);\n    }\n\n    decidedWhichPanelToOpen.current = true;\n  }, [mode, pageCount]);\n\n  const wrapperClass = classNames(\n    'jfReport',\n    'f-height',\n    'd-flex',\n    getModeClass(mode),\n    isLeftPanelOpen === true ? 'leftPaneIsActive' : '',\n    isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '',\n    isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '',\n    isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '',\n    theme,\n  );\n  return (\n    <div\n      className={wrapperClass}\n    >\n      {children}\n    </div>\n  );\n};\n\nReportWrapper.propTypes = {\n  children: PropTypes.any,\n  mode: PropTypes.string,\n  pageCount: PropTypes.number,\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']).isRequired,\n};\n\nReportWrapper.defaultProps = {\n  children: null,\n  mode: '',\n  pageCount: 0,\n};\n\nexport default memo(ReportWrapper);\n"],"names":["getModeClass","mode","ReportWrapper","children","pageCount","theme","useBuilderContext","isAllSlidesPanelOpen","isLeftPanelOpen","isRightPanelOpen","isSlidesPanelOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","setZoom","usePropContext","settings","decidedWhichPanelToOpen","useRef","useFitZoom","handler","isModeCustomize","useEffect","current","wrapperClass","classNames","_jsx","propTypes","PropTypes","any","string","number","oneOf","isRequired","defaultProps","memo"],"mappings":";;;;;;;;AAOA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,IAAI;AAAA,mBAAOA,IAAP;AAAA,CAAzB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAKhB;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJF,IAGI,QAHJA,IAGI;AAAA,MAFJG,SAEI,QAFJA,SAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,2BAQIC,iBAAiB,EARrB;AAAA,MACEC,oBADF,sBACEA,oBADF;AAAA,MAEEC,eAFF,sBAEEA,eAFF;AAAA,MAGEC,gBAHF,sBAGEA,gBAHF;AAAA,MAIEC,iBAJF,sBAIEA,iBAJF;AAAA,MAKEC,kBALF,sBAKEA,kBALF;AAAA,MAMEC,oBANF,sBAMEA,oBANF;AAAA,MAOEC,OAPF,sBAOEA,OAPF;;AASA,wBAAqBC,cAAc,EAAnC;AAAA,MAAQC,QAAR,mBAAQA,QAAR;;AACA,MAAMC,uBAAuB,GAAGC,MAAM,CAAC,KAAD,CAAtC;AAEAC,EAAAA,UAAU,CAAC;AACTC,IAAAA,OAAO,EAAEN,OADA;AAETO,IAAAA,eAAe,EAAEnB,IAAI,KAAK,WAFjB;AAGTc,IAAAA,QAAQ,EAARA;AAHS,GAAD,CAAV;AAMAM,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIpB,IAAI,KAAK,WAAT,IAAwBe,uBAAuB,CAACM,OAApD,EAA6D;AAC3D;AACD;;AAED,QAAIlB,SAAS,GAAG,CAAhB,EAAmB;AACjB,UAAII,eAAJ,EAAqB;AACnBG,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;;AACDC,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,KALD,MAKO;AACL,UAAIF,iBAAJ,EAAuB;AACrBE,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACD;;AACDD,MAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;;AAEDK,IAAAA,uBAAuB,CAACM,OAAxB,GAAkC,IAAlC;AACD,GAlBQ,EAkBN,CAACrB,IAAD,EAAOG,SAAP,CAlBM,CAAT;AAoBA,MAAMmB,YAAY,GAAGC,UAAU,CAC7B,UAD6B,EAE7B,UAF6B,EAG7B,QAH6B,EAI7BxB,YAAY,CAACC,IAAD,CAJiB,EAK7BO,eAAe,KAAK,IAApB,GAA2B,kBAA3B,GAAgD,EALnB,EAM7BC,gBAAgB,KAAK,IAArB,IAA6BC,iBAAiB,KAAK,IAAnD,GAA0D,mBAA1D,GAAgF,EANnD,EAO7BA,iBAAiB,KAAK,IAAtB,GAA6B,oBAA7B,GAAoD,EAPvB,EAQ7BH,oBAAoB,KAAK,IAAzB,GAAgC,uBAAhC,GAA0D,EAR7B,EAS7BF,KAT6B,CAA/B;AAWA,sBACEoB;AACE,IAAA,SAAS,EAAEF,YADb;AAAA,cAGGpB;AAHH,IADF;AAOD,CA9DD;;AAgEAD,aAAa,CAACwB,SAAd,GAA0B;AACxBvB,EAAAA,QAAQ,EAAEwB,SAAS,CAACC,GADI;AAExB3B,EAAAA,IAAI,EAAE0B,SAAS,CAACE,MAFQ;AAGxBzB,EAAAA,SAAS,EAAEuB,SAAS,CAACG,MAHG;AAIxBzB,EAAAA,KAAK,EAAEsB,SAAS,CAACI,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB,EAA2CC;AAJ1B,CAA1B;AAOA9B,aAAa,CAAC+B,YAAd,GAA6B;AAC3B9B,EAAAA,QAAQ,EAAE,IADiB;AAE3BF,EAAAA,IAAI,EAAE,EAFqB;AAG3BG,EAAAA,SAAS,EAAE;AAHgB,CAA7B;AAMA,mCAAe8B,IAAI,CAAChC,aAAD,CAAnB;;;;"}
+{"version":3,"file":"ReportWrapper.js","sources":["../../../src/components/ReportWrapper.js"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBuilderContext } from '../utils/builderContext';\nimport { useFitZoom } from '../utils/hooks';\nimport { usePropContext } from '../utils/propContext';\n\nconst getModeClass = mode => `${mode}Mode`;\n\nconst ReportWrapper = ({\n  children,\n  mode,\n  pageCount,\n  theme,\n}) => {\n  const {\n    isAllSlidesPanelOpen,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    isSlidesPanelOpen,\n    setIsLeftPanelOpen,\n    setIsSlidesPanelOpen,\n    setZoom,\n  } = useBuilderContext();\n  const { settings } = usePropContext();\n  const decidedWhichPanelToOpen = useRef(false);\n\n  useFitZoom({\n    handler: setZoom,\n    isModeCustomize: mode === 'customize',\n    settings,\n  });\n\n  useEffect(() => {\n    if (mode !== 'customize' || decidedWhichPanelToOpen.current) {\n      return;\n    }\n\n    if (pageCount > 1) {\n      if (isLeftPanelOpen) {\n        setIsLeftPanelOpen(false);\n      }\n      setIsSlidesPanelOpen(true);\n    } else {\n      if (isSlidesPanelOpen) {\n        setIsSlidesPanelOpen(false);\n      }\n      setIsLeftPanelOpen(true);\n    }\n\n    decidedWhichPanelToOpen.current = true;\n  }, [mode, pageCount]);\n\n  const wrapperClass = classNames(\n    'jfReport',\n    'f-height',\n    'd-flex',\n    getModeClass(mode),\n    isLeftPanelOpen === true ? 'leftPaneIsActive' : '',\n    isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '',\n    isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '',\n    isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '',\n    theme,\n  );\n  return (\n    <div\n      className={wrapperClass}\n    >\n      {children}\n    </div>\n  );\n};\n\nReportWrapper.propTypes = {\n  children: PropTypes.any,\n  mode: PropTypes.string,\n  pageCount: PropTypes.number,\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']),\n};\n\nReportWrapper.defaultProps = {\n  children: null,\n  mode: '',\n  pageCount: 0,\n  theme: 'lightMode',\n};\n\nexport default memo(ReportWrapper);\n"],"names":["getModeClass","mode","ReportWrapper","children","pageCount","theme","useBuilderContext","isAllSlidesPanelOpen","isLeftPanelOpen","isRightPanelOpen","isSlidesPanelOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","setZoom","usePropContext","settings","decidedWhichPanelToOpen","useRef","useFitZoom","handler","isModeCustomize","useEffect","current","wrapperClass","classNames","_jsx","propTypes","PropTypes","any","string","number","oneOf","defaultProps","memo"],"mappings":";;;;;;;;AAOA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,IAAI;AAAA,mBAAOA,IAAP;AAAA,CAAzB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAKhB;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJF,IAGI,QAHJA,IAGI;AAAA,MAFJG,SAEI,QAFJA,SAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,2BAQIC,iBAAiB,EARrB;AAAA,MACEC,oBADF,sBACEA,oBADF;AAAA,MAEEC,eAFF,sBAEEA,eAFF;AAAA,MAGEC,gBAHF,sBAGEA,gBAHF;AAAA,MAIEC,iBAJF,sBAIEA,iBAJF;AAAA,MAKEC,kBALF,sBAKEA,kBALF;AAAA,MAMEC,oBANF,sBAMEA,oBANF;AAAA,MAOEC,OAPF,sBAOEA,OAPF;;AASA,wBAAqBC,cAAc,EAAnC;AAAA,MAAQC,QAAR,mBAAQA,QAAR;;AACA,MAAMC,uBAAuB,GAAGC,MAAM,CAAC,KAAD,CAAtC;AAEAC,EAAAA,UAAU,CAAC;AACTC,IAAAA,OAAO,EAAEN,OADA;AAETO,IAAAA,eAAe,EAAEnB,IAAI,KAAK,WAFjB;AAGTc,IAAAA,QAAQ,EAARA;AAHS,GAAD,CAAV;AAMAM,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIpB,IAAI,KAAK,WAAT,IAAwBe,uBAAuB,CAACM,OAApD,EAA6D;AAC3D;AACD;;AAED,QAAIlB,SAAS,GAAG,CAAhB,EAAmB;AACjB,UAAII,eAAJ,EAAqB;AACnBG,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;;AACDC,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,KALD,MAKO;AACL,UAAIF,iBAAJ,EAAuB;AACrBE,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACD;;AACDD,MAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;;AAEDK,IAAAA,uBAAuB,CAACM,OAAxB,GAAkC,IAAlC;AACD,GAlBQ,EAkBN,CAACrB,IAAD,EAAOG,SAAP,CAlBM,CAAT;AAoBA,MAAMmB,YAAY,GAAGC,UAAU,CAC7B,UAD6B,EAE7B,UAF6B,EAG7B,QAH6B,EAI7BxB,YAAY,CAACC,IAAD,CAJiB,EAK7BO,eAAe,KAAK,IAApB,GAA2B,kBAA3B,GAAgD,EALnB,EAM7BC,gBAAgB,KAAK,IAArB,IAA6BC,iBAAiB,KAAK,IAAnD,GAA0D,mBAA1D,GAAgF,EANnD,EAO7BA,iBAAiB,KAAK,IAAtB,GAA6B,oBAA7B,GAAoD,EAPvB,EAQ7BH,oBAAoB,KAAK,IAAzB,GAAgC,uBAAhC,GAA0D,EAR7B,EAS7BF,KAT6B,CAA/B;AAWA,sBACEoB;AACE,IAAA,SAAS,EAAEF,YADb;AAAA,cAGGpB;AAHH,IADF;AAOD,CA9DD;;AAgEAD,aAAa,CAACwB,SAAd,GAA0B;AACxBvB,EAAAA,QAAQ,EAAEwB,SAAS,CAACC,GADI;AAExB3B,EAAAA,IAAI,EAAE0B,SAAS,CAACE,MAFQ;AAGxBzB,EAAAA,SAAS,EAAEuB,SAAS,CAACG,MAHG;AAIxBzB,EAAAA,KAAK,EAAEsB,SAAS,CAACI,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB;AAJiB,CAA1B;AAOA7B,aAAa,CAAC8B,YAAd,GAA6B;AAC3B7B,EAAAA,QAAQ,EAAE,IADiB;AAE3BF,EAAAA,IAAI,EAAE,EAFqB;AAG3BG,EAAAA,SAAS,EAAE,CAHgB;AAI3BC,EAAAA,KAAK,EAAE;AAJoB,CAA7B;AAOA,mCAAe4B,IAAI,CAAC/B,aAAD,CAAnB;;;;"}

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,21 @@
-import { useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 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 +23,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 +39,19 @@ var TextEditor = function TextEditor(_ref) {
   }, [isSelected, isLocked]);
   var isNotEmpty = useMemo(function () {
     var el = document.createElement('div');
-    el.innerHTML = content;
+    el.innerHTML = _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 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 = _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","innerText","_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,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,GAAeZ,QAAf;AACA,WAAO,CAAC,CAACS,EAAE,CAACI,SAAZ;AACD,GAJyB,EAIvB,CAACb,QAAD,CAJuB,CAA1B;AAMA,SAAOH,UAAU,IAAIM,gBAAd,gBACLW,IAAC,WAAD;AACE,IAAA,OAAO,EAAEd,QADX;AAEE,IAAA,UAAU,EAAEL,UAFd;AAGE,IAAA,WAAW,EAAEG,WAHf;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,mBAAmB,EAAEG;AALvB,IADK,gBASLU;AACE,IAAA,SAAS,2BAAoBP,UAAU,GAAG,EAAH,GAAQ,qBAAtC,CADX;AAEE,IAAA,uBAAuB,EAAE;AACvBQ,MAAAA,MAAM,EAAER,UAAU,GAAGP,QAAH,GAAcF;AADT,KAF3B;AAKE,IAAA,OAAO,EAAEO,OALX;AAME,IAAA,SAAS,EAAE,qBAAM;AANnB,IATF;AAkBD;;AAEDZ,UAAU,CAACuB,SAAX,GAAuB;AACrBtB,EAAAA,OAAO,EAAEuB,SAAS,CAACC,MADE;AAErBvB,EAAAA,UAAU,EAAEsB,SAAS,CAACE,IAFD;AAGrBvB,EAAAA,QAAQ,EAAEqB,SAAS,CAACG,IAHC;AAIrBvB,EAAAA,UAAU,EAAEoB,SAAS,CAACG,IAJD;AAKrBtB,EAAAA,WAAW,EAAEmB,SAAS,CAACC;AALF,CAAvB;AAQAzB,UAAU,CAAC4B,YAAX,GAA0B;AACxB3B,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/_jfLightTheme.scss

@@ -2,7 +2,7 @@
 
 .lightMode {
   .jfReport-toolbox, .jfPresentation-toolbox {
-    background-color: #f1f1f5;
+    background-color: $white;
   }
 
   .jfReport-pane {

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.0",
+  "version": "2.2.0",
   "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",