@zohodesk/dot 1.0.0-temp-198.3.3 → 1.0.0-temp-187.1

package/es/v1/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();
     }
@@ -355,7 +354,6 @@ export default class TextEditor extends Component {
       let cont = value;
 
       if (typeof editor !== 'undefined') {
-        // eslint-disable-next-line
         cont = editor['addFormEditor'] && editor['addFormEditor'].getContent();
       }
 
@@ -384,7 +382,8 @@ export default class TextEditor extends Component {
       loadingComponent,
       isNightMode,
       isReadOnly,
-      dataSelectorId
+      dataSelectorId,
+      isDisabled
     } = this.props;
     let {
       isEditorLoad,
@@ -393,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 : ''} ${isReadOnly || isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
       dataId: dataId,
       "data-isEditor": true,
       dataSelectorId: dataSelectorId
@@ -403,7 +402,7 @@ export default class TextEditor extends Component {
       dataId: dataId
     }), editorDoc && ImgLazyLoad ? /*#__PURE__*/React.createElement(ImgLazyLoad, {
       node: editorDoc
-    }) : null, isReadOnly ? /*#__PURE__*/React.createElement("div", {
+    }) : null, isReadOnly || isDisabled ? /*#__PURE__*/React.createElement("div", {
       className: styles.readOnlyMask
     }) : null);
   }

package/es/v1/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: {}
 };

package/es/v1/form/fields/TextEditor/props/propTypes.js

@@ -12,7 +12,6 @@ export const propTypes = {
   fontSize: PropTypes.string,
   getRef: PropTypes.func,
   handleAlertMessage: PropTypes.func,
-  handleDropUpload: PropTypes.func,
   i18nKeys: PropTypes.shape({
     fileUploadError: PropTypes.string,
     fileNotSupported: PropTypes.string,
@@ -21,7 +20,7 @@ export const propTypes = {
     fileSizeLimitExceed: PropTypes.string
   }),
   id: PropTypes.string,
-  initCallback: PropTypes.func.isRequired,
+  initCallback: PropTypes.func,
   isCustomScroll: PropTypes.bool,
   loadingComponent: PropTypes.node,
   mode: PropTypes.string,
@@ -42,5 +41,13 @@ export const propTypes = {
   getCSRFCookie: PropTypes.string,
   isEditorDefaultOpen: PropTypes.bool,
   toggleEdit: PropTypes.func,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customInitOption: PropTypes.object,
+  customCSS: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  inlineImageProps: PropTypes.shape({
+    allowedFileExtensions: PropTypes.array,
+    fileNameMaxCharacters: PropTypes.number,
+    fileSizeMaxBytes: PropTypes.number
+  })
 };

package/es/v1/utils/editorUtils.js

@@ -1,5 +1,4 @@
-const ATTACHMENT_FILE_NAME_SIZE_LIMIT = 200; // editorUtils
-
+// editorUtils
 export function editorContentValidate(editorObj) {
   let content = editorObj && editorObj.getContent && editorObj.getContent() || '';
 
@@ -48,12 +47,13 @@ export function encodeForHtml(str) {
   return str;
 } // attachment
 
-export function isFileNameSizeInvalid(fileName) {
-  return fileName.length > ATTACHMENT_FILE_NAME_SIZE_LIMIT;
+export function isFileNameSizeInvalid(fileName, fileNameMaxCharacters) {
+  return fileName.length > fileNameMaxCharacters;
 }
-export function isImageFormat(fileName) {
+export function isImageFormat(fileName, allowedFileExtensions) {
   let extension = getExtensionFromFileName(fileName);
-  return /jpeg|jpg|png|gif|bmp|ico/i.test(extension);
+  const isValidExtension = allowedFileExtensions.includes(extension);
+  return isValidExtension;
 }
 export function getExtensionFromFileName(fileName) {
   if (fileName && fileName.indexOf('.') != -1) {

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -1,178 +1,178 @@
-.varClass {
-  /* globalnotfication default variables */
-  --commonalert_border_color: var(--zdt_commonalert_default_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
-}
-
-.message {
-  composes: varClass;
-  position: absolute;
-  top: 0 ;
-  z-index: 1000;
-  width: var(--zd_size420) ;
-  text-align: center;
-  margin: auto ;
-}
-
-[dir=ltr] .message {
-  left: 0 ;
-  right: 0 ;
-}
-
-[dir=rtl] .message {
-  right: 0 ;
-  left: 0 ;
-}
-
-.stackShadowOne::after,
-.stackShadowTwo::before {
-  content: '';
-  position: absolute;
-  height: var(--zd_size20) ;
-}
-
-.stackShadowOne::after, .stackShadowTwo::before {
-  background-color: var(--globalnotification_bg_color);
-  border-radius: 0 0 6px 6px;
-  box-shadow: var(--zd_bs_globalnotification_container);
-}
-
-[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
-  left: 50% ;
-  right: 50% ;
-  transform: translate(-50%);
-  animation: behindInfo 0.8s forwards;
-}
-
-[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
-  right: 50% ;
-  left: 50% ;
-  transform: translate(50%);
-  animation: behindInfo 0.8s forwards;
-}
-
-.stackShadowTwo::before {
-  width: 90% ;
-  bottom: calc( var(--zd_size10) * -1 ) ;
-}
-
-.stackShadowOne::after {
-  width: 95% ;
-  bottom: calc( var(--zd_size5) * -1 ) ;
-}
-
-@keyframes behindInfo {
-
-  0%,
-  40% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.container {
-  position: relative;
-  pointer-events: initial;
-  color: var(--globalnotification_text_color);
-  z-index: 1;
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  width: 100% ;
-  box-shadow: var(--zd_bs_globalnotification_container);
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  background-color: var(--globalnotification_bg_color);
-  border-style: solid;
-  border-color: var(--commonalert_border_color);
-  border-width: 2px 1px 1px 1px;
-}
-
-[dir=ltr] .container {
-  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
-}
-
-.icon {
-  width: var(--zd_size44) ;
-  height: var(--zd_size44) ;
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  margin: auto 0 ;
-}
-
-[dir=ltr] .icon {
-  left: var(--zd_size18) ;
-}
-
-[dir=rtl] .icon {
-  right: var(--zd_size18) ;
-}
-
-.success {
-  --commonalert_border_color: var(--zdt_commonalert_success_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_success_text);
-}
-
-.info {
-  --commonalert_border_color: var(--zdt_commonalert_info_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_info_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_info_text);
-}
-
-.danger {
-  --commonalert_border_color: var(--zdt_commonalert_danger_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
-}
-
-.error {
-  --commonalert_border_color: var(--zdt_commonalert_error_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_error_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_error_text);
-}
-
-.warning {
-  --commonalert_border_color: var(--zdt_commonalert_warning_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_warning_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_warning_text);
-}
-
-.text {
-  font-size: var(--zd_font_size14) ;
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: 1.4286;
-  overflow: hidden;
-}
-
-[dir=ltr] .text {
-  text-align: left;
-}
-
-[dir=rtl] .text {
-  text-align: right;
-}
-
-.close {
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  height: var(--zd_size25) ;
-}
-
-[dir=ltr] .close {
-  right: var(--zd_size12) ;
-  margin: auto 0 auto var(--zd_size25) ;
-}
-
-[dir=rtl] .close {
-  left: var(--zd_size12) ;
-  margin: auto var(--zd_size25) auto 0 ;
+.varClass {
+  /* globalnotfication default variables */
+  --commonalert_border_color: var(--zdt_commonalert_default_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
+}
+
+.message {
+  composes: varClass;
+  position: absolute;
+  top: 0 ;
+  z-index: 1000;
+  width: var(--zd_size420) ;
+  text-align: center;
+  margin: auto ;
+}
+
+[dir=ltr] .message {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .message {
+  right: 0 ;
+  left: 0 ;
+}
+
+.stackShadowOne::after,
+.stackShadowTwo::before {
+  content: '';
+  position: absolute;
+  height: var(--zd_size20) ;
+}
+
+.stackShadowOne::after, .stackShadowTwo::before {
+  background-color: var(--globalnotification_bg_color);
+  border-radius: 0 0 6px 6px;
+  box-shadow: var(--zd_bs_globalnotification_container);
+}
+
+[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
+  left: 50% ;
+  right: 50% ;
+  transform: translate(-50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
+  right: 50% ;
+  left: 50% ;
+  transform: translate(50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+.stackShadowTwo::before {
+  width: 90% ;
+  bottom: calc( var(--zd_size10) * -1 ) ;
+}
+
+.stackShadowOne::after {
+  width: 95% ;
+  bottom: calc( var(--zd_size5) * -1 ) ;
+}
+
+@keyframes behindInfo {
+
+  0%,
+  40% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.container {
+  position: relative;
+  pointer-events: initial;
+  color: var(--globalnotification_text_color);
+  z-index: 1;
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  width: 100% ;
+  box-shadow: var(--zd_bs_globalnotification_container);
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  background-color: var(--globalnotification_bg_color);
+  border-style: solid;
+  border-color: var(--commonalert_border_color);
+  border-width: 2px 1px 1px 1px;
+}
+
+[dir=ltr] .container {
+  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
+}
+
+[dir=rtl] .container {
+  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
+}
+
+.icon {
+  width: var(--zd_size44) ;
+  height: var(--zd_size44) ;
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  margin: auto 0 ;
+}
+
+[dir=ltr] .icon {
+  left: var(--zd_size18) ;
+}
+
+[dir=rtl] .icon {
+  right: var(--zd_size18) ;
+}
+
+.success {
+  --commonalert_border_color: var(--zdt_commonalert_success_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_success_text);
+}
+
+.info {
+  --commonalert_border_color: var(--zdt_commonalert_info_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_info_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_info_text);
+}
+
+.danger {
+  --commonalert_border_color: var(--zdt_commonalert_danger_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
+}
+
+.error {
+  --commonalert_border_color: var(--zdt_commonalert_error_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_error_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_error_text);
+}
+
+.warning {
+  --commonalert_border_color: var(--zdt_commonalert_warning_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_warning_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_warning_text);
+}
+
+.text {
+  font-size: var(--zd_font_size14) ;
+  font-family: var(--zd_semibold);
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  line-height: 1.4286;
+  overflow: hidden;
+}
+
+[dir=ltr] .text {
+  text-align: left;
+}
+
+[dir=rtl] .text {
+  text-align: right;
+}
+
+.close {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  height: var(--zd_size25) ;
+}
+
+[dir=ltr] .close {
+  right: var(--zd_size12) ;
+  margin: auto 0 auto var(--zd_size25) ;
+}
+
+[dir=rtl] .close {
+  left: var(--zd_size12) ;
+  margin: auto var(--zd_size25) auto 0 ;
 }