"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

require("./custom-style-edit.css");

var _ColorEditor = _interopRequireDefault(require("./ColorEditor"));

var _createPopUp = _interopRequireDefault(require("./createPopUp"));

var _FontSizeCommandMenuButton = require("./FontSizeCommandMenuButton");

var _FontTypeMarkSpec = require("../FontTypeMarkSpec");

var _toCSSLineSpacing = require("./toCSSLineSpacing");

var _customStyle = require("../customStyle");

var _ParagraphNodeSpec = require("../ParagraphNodeSpec");

var _prosemirrorState = require("prosemirror-state");

var _Types = require("../Types");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

let customStyles = [];
const otherStyleSelected = false;
const editedStyles = []; // Values to show in Linespacing drop-down

const LINE_SPACE = ['Single', '1.15', '1.5', 'Double']; // Values to show in numbering/indent drop-down

const LEVEL_VALUES = ['None', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
const SAMPLE_TEXT = `Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample.
Sample Text Sample Text Sample Text Sample Text Sample Text`;

class CustomStyleEditor extends React.PureComponent {
  constructor(props) {
    super(props);

    _defineProperty(this, "_unmounted", false);

    _defineProperty(this, "_popUp", null);

    _defineProperty(this, "_cancel", () => {
      // [FS] IRAD-1231 2021-03-02
      // FIX: edited custom styles not applied to the document
      if (3 === this.state.mode) {
        delete this.state.customStyles;
        this.props.close(editedStyles);
      } else {
        this.props.close();
      }
    });

    _defineProperty(this, "_save", () => {
      delete this.state.otherStyleSelected; // [FS] IRAD-1137 2021-01-15
      // FIX: able to save a custom style name with already exist style name

      if (0 === this.state.mode && (0, _customStyle.isCustomStyleExists)(this.state.styleName)) {
        const errMsg = document.getElementById('errormsg');

        if (errMsg && errMsg.style) {
          errMsg.style.display = '';
        } // [FS] IRAD-1176 2021-02-08
        // save the custom styles from Edit all option.

      } else if (3 === this.state.mode) {
        this.modifyCustomStyle(this.state);
        editedStyles.push(this.state.styleName);
      } else {
        if ('' != this.state.styleName) {
          delete this.state.customStyles;
          this.props.close(this.state);
        }
      }
    });

    _defineProperty(this, "handleKeyDown", e => {
      const txtName = document.getElementById('txtName');

      if (txtName) {
        txtName.focus();
      }
    });

    this.state = _objectSpread(_objectSpread({}, props), {}, {
      otherStyleSelected,
      customStyles
    }); // set default values for text alignment and boldNumbering checkbox.

    if (!this.state.styles.align) {
      this.state.styles.align = 'left';
    }

    if (0 === this.state.mode) {
      this.state.styles.boldNumbering = true;
      this.state.styles.boldSentence = true;
      this.state.styles.nextLineStyleName = _ParagraphNodeSpec.RESERVED_STYLE_NONE;
    }

    if (!this.state.styles.fontName) {
      this.state.styles.fontName = 'Arial';
    }

    if (!this.state.styles.fontSize) {
      this.state.styles.fontSize = 11;
    }

    this.getCustomStyles(props.editorView.runtime);
  }

  componentWillUnmount() {
    this._unmounted = true;
  } // To set the selected style values


  onStyleClick(style, event) {
    let state = null;

    switch (style) {
      // simple toggles where style matches the key to change.
      case 'strong':
      case 'em':
      case 'strike':
      case 'super':
      case 'underline':
        // copy the current style values, and flip the matching value
        state = {
          styles: _objectSpread({}, this.state.styles)
        };
        state.styles[style] = !state.styles[style];
        break;

      case 'name':
        if (event) {
          const oldName = this.state.styleName;
          const newName = event.target.value;
          state = {
            styleName: newName,
            styles: null
          };
          state.styles = _objectSpread({}, this.state.styles);

          if (this.state.styles.nextLineStyleName === oldName) {
            // Update next line style as well.
            state.styles.nextLineStyleName = newName;
          }
        }

        break;

      case 'description':
        if (event) {
          state = {
            description: event.target.value
          };
        }

        break;
      // [FS] IRAD-1497 2021-06-30
      // Not able to set paragraph spacing before and after.

      case 'before':
        if (event) {
          state = {
            styles: _objectSpread({}, this.state.styles)
          };
          state.styles['paragraphSpacingBefore'] = event.target.value;
        }

        break;

      case 'after':
        if (event) {
          state = {
            styles: _objectSpread({}, this.state.styles)
          };
          state.styles['paragraphSpacingAfter'] = event.target.value;
        }

        break;

      default:
        break;
    } // save changes and update


    if (state) {
      this.setState(state, () => this.buildStyle());
    }
  } // Build styles to display the example piece


  buildStyle() {
    const style = {};

    if (this.state.styles.fontName) {
      style.fontFamily = this.state.styles.fontName;
    }

    if (this.state.styles.fontSize) {
      style.fontSize = `${this.state.styles.fontSize}px`;
    }

    if (this.state.styles.strong) {
      style.fontWeight = 'bold';
    }

    if (this.state.styles.color) {
      style.color = this.state.styles.color;
    }

    if (this.state.styles.underline) {
      style.textDecoration = undefined !== style.textDecoration ? `${style.textDecoration}${' underline'}` : 'underline';
    }

    if (this.state.styles.strike) {
      style.textDecoration = undefined !== style.textDecoration ? `${style.textDecoration}${' line-through'}` : 'line-through';
    }

    if (this.state.styles.em) {
      style.fontStyle = 'italic';
    }

    if (this.state.styles.textHighlight) {
      style.backgroundColor = this.state.styles.textHighlight;
    }

    if (this.state.styles.align) {
      style.textAlign = this.state.styles.align;
    }

    if (this.state.styles.lineHeight) {
      // [FS] IRAD-1104 2020-11-13
      // Issue fix : Linespacing Double and Single not applied in the sample text paragraph
      style.lineHeight = (0, _toCSSLineSpacing.getLineSpacingValue)(this.state.styles.lineHeight);
    } // [FS] IRAD-1111 2020-12-10
    // Issue fix : Paragraph space before is not applied in the sample text.


    if (this.state.styles.paragraphSpacingBefore) {
      style.marginTop = `${this.state.styles.paragraphSpacingBefore}px`;
    } // [FS] IRAD-1111 2020-12-10
    // Issue fix : Paragraph space after is not applied in the sample text.


    if (this.state.styles.paragraphSpacingAfter) {
      style.marginBottom = `${this.state.styles.paragraphSpacingAfter}px`;
    } // [FS] IRAD-1111 2020-12-10
    // Issue fix : Indent is not applied in the sample text.


    if (!this.state.styles.isLevelbased) {
      if (this.state.styles.indent) {
        style.marginLeft = `${this.state.styles.indent * 2}px`;
      }
    } else {
      const levelValue = document && document.getElementById('levelValue');

      if ( // this covers null & undefined
      levelValue instanceof window.HTMLSelectElement && levelValue.value) {
        style.marginLeft = `${parseInt(levelValue.value) * 2}px`;
      }
    }

    const sampleDiv = document.getElementById('sampletextdiv');

    if (sampleDiv) {
      // [FS] IRAD-1394 2021-06-02
      // Issue: numbering sample not working when select Bold first sentence
      let textSample = SAMPLE_TEXT;

      if (this.state.styles.boldPartial) {
        if (this.state.styles.boldSentence) {
          const content = SAMPLE_TEXT.split('.');
          sampleDiv.innerHTML = `<strong>${content[0]}</strong> ${content[1]}`;
        } else {
          const content = SAMPLE_TEXT.split(' ');
          sampleDiv.innerHTML = `<strong>${content[0]}</strong> ${SAMPLE_TEXT}`;
        }

        textSample = sampleDiv.innerHTML; // [FS] IRAD-1473 2021-06-30
        // Style Example not showing properly when select Bold and Bold First Sentence

        style.fontWeight = 'normal';
      }

      if (this.state.styles.styleLevel && this.state.styles.hasNumbering) {
        // [FS] IRAD-1137 2021-01-11
        // Issue fix : The Preview text is not showing the numbering in bold after Bold Numbering is enabled.
        const sampleDiv = document.getElementById('sampletextdiv');

        if (sampleDiv) {
          if (this.state.styles.boldNumbering) {
            sampleDiv.innerHTML = `<strong>${this.getNumberingLevel(this.state.styles.styleLevel)}</strong>${textSample}`;
          } else {
            sampleDiv.innerText = `${this.getNumberingLevel(this.state.styles.styleLevel)}${textSample}`;
          }
        }
      } else {
        sampleDiv.innerText = `${SAMPLE_TEXT}`;
        sampleDiv.innerHTML = textSample;
      }
    }

    return style;
  } // [FS] IRAD-1111 2020-12-10
  // get the numbering corresponding to the level


  getNumberingLevel(level) {
    let levelStyle = '';

    for (let i = 0; i < parseInt(level); i++) {
      levelStyle = levelStyle + '1.';
    }

    return levelStyle + ' ';
  } // handles font name change


  onFontNameChange(e) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        fontName: e.target.value
      })
    });
  } // handles indent radio button event


  onIndentRadioChanged(e) {
    if ('0' == e.target.value) {
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          isLevelbased: true
        })
      });
    } else {
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          isLevelbased: false
        })
      });
    }
  } // handles scentece bold event


  onScentenceRadioChanged(e) {
    if ('0' == e.target.value) {
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          boldSentence: true
        })
      });
    } else {
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          boldSentence: false
        })
      });
    }
  } // handles font size change


  onFontSizeChange(e) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        fontSize: e.target.value
      })
    });
  } // handles line space  change


  onLineSpaceChange(e) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        lineHeight: e.target.value
      })
    });
  } // handles Level drop down change


  onLevelChange(e) {
    const val = _ParagraphNodeSpec.RESERVED_STYLE_NONE === e.target.value ? null : e.target.value;
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        styleLevel: val
      })
    });
  } // handles indent dropdown change


  onIndentChange(e) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        indent: 'None' === e.target.value ? 0 : e.target.value
      })
    });
  } // [FS] IRAD-1201 2021-02-18
  // set the nextLineStyle to JSON on style selection changed


  onOtherStyleSelectionChanged(e) {
    if (this.state.otherStyleSelected) {
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          nextLineStyleName: e.target.value
        })
      });
    }
  } // [FS] IRAD-1201 2021-02-18
  // set the nextLineStyle to JSON according to the selected option


  onNextLineStyleSelected(selectedOption) {
    const hiddenDiv = document.getElementById('nextStyle');

    if (hiddenDiv) {
      hiddenDiv.style.display = 'none';
    }

    if (0 === selectedOption) {
      this.setState({
        otherStyleSelected: false
      });
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          nextLineStyleName: 'None'
        })
      });
    } else if (1 === selectedOption) {
      this.setState({
        otherStyleSelected: false
      });
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          nextLineStyleName: this.state.styleName
        })
      });
    } else {
      if (hiddenDiv) {
        hiddenDiv.style.display = 'block';
      }

      const selectedStyle = document.getElementById('nextStyleValue');

      if (selectedStyle instanceof window.HTMLSelectElement) {
        this.setState({
          otherStyleSelected: true,
          styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
            nextLineStyleName: selectedStyle.options[selectedStyle.selectedIndex].text
          })
        });
      }
    }
  } // [FS] IRAD-1127 2020-12-31
  // to populate the selected custom styles.


  onSelectCustomStyle(e) {
    if (null !== customStyles) {
      const value = this.state.customStyles.find(u => u.styleName === e.target.value); // FIX: not able to modify and save the populated style

      value.mode = 3;
      this.state = _objectSpread({}, value);
      this.setState(this.state);
      this.setNextLineStyle(this.state.styles.nextLineStyleName);
    }
  } // shows color dialog based on input text-color/text-heighlight


  showColorDialog(isTextColor, event) {
    const anchor = event ? event.currentTarget : null;
    const hex = null;
    this._popUp = (0, _createPopUp.default)(_ColorEditor.default, {
      hex
    }, {
      anchor,
      autoDismiss: true,
      IsChildDialog: true,
      onClose: val => {
        if (this._popUp) {
          this._popUp = null;

          if (undefined !== val) {
            if (isTextColor) {
              this.setState({
                styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
                  color: val
                })
              });
            } else {
              this.setState({
                styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
                  textHighlight: val
                })
              });
            }
          }
        }
      }
    });
  } //handles the option button click, close the popup with selected values


  onAlignButtonClick(val) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        align: val
      })
    });
  }

  handleNumbering(val) {
    // if user select numbering, then always set nextLineStyle as continues this style.
    // [FS] IRAD-1221 2021-03-01
    // Issue fix: The next line style not switch back to 'None' when disable the numbering.
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        hasNumbering: val.target.checked,
        nextLineStyleName: val.target.checked ? this.state.styleName : _ParagraphNodeSpec.RESERVED_STYLE_NONE
      })
    });
  } // handles the boldNumbering checkbox actions


  handleBoldNumbering(val) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        boldNumbering: val.target.checked
      })
    });
  } // handles the boldNumbering checkbox actions


  handleBoldPartial(val) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        boldPartial: val.target.checked
      })
    }); // this.setState({ styles: { ...this.state.styles, boldSentence: val.target.checked ? true : false } });
  } // [FS] IRAD-1201 2021-02-17
  // to check if the "select style" option selected by user


  selectStyleCheckboxState() {
    let chceked = false;

    if (this.state.styles.nextLineStyleName) {
      chceked = this.state.styles.nextLineStyleName !== 'None' && this.state.styles.nextLineStyleName !== this.state.styleName;
    }

    return chceked;
  }

  componentDidMount() {
    const acc = document.getElementsByClassName('licit-accordion');
    let i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener('click', function () {
        this.classList.toggle('accactive');
        const panel = this.nextElementSibling;

        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + 'px';
        }
      });
    }

    const mp = document.getElementsByClassName('panel')[0];
    mp.style.maxHeight = mp.scrollHeight + 'px';
    const mp1 = document.getElementsByClassName('panel1')[0];
    mp1.style.maxHeight = mp1.scrollHeight + 'px';
    const mp2 = document.getElementsByClassName('panel2')[0];
    mp2.style.maxHeight = mp2.scrollHeight + 'px';
    const mp3 = document.getElementsByClassName('panel3')[0];
    mp3.style.maxHeight = mp3.scrollHeight + 'px';
    this.setNextLineStyle(this.state.styles.nextLineStyleName); // [FS] IRAD-1153 2021-02-25
    // Numbering level not showing in Preview text when modify style

    if (1 == this.props.mode && this.state.styles.styleLevel && this.state.styles.hasNumbering) {
      this.buildStyle();
    }
  }

  render() {
    return /*#__PURE__*/React.createElement("div", {
      className: "customedit-div"
    }, /*#__PURE__*/React.createElement("div", {
      className: "customedit-head"
    }, /*#__PURE__*/React.createElement("span", null, this.state.mode == 0 ? 'Create Style' : 'Edit Style')), /*#__PURE__*/React.createElement("div", {
      className: "customedit-body"
    }, /*#__PURE__*/React.createElement("div", {
      className: "sectiondiv"
    }, /*#__PURE__*/React.createElement("div", {
      style: 3 > this.props.mode ? {
        display: 'none'
      } : {
        display: 'block'
      }
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Styles:"), /*#__PURE__*/React.createElement("select", {
      className: "stylenameinput fontstyle",
      defaultValue: 'DEFAULT',
      onChange: this.onSelectCustomStyle.bind(this),
      style: {
        height: '24px'
      }
    }, /*#__PURE__*/React.createElement("option", {
      disabled: true,
      value: "DEFAULT"
    }, ' ', "-- select a style --", ' '), this.state.customStyles.map(style => /*#__PURE__*/React.createElement("option", {
      key: style.styleName,
      value: style.styleName
    }, style.styleName)))), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Style Name:", ' ', /*#__PURE__*/React.createElement("span", {
      id: "errormsg",
      style: {
        display: 'none',
        color: 'red'
      }
    }, (0, _customStyle.isCustomStyleExists)(this.state.styleName) ? 'Style name already exists' : '')), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      autoFocus: true,
      className: "stylenameinput fontstyle",
      disabled: this.state.mode == 1 || this.state.mode == 3 ? true : false,
      id: "txtName",
      key: "name",
      onChange: this.onStyleClick.bind(this, 'name'),
      type: "text",
      value: this.state.styleName || ''
    })), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Description:"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      className: "stylenameinput fontstyle",
      key: "description",
      onChange: this.onStyleClick.bind(this, 'description'),
      type: "text",
      value: this.state.description || ''
    })), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Preview:"), /*#__PURE__*/React.createElement("div", {
      className: "textareadiv",
      name: "body",
      style: 3 == this.props.mode ? {
        height: '164px'
      } : {
        height: '215px'
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "sampletext"
    }, "Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph"), /*#__PURE__*/React.createElement("div", {
      className: this.state.styles.super ? 'hide-sampletext' : 'visible-sampletext',
      id: "sampletextdiv",
      style: this.buildStyle()
    }, SAMPLE_TEXT), /*#__PURE__*/React.createElement("sup", {
      className: this.state.styles.super ? 'visible-sampletext' : 'hide-sampletext',
      id: "mo-sup",
      style: this.buildStyle()
    }, SAMPLE_TEXT), /*#__PURE__*/React.createElement("div", {
      className: "sampletext"
    }, "Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph"))), /*#__PURE__*/React.createElement("div", {
      className: "sectiondiv editorsection",
      style: this.disableRename()
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Style Attributes:"), /*#__PURE__*/React.createElement("div", {
      style: {
        height: '329px',
        overflow: 'hidden auto',
        overflowX: 'hidden',
        border: '1px solid'
      }
    }, /*#__PURE__*/React.createElement("button", {
      className: "licit-accordion accactive",
      id: "accordion1"
    }, /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon text_format",
      style: {
        marginTop: '1px'
      }
    }, "text_format"), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '-10px',
        marginTop: '2px',
        color: '#444'
      }
    }, "Font"))), /*#__PURE__*/React.createElement("div", {
      className: "panel"
    }, /*#__PURE__*/React.createElement("div", {
      className: "sectiondiv"
    }, /*#__PURE__*/React.createElement("select", {
      className: "fonttype fontstyle",
      onChange: this.onFontNameChange.bind(this),
      value: this.state.styles.fontName || 'Arial'
    }, _FontTypeMarkSpec.FONT_TYPE_NAMES.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value))), /*#__PURE__*/React.createElement("select", {
      className: "fontsize fontstyle",
      onChange: this.onFontSizeChange.bind(this),
      value: this.state.styles.fontSize || 11
    }, _FontSizeCommandMenuButton.FONT_PT_SIZES.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value)))), /*#__PURE__*/React.createElement("div", {
      className: "font-buttons"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-label": " Bold",
      className: "czi-tooltip-surface markbutton-container",
      "data-tooltip": " Bold",
      id: "86ba3aa0-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.onStyleClick.bind(this, 'strong'),
      role: "tooltip",
      style: {
        marginLeft: '5px',
        marginRight: '5px'
      }
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.strong ? 'czi-custom-button use-icon active markbuttons' : 'czi-custom-button use-icon markbuttons',
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_bold editor-markbuttons"
    }, "format_bold"))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Italic",
      className: "czi-tooltip-surface fontstyle markbutton-container",
      "data-tooltip": " Italic",
      id: "86ba61b0-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.onStyleClick.bind(this, 'em'),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.em ? 'czi-custom-button use-icon active markbuttons' : 'czi-custom-button use-icon markbuttons',
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_italic editor-markbuttons"
    }, "format_italic"), /*#__PURE__*/React.createElement("span", null, " "))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Underline",
      className: "czi-tooltip-surface fontstyle markbutton-container",
      "data-tooltip": " Underline",
      id: "86ba88c0-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.onStyleClick.bind(this, 'underline'),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.underline ? 'czi-custom-button use-icon active markbuttons' : 'czi-custom-button use-icon markbuttons',
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon  format_underline editor-markbuttons"
    }, "format_underline"), /*#__PURE__*/React.createElement("span", null, " "))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Text color",
      className: "czi-tooltip-surface fontstyle markbutton-container",
      "data-tooltip": " Text color",
      id: "86bad6e1-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.showColorDialog.bind(this, true),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: "czi-custom-button use-icon markbuttons",
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_color_text editor-markbuttons",
      style: {
        color: this.state.styles.color !== 'rgba(0,0,0,0)' ? this.state.styles.color : '#666'
      }
    }, "format_color_text"), /*#__PURE__*/React.createElement("span", null, " "))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Highlight color",
      className: "czi-tooltip-surface fontstyle markbutton-container",
      "data-tooltip": " Highlight color",
      id: "86bafdf0-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.showColorDialog.bind(this, false),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: "czi-custom-button use-icon markbuttons",
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: " iconspan czi-icon border_color editor-markbuttons",
      style: {
        color: this.state.styles.textHighlight !== 'rgba(0,0,0,0)' ? this.state.styles.textHighlight : '#666'
      }
    }, "border_color"), /*#__PURE__*/React.createElement("span", null, " ")))), /*#__PURE__*/React.createElement("div", {
      className: "formp hierarchydiv"
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        float: 'left'
      }
    }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.boldPartial,
      onChange: this.handleBoldPartial.bind(this),
      type: "checkbox"
    }), "Bold the")), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.boldSentence,
      disabled: this.state.styles.boldPartial ? false : true,
      name: "boldscentence",
      onChange: this.onScentenceRadioChanged.bind(this),
      style: {
        marginLeft: '20px'
      },
      type: "radio",
      value: "0"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0'
      }
    }, "First Sentence"), /*#__PURE__*/React.createElement("input", {
      checked: !this.state.styles.boldSentence,
      disabled: this.state.styles.boldPartial ? false : true,
      name: "boldscentence",
      onChange: this.onScentenceRadioChanged.bind(this),
      style: {
        marginLeft: '20px'
      },
      type: "radio",
      value: "1"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0'
      }
    }, "First Word")))), /*#__PURE__*/React.createElement("button", {
      className: "licit-accordion accactive"
    }, /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_textdirection_l_to_r",
      style: {
        marginTop: '1px'
      }
    }, "format_textdirection_l_to_r"), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '-10px',
        marginTop: '2px',
        color: '#444'
      }
    }, "Paragraph"))), /*#__PURE__*/React.createElement("div", {
      className: "panel1"
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Alignment:"), /*#__PURE__*/React.createElement("div", {
      className: "czi-custom-buttons"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-label": " Align Left",
      className: "czi-tooltip-surface",
      "data-tooltip": " Align Left",
      id: "86ba3aa0-ff11-11ea-930a-95c69ca4f97f",
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.align == 'left' ? 'czi-custom-button use-icon activealignbuttons' : 'czi-custom-button alignbuttons',
      onClick: this.onAlignButtonClick.bind(this, 'left'),
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_align_left"
    }, "format_align_left"))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Align Center",
      className: "czi-tooltip-surface alignbuttons",
      "data-tooltip": " Align Center",
      id: "86ba61b0-ff11-11ea-930a-95c69ca4f97f",
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.align == 'center' ? 'czi-custom-button use-icon activealignbuttons' : 'czi-custom-button  alignbuttons',
      onClick: this.onAlignButtonClick.bind(this, 'center'),
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_align_center"
    }, "format_align_center"))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Align Right",
      className: "czi-tooltip-surface alignbuttons",
      "data-tooltip": " Align Right",
      id: "86ba88c0-ff11-11ea-930a-95c69ca4f97f",
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.align == 'right' ? 'czi-custom-button use-icon activealignbuttons' : 'czi-custom-button  alignbuttons',
      onClick: this.onAlignButtonClick.bind(this, 'right'),
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_align_right"
    }, "format_align_right"))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Justify",
      className: "czi-tooltip-surface alignbuttons",
      "data-tooltip": " Justify",
      id: "86baafd0-ff11-11ea-930a-95c69ca4f97f",
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.align == 'justify' ? 'czi-custom-button use-icon activealignbuttons' : 'czi-custom-button  alignbuttons',
      onClick: this.onAlignButtonClick.bind(this, 'justify'),
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_align_justify"
    }, "format_align_justify")))), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Line Spacing:"), /*#__PURE__*/React.createElement("select", {
      className: "linespacing fontstyle",
      onChange: this.onLineSpaceChange.bind(this),
      value: this.state.styles.lineHeight || ''
    }, LINE_SPACE.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value))), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Paragraph Spacing:"), /*#__PURE__*/React.createElement("div", {
      className: "spacingdiv"
    }, /*#__PURE__*/React.createElement("label", null, "Before: "), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      className: "spacinginput fontstyle",
      key: "before",
      onChange: this.onStyleClick.bind(this, 'before'),
      type: "text",
      value: this.state.styles.paragraphSpacingBefore || ''
    })), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '3px'
      }
    }, " pts"), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '23px'
      }
    }, "After: "), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      className: "spacinginput fontstyle",
      key: "after",
      onChange: this.onStyleClick.bind(this, 'after'),
      type: "text",
      value: this.state.styles.paragraphSpacingAfter || ''
    })), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '3px'
      }
    }, "pts"))), /*#__PURE__*/React.createElement("button", {
      className: "licit-accordion accactive"
    }, /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon account_tree"
    }, "account_tree"), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '-7px',
        marginTop: '2px',
        color: '#444'
      }
    }, "Hierarchy"))), /*#__PURE__*/React.createElement("div", {
      className: "panel2 formp"
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Level:"), /*#__PURE__*/React.createElement("div", {
      className: "hierarchydiv"
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        float: 'left',
        marginTop: '8px'
      }
    }, /*#__PURE__*/React.createElement("select", {
      className: "leveltype fontstyle",
      id: "levelValue",
      onChange: this.onLevelChange.bind(this),
      value: this.state.styles.styleLevel || ''
    }, LEVEL_VALUES.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value)))), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.hasNumbering,
      className: "chknumbering",
      disabled: this.state.styles.styleLevel ? false : true,
      onChange: this.handleNumbering.bind(this),
      type: "checkbox"
    }), "Numbering(1.1)"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.boldNumbering,
      className: "chkboldnumbering",
      disabled: this.state.styles.hasNumbering ? false : true,
      onChange: this.handleBoldNumbering.bind(this),
      type: "checkbox"
    }), "Bold numbering"))), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Indenting:"), /*#__PURE__*/React.createElement("div", {
      className: "hierarchydiv"
    }, /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.isLevelbased,
      name: "indenting",
      onChange: this.onIndentRadioChanged.bind(this),
      type: "radio",
      value: "0"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0'
      }
    }, "Based On Level")), /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("input", {
      checked: !this.state.styles.isLevelbased,
      name: "indenting",
      onChange: this.onIndentRadioChanged.bind(this),
      type: "radio",
      value: "1"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0'
      }
    }, "Specified"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("select", {
      className: "leveltype specifiedindent fontstyle",
      onChange: this.onIndentChange.bind(this),
      style: {
        width: '99px !important'
      },
      value: this.state.styles.indent || ''
    }, LEVEL_VALUES.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value))))))), /*#__PURE__*/React.createElement("button", {
      className: "licit-accordion accactive"
    }, /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '-7px',
        marginTop: '2px',
        color: '#444'
      }
    }, "Style Settings"))), /*#__PURE__*/React.createElement("div", {
      className: "panel3 formp"
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Select style for next line:"), /*#__PURE__*/React.createElement("div", {
      className: "hierarchydiv"
    }, /*#__PURE__*/React.createElement("div", {
      className: "settingsdiv"
    }, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.nextLineStyleName === this.state.styleName && !this.state.otherStyleSelected,
      name: "nextlinestyle",
      onChange: this.onNextLineStyleSelected.bind(this, 1),
      type: "radio",
      value: "1"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0'
      }
    }, "Continue this style")), /*#__PURE__*/React.createElement("div", {
      className: "settingsdiv"
    }, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.nextLineStyleName === 'None',
      name: "nextlinestyle",
      onChange: this.onNextLineStyleSelected.bind(this, 0),
      style: {
        marginLeft: '20px'
      },
      type: "radio",
      value: "2"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0'
      }
    }, "None")), /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("input", {
      checked: this.state.otherStyleSelected,
      name: "nextlinestyle",
      onChange: this.onNextLineStyleSelected.bind(this, 2),
      type: "radio",
      value: "0"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0',
        width: '62px'
      }
    }, "Select style"), /*#__PURE__*/React.createElement("span", {
      id: "nextStyle",
      style: {
        display: 'none'
      }
    }, /*#__PURE__*/React.createElement("select", {
      className: "fontstyle stylenameinput" // defaultValue={'DEFAULT'}
      ,
      id: "nextStyleValue",
      onChange: this.onOtherStyleSelectionChanged.bind(this),
      style: {
        height: '20px',
        marginLeft: '7px',
        width: '97px'
      },
      value: this.state.styles.nextLineStyleName
    }, customStyles.map(style => /*#__PURE__*/React.createElement("option", {
      key: style.styleName
    }, style.styleName)))))))))), /*#__PURE__*/React.createElement("div", {
      className: "btns"
    }, /*#__PURE__*/React.createElement("button", {
      className: "buttonstyle",
      onClick: this._cancel
    }, this.state.mode == 3 ? 'Close' : 'Cancel'), /*#__PURE__*/React.createElement("button", {
      className: "btnsave buttonstyle",
      onClick: this._save.bind(this),
      onKeyDown: this.handleKeyDown
    }, "Save")));
  }

  // [FS] IRAD-1176 2021-02-08
  // save the custom styles from Edit all option.
  modifyCustomStyle(val) {
    const {
      runtime
    } = this.props.editorView;

    if (runtime && typeof runtime.saveStyle === 'function') {
      delete val.editorView;
      runtime.saveStyle(val).then(result => {});
    }
  } // To fetch the custom styles from server and set to the state.


  getCustomStyles(runtime) {
    if (runtime && typeof runtime.getStylesAsync === 'function') {
      runtime.getStylesAsync().then(result => {
        customStyles = result; // [FS] IRAD-1222 2021-03-01
        // Issue fix: In edit all, the style list not showing the first time.

        this.setState({
          customStyles: result
        });
      });
    }
  } // [FS] IRAD-1231 2021-03-03
  // Issue fix: Selected style for next line not retaining when modify.


  setNextLineStyle(nextLineStyleName) {
    // [FS] IRAD-1241 2021-03-05
    // The selcted Style in the Next line setting not retaing in Edit All and modify
    let display = '';

    if (0 < this.props.mode && nextLineStyleName && _ParagraphNodeSpec.RESERVED_STYLE_NONE !== nextLineStyleName && nextLineStyleName !== this.state.styleName) {
      this.setState({
        otherStyleSelected: true
      });
      display = 'block';
      const selectedStyle = document.getElementById('nextStyleValue');

      if (selectedStyle instanceof window.HTMLSelectElement) {
        selectedStyle.value = nextLineStyleName;
      }
    } else {
      this.setState({
        otherStyleSelected: false
      });
      display = 'none';
    }

    const hiddenDiv = document.getElementById('nextStyle');

    if (hiddenDiv && hiddenDiv.style) {
      hiddenDiv.style.display = display;
    }
  } // Disable the style attribute div on Rename


  disableRename() {
    const style = {};

    if (2 === this.state.mode) {
      style.opacity = 0.4;
      style.pointerEvents = 'none';
    }

    return style;
  }

}

var _default = CustomStyleEditor;
exports.default = _default;