npm - @zohodesk/dot - Versions diffs - 1.0.0-beta.235 → 1.0.0-beta.238 - Mend

@zohodesk/dot 1.0.0-beta.235 → 1.0.0-beta.238

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (998) hide show

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

@@ -5,16 +5,12 @@ import { propTypes } from './props/propTypes';
 import selectn from 'selectn';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 /***** Methods *****/
-import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImageFormat, triggerKeyup, getRichEditorContent, changeContent, validateEditorContentOnInsertHtml, loadResource } from '../../../utils/editorUtils'; //import './ZohoDeskEditor_Init';
+import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImageFormat, triggerKeyup, getRichEditorContent, changeContent, validateEditorContentOnInsertHtml, loadResource } from '../../../utils/editorUtils';
+//import './ZohoDeskEditor_Init';
 /***** components *****/
 import styles from './TextEditor.module.css';
 /* eslint-disable camelcase */
 /* eslint-disable no-undef */
 /* eslint-disable react/no-deprecated */
 export default class TextEditor extends Component {
@@ -28,10 +24,8 @@ export default class TextEditor extends Component {
     let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
     bind.apply(this, methods);
   }
   componentDidMount() {
     this.mount = true;
     if (typeof global.ZohoDeskEditor === 'undefined') {
       loadResource(this.props.EDITORURL, 'js', 'ZohoDeskEditor').then(() => {
         this.setState({
@@ -43,10 +37,8 @@ export default class TextEditor extends Component {
         isResourceLoaded: true
       });
     }
     window.addEventListener('click', this.onWindowClick);
   }
   initializeEditor(id, mode) {
     let {
       value,
@@ -60,7 +52,6 @@ export default class TextEditor extends Component {
       handleAlertMessage,
       needInlineAttachment
     } = this.props;
     if (id && global.ZohoDeskEditor) {
       let defaultObj = {
         id,
@@ -86,19 +77,18 @@ export default class TextEditor extends Component {
         hookOnInsertHTML: validateEditorContentOnInsertHtml,
         needCustomPaste: function (event, editorObj) {
           return true; // By default reply editor needs customPaste, so returning true.
-        }
-      };
+        },
+        htmlVersion: "<!Doctype html>"
+      };
       if (!ZohoDeskEditor_Init.init) {
         global.editorInitialize && global.editorInitialize();
       }
       defaultObj = Object.assign(defaultObj, editorOptions);
       ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback, fontSize);
       ZohoDeskEditor.create && ZohoDeskEditor.create(defaultObj);
     }
   }
   plainTextSwitchCallback() {
     let {
       plainTextSwitchCallback,
@@ -107,35 +97,28 @@ export default class TextEditor extends Component {
     let content = this.handleGetContent();
     plainTextSwitchCallback && plainTextSwitchCallback(content, id);
   }
   clearEditorData(id) {
     let {
       getRef
     } = this.props;
     if (global.editor && global.editor[id]) {
       delete global.editor[id];
     }
     getRef && getRef(null);
   }
   componentWillReceiveProps(np) {
     let {
       changeEditorContent
     } = this.props;
     let id = np.id;
     let editorObj = global.editor ? global.editor[id] ? global.editor[id] : {} : {};
     if (np.isEmptyContent && editorObj) {
       editorObj.setContent('');
     }
     if (typeof changeEditorContent !== 'undefined' && np.changeEditorContent != changeEditorContent && np.changeEditorContent) {
       changeContent(id, np.value);
     }
   }
   componentDidUpdate(prevProps, prevState) {
     let {
       id,
@@ -146,55 +129,48 @@ export default class TextEditor extends Component {
     let {
       isResourceLoaded
     } = this.state;
     if (prevProps.id !== id) {
       global.editor[id] = global.editor[prevProps.id];
       delete global.editor[prevProps.id];
       shouldUpdateContent && changeContent(id, value);
     }
     if (prevState.isResourceLoaded !== isResourceLoaded && isResourceLoaded) {
       this.initializeEditor(id, mode);
     }
   }
   componentWillUnmount() {
     this.mount = false;
     this.clearEditorData(this.props.id);
     window.removeEventListener('click', this.onWindowClick);
   }
   focusCallback() {
     let {
       onFocus
     } = this.props;
     onFocus && onFocus();
   }
   handleGetContent() {
     let {
       id
     } = this.props;
     let editorObj = editor[id] ? editor[id] : {};
     let content = getRichEditorContent(id);
     if (!editorContentValidate(editorObj)) {
       content = '';
     }
     content = content.trim();
     return content;
   }
   handleChange() {
     let {
       onChange,
       id
     } = this.props;
-    let content = this.handleGetContent();
-    onChange && onChange(content, id);
+    if (onChange) {
+      let content = this.handleGetContent();
+      onChange(content, id);
+    }
   }
   editorCallback(editorObj) {
     let {
       editorCallback,
@@ -209,51 +185,42 @@ export default class TextEditor extends Component {
       id
     } = this.props;
     global.editor = global.editor || {};
     if (!editor[id]) {
       editor[id] = editorObj;
     }
     const css = 'blockquote {margin:0 0 0 4px; }',
-          head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],
-          style = document.createElement('style');
+      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;
     getRef && getRef(iframe);
     if (iframe) {
       iframe.addEventListener('click', () => editorObj.iframe.click());
       if (isCustomScroll) {
         let link = document.createElement('style');
         link.innerText = "body{font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 0}.scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
         iframeHead.appendChild(link);
         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);
     }
   }
   handleInlineUpload(file, successCallback, failureCallback, mode, editorObj) {
     let {
       id,
       setInlineAttachmentInProgress: progress,
       i18nKeys
     } = this.props;
     if (!isFileNameSizeInvalid(file.name)) {
       if (file.size != 0) {
         if (file.size <= 3 * 1024 * 1024) {
@@ -262,7 +229,6 @@ export default class TextEditor extends Component {
             this.handleUpload(file).then(res => {
               successCallback(res);
               progress && progress(false);
               if (id && editorObj) {
                 triggerKeyup(editorObj.doc);
               }
@@ -282,7 +248,6 @@ export default class TextEditor extends Component {
       failureCallback(i18nKeys.fileNameLimitExceed);
     }
   }
   handleDropUpload(file, successCallback, failureCallback) {
     let e = {
       target: {
@@ -298,7 +263,6 @@ export default class TextEditor extends Component {
       failureCallback();
     });
   }
   blurCallback() {
     let {
       blurCallback
@@ -306,7 +270,6 @@ export default class TextEditor extends Component {
     let content = this.handleGetContent();
     blurCallback && blurCallback(content);
   }
   handleUpload(file) {
     let {
       onUpload,
@@ -314,20 +277,16 @@ export default class TextEditor extends Component {
       getCSRFCookieName,
       getCSRFCookie
     } = this.props;
     try {
       let formData = new FormData();
       formData.append('img_file', file, file.name);
       if (getCSRFCookieName && getCSRFCookie) {
         formData.append(getCSRFCookieName(), getCSRFCookie());
       }
       return onUpload(formData, file).then(res => {
         if (editorMode === 'TicketReply') {
           return `${res.data}&from=r`;
         }
         return res.data;
       }, err => {
         throw err;
@@ -336,24 +295,20 @@ export default class TextEditor extends Component {
       return Promise.reject();
     }
   }
   onWindowClick(e) {
     let {
       isEditorDefaultOpen
     } = this.props;
     let element = e.target;
     if (!element.closest('[data-isEditor]') && !element.closest("[id='KB_Editor_UploadImage_Popup']") && !element.closest("[id='KB_Editor_Overlay']") && !element.closest('.zdeskEditor_popup') && element && typeof element.className === 'string' && !element.className.startsWith('KB') && !element.hasAttribute('data-insertoptions') && !element.closest('.KB_Editor_common_DropDown')) {
       let {
         value = '',
         id
       } = this.props;
       let cont = value;
       if (typeof editor !== 'undefined') {
         cont = editor['addFormEditor'] && editor['addFormEditor'].getContent();
       }
       if (!isEditorDefaultOpen) {
         if ((cont == '' || cont == '<div><br></div>') && this.mount) {
           this.toggleEditor(false);
@@ -361,14 +316,12 @@ export default class TextEditor extends Component {
       }
     }
   }
   toggleEditor(value) {
     let {
       toggleEdit
     } = this.props;
     toggleEdit && toggleEdit(value);
   }
   render() {
     let {
       id,
@@ -400,11 +353,9 @@ export default class TextEditor extends Component {
       class: styles.readOnlyMask
     }) : null);
   }
 }
 TextEditor.defaultProps = defaultProps;
 TextEditor.propTypes = propTypes;
 if (false) {
   TextEditor.docs = {
     componentGroup: 'Fields',