@entur-partner/rich-text-editor 6.2.4 → 6.2.6-6.2.6-alpha.1.0

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

@@ -0,0 +1,907 @@
+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 { useTranslation } from 'react-i18next';
+import { SecondarySquareButton } from '@entur/button';
+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 { Popover } from '@entur/tooltip';
+import { draftToMarkdown, markdownToDraft } from 'markdown-draft-js';
+import showdown from 'showdown';
+import { convertFromHTML, convertToHTML } from 'draft-convert';
+
+function _extends() {
+  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 n;
+  }, _extends.apply(null, arguments);
+}
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+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 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.");
+  }
+  return t;
+}
+function withI18n(Component) {
+  return function WrappedComponent(props) {
+    var t = useI18N();
+    return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      i18n: t
+    }));
+  };
+}
+
+var StyleButton = /*#__PURE__*/function (_Component) {
+  function StyleButton() {
+    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.onToggle = function (e) {
+      var _this$props = _this.props,
+        style = _this$props.style,
+        onToggle = _this$props.onToggle;
+      e.preventDefault();
+      onToggle(style);
+    };
+    _this.onToggleNoEvent = function () {
+      var _this$props2 = _this.props,
+        style = _this$props2.style,
+        onToggle = _this$props2.onToggle;
+      onToggle(style);
+    };
+    return _this;
+  }
+  _inheritsLoose(StyleButton, _Component);
+  var _proto = StyleButton.prototype;
+  _proto.render = function render() {
+    var _this2 = this;
+    var _this$props3 = this.props,
+      i18n = _this$props3.i18n,
+      active = _this$props3.active,
+      label = _this$props3.label,
+      title = _this$props3.title,
+      hotKey = _this$props3.hotKey;
+    var classNames = cx("editor-stylebutton", {
+      active: active
+    });
+    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)
+    );
+  };
+  return StyleButton;
+}(Component);
+var StyleButton$1 = /*#__PURE__*/withI18n(StyleButton);
+
+var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
+  var editorState = props.editorState,
+    blockTypes = props.blockTypes,
+    onToggle = props.onToggle;
+  var selection = editorState.getSelection();
+  var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "controls-group block-editor-controls"
+  }, blockTypes.map(function (type) {
+    return /*#__PURE__*/React.createElement(StyleButton$1, {
+      key: type.style + type.label,
+      active: type.style === blockTypeStyle,
+      label: type.label,
+      onToggle: onToggle,
+      style: type.style,
+      title: type.tooltip
+    });
+  }));
+};
+
+var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
+  function BlockTypeLinkControls() {
+    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.state = {
+      urlValue: "",
+      showUrlInput: false,
+      hasLink: false
+    };
+    _this.onUrlChange = function (e) {
+      _this.setState({
+        urlValue: e.target.value
+      });
+    };
+    _this.addLink = function (e) {
+      e.preventDefault();
+      var editorState = _this.props.editorState;
+      var selection = editorState.getSelection();
+      if (!selection.isCollapsed()) {
+        var currentContent = editorState.getCurrentContent();
+        var startKey = selection.getStartKey();
+        var startOffset = selection.getStartOffset();
+        var blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);
+        var linkKey = blockWithLinkAtBeginning.getEntityAt(startOffset);
+        var url = "";
+        if (linkKey) {
+          var linkInstance = currentContent.getEntity(linkKey);
+          url = linkInstance.getData().url;
+        }
+        _this.setState({
+          showUrlInput: true,
+          urlValue: url,
+          hasLink: !!url
+        });
+      }
+    };
+    _this.confirmLink = function (e) {
+      e.preventDefault();
+      var urlValue = _this.state.urlValue;
+      var _this$props = _this.props,
+        editorState = _this$props.editorState,
+        onToggle = _this$props.onToggle;
+      var contentState = editorState.getCurrentContent();
+      var contentStateWithEntity = contentState.createEntity("LINK", "MUTABLE", {
+        url: urlValue
+      });
+      var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+      var newEditorState = EditorState.set(editorState, {
+        currentContent: contentStateWithEntity
+      });
+      onToggle(newEditorState, entityKey);
+      _this.setState({
+        showUrlInput: false,
+        urlValue: ""
+      });
+    };
+    _this.cancelLink = function (e) {
+      e.preventDefault();
+      _this.setState({
+        showUrlInput: false,
+        urlValue: ""
+      });
+    };
+    _this.onLinkInputKeyDown = function (e) {
+      if (getKey(e) === Key.ENTER) {
+        _this.confirmLink(e);
+      }
+    };
+    _this.removeLink = function (e) {
+      e.preventDefault();
+      var _this$props2 = _this.props,
+        editorState = _this$props2.editorState,
+        onToggle = _this$props2.onToggle;
+      var hasLink = _this.state.hasLink;
+      var selection = editorState.getSelection();
+      if (!selection.isCollapsed() && hasLink) {
+        onToggle(editorState, null);
+        _this.setState({
+          showUrlInput: false
+        });
+      }
+    };
+    return _this;
+  }
+  _inheritsLoose(BlockTypeLinkControls, _Component);
+  var _proto = BlockTypeLinkControls.prototype;
+  _proto.render = function render() {
+    var i18n = this.props.i18n;
+    var _this$state = this.state,
+      showUrlInput = _this$state.showUrlInput,
+      hasLink = _this$state.hasLink;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "controls-group block-editor-controls link-controls"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "editor-stylebutton",
+      title: i18n("styles.link"),
+      onClick: this.addLink,
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement(LinkIcon, null)), showUrlInput && /*#__PURE__*/React.createElement("div", {
+      className: "url-input-container"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "exit-button",
+      onMouseDown: this.cancelLink
+    }, /*#__PURE__*/React.createElement(CloseIcon, null)), /*#__PURE__*/React.createElement("div", {
+      className: "link-label"
+    }, i18n("common.from")), /*#__PURE__*/React.createElement("div", {
+      className: "url-input-form"
+    }, /*#__PURE__*/React.createElement(TextField, {
+      style: {
+        width: 250,
+        margin: 5
+      },
+      onChange: this.onUrlChange,
+      value: this.state.urlValue,
+      onKeyDown: this.onLinkInputKeyDown,
+      placeholder: "https://example.com"
+    }), /*#__PURE__*/React.createElement(SecondarySquareButton, {
+      onMouseDown: this.confirmLink
+    }, /*#__PURE__*/React.createElement(CheckIcon, {
+      width: 15,
+      height: 15
+    }))), hasLink && /*#__PURE__*/React.createElement("div", {
+      className: "remove-link"
+    }, /*#__PURE__*/React.createElement(Unbutton, {
+      onClick: this.removeLink,
+      title: i18n("styles.unlink")
+    }, /*#__PURE__*/React.createElement(UnlinkIcon, null), i18n("styles.unlink")))));
+  };
+  return BlockTypeLinkControls;
+}(Component);
+BlockTypeLinkControls.propTypes = {
+  editorState: PropTypes.object,
+  onToggle: PropTypes.func
+};
+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) {
+    return /*#__PURE__*/React.createElement(StyleButton$1, {
+      key: type.style + type.label,
+      active: currentStyle.has(type.style),
+      label: type.label,
+      onToggle: props.onToggle,
+      style: type.style,
+      title: type.tooltip,
+      hotKey: type.hotKey
+    });
+  }));
+};
+
+var TagControls = /*#__PURE__*/function (_Component) {
+  function TagControls() {
+    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.tagControlRef = /*#__PURE__*/createRef();
+    _this.state = {
+      isOpen: false
+    };
+    _this.handleClickOutside = function (e) {
+      if (_this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
+        _this.setState({
+          isOpen: false
+        });
+      }
+    };
+    _this.handleTagClick = function (tag, delimiter) {
+      var _this$props = _this.props,
+        editorState = _this$props.editorState,
+        onInsertTag = _this$props.onInsertTag;
+      var delimiterStart = delimiter[0];
+      var delimiterEnd = delimiter[1];
+      var fullTag = "" + delimiterStart + tag + delimiterEnd;
+      onInsertTag(editorState, fullTag);
+    };
+    return _this;
+  }
+  _inheritsLoose(TagControls, _Component);
+  var _proto = TagControls.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    document.addEventListener("mousedown", this.handleClickOutside);
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    var _this$props2 = this.props,
+      i18n = _this$props2.i18n,
+      tags = _this$props2.tags;
+    var isOpen = this.state.isOpen;
+    var menuItems = tags.map(function (tag) {
+      var delimiter = tag.delimiter || "{}";
+      return /*#__PURE__*/React.createElement(OverflowMenuItem, {
+        key: tag.tag,
+        className: "tag-control",
+        id: "tag-control-" + tag.tag,
+        onClick: function onClick() {
+          return _this2.handleTagClick(tag.tag, delimiter);
+        }
+      }, tag.icon, /*#__PURE__*/React.createElement("span", {
+        className: "tag-control-text"
+      }, tag.label));
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tag-control-dropdown",
+      ref: this.tagControlRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "tag-control-header",
+      onClick: function onClick() {
+        return _this2.setState(function (_ref) {
+          var isOpen = _ref.isOpen;
+          return {
+            isOpen: !isOpen
+          };
+        });
+      }
+    }, i18n("common.insert"), /*#__PURE__*/React.createElement(DownArrowIcon, {
+      className: "tag-control-chevron",
+      inline: true
+    })), /*#__PURE__*/React.createElement(Popover, {
+      open: isOpen,
+      className: "tag-control-content"
+    }, /*#__PURE__*/React.createElement(OverflowMenu, {
+      className: "action-menu"
+    }, menuItems)));
+  };
+  return TagControls;
+}(Component);
+TagControls.propTypes = {
+  editorState: PropTypes.object,
+  tags: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onInsertTag: PropTypes.func.isRequired
+};
+var TagControls$1 = /*#__PURE__*/withI18n(TagControls);
+
+var HtmlLink = function HtmlLink(_ref) {
+  var url = _ref.url,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("a", {
+    href: url
+  }, children);
+};
+var Link = function Link(props) {
+  var _props$contentState$g = props.contentState.getEntity(props.entityKey).getData(),
+    url = _props$contentState$g.url;
+  return /*#__PURE__*/React.createElement(HtmlLink, {
+    url: url
+  }, props.children);
+};
+function findLinkEntities(contentBlock, callback, contentState) {
+  contentBlock.findEntityRanges(function (character) {
+    var entityKey = character.getEntity();
+    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"
+  },
+  BLOCK_TYPES: {
+    UNORDERED_LIST: "unordered-list",
+    ORDERED_LIST: "ordered-list"
+  },
+  INLINE_STYLES: {
+    BOLD: "bold",
+    ITALIC: "italic",
+    UNDERLINE: "underline"
+  }
+});
+var FontList = /*#__PURE__*/Object.freeze({
+  unstyled: {
+    label: "styles.p",
+    style: "unstyled"
+  },
+  "header-one": {
+    label: "styles.h1",
+    style: "header-one"
+  },
+  "header-two": {
+    label: "styles.h2",
+    style: "header-two"
+  },
+  "header-three": {
+    label: "styles.h3",
+    style: "header-three"
+  },
+  "header-four": {
+    label: "styles.h4",
+    style: "header-four"
+  },
+  "header-five": {
+    label: "styles.h5",
+    style: "header-five"
+  },
+  "header-six": {
+    label: "styles.h6",
+    style: "header-six"
+  }
+});
+var BlockTypeList = /*#__PURE__*/Object.freeze({
+  "unordered-list": {
+    label: /*#__PURE__*/React.createElement(BulletListIcon, null),
+    style: "unordered-list-item",
+    tooltip: "styles.unordered_list_item"
+  },
+  "ordered-list": {
+    label: /*#__PURE__*/React.createElement(NumberListIcon, null),
+    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)"
+  },
+  italic: {
+    label: /*#__PURE__*/React.createElement(ItalicIcon, null),
+    style: "ITALIC",
+    tooltip: "styles.italic",
+    hotKey: "(Ctrl+I)"
+  },
+  underline: {
+    label: /*#__PURE__*/React.createElement(UnderlineIcon, null),
+    style: "UNDERLINE",
+    tooltip: "styles.underline",
+    hotKey: "(Ctrl+U)"
+  }
+});
+var MinifiedConfigTypes = /*#__PURE__*/Object.freeze({
+  fontList: [{
+    type: "unstyled",
+    label: "styles.p",
+    style: "unstyled"
+  }, {
+    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]
+});
+var decorator = /*#__PURE__*/new CompositeDecorator([{
+  strategy: findLinkEntities,
+  component: Link
+}]);
+
+var RichTextEditor = /*#__PURE__*/function (_Component) {
+  function RichTextEditor() {
+    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.wrapperRef = /*#__PURE__*/createRef();
+    _this.editor = /*#__PURE__*/createRef();
+    _this.handleKeyCommand = function (command, editorState) {
+      var newState = RichUtils.handleKeyCommand(editorState, command);
+      if (newState) {
+        _this.props.onChange(newState);
+        return true;
+      }
+      return false;
+    };
+    _this.keyBindingFn = function (evt) {
+      switch (evt.keyCode) {
+        case 9:
+          return _this.onTab(evt);
+        default:
+          return getDefaultKeyBinding(evt);
+      }
+    };
+    _this.onTab = function (evt) {
+      evt.stopPropagation();
+      var _this$props = _this.props,
+        maxTabDepth = _this$props.maxTabDepth,
+        editorState = _this$props.editorState,
+        onChange = _this$props.onChange;
+      onChange(RichUtils.onTab(evt, editorState, maxTabDepth));
+    };
+    _this.toggleButtonBlockType = function (blockType) {
+      var _this$props2 = _this.props,
+        editorState = _this$props2.editorState,
+        onChange = _this$props2.onChange;
+      onChange(RichUtils.toggleBlockType(editorState, blockType));
+    };
+    _this.toggleSelectBlockType = function (blockType) {
+      var _this$props3 = _this.props,
+        editorState = _this$props3.editorState,
+        onChange = _this$props3.onChange;
+      onChange(RichUtils.toggleBlockType(editorState, blockType));
+    };
+    _this.toggleInlineStyle = function (inlineStyle) {
+      var _this$props4 = _this.props,
+        editorState = _this$props4.editorState,
+        onChange = _this$props4.onChange;
+      onChange(RichUtils.toggleInlineStyle(editorState, inlineStyle));
+    };
+    _this.toggleLink = function (newEditorState, entityKey) {
+      _this.props.onChange(RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
+    };
+    _this.insertText = function (editorState, text) {
+      var newContent = Modifier.insertText(editorState.getCurrentContent(), editorState.getSelection(), text);
+      _this.props.onChange(EditorState.push(editorState, newContent, "insert-characters"), function () {
+        return _this.focusEditor();
+      });
+    };
+    _this.getFontListConfigForPanelType = function (panelType) {
+      var controlConfig = _this.getControlConfigBySet(_this.props.controlConfigSet);
+      return controlConfig[panelType];
+    };
+    _this.getControlConfigBySet = function (config) {
+      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 == 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 == 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];
+      });
+      return {
+        fontList: fontList,
+        blockTypes: blockTypes,
+        inlineStyles: inlineStyles
+      };
+    };
+    return _this;
+  }
+  _inheritsLoose(RichTextEditor, _Component);
+  var _proto = RichTextEditor.prototype;
+  _proto.focusEditor = function focusEditor() {
+    var _this$editor$current;
+    (_this$editor$current = this.editor.current) == null || _this$editor$current.focus();
+  };
+  _proto.render = function render() {
+    var _this$props5 = this.props,
+      className = _this$props5.className,
+      showFontMenu = _this$props5.showFontMenu,
+      showInlineStyleMenu = _this$props5.showInlineStyleMenu,
+      showTextFormatMenu = _this$props5.showTextFormatMenu,
+      showLinkMenu = _this$props5.showLinkMenu,
+      label = _this$props5.label,
+      tags = _this$props5.tags,
+      editorState = _this$props5.editorState,
+      onChange = _this$props5.onChange,
+      handleBeforeInput = _this$props5.handleBeforeInput;
+    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", {
+      className: classNames
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "controls-wrapper"
+    }, showFontMenu && /*#__PURE__*/React.createElement(BlockTypeControls, {
+      editorState: editorState,
+      onToggle: this.toggleSelectBlockType,
+      blockTypes: this.getFontListConfigForPanelType("fontList")
+    }), showInlineStyleMenu && /*#__PURE__*/React.createElement(InlineStyleControls, {
+      editorState: editorState,
+      onToggle: this.toggleInlineStyle,
+      inlineStyles: this.getFontListConfigForPanelType("inlineStyles")
+    }), showTextFormatMenu && /*#__PURE__*/React.createElement(BlockTypeButtonControls, {
+      editorState: editorState,
+      onToggle: this.toggleButtonBlockType,
+      blockTypes: this.getFontListConfigForPanelType("blockTypes")
+    }), showLinkMenu && /*#__PURE__*/React.createElement(BlockTypeLinkControls$1, {
+      editorState: editorState,
+      onToggle: this.toggleLink
+    }), tags && tags.length > 0 && /*#__PURE__*/React.createElement(TagControls$1, {
+      editorState: editorState,
+      tags: tags,
+      onInsertTag: this.insertText
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "editor-wrapper"
+    }, /*#__PURE__*/React.createElement(Editor, {
+      ref: this.editor,
+      editorState: editorState,
+      handleKeyCommand: this.handleKeyCommand,
+      onChange: onChange,
+      handleBeforeInput: handleBeforeInput,
+      keyBindingFn: this.keyBindingFn,
+      spellCheck: true
+    }))));
+  };
+  return RichTextEditor;
+}(Component);
+RichTextEditor.decorator = decorator;
+var styleShape = function styleShape(configList) {
+  return PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOf([].concat(Object.values(configList)))), PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf([].concat(Object.values(configList))),
+    label: PropTypes.string,
+    style: PropTypes.string,
+    tooltip: PropTypes.string,
+    hotKey: PropTypes.string
+  }))]);
+};
+RichTextEditor.propTypes = {
+  editorState: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  maxTabDepth: PropTypes.number,
+  showFontMenu: PropTypes.bool,
+  showInlineStyleMenu: PropTypes.bool,
+  showTextFormatMenu: PropTypes.bool,
+  showLinkMenu: PropTypes.bool,
+  label: PropTypes.string,
+  tags: /*#__PURE__*/PropTypes.arrayOf(PropTypes.object),
+  controlConfigSet: /*#__PURE__*/PropTypes.shape({
+    fontList: /*#__PURE__*/styleShape(EditorConfigTypes.FONT_LIST),
+    blockTypes: /*#__PURE__*/styleShape(EditorConfigTypes.BLOCK_TYPES),
+    inlineStyles: /*#__PURE__*/styleShape(EditorConfigTypes.INLINE_STYLES)
+  })
+};
+RichTextEditor.defaultProps = {
+  maxTabDepth: 4,
+  showFontMenu: true,
+  showInlineStyleMenu: true,
+  showTextFormatMenu: true,
+  showLinkMenu: true,
+  label: ""
+};
+
+var editorStateToMarkdown = function editorStateToMarkdown(editorState) {
+  var rawState = convertToRaw(editorState.getCurrentContent());
+  return draftToMarkdown(rawState, {
+    preserveNewlines: true
+  });
+};
+var markdownToEditorState = function markdownToEditorState(markdown) {
+  if (!markdown) {
+    return EditorState.createEmpty(decorator);
+  }
+  var rawState = markdownToDraft(markdown, {
+    preserveNewlines: true
+  });
+  var contentState = convertFromRaw(rawState);
+  return EditorState.createWithContent(contentState, decorator);
+};
+var converter = /*#__PURE__*/new showdown.Converter({
+  underline: true
+});
+var markdownToHtml = function markdownToHtml(markdown) {
+  return converter.makeHtml(markdown);
+};
+
+var _excluded = ["name", "title", "languages"];
+var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
+  var _ref$language = _ref.language,
+    langKey = _ref$language.value,
+    label = _ref$language.label,
+    required = _ref$language.required,
+    values = _ref.values,
+    onChange = _ref.onChange,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    tags = _ref.tags;
+  var _useState = useState(markdownToEditorState(values[langKey])),
+    editorState = _useState[0],
+    setEditorState = _useState[1];
+  var handleOnChange = function handleOnChange(changedState) {
+    var newValues = _extends({}, values);
+    var content = editorStateToMarkdown(changedState);
+    if (values[langKey] && content === "\n") {
+      delete newValues[langKey];
+    } else {
+      newValues[langKey] = content;
+    }
+    setEditorState(changedState);
+    onChange(newValues);
+  };
+  var feedbackText = feedback == null ? void 0 : feedback(langKey);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextEditor, {
+    label: required ? label + "*" : label,
+    editorState: editorState,
+    onChange: function onChange(changedState) {
+      return handleOnChange(changedState);
+    },
+    controlConfigSet: MinifiedConfigTypes,
+    tags: tags
+  }), variant && feedbackText && feedbackText.length > 0 && (/*#__PURE__*/React.createElement(FeedbackText, {
+    variant: variant(langKey)
+  }, feedbackText)));
+};
+var ExpandableMultiLanguageRichTextEditor = function ExpandableMultiLanguageRichTextEditor(_ref2) {
+  var name = _ref2.name,
+    title = _ref2.title,
+    languages = _ref2.languages,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(ExpandablePanel, {
+    title: title,
+    defaultOpen: true,
+    contentStyle: {
+      padding: "4px 4px 4px 4px",
+      marginTop: "16px",
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "medium"
+  }, languages.map(function (lang) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: name + lang.value,
+      "data-testid": "multi-lang-rich-text-" + name + "-" + lang.value
+    }, /*#__PURE__*/React.createElement(RichTextEditorForLanguage, _extends({
+      language: lang
+    }, rest)));
+  })));
+};
+
+var entityToHtml = {
+  entityToHTML: function entityToHTML(entity, originalText) {
+    if (entity.type === "LINK") {
+      return /*#__PURE__*/React.createElement(HtmlLink, {
+        url: entity.data.url
+      }, originalText);
+    }
+    return originalText;
+  }
+};
+var htmlToEntity = {
+  htmlToEntity: function htmlToEntity(nodeName, node, createEntity) {
+    if (nodeName === "a") {
+      return createEntity("LINK", "MUTABLE", {
+        url: node.href
+      });
+    }
+  }
+};
+var htmlToEditorState = function htmlToEditorState(html) {
+  if (!html) {
+    return EditorState.createEmpty(decorator);
+  }
+  var rawState = convertFromHTML(htmlToEntity)(html);
+  return EditorState.createWithContent(rawState, decorator);
+};
+var editorStateToHtml = function editorStateToHtml(editorState) {
+  return convertToHTML(entityToHtml)(editorState.getCurrentContent());
+};
+
+export { EditorConfigTypes, ExpandableMultiLanguageRichTextEditor, MinifiedConfigTypes, RichTextEditor, editorStateToHtml, editorStateToMarkdown, htmlToEditorState, markdownToEditorState, markdownToHtml };
+//# sourceMappingURL=rich-text-editor.esm.js.map