@entur-partner/rich-text-editor 4.0.12 → 5.0.1

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

@@ -20,26 +20,21 @@ 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 target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-
   _setPrototypeOf(subClass, superClass);
 }
-
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -47,34 +42,28 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
-
 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];
   }
-
   return target;
 }
 
 function useI18N() {
   var _useTranslation = useTranslation(),
-      t = _useTranslation.t,
-      language = _useTranslation.i18n.language;
-
+    t = _useTranslation.t,
+    language = _useTranslation.i18n.language;
   if (language !== 'nb' && language !== 'en') {
     throw Error('Language must be either nb or en.');
   }
-
   return t;
 }
-
 function withI18n(Component) {
   return function WrappedComponent(props) {
     var t = useI18N();
@@ -86,84 +75,66 @@ function withI18n(Component) {
 
 var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
   _inheritsLoose(BlockTypeDropdown, _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;
   }
-
   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;
+      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) {
@@ -176,16 +147,14 @@ var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
       }
     });
   };
-
   return BlockTypeDropdown;
 }(Component);
-
 var BlockTypeDropdown$1 = /*#__PURE__*/withI18n(BlockTypeDropdown);
 
 var BlockTypeControls = function BlockTypeControls(_ref) {
   var editorState = _ref.editorState,
-      blockTypes = _ref.blockTypes,
-      onToggle = _ref.onToggle;
+    blockTypes = _ref.blockTypes,
+    onToggle = _ref.onToggle;
   var selection = editorState.getSelection();
   var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
   var selectedOption = blockTypes.find(function (option) {
@@ -207,45 +176,36 @@ function getKey(event) {
 
 var StyleButton = /*#__PURE__*/function (_Component) {
   _inheritsLoose(StyleButton, _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;
+        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;
+        style = _this$props2.style,
+        onToggle = _this$props2.onToggle;
       onToggle(style);
     };
-
     return _this;
   }
-
   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;
+      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
     });
@@ -261,16 +221,14 @@ var StyleButton = /*#__PURE__*/function (_Component) {
       }
     }, 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;
+    blockTypes = props.blockTypes,
+    onToggle = props.onToggle;
   var selection = editorState.getSelection();
   var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
   return /*#__PURE__*/React.createElement("div", {
@@ -289,32 +247,26 @@ var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
 
 var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
   _inheritsLoose(BlockTypeLinkControls, _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();
@@ -322,12 +274,10 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
         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,
@@ -335,13 +285,12 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
         });
       }
     };
-
     _this.confirmLink = function (e) {
       e.preventDefault();
       var urlValue = _this.state.urlValue;
       var _this$props = _this.props,
-          editorState = _this$props.editorState,
-          onToggle = _this$props.onToggle;
+        editorState = _this$props.editorState,
+        onToggle = _this$props.onToggle;
       var contentState = editorState.getCurrentContent();
       var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
         url: urlValue
@@ -351,55 +300,45 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
         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;
+        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;
   }
-
   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;
+      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", {
@@ -437,10 +376,8 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
       title: i18n('styles.unlink')
     }, /*#__PURE__*/React.createElement(UnlinkIcon, null), i18n('styles.unlink')))));
   };
-
   return BlockTypeLinkControls;
 }(Component);
-
 BlockTypeLinkControls.propTypes = {
   editorState: PropTypes.object,
   onToggle: PropTypes.func
@@ -449,7 +386,7 @@ var BlockTypeLinkControls$1 = /*#__PURE__*/withI18n(BlockTypeLinkControls);
 
 var InlineStyleControls = function InlineStyleControls(props) {
   var editorState = props.editorState,
-      inlineStyles = props.inlineStyles;
+    inlineStyles = props.inlineStyles;
   var currentStyle = editorState.getCurrentInlineStyle();
   return /*#__PURE__*/React.createElement("div", {
     className: "controls-group inline-editor-controls"
@@ -468,20 +405,16 @@ var InlineStyleControls = function InlineStyleControls(props) {
 
 var TagControls = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TagControls, _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 && _this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
         _this.setState({
@@ -489,36 +422,29 @@ var TagControls = /*#__PURE__*/function (_Component) {
         });
       }
     };
-
     _this.handleTagClick = function (tag, delimiter) {
       var _this$props = _this.props,
-          editorState = _this$props.editorState,
-          onInsertTag = _this$props.onInsertTag;
+        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;
   }
-
   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;
+      i18n = _this$props2.i18n,
+      tags = _this$props2.tags;
     var isOpen = this.state.isOpen;
     var menuItems = tags.map(function (tag, i) {
       var delimiter = tag.delimiter || '{}';
@@ -556,10 +482,8 @@ var TagControls = /*#__PURE__*/function (_Component) {
       className: "action-menu"
     }, menuItems)));
   };
-
   return TagControls;
 }(Component);
-
 TagControls.propTypes = {
   editorState: PropTypes.object,
   tags: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -569,21 +493,18 @@ var TagControls$1 = /*#__PURE__*/withI18n(TagControls);
 
 var HtmlLink = function HtmlLink(_ref) {
   var url = _ref.url,
-      children = _ref.children;
+    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;
-
+    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();
@@ -693,88 +614,69 @@ var decorator = /*#__PURE__*/new CompositeDecorator([{
 
 var RichTextEditor = /*#__PURE__*/function (_Component) {
   _inheritsLoose(RichTextEditor, _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;
+        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;
+        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;
+        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;
+        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 && config.fontList || Object.keys(FontList)).filter(function (f) {
         return typeof f === 'object' ? FontList[f.type] : FontList[f];
@@ -797,28 +699,24 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
         inlineStyles: inlineStyles
       };
     };
-
     return _this;
   }
-
   var _proto = RichTextEditor.prototype;
-
   _proto.focusEditor = function focusEditor() {
     this.editor.current && 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;
+      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
@@ -857,12 +755,9 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
       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))),
@@ -872,7 +767,6 @@ var styleShape = function styleShape(configList) {
     hotKey: PropTypes.string
   }))]);
 };
-
 RichTextEditor.propTypes = {
   editorState: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
@@ -908,7 +802,6 @@ var markdownToEditorState = function markdownToEditorState(markdown) {
   if (!markdown) {
     return EditorState.createEmpty(decorator);
   }
-
   var rawState = markdownToDraft(markdown, {
     preserveNewlines: true
   });
@@ -923,37 +816,30 @@ var markdownToHtml = function markdownToHtml(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;
-
+    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];
-
+    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 && feedback(langKey);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextEditor, {
     label: required ? label + '*' : label,
@@ -963,17 +849,15 @@ var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
     },
     controlConfigSet: MinifiedConfigTypes,
     tags: tags
-  }), variant && (feedbackText == null ? void 0 : feedbackText.length) > 0 && /*#__PURE__*/React.createElement(FeedbackText, {
+  }), variant && (feedbackText == null ? void 0 : feedbackText.length) > 0 && ( /*#__PURE__*/React.createElement(FeedbackText, {
     variant: variant(langKey)
-  }, feedbackText));
+  }, feedbackText)));
 };
-
 var ExpandableMultiLanguageRichTextEditor = function ExpandableMultiLanguageRichTextEditor(_ref2) {
   var name = _ref2.name,
-      title = _ref2.title,
-      languages = _ref2.languages,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
+    title = _ref2.title,
+    languages = _ref2.languages,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
   return /*#__PURE__*/React.createElement(ExpandablePanel, {
     title: title,
     defaultOpen: true,
@@ -1003,7 +887,6 @@ var entityToHtml = {
         url: entity.data.url
       }, originalText);
     }
-
     return originalText;
   }
 };
@@ -1016,13 +899,13 @@ var htmlToEntity = {
     }
   }
 };
+
 /* eslint-disable react/display-name */
 
 var htmlToEditorState = function htmlToEditorState(html) {
   if (!html) {
     return EditorState.createEmpty(decorator);
   }
-
   var rawState = convertFromHTML(htmlToEntity)(html);
   return EditorState.createWithContent(rawState, decorator);
 };