@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/es/form/fields/PhoneField/docs/PhoneField__default.docs.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import PhoneField from '../PhoneField';
+export default class PhoneField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(PhoneField, {
+      labelName: "Phone",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: "98999999999",
+      isTelephony: true
+    });
+  }
+
+}
+
+if (false) {
+  PhoneField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/RadioField/RadioField.js

@@ -55,14 +55,14 @@ export default class RadioField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: "medium",
       id: id,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`

package/es/form/fields/SelectField/SelectField.js

@@ -104,7 +104,7 @@ export default class SelectField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -112,7 +112,7 @@ export default class SelectField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/SelectField/docs/SelectField__default.docs.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SelectField from '../SelectField';
+export default class SelectField__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(fieldId, value) {
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    let option = [{
+      text: 'None',
+      id: '1'
+    }, {
+      text: 'Low',
+      id: '2'
+    }, {
+      text: 'Medium',
+      id: '3'
+    }, {
+      text: 'High',
+      id: '4'
+    }];
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement(SelectField, {
+      labelName: "Priority",
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      searchBoxSize: "xmedium",
+      validationMessage: "Invalid Input"
+    });
+  }
+
+}
+
+if (false) {
+  SelectField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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

@@ -146,10 +146,10 @@ export default class TagsMultiSelect extends React.Component {
         key: index
       }, /*#__PURE__*/React.createElement(Tag, {
         text: name,
-        onRemove: isReadOnly ? null : deleteTag.bind(this, name),
+        onRemove: deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-        isReadOnly: isReadOnly
+        disabled: isReadOnly
       })) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,
@@ -172,7 +172,7 @@ export default class TagsMultiSelect extends React.Component {
       isReadOnly: isReadOnly,
       ref: this.textBoxRef,
       needBorder: false,
-      placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
+      placeHolder: tagsList.length ? '' : '-',
       onClick: !isReadOnly ? handleTogglePopup : undefined,
       customClass: {
         customTBoxWrap: style.custmInp,
@@ -273,8 +273,7 @@ TagsMultiSelect.propTypes = {
     errorMessage: PropTypes.string.isRequired,
     deleteText: PropTypes.string.isRequired,
     lessText: PropTypes.string.isRequired,
-    moreText: PropTypes.string.isRequired,
-    placeholderText: PropTypes.string
+    moreText: PropTypes.string.isRequired
   }),
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   needBorder: PropTypes.bool,

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

@@ -1,26 +1,28 @@
 .tag {
   max-width: 100%;
 }
-.moreLess,
-.tag {
+[dir=ltr] .moreLess, [dir=ltr] .tag {
   margin: 0 var(--zd_size6) var(--zd_size6) 0;
 }
+[dir=rtl] .moreLess, [dir=rtl] .tag {
+  margin: 0 0 var(--zd_size6) var(--zd_size6);
+}
 .input {
   height: var(--zd_size20);
-  margin-bottom: var(--zd_size4);
   width: 100%;
+  margin-bottom: var(--zd_size4);
 }
 .viewpopNew {
   max-height: var(--zd_size250);
 }
 .tagDiv {
-  margin-top: var(--zd_size5);
   max-height: var(--zd_size160);
+  margin-top: var(--zd_size5);
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
@@ -64,10 +66,15 @@
   font-size: 0;
 }
 .newTagLabel {
-  margin-right: var(--zd_size5);
   color: var(--zdt_tagsmultiselect_labelt_text);
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .newTagLabel {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .newTagLabel {
+  margin-left: var(--zd_size5);
+}
 .dotted {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -87,9 +94,14 @@
 .custmInp {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
 }
+[dir=ltr] .custmInp {
+  left: 0;
+}
+[dir=rtl] .custmInp {
+  right: 0;
+}
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);
 }

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import TagsMultiSelect from '../TagsMultiSelect';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TagsMultiSelect__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPopupOpen: false
+    };
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.getCustomChildren = this.getCustomChildren.bind(this);
+  }
+
+  handleTogglePopup() {
+    this.setState({
+      isPopupOpen: !this.state.isPopupOpen
+    });
+  }
+
+  getCustomChildren() {
+    return /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    });
+  }
+
+  render() {
+    let {
+      isPopupOpen
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(TagsMultiSelect, {
+      addTag: () => {},
+      closeSearch: () => {},
+      deleteTag: () => {},
+      handleChange: () => {},
+      handleKeyUp: () => {},
+      isReadOnly: false,
+      name: "",
+      noMoreData: true,
+      searchList: [],
+      searchTags: () => {},
+      selectSearchIndex: "-1",
+      tagsList: [{
+        name: 'Tag1',
+        tagType: 'MANUAL',
+        id: '5853000007033049'
+      }, {
+        name: 'Tag2',
+        tagType: 'MANUAL',
+        id: '5853000007033069'
+      }],
+      handleTogglePopup: this.handleTogglePopup,
+      isPopupOpen: isPopupOpen,
+      isPopupReady: isPopupOpen,
+      i18nKeys: {
+        newTagText: 'New Tag',
+        emptyTitleText: 'OOPS',
+        emptyDescription: 'No tag available',
+        deleteText: 'Delete tag',
+        lessText: 'Less',
+        moreText: 'More'
+      },
+      getTextBoxChildren: this.getCustomChildren
+    }));
+  }
+
+}
+
+if (false) {
+  TagsMultiSelect__default.docs = {
+    componentGroup: 'TagsMultiSelect'
+  };
+}

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

@@ -180,7 +180,7 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${style.container} ${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
+    className: style.container
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "baseline",
@@ -191,7 +191,7 @@ const TagsMultiSelectField = props => {
     id: id,
     size: labelSize,
     palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
+    customClass: `${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
     dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     htmlFor: htmlId
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {

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

@@ -1,6 +1,9 @@
 .count {
   color: var(--zdt_tagsmultiselectField_count_text);
   font-size: var(--zd_font_size12);
-  margin-left: var(--zd_size4);
   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/docs/TagsMultiSelectField__default.docs.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import TagsMultiSelectField from '../TagsMultiSelectField';
+import Icon from '@zohodesk/icons/lib/Icon';
+
+const TagsMultiSelectField__default = () => {
+  let value = [{
+    name: 'Tag1',
+    tagType: 'MANUAL',
+    id: '5853000007033049'
+  }, {
+    name: 'Tag2',
+    tagType: 'MANUAL',
+    id: '5853000007033069'
+  }, {
+    name: 'Tag3',
+    tagType: 'MANUAL',
+    id: '5853000007033080'
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '20px 20px 0'
+    }
+  }, /*#__PURE__*/React.createElement(TagsMultiSelectField, {
+    ePhiData: {
+      ePhiTitle: 'ehhweh',
+      ePhiText: 'ephi',
+      ePhiStatus: true
+    },
+    fieldProperties: {
+      id: 'tag',
+      name: 'tag',
+      labelName: 'Tags MultiSelect',
+      isReadOnly: false,
+      isDisabled: false,
+      value,
+      options: [],
+      selectedValueCount: '10'
+    },
+    styleProperties: {
+      labelPalette: 'secondary'
+    },
+    i18nKeys: {
+      newTagText: 'New Tag',
+      emptyTitleText: 'OOPS',
+      emptyDescription: 'No tag available',
+      deleteText: 'Delete tag',
+      lessText: 'Less',
+      moreText: 'More'
+    },
+    actions: {
+      onAdd: (tag, event) => {
+        console.log('Add Event=====', tag);
+      },
+      onDelete: (tag, event) => {
+        console.log('Delete Event=====', tag);
+      },
+      onChange: searchValue => {
+        console.log('Value Change Event------>>', searchValue);
+      },
+      onScroll: () => {}
+    },
+    isNewNeeded: true,
+    getTextBoxChildren: () => /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '13px',
+      marginLeft: '5px',
+      color: 'var(--dot_text_shuttleGrey)'
+    }
+  }, "shift+t")));
+};
+
+export default TagsMultiSelectField__default;
+
+if (false) {
+  TagsMultiSelectField__default.docs = {
+    componentGroup: 'TagsMultiSelectField'
+  };
+}

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

@@ -97,7 +97,7 @@ export default class TextBoxField extends PureComponent {
     } = ePhiData;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -105,7 +105,7 @@ export default class TextBoxField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

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

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TextBoxField from '../TextBoxField';
+import { Container } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TextBoxField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px 0 10px',
+        fontFamily: 'var(--zd_semibold)'
+      }
+    }, "Children Option"), /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    }))));
+  }
+
+}
+
+if (false) {
+  TextBoxField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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

@@ -21,8 +21,7 @@ export default class TextEditor extends Component {
     super(props);
     this.state = {
       isEditorLoad: false,
-      isResourceLoaded: false,
-      isEditorShow: false
+      isResourceLoaded: false
     };
     let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
     bind.apply(this, methods);
@@ -200,8 +199,7 @@ export default class TextEditor extends Component {
       isCustomScroll
     } = this.props;
     this.setState({
-      isEditorLoad: true,
-      isEditorShow: true
+      isEditorLoad: true
     });
     let {
       id
@@ -234,7 +232,7 @@ export default class TextEditor extends Component {
 
       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}";
+        link.innerText = ".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');
       }
@@ -379,13 +377,12 @@ export default class TextEditor extends Component {
       isReadOnly
     } = this.props;
     let {
-      isEditorLoad,
-      isEditorShow
+      isEditorLoad
     } = this.state;
     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 : ''}`,
       dataId: dataId,
       "data-isEditor": true
     }, loadingComponent && !isEditorLoad ? loadingComponent : null, /*#__PURE__*/React.createElement(Box, {