@zohodesk/dot 1.0.0-test.239 → 1.1.0

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

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useState, useEffect } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -8,10 +9,11 @@ import Popup from '@zohodesk/components/lib/Popup/Popup';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import TagsMultiSelect from '../TagsMultiSelect/TagsMultiSelect';
 import FieldContainer from '../FieldContainer/FieldContainer';
-
 /**** css ****/
+
 import fieldStyle from '../Fields.module.css';
 import style from './TagsMultiSelectField.module.css';
+
 const TagsMultiSelectField = props => {
   const [selectedSuggestionIndex, updateSelectedSuggestionIndex] = useState(0);
   const [isValueChanged, updateValueChangedState] = useState(false);
@@ -39,7 +41,8 @@ const TagsMultiSelectField = props => {
     children,
     ePhiData,
     customProps,
-    clickableTag
+    clickableTag,
+    dataSelectorId
   } = props;
   const {
     LabelProps = {},
@@ -75,12 +78,14 @@ const TagsMultiSelectField = props => {
     options
   } = fieldProperties;
   options = options || [];
+
   const handleKeyUp = event => {
     let {
       keyCode
     } = event;
     onAdd = typeof onAdd !== 'function' ? () => {} : onAdd;
     onDelete = typeof onDelete !== 'function' ? () => {} : onDelete;
+
     if (keyCode === 13) {
       if (selectedSuggestionIndex > -1 && options.length) {
         if (options.length === 1 && options[0].isNew) {
@@ -97,19 +102,24 @@ const TagsMultiSelectField = props => {
           name: searchValue
         }, event);
       }
+
       changeSearchValue('');
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
         let newIndex = 0;
+
         if (options.length) {
           if (options.length === 1 && options[0].isNew) {
             return newIndex;
           }
+
           newIndex = prevSelectedSuggestionIndex === options.length - 1 ? options.length - 2 : prevSelectedSuggestionIndex;
         }
+
         return newIndex;
       });
     } else if (keyCode === 188 && !event.shiftKey) {
       searchValue = searchValue.replace(',', '');
+
       if (options.length === 1 && options[0].isNew) {
         onAdd({
           name: searchValue
@@ -130,17 +140,21 @@ const TagsMultiSelectField = props => {
       let valueLength = value.length;
       value.length ? onDelete(value[valueLength - 1].name, event) : undefined;
     }
+
     updateValueChangedState(false);
   };
+
   const handleChange = (searchValue, event) => {
     updateValueChangedState(true);
     updateSelectedSuggestionIndex(0);
     changeSearchValue(searchValue);
     typeof onChange === 'function' && onChange(searchValue, event);
+
     if (!isPopupOpen) {
       togglePopup(event);
     }
   };
+
   const handleTogglePopup = event => {
     if (isPopupReady) {
       removeClose(event);
@@ -150,16 +164,20 @@ const TagsMultiSelectField = props => {
       updateSelectedSuggestionIndex(0);
     }
   };
+
   const handleAdd = value => {
     changeSearchValue('');
     typeof onAdd === 'function' && onAdd(value);
   };
+
   const documentClick = () => {
     changeSearchValue('');
   };
+
   const renderEnd = () => {
     return children ? children : null;
   };
+
   useEffect(() => {
     window.addEventListener('click', documentClick);
     return () => {
@@ -167,7 +185,10 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
+    className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`,
+    tabIndex: "0",
+    "aria-label": `${labelName}`,
+    "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
     ePhiData: ePhiData,
     alignContainer: "baseline",
@@ -227,11 +248,11 @@ const TagsMultiSelectField = props => {
     htmlFor: htmlId
   }, ValidationMessageProps)));
 };
+
 export default Popup(TagsMultiSelectField);
 TagsMultiSelectField.propTypes = propTypes;
-TagsMultiSelectField.defaultProps = defaultProps;
-if (false) {
-  TagsMultiSelectField.docs = {
-    componentGroup: 'TagsMultiSelectField'
-  };
-}
+TagsMultiSelectField.defaultProps = defaultProps; // if (__DOCS__) {
+//   TagsMultiSelectField.docs = {
+//     componentGroup: 'TagsMultiSelectField'
+//   };
+// }

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css

@@ -1,9 +1,9 @@
-.count {
-  color: var(--zdt_tagsmultiselectField_count_text);
-  font-size: var(--zd_font_size12);
-  word-break: break-word;
-}[dir=ltr] .count {
-  margin-left: var(--zd_size4);
-}[dir=rtl] .count {
-  margin-right: var(--zd_size4);
-}
+.count {
+  color: var(--zdt_tagsmultiselectField_count_text);
+  font-size: var(--zd_font_size12) ;
+  word-break: break-word;
+}[dir=ltr] .count {
+  margin-left: var(--zd_size4) ;
+}[dir=rtl] .count {
+  margin-right: var(--zd_size4) ;
+}

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

@@ -14,5 +14,6 @@ export const defaultProps = {
   i18nKeys: {},
   numberOfDisplayedValues: '5',
   customProps: {},
+  dataSelectorId: 'tagsMultiSelectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -1,26 +1,28 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** Components ****/
+
 import Label from '@zohodesk/components/lib/Label/Label';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-
 /**** CSS ****/
+
 import style from '../Fields.module.css';
 export default class TextBoxField extends PureComponent {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this);
-    // this.handleLabelClick = this.handleLabelClick.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
+
     this.getNextId = getUniqueId(this);
   }
+
   handleChange(value) {
     let {
       id,
@@ -28,6 +30,7 @@ export default class TextBoxField extends PureComponent {
     } = this.props;
     onChange && onChange(id, value);
   }
+
   handleGetRef(el) {
     let {
       getRef,
@@ -35,15 +38,14 @@ export default class TextBoxField extends PureComponent {
     } = this.props;
     this.textBox = el;
     getRef && getRef(el, id);
-  }
-
-  // handleLabelClick() {
+  } // handleLabelClick() {
   //   // let { isFocusOnLabelClick } = this.props;
   //   // if (isFocusOnLabelClick && this.textBox && this.textBox.focus) {
   //   //   this.textBox.focus();
   //   // }
   // }
 
+
   render() {
     let {
       labelName,
@@ -62,6 +64,7 @@ export default class TextBoxField extends PureComponent {
       title,
       onBlur,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       onKeyDown,
@@ -91,7 +94,8 @@ export default class TextBoxField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -106,7 +110,9 @@ export default class TextBoxField extends PureComponent {
       customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps))), /*#__PURE__*/React.createElement("div", {
+    }, LabelProps, {
+      id: labelName
+    }))), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: uniqueId,
@@ -129,7 +135,11 @@ export default class TextBoxField extends PureComponent {
       needEffect: isReadOnly || isDisabled ? false : true,
       isClickable: isClickable,
       needReadOnlyStyle: needReadOnlyStyle
-    }, TextBoxIconProps), children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    }, TextBoxIconProps, {
+      a11y: {
+        ariaLabelledby: labelName
+      }
+    }), children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,
       type: errorType,
@@ -143,12 +153,12 @@ export default class TextBoxField extends PureComponent {
       dataId: `${dataId}_ValidationRuleMessage`
     }, ValidationMessageProps2))));
   }
+
 }
 TextBoxField.propTypes = propTypes;
-TextBoxField.defaultProps = defaultProps;
-if (false) {
-  TextBoxField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+TextBoxField.defaultProps = defaultProps; // if (__DOCS__) {
+//   TextBoxField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

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

@@ -12,5 +12,6 @@ export const defaultProps = {
   isClickable: false,
   needReadOnlyStyle: true,
   customProps: {},
+  dataSelectorId: 'textBoxField',
   ...FieldCommonDefaultProps()
 };

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

@@ -5,12 +5,16 @@ 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 {
@@ -24,8 +28,10 @@ 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({
@@ -37,8 +43,10 @@ export default class TextEditor extends Component {
         isResourceLoaded: true
       });
     }
+
     window.addEventListener('click', this.onWindowClick);
   }
+
   initializeEditor(id, mode) {
     let {
       value,
@@ -52,6 +60,7 @@ export default class TextEditor extends Component {
       handleAlertMessage,
       needInlineAttachment
     } = this.props;
+
     if (id && global.ZohoDeskEditor) {
       let defaultObj = {
         id,
@@ -78,17 +87,19 @@ export default class TextEditor extends Component {
         needCustomPaste: function (event, editorObj) {
           return true; // By default reply editor needs customPaste, so returning true.
         },
-
-        htmlVersion: "<!Doctype html>"
+        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,
@@ -97,28 +108,35 @@ 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,
@@ -129,48 +147,58 @@ 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 editorObj = global.editor[id] ? global.editor[id] : {};
     let content = getRichEditorContent(id);
+
     if (!editorContentValidate(editorObj)) {
       content = '';
     }
+
     content = content.trim();
     return content;
   }
+
   handleChange() {
     let {
       onChange,
       id
     } = this.props;
+
     if (onChange) {
       let content = this.handleGetContent();
       onChange(content, id);
     }
   }
+
   editorCallback(editorObj) {
     let {
       editorCallback,
@@ -185,42 +213,51 @@ export default class TextEditor extends Component {
       id
     } = this.props;
     global.editor = global.editor || {};
-    if (!editor[id]) {
-      editor[id] = editorObj;
+
+    if (!global.editor[id]) {
+      global.editor[id] = editorObj;
     }
-    const css = 'blockquote {margin:0 0 0 4px; }',
-      head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],
-      style = document.createElement('style');
+
+    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;
     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) {
@@ -229,6 +266,7 @@ export default class TextEditor extends Component {
             this.handleUpload(file).then(res => {
               successCallback(res);
               progress && progress(false);
+
               if (id && editorObj) {
                 triggerKeyup(editorObj.doc);
               }
@@ -248,6 +286,7 @@ export default class TextEditor extends Component {
       failureCallback(i18nKeys.fileNameLimitExceed);
     }
   }
+
   handleDropUpload(file, successCallback, failureCallback) {
     let e = {
       target: {
@@ -263,6 +302,7 @@ export default class TextEditor extends Component {
       failureCallback();
     });
   }
+
   blurCallback() {
     let {
       blurCallback
@@ -270,6 +310,7 @@ export default class TextEditor extends Component {
     let content = this.handleGetContent();
     blurCallback && blurCallback(content);
   }
+
   handleUpload(file) {
     let {
       onUpload,
@@ -277,16 +318,20 @@ 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;
@@ -295,20 +340,24 @@ 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);
@@ -316,12 +365,14 @@ export default class TextEditor extends Component {
       }
     }
   }
+
   toggleEditor(value) {
     let {
       toggleEdit
     } = this.props;
     toggleEdit && toggleEdit(value);
   }
+
   render() {
     let {
       id,
@@ -331,7 +382,8 @@ export default class TextEditor extends Component {
       ImgLazyLoad,
       loadingComponent,
       isNightMode,
-      isReadOnly
+      isReadOnly,
+      dataSelectorId
     } = this.props;
     let {
       isEditorLoad,
@@ -342,7 +394,8 @@ export default class TextEditor extends Component {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]}
         ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${!isEditorShow ? styles.editorHide : ''}`,
       dataId: dataId,
-      "data-isEditor": true
+      "data-isEditor": true,
+      dataSelectorId: dataSelectorId
     }, loadingComponent && !isEditorLoad ? loadingComponent : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       id: id,
@@ -353,12 +406,12 @@ export default class TextEditor extends Component {
       class: styles.readOnlyMask
     }) : null);
   }
+
 }
 TextEditor.defaultProps = defaultProps;
-TextEditor.propTypes = propTypes;
-if (false) {
-  TextEditor.docs = {
-    componentGroup: 'Fields',
-    folderName: 'TextEditor'
-  };
-}
+TextEditor.propTypes = propTypes; // if (__DOCS__) {
+//   TextEditor.docs = {
+//     componentGroup: 'Fields',
+//     folderName: 'TextEditor'
+//   };
+// }