@zohodesk/dot 1.5.4 → 1.6.0

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -145,6 +145,10 @@ export default class TagsMultiSelect extends React.Component {
       handleSelectAll,
       selectAllText,
       needSelectAll,
+      isAbsolutePositioningNeeded,
+      isRestrictScroll,
+      positionsOffset,
+      targetOffset,
       customClass,
       customProps
     } = this.props;
@@ -252,7 +256,11 @@ export default class TagsMultiSelect extends React.Component {
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {

package/es/form/fields/TagsMultiSelect/props/defaultProps.js

@@ -9,6 +9,8 @@ export const defaultProps = {
   clickableTag: false,
   dataSelectorId: 'tagsMultiSelectField',
   needSelectAll: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customClass: {},
   customProps: {}
 };

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -44,6 +44,10 @@ export const propTypes = {
   handleSelectAll: PropTypes.func,
   selectAllText: PropTypes.string,
   needSelectAll: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   customClass: PropTypes.object,
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -40,7 +40,11 @@ const TagsMultiSelectField = props => {
     ePhiData,
     customProps,
     clickableTag,
-    dataSelectorId
+    dataSelectorId,
+    isAbsolutePositioningNeeded,
+    isRestrictScroll,
+    positionsOffset,
+    targetOffset
   } = props;
   const {
     LabelProps = {},
@@ -244,6 +248,10 @@ const TagsMultiSelectField = props => {
     htmlId: htmlId,
     getTextBoxChildren: getTextBoxChildren,
     className: containerClass,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isRestrictScroll: isRestrictScroll,
+    positionsOffset: positionsOffset,
+    targetOffset: targetOffset,
     ...TagsMultiSelectProps,
     clickableTag: clickableTag
   }), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {

package/es/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -17,5 +17,7 @@ export const defaultProps = {
   numberOfDisplayedValues: '5',
   customProps: {},
   dataSelectorId: 'tagsMultiSelectField',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TagsMultiSelectField/props/propTypes.js

@@ -63,5 +63,9 @@ export const propTypes = {
   togglePopup: PropTypes.func,
   clickableTag: PropTypes.bool,
   dataId: PropTypes.string,
-  dataSelectorId: PropTypes.bool
+  dataSelectorId: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object
 };

package/es/form/fields/TextEditor/TextEditor.js

@@ -25,7 +25,8 @@ export default class TextEditor extends Component {
       isResourceLoaded: false,
       isEditorShow: false
     };
-    let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
+    let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', // 'handleDropUpload',
+    'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
     bind.apply(this, methods);
   }
 
@@ -53,12 +54,13 @@ export default class TextEditor extends Component {
       editorMode = '',
       editorOptions = {},
       needEditorFocus = true,
-      handleDropUpload,
+      // handleDropUpload,
       fontFamily,
       fontSize,
       initCallback,
       handleAlertMessage,
-      needInlineAttachment
+      needInlineAttachment,
+      customInitOption
     } = this.props;
 
     if (id && global.ZohoDeskEditor) {
@@ -67,7 +69,7 @@ export default class TextEditor extends Component {
         content: 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',
@@ -90,13 +92,17 @@ export default class TextEditor extends Component {
         htmlVersion: '<!Doctype html>'
       };
 
-      if (!ZohoDeskEditor_Init.init) {
-        global.editorInitialize && global.editorInitialize();
+      if (!customInitOption) {
+        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);
+      const globalEditor = global.ZohoDeskEditor;
+      globalEditor && typeof globalEditor.create == 'function' && globalEditor.create(defaultObj, customInitOption);
     }
   }
 
@@ -121,7 +127,7 @@ export default class TextEditor extends Component {
     getRef && getRef(null);
   }
 
-  componentWillReceiveProps(np) {
+  UNSAFE_componentWillReceiveProps(np) {
     let {
       changeEditorContent
     } = this.props;
@@ -203,7 +209,8 @@ export default class TextEditor extends Component {
     let {
       editorCallback,
       getRef,
-      isCustomScroll
+      isCustomScroll,
+      customCSS
     } = this.props;
     this.setState({
       isEditorLoad: true,
@@ -218,18 +225,6 @@ export default class TextEditor extends Component {
       global.editor[id] = editorObj;
     }
 
-    const 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);
     const iframe = selectn('iframe.contentDocument.body', editorObj) || null;
     const iframeHead = selectn('iframe.contentDocument.head', editorObj) || null;
@@ -245,9 +240,12 @@ export default class TextEditor extends Component {
         iframe.classList.add('scroll');
       }
 
-      let 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);
+      let customStyleTag = document.createElement('style');
+      customStyleTag.type = 'text/css';
+      const customizedCSS = `pre {white-space: pre-wrap} ${customCSS}`;
+      const 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 = `${customizedCSS} ${fontCSS}`;
+      iframeHead.appendChild(customStyleTag);
     }
   }
 
@@ -255,13 +253,26 @@ export default class TextEditor extends Component {
     let {
       id,
       setInlineAttachmentInProgress: progress,
-      i18nKeys
+      i18nKeys,
+      inlineImageProps
     } = this.props;
-
-    if (!isFileNameSizeInvalid(file.name)) {
+    const {
+      fileUploadError,
+      fileNotSupported,
+      fileSizeLimitExceed,
+      fileEmptyError,
+      fileNameLimitExceed
+    } = i18nKeys;
+    const {
+      allowedFileExtensions = ["jpeg", "jpg", "png", "gif", "bmp", "ico"],
+      fileNameMaxCharacters = 200,
+      fileSizeMaxBytes = 3 * 1024 * 1024
+    } = inlineImageProps;
+
+    if (!isFileNameSizeInvalid(file.name, fileNameMaxCharacters)) {
       if (file.size != 0) {
-        if (file.size <= 3 * 1024 * 1024) {
-          if (isImageFormat(file.name)) {
+        if (file.size <= fileSizeMaxBytes) {
+          if (isImageFormat(file.name, allowedFileExtensions)) {
             progress && progress(true);
             this.handleUpload(file).then(res => {
               successCallback(res);
@@ -271,37 +282,33 @@ export default class TextEditor extends Component {
                 triggerKeyup(editorObj.doc);
               }
             }, () => {
-              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);
     }
-  }
+  } // handleDropUpload(file, successCallback, failureCallback) {
+  //   let e = { target: { files: [file] } };
+  //   let { handleDropUpload } = this.props;
+  //   handleDropUpload(e).then(
+  //     (res) => {
+  //       successCallback(res);
+  //     },
+  //     () => {
+  //       failureCallback();
+  //     }
+  //   );
+  // }
 
-  handleDropUpload(file, successCallback, failureCallback) {
-    let e = {
-      target: {
-        files: [file]
-      }
-    };
-    let {
-      handleDropUpload
-    } = this.props;
-    handleDropUpload(e).then(res => {
-      successCallback(res);
-    }, () => {
-      failureCallback();
-    });
-  }
 
   blurCallback() {
     let {
@@ -327,15 +334,7 @@ export default class TextEditor extends Component {
         formData.append(getCSRFCookieName(), getCSRFCookie());
       }
 
-      return onUpload(formData, file).then(res => {
-        if (editorMode === 'TicketReply') {
-          return `${res.data}&from=r`;
-        }
-
-        return res.data;
-      }, err => {
-        throw err;
-      });
+      return onUpload(formData, file);
     } catch (err) {
       return Promise.reject();
     }
@@ -383,7 +382,8 @@ export default class TextEditor extends Component {
       loadingComponent,
       isNightMode,
       isReadOnly,
-      dataSelectorId
+      dataSelectorId,
+      isDisabled
     } = this.props;
     let {
       isEditorLoad,
@@ -392,7 +392,7 @@ export default class TextEditor extends Component {
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]}
-        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${!isEditorShow ? styles.editorHide : ''}`,
+        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
       dataId: dataId,
       "data-isEditor": true,
       dataSelectorId: dataSelectorId
@@ -402,8 +402,8 @@ export default class TextEditor extends Component {
       dataId: dataId
     }), editorDoc && ImgLazyLoad ? /*#__PURE__*/React.createElement(ImgLazyLoad, {
       node: editorDoc
-    }) : null, isReadOnly ? /*#__PURE__*/React.createElement("div", {
-      class: styles.readOnlyMask
+    }) : null, isReadOnly || isDisabled ? /*#__PURE__*/React.createElement("div", {
+      className: styles.readOnlyMask
     }) : null);
   }
 

package/es/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/es/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/es/form/fields/TextEditor/props/defaultProps.js

@@ -9,5 +9,8 @@ export const defaultProps = {
   needInlineAttachment: false,
   isNightMode: false,
   isReadOnly: false,
-  dataSelectorId: 'textEditor'
+  dataSelectorId: 'textEditor',
+  customCSS: '',
+  isDisabled: false,
+  inlineImageProps: {}
 };