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

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

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

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

const TextEditorWrapper = props => {
  const {
    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,
    onFocus
  } = props;
  const {
    Textarea1Props = {},
    Textarea2Props = {},
    TextEditorProps = {}
  } = customProps;
  const [isEditorShow, setIsEditorShow] = useState(isEditorDefaultOpen ? true : !!value);
  const [isEditorFocus, setIsEditorFocus] = useState(false);
  const defaultObj = {
    needEditorFocus: !value
  };
  const editorOptionsObject = Object.assign(defaultObj, editorOptions);

  const handleTextareaFocus = () => {
    if (!isReadOnly && !isDisabled) {
      setIsEditorShow(true);
      setTimeout(() => {
        editor[id].squireInstance.focus();
      }, 300);
    }
  };

  const toggleEdit = value => {
    setIsEditorShow(value);
  };

  const focusCallback = () => {
    setIsEditorFocus(true);
    onFocus && onFocus();
  };

  useEffectCallOnlyAfterState(() => {
    if (value || typeof editor !== 'undefined' && editorContentValidate(editor[id])) {
      setIsEditorShow(true);
    } else {
      if (!isEditorFocus && !isEditorDefaultOpen) {
        setIsEditorShow(false);
      }
    }
  }, [value, id, isEditorDefaultOpen]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "data-selector-id": dataSelectorId
  }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, {
    onFocus: 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: toggleEdit,
    isEditorDefaultOpen: isEditorDefaultOpen,
    editorCallback: editorCallback,
    i18nKeys: i18nKeys,
    ImgLazyLoad: ImgLazyLoad,
    blurCallback: editorBlurCallback,
    changeEditorContent: changeEditorContent,
    shouldUpdateContent: shouldEditorUpdateContent,
    setInlineAttachmentInProgress: setInlineAttachmentInProgress,
    handleDropUpload: handleEditorDropUpload,
    onFocus: focusCallback,
    needInlineAttachment: needInlineAttachment,
    ...TextEditorProps
  }) : /*#__PURE__*/React.createElement(Textarea, {
    onFocus: handleTextareaFocus,
    text: value,
    animated: !needEditor,
    onChange: onChange,
    dataId: dataId,
    isReadOnly: isReadOnly,
    isDisabled: isDisabled,
    needEffect: !(isReadOnly || isDisabled),
    getRef: getRef,
    size: textBoxSize,
    variant: textBoxVariant,
    ...Textarea2Props
  }))));
};

export default TextEditorWrapper;
TextEditorWrapper.propTypes = propTypes;
TextEditorWrapper.defaultProps = defaultProps;