@zohodesk/dot 1.5.5 → 1.6.0

package/lib/form/fields/TextEditor/TextEditor.js

@@ -27,8 +27,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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; }
-
 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); } }
@@ -70,7 +68,8 @@ var TextEditor = /*#__PURE__*/function (_Component) {
       isResourceLoaded: false,
       isEditorShow: false
     };
-    var methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
+    var methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', // 'handleDropUpload',
+    'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
 
     _editorUtils.bind.apply(_assertThisInitialized(_this), methods);
 
@@ -109,22 +108,20 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           editorOptions = _this$props$editorOpt === void 0 ? {} : _this$props$editorOpt,
           _this$props$needEdito = _this$props.needEditorFocus,
           needEditorFocus = _this$props$needEdito === void 0 ? true : _this$props$needEdito,
-          handleDropUpload = _this$props.handleDropUpload,
           fontFamily = _this$props.fontFamily,
           fontSize = _this$props.fontSize,
           initCallback = _this$props.initCallback,
           handleAlertMessage = _this$props.handleAlertMessage,
-          needInlineAttachment = _this$props.needInlineAttachment;
+          needInlineAttachment = _this$props.needInlineAttachment,
+          customInitOption = _this$props.customInitOption;
 
       if (id && global.ZohoDeskEditor) {
-        var _defaultObj;
-
-        var defaultObj = (_defaultObj = {
+        var defaultObj = {
           id: id,
           content: (0, _editorUtils.fixEncoding)(value),
           callback: this.editorCallback,
           imageuploadcallback: this.handleInlineUpload,
-          handleInlineDropImage: handleDropUpload ? this.handleDropUpload : undefined,
+          // handleInlineDropImage: handleDropUpload ? this.handleDropUpload : undefined,
           contentChanged: this.handleChange,
           focusCallback: this.focusCallback,
           lineHeight: 'Normal',
@@ -137,18 +134,27 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           mode: mode,
           handleAlertMessage: handleAlertMessage,
           plainTextSwitchCallback: this.plainTextSwitchCallback,
-          imgAspect: true
-        }, _defineProperty(_defaultObj, "handleInlineDropImage", needInlineAttachment ? this.handleInlineUpload : null), _defineProperty(_defaultObj, "needInlineAttachHandling", needInlineAttachment), _defineProperty(_defaultObj, "hookOnInsertHTML", _editorUtils.validateEditorContentOnInsertHtml), _defineProperty(_defaultObj, "needCustomPaste", function needCustomPaste(event, editorObj) {
-          return true; // By default reply editor needs customPaste, so returning true.
-        }), _defineProperty(_defaultObj, "htmlVersion", '<!Doctype html>'), _defaultObj);
+          imgAspect: true,
+          handleInlineDropImage: needInlineAttachment ? this.handleInlineUpload : null,
+          needInlineAttachHandling: needInlineAttachment,
+          hookOnInsertHTML: _editorUtils.validateEditorContentOnInsertHtml,
+          needCustomPaste: function needCustomPaste(event, editorObj) {
+            return true; // By default reply editor needs customPaste, so returning true.
+          },
+          htmlVersion: '<!Doctype html>'
+        };
+
+        if (!customInitOption) {
+          if (!ZohoDeskEditor_Init.init) {
+            global.editorInitialize && global.editorInitialize();
+          }
 
-        if (!ZohoDeskEditor_Init.init) {
-          global.editorInitialize && global.editorInitialize();
+          ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback, fontSize);
         }
 
         defaultObj = Object.assign(defaultObj, editorOptions);
-        ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback, fontSize);
-        ZohoDeskEditor.create && ZohoDeskEditor.create(defaultObj);
+        var globalEditor = global.ZohoDeskEditor;
+        globalEditor && typeof globalEditor.create == 'function' && globalEditor.create(defaultObj, customInitOption);
       }
     }
   }, {
@@ -172,8 +178,8 @@ var TextEditor = /*#__PURE__*/function (_Component) {
       getRef && getRef(null);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(np) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(np) {
       var changeEditorContent = this.props.changeEditorContent;
       var id = np.id;
       var editorObj = global.editor ? global.editor[id] ? global.editor[id] : {} : {};
@@ -251,7 +257,8 @@ var TextEditor = /*#__PURE__*/function (_Component) {
       var _this$props5 = this.props,
           editorCallback = _this$props5.editorCallback,
           getRef = _this$props5.getRef,
-          isCustomScroll = _this$props5.isCustomScroll;
+          isCustomScroll = _this$props5.isCustomScroll,
+          customCSS = _this$props5.customCSS;
       this.setState({
         isEditorLoad: true,
         isEditorShow: true
@@ -263,18 +270,6 @@ var TextEditor = /*#__PURE__*/function (_Component) {
         global.editor[id] = editorObj;
       }
 
-      var css = 'pre {white-space: pre-wrap}',
-          head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],
-          style = document.createElement('style');
-      style.type = 'text/css';
-
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(editorObj.doc.createTextNode(css));
-      }
-
-      head.appendChild(style);
       editorCallback && editorCallback(editorObj);
       var iframe = (0, _selectn["default"])('iframe.contentDocument.body', editorObj) || null;
       var iframeHead = (0, _selectn["default"])('iframe.contentDocument.head', editorObj) || null;
@@ -292,9 +287,12 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           iframe.classList.add('scroll');
         }
 
-        var customFonts = document.createElement('style');
-        customFonts.innerText = "@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}";
-        iframeHead.appendChild(customFonts);
+        var customStyleTag = document.createElement('style');
+        customStyleTag.type = 'text/css';
+        var customizedCSS = "pre {white-space: pre-wrap} ".concat(customCSS);
+        var fontCSS = "@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}";
+        customStyleTag.textContent = "".concat(customizedCSS, " ").concat(fontCSS);
+        iframeHead.appendChild(customStyleTag);
       }
     }
   }, {
@@ -303,12 +301,24 @@ var TextEditor = /*#__PURE__*/function (_Component) {
       var _this$props6 = this.props,
           id = _this$props6.id,
           progress = _this$props6.setInlineAttachmentInProgress,
-          i18nKeys = _this$props6.i18nKeys;
-
-      if (!(0, _editorUtils.isFileNameSizeInvalid)(file.name)) {
+          i18nKeys = _this$props6.i18nKeys,
+          inlineImageProps = _this$props6.inlineImageProps;
+      var fileUploadError = i18nKeys.fileUploadError,
+          fileNotSupported = i18nKeys.fileNotSupported,
+          fileSizeLimitExceed = i18nKeys.fileSizeLimitExceed,
+          fileEmptyError = i18nKeys.fileEmptyError,
+          fileNameLimitExceed = i18nKeys.fileNameLimitExceed;
+      var _inlineImageProps$all = inlineImageProps.allowedFileExtensions,
+          allowedFileExtensions = _inlineImageProps$all === void 0 ? ["jpeg", "jpg", "png", "gif", "bmp", "ico"] : _inlineImageProps$all,
+          _inlineImageProps$fil = inlineImageProps.fileNameMaxCharacters,
+          fileNameMaxCharacters = _inlineImageProps$fil === void 0 ? 200 : _inlineImageProps$fil,
+          _inlineImageProps$fil2 = inlineImageProps.fileSizeMaxBytes,
+          fileSizeMaxBytes = _inlineImageProps$fil2 === void 0 ? 3 * 1024 * 1024 : _inlineImageProps$fil2;
+
+      if (!(0, _editorUtils.isFileNameSizeInvalid)(file.name, fileNameMaxCharacters)) {
         if (file.size != 0) {
-          if (file.size <= 3 * 1024 * 1024) {
-            if ((0, _editorUtils.isImageFormat)(file.name)) {
+          if (file.size <= fileSizeMaxBytes) {
+            if ((0, _editorUtils.isImageFormat)(file.name, allowedFileExtensions)) {
               progress && progress(true);
               this.handleUpload(file).then(function (res) {
                 successCallback(res);
@@ -318,36 +328,33 @@ var TextEditor = /*#__PURE__*/function (_Component) {
                   (0, _editorUtils.triggerKeyup)(editorObj.doc);
                 }
               }, function () {
-                failureCallback(i18nKeys.fileUploadError);
+                failureCallback(fileUploadError);
               });
             } else {
-              failureCallback(i18nKeys.fileNotSupported);
+              failureCallback(fileNotSupported);
             }
           } else {
-            failureCallback(i18nKeys.fileSizeLimitExceed);
+            failureCallback(fileSizeLimitExceed);
           }
         } else {
-          failureCallback(i18nKeys.fileEmptyError);
+          failureCallback(fileEmptyError);
         }
       } else {
-        failureCallback(i18nKeys.fileNameLimitExceed);
+        failureCallback(fileNameLimitExceed);
       }
-    }
-  }, {
-    key: "handleDropUpload",
-    value: function handleDropUpload(file, successCallback, failureCallback) {
-      var e = {
-        target: {
-          files: [file]
-        }
-      };
-      var handleDropUpload = this.props.handleDropUpload;
-      handleDropUpload(e).then(function (res) {
-        successCallback(res);
-      }, function () {
-        failureCallback();
-      });
-    }
+    } // handleDropUpload(file, successCallback, failureCallback) {
+    //   let e = { target: { files: [file] } };
+    //   let { handleDropUpload } = this.props;
+    //   handleDropUpload(e).then(
+    //     (res) => {
+    //       successCallback(res);
+    //     },
+    //     () => {
+    //       failureCallback();
+    //     }
+    //   );
+    // }
+
   }, {
     key: "blurCallback",
     value: function blurCallback() {
@@ -372,15 +379,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           formData.append(getCSRFCookieName(), getCSRFCookie());
         }
 
-        return onUpload(formData, file).then(function (res) {
-          if (editorMode === 'TicketReply') {
-            return "".concat(res.data, "&from=r");
-          }
-
-          return res.data;
-        }, function (err) {
-          throw err;
-        });
+        return onUpload(formData, file);
       } catch (err) {
         return Promise.reject();
       }
@@ -427,13 +426,14 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           loadingComponent = _this$props9.loadingComponent,
           isNightMode = _this$props9.isNightMode,
           isReadOnly = _this$props9.isReadOnly,
-          dataSelectorId = _this$props9.dataSelectorId;
+          dataSelectorId = _this$props9.dataSelectorId,
+          isDisabled = _this$props9.isDisabled;
       var _this$state = this.state,
           isEditorLoad = _this$state.isEditorLoad,
           isEditorShow = _this$state.isEditorShow;
       var editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : ''),
+        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : ''),
         dataId: dataId,
         "data-isEditor": true,
         dataSelectorId: dataSelectorId
@@ -443,8 +443,8 @@ var TextEditor = /*#__PURE__*/function (_Component) {
         dataId: dataId
       }), editorDoc && ImgLazyLoad ? /*#__PURE__*/_react["default"].createElement(ImgLazyLoad, {
         node: editorDoc
-      }) : null, isReadOnly ? /*#__PURE__*/_react["default"].createElement("div", {
-        "class": _TextEditorModule["default"].readOnlyMask
+      }) : null, isReadOnly || isDisabled ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: _TextEditorModule["default"].readOnlyMask
       }) : null);
     }
   }]);

package/lib/form/fields/TextEditor/TextEditor.module.css

@@ -77,20 +77,20 @@
   background-color: transparent;
 }
 
-.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
+.small :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.small :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel {
   color: var(--zdt_texteditor_default_text);
 }
 
-.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
+.small :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel {
   background-color: var(--zdt_texteditor_menu_li_bg);
 }
 
@@ -101,10 +101,10 @@
 /* large type editor - ticket add form editor */
 .large :global .KB_Editor,
 .large :global .KB_Editor_menus .KB_Editor_MultiTools,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
 .default :global .KB_Editor,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -160,24 +160,24 @@
   min-height: inherit ;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   padding: 0 ;
   float: unset;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-right: 0 ;
 }
 
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-left: 0 ;
 }
 
@@ -190,14 +190,14 @@
   float: unset !important;
 }
 
-.large :global .KB_Editor_menus > ul > li > span > svg,
-.default :global .KB_Editor_menus > ul > li > span > svg {
+.large :global .KB_Editor_menus>ul>li>span>svg,
+.default :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
 }
 
-.large :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg,
-.default :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.large :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg,
+.default :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -241,18 +241,18 @@
   left: 0 ;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-right: var(--zd_size2) ;
 }
 
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-left: var(--zd_size2) ;
 }
 
 /* xlarge type editor - reply area, blue print cases - full height hover style */
 .xlarge :global .KB_Editor,
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -293,7 +293,7 @@
   min-height: inherit ;
 }
 
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -302,11 +302,11 @@
   float: unset;
 }
 
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-right: 0 ;
 }
 
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-left: 0 ;
 }
 
@@ -324,12 +324,12 @@
   padding: var(--zd_size6) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -354,13 +354,13 @@
   left: 0 ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.SnippetIcon svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.SnippetIcon svg {
   width: var(--zd_size17) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.TemplateIcon svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.TemplateIcon svg {
   width: var(--zd_size16) ;
   height: var(--zd_size16) ;
   padding: 0 var(--zd_size9) ;
@@ -393,31 +393,16 @@
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
+.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
 
-.xlarge
-  :global
-  .KB_Editor_menus
-  > ul
-  > li
-  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
-    .TemplateIcon
-  ):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
+.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
   height: var(--zd_size21) ;
 }
 
-.xlarge
-  :global
-  .KB_Editor_menus
-  > ul
-  > li
-  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
-    .TemplateIcon
-  )
-  > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon)>svg {
   width: var(--zd_size21) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size4) ;
@@ -442,7 +427,7 @@
 /* medium type editor - snippet, bug tracker cases */
 .medium :global .KB_Editor,
 .medium :global .KB_Editor_menus .KB_Editor_MultiTools,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -483,7 +468,7 @@
   min-height: inherit ;
 }
 
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -496,21 +481,21 @@
   line-height: 0;
 }
 
-.medium :global .KB_Editor_menus > ul > li > span > svg {
+.medium :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
 
-[dir=ltr] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+[dir=ltr] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   padding: 0 0 0 var(--zd_size2) ;
 }
 
-[dir=rtl] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+[dir=rtl] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   padding: 0 var(--zd_size2) 0 0 ;
 }
 
@@ -547,7 +532,7 @@
   padding: 0 var(--zd_size3) ;
 }
 
-.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
+.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
@@ -627,13 +612,13 @@
   line-height: 0;
 }
 
-.small :global .KB_Editor_menus > ul > li > span > svg,
-.mini :global .KB_Editor_menus > ul > li > span > svg {
+.small :global .KB_Editor_menus>ul>li>span>svg,
+.mini :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
 }
 
-.small :global .KB_Editor_menus > ul > li > span > svg, .mini :global .KB_Editor_menus > ul > li > span > svg {
+.small :global .KB_Editor_menus>ul>li>span>svg, .mini :global .KB_Editor_menus>ul>li>span>svg {
   padding: 0 var(--zd_size6) ;
 }
 
@@ -745,8 +730,12 @@
   order: 100;
 }
 
+.disable,
 .readOnly {
   position: relative;
+}
+
+.disable, .readOnly {
   cursor: not-allowed;
 }
 
@@ -770,6 +759,29 @@
   display: none !important;
 }
 
+.disable :global .KB_Editor_menus {
+  position: relative;
+}
+
+.disable :global .KB_Editor_menus::after {
+  content: '';
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  z-index: 1;
+  cursor: not-allowed;
+}
+
+[dir=ltr] .disable :global .KB_Editor_menus::after {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .disable :global .KB_Editor_menus::after {
+  right: 0 ;
+  left: 0 ;
+}
+
 .editorHide :global .KB_Editor {
   position: absolute !important;
   top: 0 ;
@@ -784,4 +796,4 @@
 
 [dir=rtl] .editorHide :global .KB_Editor {
   right: 0 ;
-}
+}

package/lib/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap

@@ -4,7 +4,7 @@ exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="textEditor large borderTop
-        light  editorHide flex cover coldir"
+        light   editorHide flex cover coldir"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"

package/lib/form/fields/TextEditor/props/defaultProps.js

@@ -15,6 +15,9 @@ var defaultProps = {
   needInlineAttachment: false,
   isNightMode: false,
   isReadOnly: false,
-  dataSelectorId: 'textEditor'
+  dataSelectorId: 'textEditor',
+  customCSS: '',
+  isDisabled: false,
+  inlineImageProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/form/fields/TextEditor/props/propTypes.js

@@ -22,7 +22,6 @@ var propTypes = {
   fontSize: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   handleAlertMessage: _propTypes["default"].func,
-  handleDropUpload: _propTypes["default"].func,
   i18nKeys: _propTypes["default"].shape({
     fileUploadError: _propTypes["default"].string,
     fileNotSupported: _propTypes["default"].string,
@@ -31,7 +30,7 @@ var propTypes = {
     fileSizeLimitExceed: _propTypes["default"].string
   }),
   id: _propTypes["default"].string,
-  initCallback: _propTypes["default"].func.isRequired,
+  initCallback: _propTypes["default"].func,
   isCustomScroll: _propTypes["default"].bool,
   loadingComponent: _propTypes["default"].node,
   mode: _propTypes["default"].string,
@@ -52,6 +51,14 @@ var propTypes = {
   getCSRFCookie: _propTypes["default"].string,
   isEditorDefaultOpen: _propTypes["default"].bool,
   toggleEdit: _propTypes["default"].func,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  customInitOption: _propTypes["default"].object,
+  customCSS: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  inlineImageProps: _propTypes["default"].shape({
+    allowedFileExtensions: _propTypes["default"].array,
+    fileNameMaxCharacters: _propTypes["default"].number,
+    fileSizeMaxBytes: _propTypes["default"].number
+  })
 };
 exports.propTypes = propTypes;