@modusoperandi/licit 0.1.4 → 0.1.8

package/dist/ui/CustomStyleEditor.js

@@ -1,1216 +0,0 @@
-"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;