@majoo-ui/react 1.52.0 → 1.52.1

package/components/contentEditor/ContentEditor.d.ts

@@ -11,6 +11,14 @@ interface ContentEditorProps {
      * Adjust editor height.
      */
     editorHeight?: number;
+    /**
+     * Customize pre-built option in the toolbar.
+     */
+    toolbar?: (defaultToolbar: object) => void;
+    /**
+     * State of the editor content.
+     */
+    editorState?: string;
     /**
      * Change event handler.
      */
@@ -19,6 +27,10 @@ interface ContentEditorProps {
      * Callback function to add image upload option.
      */
     uploadCallback?: () => void;
+    /**
+     * Set max length of the content.
+     */
+    maxLength?: number;
 }
 export default function ContentEditor(props: ContentEditorProps): JSX.Element;
 export {};

package/index.esm.js

@@ -40,9 +40,8 @@ import ScrollSpy from 'react-ui-scrollspy';
 import { useJsApiLoader, GoogleMap, StandaloneSearchBox } from '@react-google-maps/api';
 import request from 'superagent';
 import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$1 } from 'recharts';
-import { EditorState, convertToRaw } from 'draft-js';
+import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
-import draftToHtml from 'draftjs-to-html';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import { useSticky } from 'react-table-sticky';
 
@@ -29323,7 +29322,7 @@ function CheckboxTable(props) {
                   css: {
                     marginRight: 12,
                     cursor: 'pointer',
-                    display: ((_a = originalCell === null || originalCell === void 0 ? void 0 : originalCell.detail) === null || _a === void 0 ? void 0 : _a.length) ? 'flex' : 'none'
+                    display: ((_a = originalCell === null || originalCell === void 0 ? void 0 : originalCell.detail) === null || _a === void 0 ? void 0 : _a.length) ? 'flex' : 'none !important'
                   },
                   onClick: () => {
                     if (!Object.keys(state.expanded).includes(row.id)) {
@@ -29488,18 +29487,42 @@ const Container = styled('div', {
     }), 1000)
   }
 });
+const MaxLengthText = styled('p', {
+  fontSize: 12,
+  fontWeight: 400,
+  color: '$textSecondary',
+  textAlign: 'right',
+  padding: '$spacing-03',
+  variants: {
+    warning: {
+      true: {
+        color: '$textRed'
+      }
+    }
+  }
+});
 function ContentEditor(props) {
+  var _a, _b, _c, _d;
+
   const {
     css,
+    editorState: value,
     onChange,
+    toolbar,
     editorHeight,
-    uploadCallback
+    uploadCallback,
+    maxLength
   } = props;
   const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
+  useEffect(() => {
+    if (value) {
+      setEditorState(value);
+    }
+  }, [value]);
 
   function onEditorStateChange(e) {
     setEditorState(e);
-    onChange === null || onChange === void 0 ? void 0 : onChange(draftToHtml(convertToRaw(e.getCurrentContent())));
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
   }
 
   const config = {
@@ -29507,41 +29530,32 @@ function ContentEditor(props) {
     history: {
       options: ['undo', 'redo'],
       undo: {
-        icon: img$4,
-        className: undefined
+        icon: img$4
       },
       redo: {
-        icon: img$3,
-        className: undefined
+        icon: img$3
       }
     },
     inline: {
       options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace'],
       bold: {
-        icon: img$9,
-        className: undefined
+        icon: img$9
       },
       italic: {
-        icon: img$8,
-        className: undefined
+        icon: img$8
       },
       underline: {
-        icon: img$7,
-        className: undefined
+        icon: img$7
       },
       strikethrough: {
-        icon: img$6,
-        className: undefined
+        icon: img$6
       },
       monospace: {
-        icon: img$a,
-        className: undefined
+        icon: img$a
       }
     },
     remove: {
-      icon: img$5,
-      className: undefined,
-      component: undefined
+      icon: img$5
     },
     blockType: {
       inDropdown: true,
@@ -29575,18 +29589,22 @@ function ContentEditor(props) {
       uploadCallback: uploadCallback
     }
   };
-  return jsx(Container, Object.assign({
+  return jsxs(Container, Object.assign({
     css: css,
     editorHeight: editorHeight
   }, {
-    children: jsx(Editor, {
+    children: [jsx(Editor, {
       wrapperClassName: "wrapper-root",
       editorClassName: "editor-root",
       toolbarClassName: "toolbar-root",
       editorState: editorState,
       onEditorStateChange: onEditorStateChange,
-      toolbar: config
-    }, void 0)
+      toolbar: toolbar ? toolbar(config) : config
+    }, void 0), maxLength && typeof maxLength === 'number' && jsx(MaxLengthText, Object.assign({
+      warning: ((_b = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getPlainText()) === null || _b === void 0 ? void 0 : _b.length) > maxLength
+    }, {
+      children: `${(_d = (_c = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _c === void 0 ? void 0 : _c.getPlainText()) === null || _d === void 0 ? void 0 : _d.length} / ${maxLength}`
+    }), void 0)]
   }), void 0);
 }
 

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('draftjs-to-html'), require('react-image-crop'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'draftjs-to-html', 'react-image-crop', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.draftToHtml, global.ReactCrop, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, draftToHtml, ReactCrop, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-image-crop'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-image-crop', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.ReactCrop, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, ReactCrop, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -54,7 +54,6 @@
   var StepWizard__default = /*#__PURE__*/_interopDefaultLegacy(StepWizard$1);
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
-  var draftToHtml__default = /*#__PURE__*/_interopDefaultLegacy(draftToHtml);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
 
   var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
@@ -29822,7 +29821,7 @@
                     css: {
                       marginRight: 12,
                       cursor: 'pointer',
-                      display: ((_a = originalCell === null || originalCell === void 0 ? void 0 : originalCell.detail) === null || _a === void 0 ? void 0 : _a.length) ? 'flex' : 'none'
+                      display: ((_a = originalCell === null || originalCell === void 0 ? void 0 : originalCell.detail) === null || _a === void 0 ? void 0 : _a.length) ? 'flex' : 'none !important'
                     },
                     onClick: function () {
                       if (!Object.keys(state.expanded).includes(row.id)) {
@@ -29996,21 +29995,46 @@
       }, 1000)
     }
   });
+  var MaxLengthText = styled('p', {
+    fontSize: 12,
+    fontWeight: 400,
+    color: '$textSecondary',
+    textAlign: 'right',
+    padding: '$spacing-03',
+    variants: {
+      warning: {
+        true: {
+          color: '$textRed'
+        }
+      }
+    }
+  });
   function ContentEditor(props) {
+    var _a, _b, _c, _d;
+
     var css = props.css,
+        value = props.editorState,
         onChange = props.onChange,
+        toolbar = props.toolbar,
         editorHeight = props.editorHeight,
-        uploadCallback = props.uploadCallback;
+        uploadCallback = props.uploadCallback,
+        maxLength = props.maxLength;
 
-    var _a = React.useState(function () {
+    var _e = React.useState(function () {
       return draftJs.EditorState.createEmpty();
     }),
-        editorState = _a[0],
-        setEditorState = _a[1];
+        editorState = _e[0],
+        setEditorState = _e[1];
+
+    React.useEffect(function () {
+      if (value) {
+        setEditorState(value);
+      }
+    }, [value]);
 
     function onEditorStateChange(e) {
       setEditorState(e);
-      onChange === null || onChange === void 0 ? void 0 : onChange(draftToHtml__default["default"](draftJs.convertToRaw(e.getCurrentContent())));
+      onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }
 
     var config = {
@@ -30018,41 +30042,32 @@
       history: {
         options: ['undo', 'redo'],
         undo: {
-          icon: img$4,
-          className: undefined
+          icon: img$4
         },
         redo: {
-          icon: img$3,
-          className: undefined
+          icon: img$3
         }
       },
       inline: {
         options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace'],
         bold: {
-          icon: img$9,
-          className: undefined
+          icon: img$9
         },
         italic: {
-          icon: img$8,
-          className: undefined
+          icon: img$8
         },
         underline: {
-          icon: img$7,
-          className: undefined
+          icon: img$7
         },
         strikethrough: {
-          icon: img$6,
-          className: undefined
+          icon: img$6
         },
         monospace: {
-          icon: img$a,
-          className: undefined
+          icon: img$a
         }
       },
       remove: {
-        icon: img$5,
-        className: undefined,
-        component: undefined
+        icon: img$5
       },
       blockType: {
         inDropdown: true,
@@ -30086,18 +30101,22 @@
         uploadCallback: uploadCallback
       }
     };
-    return jsxRuntime.jsx(Container, __assign({
+    return jsxRuntime.jsxs(Container, __assign({
       css: css,
       editorHeight: editorHeight
     }, {
-      children: jsxRuntime.jsx(reactDraftWysiwyg.Editor, {
+      children: [jsxRuntime.jsx(reactDraftWysiwyg.Editor, {
         wrapperClassName: "wrapper-root",
         editorClassName: "editor-root",
         toolbarClassName: "toolbar-root",
         editorState: editorState,
         onEditorStateChange: onEditorStateChange,
-        toolbar: config
-      }, void 0)
+        toolbar: toolbar ? toolbar(config) : config
+      }, void 0), maxLength && typeof maxLength === 'number' && jsxRuntime.jsx(MaxLengthText, __assign({
+        warning: ((_b = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getPlainText()) === null || _b === void 0 ? void 0 : _b.length) > maxLength
+      }, {
+        children: "".concat((_d = (_c = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _c === void 0 ? void 0 : _c.getPlainText()) === null || _d === void 0 ? void 0 : _d.length, " / ").concat(maxLength)
+      }), void 0)]
     }), void 0);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.52.0",
+  "version": "1.52.1",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",
@@ -45,6 +45,7 @@
     "otp-input-react": "^0.3.0",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
+    "html-to-draftjs": "^1.5.0",
     "react-draft-wysiwyg": "^1.15.0"
   },
   "main": "./index.umd.js",