@zohodesk/dot/es/form/fields/TextEditorWrapper/TextEditorWrapper.js

In this Library, we Provide Some Basic Components to Build Your Application

import React, { Component } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/

import TextEditor from "../TextEditor/TextEditor";
import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
import { editorContentValidate } from "../../../utils/editorUtils";
import style from "./TextEditorWrapper.module.css";
/* eslint-disable react/no-deprecated */

export default class TextEditorWrapper extends Component {
  constructor(props) {
    super(props);
    let {
      value,
      isEditorDefaultOpen
    } = props;
    this.state = {
      isEditorShow: isEditorDefaultOpen ? true : !!value
    };
    this.handleTextareaFocus = this.handleTextareaFocus.bind(this);
    this.toggleEdit = this.toggleEdit.bind(this);
    this.focusCallback = this.focusCallback.bind(this);
  }

  handleTextareaFocus() {
    let {
      isReadOnly,
      isDisabled
    } = this.props;

    if (!isReadOnly && !isDisabled) {
      this.setState({
        isEditorShow: true
      }, () => {
        setTimeout(() => {
          editor[this.props.id].squireInstance.focus();
        }, 300);
      });
    }
  }

  toggleEdit(value) {
    this.setState({
      isEditorShow: value
    });
  }

  focusCallback() {
    let {
      onFocus
    } = this.props;
    this.setState({
      isEditorFocus: true
    });
    onFocus && onFocus();
  }

  componentWillReceiveProps(np) {
    let {
      id,
      value
    } = this.props;

    if (np.value || typeof editor != 'undefined' && editorContentValidate(editor[id])) {
      this.setState({
        isEditorShow: true
      });
    } else {
      if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
        this.setState({
          isEditorShow: false
        });
      }
    } // if (np.value !== value && np.value == '') {
    //   editor[id].setContent('');
    // }

  }

  render() {
    let {
      isEditorShow
    } = this.state;
    let {
      id,
      onChange,
      value,
      onAttachmentUpload,
      needEditor,
      dataId,
      isReadOnly,
      isDisabled,
      getRef,
      textBoxSize,
      textBoxVariant,
      editorMode,
      editorSize,
      editorBorder,
      EDITORURL,
      isCustomScroll,
      initCallback,
      loadingComponent,
      handleAlertMessage,
      editorCallback,
      editorBlurCallback,
      editorOptions,
      changeEditorContent,
      shouldEditorUpdateContent,
      setInlineAttachmentInProgress,
      handleEditorDropUpload,
      ImgLazyLoad,
      i18nKeys,
      isEditorDefaultOpen,
      needInlineAttachment,
      customProps,
      dataSelectorId
    } = this.props;
    const {
      Textarea1Props = {},
      Textarea2Props = {},
      TextEditorProps = {}
    } = customProps;
    let defaultObj = {
      needEditorFocus: !value
    };
    let editorOptionsObject = Object.assign(defaultObj, editorOptions);
    return /*#__PURE__*/React.createElement("div", {
      className: style.container,
      "data-selector-id": dataSelectorId
    }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, {
      onFocus: this.handleTextareaFocus,
      text: value,
      animated: !needEditor,
      onChange: onChange,
      dataId: dataId,
      isReadOnly: isReadOnly,
      isDisabled: isDisabled,
      needEffect: !(isReadOnly || isDisabled),
      getRef: getRef,
      size: textBoxSize,
      variant: textBoxVariant,
      customClass: style.textBox,
      ...Textarea1Props
    }) : null, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
      name: "slideDown",
      runOnMount: true,
      enterDuration: '300',
      exitDuration: '400',
      isActive: isEditorShow,
      component: "div"
    }, /*#__PURE__*/React.createElement("div", {
      className: style.textEditor
    }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, {
      id: id,
      value: value,
      onChange: !isReadOnly && !isDisabled ? onChange : null,
      editorOptions: editorOptionsObject,
      onUpload: onAttachmentUpload,
      editorMode: editorMode,
      type: editorSize,
      border: editorBorder,
      dataId: dataId,
      getRef: getRef,
      plainTextSwitchCallback: !isReadOnly && !isDisabled ? onChange : null,
      EDITORURL: EDITORURL,
      isCustomScroll: isCustomScroll,
      initCallback: initCallback,
      loadingComponent: loadingComponent,
      handleAlertMessage: handleAlertMessage,
      toggleEdit: this.toggleEdit,
      isEditorDefaultOpen: isEditorDefaultOpen,
      editorCallback: editorCallback,
      i18nKeys: i18nKeys,
      ImgLazyLoad: ImgLazyLoad,
      blurCallback: editorBlurCallback,
      changeEditorContent: changeEditorContent,
      shouldUpdateContent: shouldEditorUpdateContent,
      setInlineAttachmentInProgress: setInlineAttachmentInProgress,
      handleDropUpload: handleEditorDropUpload,
      onFocus: this.focusCallback,
      needInlineAttachment: needInlineAttachment,
      ...TextEditorProps
    }) : /*#__PURE__*/React.createElement(Textarea, {
      onFocus: this.handleTextareaFocus,
      text: value,
      animated: !needEditor,
      onChange: onChange,
      dataId: dataId,
      isReadOnly: isReadOnly,
      isDisabled: isDisabled,
      needEffect: !(isReadOnly || isDisabled),
      getRef: getRef,
      size: textBoxSize,
      variant: textBoxVariant,
      ...Textarea2Props
    }))));
  }

}
TextEditorWrapper.propTypes = propTypes;
TextEditorWrapper.defaultProps = defaultProps;