@entur-partner/rich-text-editor 6.2.3 → 6.2.4-alpha.1

package/dist/rich-text-editor.esm.js

@@ -1,66 +1,61 @@
+import { ExpandablePanel } from '@entur/expand';
+import { TextField, FeedbackText } from '@entur/form';
+import { Unbutton, Stack } from '@entur-partner/common';
 import React, { Component, createRef, useState } from 'react';
+import { Label } from '@entur/typography';
+import cx from 'classnames';
 import { EditorState, CompositeDecorator, Editor, RichUtils, getDefaultKeyBinding, Modifier, convertToRaw, convertFromRaw } from 'draft-js';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Label } from '@entur/typography';
-import { Dropdown } from '@entur/dropdown';
 import { useTranslation } from 'react-i18next';
-import { TextField, FeedbackText } from '@entur/form';
-import { LinkIcon, CloseIcon, CheckIcon, UnlinkIcon, DownArrowIcon, BulletListIcon, NumberListIcon, BoldIcon, ItalicIcon, UnderlineIcon } from '@entur/icons';
-import { Unbutton, Stack } from '@entur-partner/common';
 import { SecondarySquareButton } from '@entur/button';
-import { Popover } from '@entur/tooltip';
+import { LinkIcon, CloseIcon, CheckIcon, UnlinkIcon, DownArrowIcon, BulletListIcon, NumberListIcon, BoldIcon, ItalicIcon, UnderlineIcon } from '@entur/icons';
+import { Dropdown } from '@entur/dropdown';
 import { OverflowMenuItem, OverflowMenu } from '@entur/menu';
-import { ExpandablePanel } from '@entur/expand';
+import { Popover } from '@entur/tooltip';
 import { draftToMarkdown, markdownToDraft } from 'markdown-draft-js';
 import showdown from 'showdown';
 import { convertFromHTML, convertToHTML } from 'draft-convert';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+
+var Key = /*#__PURE__*/Object.freeze({
+  ENTER: 13
+});
+function getKey(event) {
+  return event.keyCode || event.which;
 }
 
 function useI18N() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t,
     language = _useTranslation.i18n.language;
-  if (language !== 'nb' && language !== 'en' && language !== 'nb-NO' && language !== 'en-GB') {
-    throw Error('Language must be either nb or en.');
+  if (language !== "nb" && language !== "en" && language !== "nb-NO" && language !== "en-GB") {
+    throw Error("Language must be either nb or en.");
   }
   return t;
 }
@@ -73,107 +68,6 @@ function withI18n(Component) {
   };
 }
 
-var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
-  function BlockTypeDropdown() {
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.handleOnClick = function (selectedOption) {
-      var onChange = _this.props.onChange;
-      onChange(selectedOption);
-    };
-    return _this;
-  }
-  _inheritsLoose(BlockTypeDropdown, _Component);
-  var _proto = BlockTypeDropdown.prototype;
-  _proto.toItem = function toItem(option) {
-    return {
-      value: option.style,
-      label: this.renderFormattedLabel(option.label)
-    };
-  };
-  _proto.renderFormattedLabel = function renderFormattedLabel(label) {
-    var formattedLabelText = this.props.i18n(label);
-    switch (label) {
-      case 'styles.p':
-        return /*#__PURE__*/React.createElement("div", {
-          className: "default-p"
-        }, formattedLabelText);
-      case 'styles.h1':
-        return /*#__PURE__*/React.createElement("div", {
-          className: "default-h1"
-        }, formattedLabelText);
-      case 'styles.h2':
-        return /*#__PURE__*/React.createElement("div", {
-          className: "default-h2"
-        }, formattedLabelText);
-      case 'styles.h3':
-        return /*#__PURE__*/React.createElement("div", {
-          className: "default-h3"
-        }, formattedLabelText);
-      case 'styles.h4':
-        return /*#__PURE__*/React.createElement("div", {
-          className: "default-h4"
-        }, formattedLabelText);
-      case 'styles.h5':
-        return /*#__PURE__*/React.createElement("div", {
-          className: "default-h5"
-        }, formattedLabelText);
-      case 'styles.h6':
-        return /*#__PURE__*/React.createElement("div", {
-          className: "default-h6"
-        }, formattedLabelText);
-      default:
-        return /*#__PURE__*/React.createElement("p", null, formattedLabelText);
-    }
-  };
-  _proto.render = function render() {
-    var _this2 = this;
-    var _this$props = this.props,
-      options = _this$props.options,
-      selected = _this$props.selected,
-      i18n = _this$props.i18n;
-    return /*#__PURE__*/React.createElement(Dropdown, {
-      className: "block-type-dropdown",
-      items: options.map(function (option) {
-        return _this2.toItem(option);
-      }),
-      selectedItem: this.toItem(selected),
-      label: i18n('styles.style'),
-      onChange: function onChange(selectedItem) {
-        return _this2.handleOnClick(selectedItem.value);
-      }
-    });
-  };
-  return BlockTypeDropdown;
-}(Component);
-var BlockTypeDropdown$1 = /*#__PURE__*/withI18n(BlockTypeDropdown);
-
-var BlockTypeControls = function BlockTypeControls(_ref) {
-  var editorState = _ref.editorState,
-    blockTypes = _ref.blockTypes,
-    onToggle = _ref.onToggle;
-  var selection = editorState.getSelection();
-  var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
-  var selectedOption = blockTypes.find(function (option) {
-    return option.style === blockTypeStyle;
-  }) || blockTypes[0];
-  return /*#__PURE__*/React.createElement(BlockTypeDropdown$1, {
-    options: blockTypes,
-    selected: selectedOption,
-    onChange: onToggle
-  });
-};
-
-var Key = /*#__PURE__*/Object.freeze({
-  ENTER: 13
-});
-function getKey(event) {
-  return event.keyCode || event.which;
-}
-
 var StyleButton = /*#__PURE__*/function (_Component) {
   function StyleButton() {
     var _this;
@@ -206,20 +100,26 @@ var StyleButton = /*#__PURE__*/function (_Component) {
       label = _this$props3.label,
       title = _this$props3.title,
       hotKey = _this$props3.hotKey;
-    var classNames = cx('editor-stylebutton', {
+    var classNames = cx("editor-stylebutton", {
       active: active
     });
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames,
-      onMouseDown: this.onToggle,
-      title: i18n(title) + hotKey,
-      tabIndex: 0,
-      onKeyPress: function onKeyPress(event) {
-        if (getKey(event) === Key.ENTER) {
-          _this2.onToggleNoEvent();
+    return (
+      /*#__PURE__*/
+      // biome-ignore lint/a11y/noStaticElementInteractions: Ignore for now.
+      React.createElement("div", {
+        className: classNames,
+        onMouseDown: this.onToggle,
+        title: i18n(title) + hotKey
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: Ignore for now.
+        ,
+        tabIndex: 0,
+        onKeyPress: function onKeyPress(event) {
+          if (getKey(event) === Key.ENTER) {
+            _this2.onToggleNoEvent();
+          }
         }
-      }
-    }, label);
+      }, label)
+    );
   };
   return StyleButton;
 }(Component);
@@ -233,9 +133,9 @@ var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
   var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
   return /*#__PURE__*/React.createElement("div", {
     className: "controls-group block-editor-controls"
-  }, blockTypes.map(function (type, i) {
+  }, blockTypes.map(function (type) {
     return /*#__PURE__*/React.createElement(StyleButton$1, {
-      key: i,
+      key: type.style + type.label,
       active: type.style === blockTypeStyle,
       label: type.label,
       onToggle: onToggle,
@@ -253,7 +153,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
     }
     _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     _this.state = {
-      urlValue: '',
+      urlValue: "",
       showUrlInput: false,
       hasLink: false
     };
@@ -272,7 +172,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
         var startOffset = selection.getStartOffset();
         var blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);
         var linkKey = blockWithLinkAtBeginning.getEntityAt(startOffset);
-        var url = '';
+        var url = "";
         if (linkKey) {
           var linkInstance = currentContent.getEntity(linkKey);
           url = linkInstance.getData().url;
@@ -291,7 +191,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
         editorState = _this$props.editorState,
         onToggle = _this$props.onToggle;
       var contentState = editorState.getCurrentContent();
-      var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
+      var contentStateWithEntity = contentState.createEntity("LINK", "MUTABLE", {
         url: urlValue
       });
       var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
@@ -301,14 +201,14 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
       onToggle(newEditorState, entityKey);
       _this.setState({
         showUrlInput: false,
-        urlValue: ''
+        urlValue: ""
       });
     };
     _this.cancelLink = function (e) {
       e.preventDefault();
       _this.setState({
         showUrlInput: false,
-        urlValue: ''
+        urlValue: ""
       });
     };
     _this.onLinkInputKeyDown = function (e) {
@@ -343,7 +243,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
       className: "controls-group block-editor-controls link-controls"
     }, /*#__PURE__*/React.createElement("div", {
       className: "editor-stylebutton",
-      title: i18n('styles.link'),
+      title: i18n("styles.link"),
       onClick: this.addLink,
       tabIndex: 0
     }, /*#__PURE__*/React.createElement(LinkIcon, null)), showUrlInput && /*#__PURE__*/React.createElement("div", {
@@ -353,7 +253,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
       onMouseDown: this.cancelLink
     }, /*#__PURE__*/React.createElement(CloseIcon, null)), /*#__PURE__*/React.createElement("div", {
       className: "link-label"
-    }, i18n('common.from')), /*#__PURE__*/React.createElement("div", {
+    }, i18n("common.from")), /*#__PURE__*/React.createElement("div", {
       className: "url-input-form"
     }, /*#__PURE__*/React.createElement(TextField, {
       style: {
@@ -373,8 +273,8 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
       className: "remove-link"
     }, /*#__PURE__*/React.createElement(Unbutton, {
       onClick: this.removeLink,
-      title: i18n('styles.unlink')
-    }, /*#__PURE__*/React.createElement(UnlinkIcon, null), i18n('styles.unlink')))));
+      title: i18n("styles.unlink")
+    }, /*#__PURE__*/React.createElement(UnlinkIcon, null), i18n("styles.unlink")))));
   };
   return BlockTypeLinkControls;
 }(Component);
@@ -384,15 +284,109 @@ BlockTypeLinkControls.propTypes = {
 };
 var BlockTypeLinkControls$1 = /*#__PURE__*/withI18n(BlockTypeLinkControls);
 
+var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
+  function BlockTypeDropdown() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    _this.handleOnClick = function (selectedOption) {
+      var onChange = _this.props.onChange;
+      onChange(selectedOption);
+    };
+    return _this;
+  }
+  _inheritsLoose(BlockTypeDropdown, _Component);
+  var _proto = BlockTypeDropdown.prototype;
+  _proto.toItem = function toItem(option) {
+    return {
+      value: option.style,
+      label: this.renderFormattedLabel(option.label)
+    };
+  };
+  _proto.renderFormattedLabel = function renderFormattedLabel(label) {
+    var formattedLabelText = this.props.i18n(label);
+    switch (label) {
+      case "styles.p":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "default-p"
+        }, formattedLabelText);
+      case "styles.h1":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "default-h1"
+        }, formattedLabelText);
+      case "styles.h2":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "default-h2"
+        }, formattedLabelText);
+      case "styles.h3":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "default-h3"
+        }, formattedLabelText);
+      case "styles.h4":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "default-h4"
+        }, formattedLabelText);
+      case "styles.h5":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "default-h5"
+        }, formattedLabelText);
+      case "styles.h6":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "default-h6"
+        }, formattedLabelText);
+      default:
+        return /*#__PURE__*/React.createElement("p", null, formattedLabelText);
+    }
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    var _this$props = this.props,
+      options = _this$props.options,
+      selected = _this$props.selected,
+      i18n = _this$props.i18n;
+    return /*#__PURE__*/React.createElement(Dropdown, {
+      className: "block-type-dropdown",
+      items: options.map(function (option) {
+        return _this2.toItem(option);
+      }),
+      selectedItem: this.toItem(selected),
+      label: i18n("styles.style"),
+      onChange: function onChange(selectedItem) {
+        return _this2.handleOnClick(selectedItem.value);
+      }
+    });
+  };
+  return BlockTypeDropdown;
+}(Component);
+var BlockTypeDropdown$1 = /*#__PURE__*/withI18n(BlockTypeDropdown);
+
+var BlockTypeControls = function BlockTypeControls(_ref) {
+  var editorState = _ref.editorState,
+    blockTypes = _ref.blockTypes,
+    onToggle = _ref.onToggle;
+  var selection = editorState.getSelection();
+  var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
+  var selectedOption = blockTypes.find(function (option) {
+    return option.style === blockTypeStyle;
+  }) || blockTypes[0];
+  return /*#__PURE__*/React.createElement(BlockTypeDropdown$1, {
+    options: blockTypes,
+    selected: selectedOption,
+    onChange: onToggle
+  });
+};
+
 var InlineStyleControls = function InlineStyleControls(props) {
   var editorState = props.editorState,
     inlineStyles = props.inlineStyles;
   var currentStyle = editorState.getCurrentInlineStyle();
   return /*#__PURE__*/React.createElement("div", {
     className: "controls-group inline-editor-controls"
-  }, inlineStyles.map(function (type, i) {
+  }, inlineStyles.map(function (type) {
     return /*#__PURE__*/React.createElement(StyleButton$1, {
-      key: i,
+      key: type.style + type.label,
       active: currentStyle.has(type.style),
       label: type.label,
       onToggle: props.onToggle,
@@ -415,7 +409,7 @@ var TagControls = /*#__PURE__*/function (_Component) {
       isOpen: false
     };
     _this.handleClickOutside = function (e) {
-      if (_this.tagControlRef && _this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
+      if (_this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
         _this.setState({
           isOpen: false
         });
@@ -435,10 +429,10 @@ var TagControls = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TagControls, _Component);
   var _proto = TagControls.prototype;
   _proto.componentDidMount = function componentDidMount() {
-    document.addEventListener('mousedown', this.handleClickOutside);
+    document.addEventListener("mousedown", this.handleClickOutside);
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside);
+    document.removeEventListener("mousedown", this.handleClickOutside);
   };
   _proto.render = function render() {
     var _this2 = this;
@@ -446,12 +440,12 @@ var TagControls = /*#__PURE__*/function (_Component) {
       i18n = _this$props2.i18n,
       tags = _this$props2.tags;
     var isOpen = this.state.isOpen;
-    var menuItems = tags.map(function (tag, i) {
-      var delimiter = tag.delimiter || '{}';
+    var menuItems = tags.map(function (tag) {
+      var delimiter = tag.delimiter || "{}";
       return /*#__PURE__*/React.createElement(OverflowMenuItem, {
-        key: i,
+        key: tag.tag,
         className: "tag-control",
-        id: 'tag-control-' + tag.tag,
+        id: "tag-control-" + tag.tag,
         onClick: function onClick() {
           return _this2.handleTagClick(tag.tag, delimiter);
         }
@@ -472,7 +466,7 @@ var TagControls = /*#__PURE__*/function (_Component) {
           };
         });
       }
-    }, i18n('common.insert'), /*#__PURE__*/React.createElement(DownArrowIcon, {
+    }, i18n("common.insert"), /*#__PURE__*/React.createElement(DownArrowIcon, {
       className: "tag-control-chevron",
       inline: true
     })), /*#__PURE__*/React.createElement(Popover, {
@@ -508,101 +502,101 @@ var Link = function Link(props) {
 function findLinkEntities(contentBlock, callback, contentState) {
   contentBlock.findEntityRanges(function (character) {
     var entityKey = character.getEntity();
-    return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
+    return entityKey !== null && contentState.getEntity(entityKey).getType() === "LINK";
   }, callback);
 }
 
 var EditorConfigTypes = /*#__PURE__*/Object.freeze({
   FONT_LIST: {
-    UNSTYLED: 'unstyled',
-    HEADER_ONE: 'header-one',
-    HEADER_TWO: 'header-two',
-    HEADER_THREE: 'header-three',
-    HEADER_FOUR: 'header-four',
-    HEADER_FIVE: 'header-five',
-    HEADER_SIX: 'header-six'
+    UNSTYLED: "unstyled",
+    HEADER_ONE: "header-one",
+    HEADER_TWO: "header-two",
+    HEADER_THREE: "header-three",
+    HEADER_FOUR: "header-four",
+    HEADER_FIVE: "header-five",
+    HEADER_SIX: "header-six"
   },
   BLOCK_TYPES: {
-    UNORDERED_LIST: 'unordered-list',
-    ORDERED_LIST: 'ordered-list'
+    UNORDERED_LIST: "unordered-list",
+    ORDERED_LIST: "ordered-list"
   },
   INLINE_STYLES: {
-    BOLD: 'bold',
-    ITALIC: 'italic',
-    UNDERLINE: 'underline'
+    BOLD: "bold",
+    ITALIC: "italic",
+    UNDERLINE: "underline"
   }
 });
 var FontList = /*#__PURE__*/Object.freeze({
   unstyled: {
-    label: 'styles.p',
-    style: 'unstyled'
+    label: "styles.p",
+    style: "unstyled"
   },
-  'header-one': {
-    label: 'styles.h1',
-    style: 'header-one'
+  "header-one": {
+    label: "styles.h1",
+    style: "header-one"
   },
-  'header-two': {
-    label: 'styles.h2',
-    style: 'header-two'
+  "header-two": {
+    label: "styles.h2",
+    style: "header-two"
   },
-  'header-three': {
-    label: 'styles.h3',
-    style: 'header-three'
+  "header-three": {
+    label: "styles.h3",
+    style: "header-three"
   },
-  'header-four': {
-    label: 'styles.h4',
-    style: 'header-four'
+  "header-four": {
+    label: "styles.h4",
+    style: "header-four"
   },
-  'header-five': {
-    label: 'styles.h5',
-    style: 'header-five'
+  "header-five": {
+    label: "styles.h5",
+    style: "header-five"
   },
-  'header-six': {
-    label: 'styles.h6',
-    style: 'header-six'
+  "header-six": {
+    label: "styles.h6",
+    style: "header-six"
   }
 });
 var BlockTypeList = /*#__PURE__*/Object.freeze({
-  'unordered-list': {
+  "unordered-list": {
     label: /*#__PURE__*/React.createElement(BulletListIcon, null),
-    style: 'unordered-list-item',
-    tooltip: 'styles.unordered_list_item'
+    style: "unordered-list-item",
+    tooltip: "styles.unordered_list_item"
   },
-  'ordered-list': {
+  "ordered-list": {
     label: /*#__PURE__*/React.createElement(NumberListIcon, null),
-    style: 'ordered-list-item',
-    tooltip: 'styles.ordered_list_item'
+    style: "ordered-list-item",
+    tooltip: "styles.ordered_list_item"
   }
 });
 var InlineStylesList = /*#__PURE__*/Object.freeze({
   bold: {
     label: /*#__PURE__*/React.createElement(BoldIcon, null),
-    style: 'BOLD',
-    tooltip: 'styles.bold',
-    hotKey: '(Ctrl+B)'
+    style: "BOLD",
+    tooltip: "styles.bold",
+    hotKey: "(Ctrl+B)"
   },
   italic: {
     label: /*#__PURE__*/React.createElement(ItalicIcon, null),
-    style: 'ITALIC',
-    tooltip: 'styles.italic',
-    hotKey: '(Ctrl+I)'
+    style: "ITALIC",
+    tooltip: "styles.italic",
+    hotKey: "(Ctrl+I)"
   },
   underline: {
     label: /*#__PURE__*/React.createElement(UnderlineIcon, null),
-    style: 'UNDERLINE',
-    tooltip: 'styles.underline',
-    hotKey: '(Ctrl+U)'
+    style: "UNDERLINE",
+    tooltip: "styles.underline",
+    hotKey: "(Ctrl+U)"
   }
 });
 var MinifiedConfigTypes = /*#__PURE__*/Object.freeze({
   fontList: [{
-    type: 'unstyled',
-    label: 'styles.p',
-    style: 'unstyled'
+    type: "unstyled",
+    label: "styles.p",
+    style: "unstyled"
   }, {
-    type: 'header-two',
-    label: 'styles.h1',
-    style: 'header-two'
+    type: "header-two",
+    label: "styles.h1",
+    style: "header-two"
   }],
   blockTypes: /*#__PURE__*/Object.values(EditorConfigTypes.BLOCK_TYPES),
   inlineStyles: [EditorConfigTypes.INLINE_STYLES.BOLD, EditorConfigTypes.INLINE_STYLES.ITALIC]
@@ -668,7 +662,7 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
     };
     _this.insertText = function (editorState, text) {
       var newContent = Modifier.insertText(editorState.getCurrentContent(), editorState.getSelection(), text);
-      _this.props.onChange(EditorState.push(editorState, newContent, 'insert-characters'), function () {
+      _this.props.onChange(EditorState.push(editorState, newContent, "insert-characters"), function () {
         return _this.focusEditor();
       });
     };
@@ -677,18 +671,18 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
       return controlConfig[panelType];
     };
     _this.getControlConfigBySet = function (config) {
-      var fontList = (config && config.fontList || Object.keys(FontList)).filter(function (f) {
-        return typeof f === 'object' ? FontList[f.type] : FontList[f];
+      var fontList = ((config == null ? void 0 : config.fontList) || Object.keys(FontList)).filter(function (f) {
+        return typeof f === "object" ? FontList[f.type] : FontList[f];
       }).map(function (f) {
         return f.label && f.style ? f : FontList[f];
       });
-      var blockTypes = (config && config.blockTypes || Object.keys(BlockTypeList)).filter(function (f) {
-        return typeof f === 'object' ? BlockTypeList[f.type] : BlockTypeList[f];
+      var blockTypes = ((config == null ? void 0 : config.blockTypes) || Object.keys(BlockTypeList)).filter(function (f) {
+        return typeof f === "object" ? BlockTypeList[f.type] : BlockTypeList[f];
       }).map(function (f) {
         return f.label && f.style ? f : BlockTypeList[f];
       });
-      var inlineStyles = (config && config.inlineStyles || Object.keys(InlineStylesList)).filter(function (f) {
-        return typeof f === 'object' ? InlineStylesList[f.type] : InlineStylesList[f];
+      var inlineStyles = ((config == null ? void 0 : config.inlineStyles) || Object.keys(InlineStylesList)).filter(function (f) {
+        return typeof f === "object" ? InlineStylesList[f.type] : InlineStylesList[f];
       }).map(function (f) {
         return f.label && f.style ? f : InlineStylesList[f];
       });
@@ -703,7 +697,8 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
   _inheritsLoose(RichTextEditor, _Component);
   var _proto = RichTextEditor.prototype;
   _proto.focusEditor = function focusEditor() {
-    this.editor.current && this.editor.current.focus();
+    var _this$editor$current;
+    (_this$editor$current = this.editor.current) == null || _this$editor$current.focus();
   };
   _proto.render = function render() {
     var _this$props5 = this.props,
@@ -717,7 +712,7 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
       editorState = _this$props5.editorState,
       onChange = _this$props5.onChange,
       handleBeforeInput = _this$props5.handleBeforeInput;
-    var classNames = cx('editor-root', className);
+    var classNames = cx("editor-root", className);
     return /*#__PURE__*/React.createElement("div", {
       ref: this.wrapperRef
     }, label && /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement("div", {
@@ -727,15 +722,15 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
     }, showFontMenu && /*#__PURE__*/React.createElement(BlockTypeControls, {
       editorState: editorState,
       onToggle: this.toggleSelectBlockType,
-      blockTypes: this.getFontListConfigForPanelType('fontList')
+      blockTypes: this.getFontListConfigForPanelType("fontList")
     }), showInlineStyleMenu && /*#__PURE__*/React.createElement(InlineStyleControls, {
       editorState: editorState,
       onToggle: this.toggleInlineStyle,
-      inlineStyles: this.getFontListConfigForPanelType('inlineStyles')
+      inlineStyles: this.getFontListConfigForPanelType("inlineStyles")
     }), showTextFormatMenu && /*#__PURE__*/React.createElement(BlockTypeButtonControls, {
       editorState: editorState,
       onToggle: this.toggleButtonBlockType,
-      blockTypes: this.getFontListConfigForPanelType('blockTypes')
+      blockTypes: this.getFontListConfigForPanelType("blockTypes")
     }), showLinkMenu && /*#__PURE__*/React.createElement(BlockTypeLinkControls$1, {
       editorState: editorState,
       onToggle: this.toggleLink
@@ -789,7 +784,7 @@ RichTextEditor.defaultProps = {
   showInlineStyleMenu: true,
   showTextFormatMenu: true,
   showLinkMenu: true,
-  label: ''
+  label: ""
 };
 
 var editorStateToMarkdown = function editorStateToMarkdown(editorState) {
@@ -832,7 +827,7 @@ var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
   var handleOnChange = function handleOnChange(changedState) {
     var newValues = _extends({}, values);
     var content = editorStateToMarkdown(changedState);
-    if (values[langKey] && content === '\n') {
+    if (values[langKey] && content === "\n") {
       delete newValues[langKey];
     } else {
       newValues[langKey] = content;
@@ -840,16 +835,16 @@ var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
     setEditorState(changedState);
     onChange(newValues);
   };
-  var feedbackText = feedback && feedback(langKey);
+  var feedbackText = feedback == null ? void 0 : feedback(langKey);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextEditor, {
-    label: required ? label + '*' : label,
+    label: required ? label + "*" : label,
     editorState: editorState,
     onChange: function onChange(changedState) {
       return handleOnChange(changedState);
     },
     controlConfigSet: MinifiedConfigTypes,
     tags: tags
-  }), variant && (feedbackText == null ? void 0 : feedbackText.length) > 0 && ( /*#__PURE__*/React.createElement(FeedbackText, {
+  }), variant && feedbackText && feedbackText.length > 0 && (/*#__PURE__*/React.createElement(FeedbackText, {
     variant: variant(langKey)
   }, feedbackText)));
 };
@@ -862,9 +857,9 @@ var ExpandableMultiLanguageRichTextEditor = function ExpandableMultiLanguageRich
     title: title,
     defaultOpen: true,
     contentStyle: {
-      padding: '4px 4px 4px 4px',
-      marginTop: '16px',
-      marginBottom: '16px'
+      padding: "4px 4px 4px 4px",
+      marginTop: "16px",
+      marginBottom: "16px"
     }
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "medium"
@@ -878,11 +873,9 @@ var ExpandableMultiLanguageRichTextEditor = function ExpandableMultiLanguageRich
   })));
 };
 
-/* eslint-disable react/display-name */
-
 var entityToHtml = {
   entityToHTML: function entityToHTML(entity, originalText) {
-    if (entity.type === 'LINK') {
+    if (entity.type === "LINK") {
       return /*#__PURE__*/React.createElement(HtmlLink, {
         url: entity.data.url
       }, originalText);
@@ -892,16 +885,13 @@ var entityToHtml = {
 };
 var htmlToEntity = {
   htmlToEntity: function htmlToEntity(nodeName, node, createEntity) {
-    if (nodeName === 'a') {
-      return createEntity('LINK', 'MUTABLE', {
+    if (nodeName === "a") {
+      return createEntity("LINK", "MUTABLE", {
         url: node.href
       });
     }
   }
 };
-
-/* eslint-disable react/display-name */
-
 var htmlToEditorState = function htmlToEditorState(html) {
   if (!html) {
     return EditorState.createEmpty(decorator);