pageflow 15.7.1 → 16.0.0

data/entry_types/scrolled/package/frontend/{components-6ab26015.js → components-b3160dd7.js}

@@ -1,16 +1,19 @@
-import React, { useMemo, useState, useCallback, useContext, useRef, useEffect, createContext, useLayoutEffect, memo } from 'react';
-import { c as _slicedToArray, q as useEntryStateDispatch, b as _defineProperty, _ as _objectWithoutProperties, u as useI18n, A as updateContentElementConfiguration, a as _objectSpread2, o as _toConsumableArray, P as PhonePlatformContext } from './PhonePlatformContext-9fb97827.js';
+import 'regenerator-runtime';
+import { a6 as ContentElementEditorCommandEmitterContext, b as usePostMessageListener, a7 as MotifAreaVisibilityProvider, a8 as ForcePaddingContext, a9 as ContentElementConfigurationUpdateContext, aa as ContentElementEditorStateContext, d as api, z as useContentElementEditorState, ab as LayoutWithoutInlineEditing, a5 as SectionThumbnail, ac as renderElement, ad as renderLeaf$1, y as useContentElementEditorCommandSubscription, T as Text$1, n as frontendStyles } from './EditableInlineText.module-14c7b097.js';
+import 'pageflow/frontend';
+import React, { useMemo, useState, useCallback, useContext, useRef, useEffect, createContext, memo } from 'react';
+import { c as _slicedToArray, o as useEntryStateDispatch, b as _defineProperty, _ as _objectWithoutProperties, u as useI18n, D as updateContentElementConfiguration, q as useChapter, a as _objectSpread2, j as _toConsumableArray, F as _unsupportedIterableToArray, P as PhonePlatformContext } from './PhonePlatformContext-f6093cc6.js';
 import 'i18n-js';
 import 'use-context-selector';
 import 'reselect';
 import 'slugify';
 import classNames from 'classnames';
-import { C as ContentElementEditorCommandEmitterContext, e as usePostMessageListener, n as MotifAreaVisibilityProvider, o as ForcePaddingContext, p as ContentElementConfigurationUpdateContext, q as ContentElementEditorStateContext, f as api, u as useContentElementEditorState, r as LayoutWithoutInlineEditing, s as renderElement, t as renderLeaf$1, j as useContentElementEditorCommandSubscription, T as Text$1, h as frontendStyles } from './EditableInlineText.module-b9923660.js';
 import './createSuper-d0f30da3.js';
 import BackboneEvents from 'backbone-events-standalone';
+import 'react-measure';
 import { DndProvider, useDrop, useDrag } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Range, Editor, Transforms, Text, Node, Path, createEditor } from 'slate';
+import { Range, Editor, Transforms, Node, Element, Path, Text, createEditor } from 'slate';
 import { useSlate, ReactEditor, withReact, Slate, Editable } from 'slate-react';
 import debounce from 'debounce';
 
@@ -650,6 +653,11 @@ function postUpdateTransientContentElementStateMessage(_ref4) {
     }
   }, window.location.origin);
 }
+function postSelectLinkDestinationMessage() {
+  window.parent.postMessage({
+    type: 'SELECT_LINK_DESTINATION'
+  }, window.location.origin);
+}
 
 function ContentElementConfigurationUpdateProvider(_ref) {
   var id = _ref.id,
@@ -969,7 +977,7 @@ function withCustomInsertBreak(editor) {
   return editor;
 }
 
-var styles$7 = {"container":"index-module_container__3dD9z","hoveringToolbar":"index-module_hoveringToolbar__31Xpd","selection":"index-module_selection__3dUiD","linkTooltip":"index-module_linkTooltip__36m1K"};
+var styles$7 = {"container":"index-module_container__3dD9z","shy":"index-module_shy__KgWjc","selected":"index-module_selected__mE58y","hoveringToolbar":"index-module_hoveringToolbar__31Xpd","selection":"index-module_selection__3dUiD","linkTooltip":"index-module_linkTooltip__36m1K","linkTooltipThumbnail":"index-module_linkTooltipThumbnail__2v-cf","linkTooltipThumbnailClickMask":"index-module_linkTooltipThumbnailClickMask__2Z3ff","linkTooltipNewTab":"index-module_linkTooltipNewTab__4tnLF","linkTooltipChapterNumber":"index-module_linkTooltipChapterNumber__2CsQA"};
 
 function _extends$3() {
   _extends$3 = Object.assign || function (target) {
@@ -1006,11 +1014,10 @@ var ExternalLinkIcon = (function (_ref) {
   }));
 });
 
-var DisabledContext = createContext();
-var StateContext = createContext();
 var UpdateContext = createContext();
 function LinkTooltipProvider(_ref) {
-  var disabled = _ref.disabled,
+  var editor = _ref.editor,
+      disabled = _ref.disabled,
       children = _ref.children;
 
   var _useState = useState(),
@@ -1022,13 +1029,14 @@ function LinkTooltipProvider(_ref) {
   var update = useMemo(function () {
     var timeout;
     return {
-      activate: function activate(href, linkRef) {
+      activate: function activate(href, openInNewTab, linkRef) {
         clearTimeout(timeout);
         timeout = null;
         var outerRect = outerRef.current.getBoundingClientRect();
         var linkRect = linkRef.current.getBoundingClientRect();
         setState({
           href: href,
+          openInNewTab: openInNewTab,
           top: linkRect.bottom - outerRect.top + 10,
           left: linkRect.left - outerRect.left
         });
@@ -1047,18 +1055,19 @@ function LinkTooltipProvider(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/React.createElement(DisabledContext.Provider, {
-    value: disabled
-  }, /*#__PURE__*/React.createElement(StateContext.Provider, {
-    value: state
-  }, /*#__PURE__*/React.createElement(UpdateContext.Provider, {
+  return /*#__PURE__*/React.createElement(UpdateContext.Provider, {
     value: update
   }, /*#__PURE__*/React.createElement("div", {
     ref: outerRef
-  }, /*#__PURE__*/React.createElement(LinkTooltip, null), children))));
+  }, /*#__PURE__*/React.createElement(LinkTooltip, {
+    editor: editor,
+    state: state,
+    disabled: disabled
+  }), children));
 }
 function LinkPreview(_ref2) {
   var href = _ref2.href,
+      openInNewTab = _ref2.openInNewTab,
       children = _ref2.children;
 
   var _useContext = useContext(UpdateContext),
@@ -1069,22 +1078,21 @@ function LinkPreview(_ref2) {
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
     onMouseEnter: function onMouseEnter() {
-      return activate(href, ref);
+      return activate(href, openInNewTab, ref);
     },
     onMouseLeave: deactivate,
     onMouseDown: deactivate
   }, children);
 }
-function LinkTooltip() {
-  var disabled = useContext(DisabledContext);
-  var state = useContext(StateContext);
+function LinkTooltip(_ref3) {
+  var editor = _ref3.editor,
+      disabled = _ref3.disabled,
+      state = _ref3.state;
 
   var _useContext2 = useContext(UpdateContext),
       keep = _useContext2.keep,
       deactivate = _useContext2.deactivate;
 
-  var editor = useSlate();
-
   if (disabled || !state || editor.selection && !Range.isCollapsed(editor.selection)) {
     return null;
   }
@@ -1098,14 +1106,95 @@ function LinkTooltip() {
       left: state.left,
       opacity: 1
     }
-  }, /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(LinkDestination, {
     href: state.href,
+    openInNewTab: state.openInNewTab
+  }));
+}
+
+function LinkDestination(_ref4) {
+  var href = _ref4.href,
+      openInNewTab = _ref4.openInNewTab;
+
+  if (href === null || href === void 0 ? void 0 : href.chapter) {
+    return /*#__PURE__*/React.createElement(ChapterLinkDestination, {
+      permaId: href.chapter
+    });
+  } else if (href === null || href === void 0 ? void 0 : href.section) {
+    return /*#__PURE__*/React.createElement(SectionLinkDestination, {
+      permaId: href.section
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(ExternalLinkDestination, {
+      href: href,
+      openInNewTab: openInNewTab
+    });
+  }
+}
+
+function ChapterLinkDestination(_ref5) {
+  var permaId = _ref5.permaId;
+  var chapter = useChapter({
+    permaId: permaId
+  });
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  if (!chapter) {
+    return '(Deleted chapter)';
+  }
+
+  return /*#__PURE__*/React.createElement("a", {
+    href: "#".concat(chapter.chapterSlug),
+    title: t('pageflow_scrolled.inline_editing.link_tooltip.visit_chapter')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$7.linkTooltipChapterNumber
+  }, t('pageflow_scrolled.inline_editing.link_tooltip.chapter_number', {
+    number: chapter.index + 1
+  })), " ", chapter.title);
+}
+
+function SectionLinkDestination(_ref6) {
+  var permaId = _ref6.permaId;
+
+  var _useI18n2 = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n2.t;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$7.linkTooltipThumbnail
+  }, /*#__PURE__*/React.createElement(SectionThumbnail, {
+    sectionPermaId: permaId
+  }), /*#__PURE__*/React.createElement("a", {
+    href: "#section-".concat(permaId),
+    className: styles$7.linkTooltipThumbnailClickMask,
+    title: t('pageflow_scrolled.inline_editing.link_tooltip.visit_section')
+  }));
+}
+
+function ExternalLinkDestination(_ref7) {
+  var href = _ref7.href,
+      openInNewTab = _ref7.openInNewTab;
+
+  var _useI18n3 = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n3.t;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+    href: href,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, state.href, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
+  }, href, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
     width: 10,
     height: 10
-  })));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$7.linkTooltipNewTab
+  }, openInNewTab ? t('pageflow_scrolled.inline_editing.link_tooltip.opens_in_new_tab') : t('pageflow_scrolled.inline_editing.link_tooltip.opens_in_same_tab')));
 }
 
 function withLinks(editor) {
@@ -1120,50 +1209,13 @@ function withLinks(editor) {
 function renderElementWithLinkPreview(options) {
   if (options.element.type === 'link') {
     return /*#__PURE__*/React.createElement(LinkPreview, {
-      href: options.element.href
+      href: options.element.href,
+      openInNewTab: options.element.openInNewTab
     }, renderElement(options));
   } else {
     return renderElement(options);
   }
 }
-function renderLeafWithLinkSelection(options) {
-  if (options.leaf.linkSelection) {
-    return /*#__PURE__*/React.createElement("span", Object.assign({}, options.attributes, {
-      style: {
-        backgroundColor: '#aaa'
-      }
-    }), renderLeaf$1(options));
-  }
-
-  return renderLeaf$1(options);
-}
-function decorateLinkSelection(_ref, linkSelection) {
-  var _ref2 = _slicedToArray(_ref, 2),
-      node = _ref2[0],
-      path = _ref2[1];
-
-  if (linkSelection && Text.isText(node)) {
-    var nodeRange = {
-      anchor: {
-        path: path,
-        offset: 0
-      },
-      focus: {
-        path: path,
-        offset: node.text.length
-      }
-    };
-    var intersection = Range.intersection(nodeRange, linkSelection);
-
-    if (intersection) {
-      return [_objectSpread2(_objectSpread2({}, intersection), {}, {
-        linkSelection: true
-      })];
-    }
-  }
-
-  return [];
-}
 
 // element is currently being dragged over the element. `react-dnd`
 // causes "Update on unmounted component warning" when dropping an
@@ -1206,105 +1258,29 @@ function useDropTargetsActive() {
   return [dropTargetsActive, drop];
 }
 
-function _extends$4() {
-  _extends$4 = Object.assign || 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];
+function useSelectLinkDestination() {
+  return function () {
+    return new Promise(function (resolve, reject) {
+      postSelectLinkDestinationMessage();
+      window.addEventListener('message', receive);
+
+      function receive(message) {
+        if (window.location.href.indexOf(message.origin) === 0) {
+          if (message.data.type === 'LINK_DESTINATION_SELECTED') {
+            window.removeEventListener('message', receive);
+            resolve(message.data.payload);
+          } else if (message.data.type === 'LINK_DESTINATION_SELECTION_ABORTED') {
+            window.removeEventListener('message', receive);
+            reject();
+          }
         }
       }
-    }
-
-    return target;
+    });
   };
-
-  return _extends$4.apply(this, arguments);
-}
-var CancelIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      styles = _ref$styles === void 0 ? {} : _ref$styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    "aria-hidden": "true",
-    "data-prefix": "fas",
-    "data-icon": "times",
-    className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-times"] || "fa-times") + " " + (styles["fa-w-11"] || "fa-w-11"),
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 352 512"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-  }));
-});
-
-function LinkInput(_ref) {
-  var onSubmit = _ref.onSubmit,
-      onCancel = _ref.onCancel;
-
-  var _useI18n = useI18n({
-    locale: 'ui'
-  }),
-      t = _useI18n.t;
-
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      href = _useState2[0],
-      setHref = _useState2[1];
-
-  var ref = useRef(); // With useEffect the deselect in HoveringToolbar/handleButtonClick breaks focusing.
-
-  useLayoutEffect(function () {
-    ref.current.focus();
-  }, []);
-
-  function handleKey(event) {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      ref.current.blur();
-    } else if (event.key === 'Escape') {
-      event.preventDefault();
-      onCancel();
-    }
-  }
-
-  function submit() {
-    if (href) {
-      onSubmit(href);
-    } else {
-      onCancel();
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$7.linkTooltip
-  }, /*#__PURE__*/React.createElement("input", {
-    ref: ref,
-    type: "text",
-    value: href,
-    placeholder: t('pageflow_scrolled.inline_editing.url_placeholder'),
-    onBlur: submit,
-    onChange: function onChange(e) {
-      return setHref(e.target.value);
-    },
-    onKeyDown: handleKey
-  }), /*#__PURE__*/React.createElement("button", {
-    onMouseDown: function onMouseDown(e) {
-      return e.preventDefault();
-    },
-    onClick: onCancel,
-    title: t('pageflow_scrolled.inline_editing.cancel')
-  }, /*#__PURE__*/React.createElement(CancelIcon, {
-    width: 10,
-    height: 10
-  })));
 }
 
-function _extends$5() {
-  _extends$5 = Object.assign || function (target) {
+function _extends$4() {
+  _extends$4 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1318,14 +1294,14 @@ function _extends$5() {
     return target;
   };
 
-  return _extends$5.apply(this, arguments);
+  return _extends$4.apply(this, arguments);
 }
 var BoldIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "bold",
@@ -1338,8 +1314,8 @@ var BoldIcon = (function (_ref) {
   }));
 });
 
-function _extends$6() {
-  _extends$6 = Object.assign || function (target) {
+function _extends$5() {
+  _extends$5 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1353,14 +1329,14 @@ function _extends$6() {
     return target;
   };
 
-  return _extends$6.apply(this, arguments);
+  return _extends$5.apply(this, arguments);
 }
 var UnderlineIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "underline",
@@ -1373,8 +1349,8 @@ var UnderlineIcon = (function (_ref) {
   }));
 });
 
-function _extends$7() {
-  _extends$7 = Object.assign || function (target) {
+function _extends$6() {
+  _extends$6 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1388,14 +1364,14 @@ function _extends$7() {
     return target;
   };
 
-  return _extends$7.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
 var ItalicIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "italic",
@@ -1408,8 +1384,8 @@ var ItalicIcon = (function (_ref) {
   }));
 });
 
-function _extends$8() {
-  _extends$8 = Object.assign || function (target) {
+function _extends$7() {
+  _extends$7 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1423,14 +1399,14 @@ function _extends$8() {
     return target;
   };
 
-  return _extends$8.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
 var StrikethroughIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "strikethrough",
@@ -1443,8 +1419,8 @@ var StrikethroughIcon = (function (_ref) {
   }));
 });
 
-function _extends$9() {
-  _extends$9 = Object.assign || function (target) {
+function _extends$8() {
+  _extends$8 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1458,14 +1434,14 @@ function _extends$9() {
     return target;
   };
 
-  return _extends$9.apply(this, arguments);
+  return _extends$8.apply(this, arguments);
 }
 var LinkIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "link",
@@ -1478,9 +1454,7 @@ var LinkIcon = (function (_ref) {
   }));
 });
 
-function HoveringToolbar(_ref) {
-  var linkSelection = _ref.linkSelection,
-      setLinkSelection = _ref.setLinkSelection;
+function HoveringToolbar() {
   var ref = useRef();
   var outerRef = useRef();
   var editor = useSlate();
@@ -1490,11 +1464,12 @@ function HoveringToolbar(_ref) {
   }),
       t = _useI18n.t;
 
+  var selectLinkDestination = useSelectLinkDestination();
   useEffect(function () {
     var el = ref.current;
     var selection = editor.selection;
 
-    if (!el || !outerRef.current || linkSelection) {
+    if (!el || !outerRef.current) {
       return;
     }
 
@@ -1515,10 +1490,10 @@ function HoveringToolbar(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: styles$7.hoveringToolbar
-  }, !linkSelection && renderToolbar$1(editor, setLinkSelection, t), linkSelection && renderLinkInput(editor, linkSelection, setLinkSelection)));
+  }, renderToolbar$1(editor, t, selectLinkDestination)));
 }
 
-function renderToolbar$1(editor, setLinkSelection, t) {
+function renderToolbar$1(editor, t, selectLinkDestination) {
   var buttons = [{
     name: 'bold',
     text: t('pageflow_scrolled.inline_editing.formats.bold'),
@@ -1547,21 +1522,21 @@ function renderToolbar$1(editor, setLinkSelection, t) {
   return /*#__PURE__*/React.createElement(Toolbar, {
     buttons: buttons,
     onButtonClick: function onButtonClick(name) {
-      return handleButtonClick(editor, name, setLinkSelection);
+      return handleButtonClick(editor, name, selectLinkDestination);
     }
   });
 }
 
-function handleButtonClick(editor, format, setLinkSelection) {
+function handleButtonClick(editor, format, selectLinkDestination) {
   if (format === 'link') {
     if (isLinkActive(editor)) {
       unwrapLink(editor);
     } else {
-      var selection = editor.selection; // Required to prevent slate from focusing the editor in Firefox
-      // https://github.com/ianstormtaylor/slate/blob/44675c2080e3f6a2523170430bb92e426b7647e2/packages/slate-react/src/components/editable.tsx#L189
-
-      Transforms.deselect(editor);
-      setLinkSelection(selection);
+      selectLinkDestination().then(function (_ref) {
+        var href = _ref.href,
+            openInNewTab = _ref.openInNewTab;
+        wrapLink(editor, href, openInNewTab);
+      }, function () {});
     }
   } else {
     toggleMark(editor, format);
@@ -1576,26 +1551,6 @@ function isButtonActive(editor, format) {
   }
 }
 
-function renderLinkInput(editor, linkSelection, setLinkSelection) {
-  function handleSubmit(href) {
-    Transforms.select(editor, linkSelection);
-    ReactEditor.focus(editor);
-    wrapLink(editor, href);
-    setLinkSelection(null);
-  }
-
-  function handleCancel() {
-    setLinkSelection(null);
-    Transforms.select(editor, linkSelection);
-    ReactEditor.focus(editor);
-  }
-
-  return /*#__PURE__*/React.createElement(LinkInput, {
-    onSubmit: handleSubmit,
-    onCancel: handleCancel
-  });
-}
-
 function unwrapLink(editor) {
   Transforms.unwrapNodes(editor, {
     match: function match(n) {
@@ -1604,10 +1559,11 @@ function unwrapLink(editor) {
   });
 }
 
-function wrapLink(editor, href) {
+function wrapLink(editor, href, openInNewTab) {
   var link = {
     type: 'link',
     href: href,
+    openInNewTab: openInNewTab,
     children: []
   };
   Transforms.wrapNodes(editor, link, {
@@ -1645,7 +1601,7 @@ function isMarkActive(editor, format) {
   return marks ? marks[format] === true : false;
 }
 
-function getUniformSelectedNodeProperty(editor, propertyName) {
+function getUniformSelectedNode(editor, propertyName) {
   var currentNodeEntries = _toConsumableArray(Editor.nodes(editor, {
     match: function match(n) {
       return !!n.type;
@@ -1661,11 +1617,222 @@ function getUniformSelectedNodeProperty(editor, propertyName) {
     return node[propertyName];
   })));
 
-  return values.length === 1 ? values[0] : null;
+  return values.length === 1 ? currentNodeEntries[0][0] : null;
 }
 
-function _extends$a() {
-  _extends$a = Object.assign || function (target) {
+function _createForOfIteratorHelper(o) {
+  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (o = _unsupportedIterableToArray(o))) {
+      var i = 0;
+
+      var F = function F() {};
+
+      return {
+        s: F,
+        n: function n() {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function e(_e) {
+          throw _e;
+        },
+        f: F
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var it,
+      normalCompletion = true,
+      didErr = false,
+      err;
+  return {
+    s: function s() {
+      it = o[Symbol.iterator]();
+    },
+    n: function n() {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function e(_e2) {
+      didErr = true;
+      err = _e2;
+    },
+    f: function f() {
+      try {
+        if (!normalCompletion && it["return"] != null) it["return"]();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
+
+function isBlockActive(editor, format) {
+  var _Editor$nodes = Editor.nodes(editor, {
+    match: function match(n) {
+      return n.type === format;
+    }
+  }),
+      _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+      match = _Editor$nodes2[0];
+
+  return !!match;
+}
+var listTypes = ['numbered-list', 'bulleted-list'];
+function toggleBlock(editor, format) {
+  var isActive = isBlockActive(editor, format);
+  var isList = listTypes.includes(format);
+  Transforms.unwrapNodes(editor, {
+    match: function match(n) {
+      return listTypes.includes(n.type);
+    },
+    split: true
+  });
+  Transforms.setNodes(editor, {
+    type: isActive ? 'paragraph' : isList ? 'list-item' : format
+  });
+
+  if (!isActive && isList) {
+    var block = _objectSpread2({
+      type: format,
+      children: []
+    }, preserveTypograpyhVariant(editor));
+
+    Transforms.wrapNodes(editor, block);
+  }
+}
+function applyTypograpyhVariant(editor, variant) {
+  Transforms.setNodes(editor, {
+    variant: variant
+  }, {
+    mode: 'highest'
+  });
+  applyTypograpyhVariantToListItems(editor, variant);
+}
+
+function applyTypograpyhVariantToListItems(editor, variant) {
+  var lists = Editor.nodes(editor, {
+    match: function match(n) {
+      return listTypes.includes(n.type);
+    }
+  });
+
+  var _iterator = _createForOfIteratorHelper(lists),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+          listPath = _step$value[1];
+
+      var items = Editor.nodes(editor, {
+        at: listPath,
+        match: function match(n) {
+          return n.type === 'list-item';
+        }
+      });
+
+      var _iterator2 = _createForOfIteratorHelper(items),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _step2$value = _slicedToArray(_step2.value, 2),
+              itemPath = _step2$value[1];
+
+          Transforms.setNodes(editor, {
+            variant: variant
+          }, {
+            at: itemPath
+          });
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}
+
+function preserveTypograpyhVariant(editor) {
+  var nodeEntry = Editor.above(editor, {
+    at: Range.start(editor.selection),
+    match: function match(n) {
+      return !!n.type;
+    }
+  });
+  return nodeEntry && nodeEntry[0].variant ? {
+    variant: nodeEntry[0].variant
+  } : {};
+}
+
+function withBlockNormalization(_ref, editor) {
+  var onlyParagraphs = _ref.onlyParagraphs;
+
+  if (!onlyParagraphs) {
+    return editor;
+  }
+
+  var normalizeNode = editor.normalizeNode;
+
+  editor.normalizeNode = function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        node = _ref3[0],
+        path = _ref3[1];
+
+    if (path.length === 0) {
+      var _iterator3 = _createForOfIteratorHelper(Node.children(editor, path)),
+          _step3;
+
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _step3$value = _slicedToArray(_step3.value, 2),
+              child = _step3$value[0],
+              childPath = _step3$value[1];
+
+          if (Element.isElement(child) && child.type !== 'paragraph') {
+            Transforms.unwrapNodes(editor, {
+              match: function match(n) {
+                return listTypes.includes(n.type);
+              },
+              split: true,
+              at: childPath
+            });
+            Transforms.setNodes(editor, {
+              type: 'paragraph'
+            }, {
+              at: childPath
+            });
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
+
+    return normalizeNode([node, path]);
+  };
+
+  return editor;
+}
+
+function _extends$9() {
+  _extends$9 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1679,14 +1846,14 @@ function _extends$a() {
     return target;
   };
 
-  return _extends$a.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
 var TextIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "align-justify",
@@ -1699,8 +1866,8 @@ var TextIcon = (function (_ref) {
   }));
 });
 
-function _extends$b() {
-  _extends$b = Object.assign || function (target) {
+function _extends$a() {
+  _extends$a = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1714,14 +1881,14 @@ function _extends$b() {
     return target;
   };
 
-  return _extends$b.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
 var HeadingIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "heading",
@@ -1734,8 +1901,8 @@ var HeadingIcon = (function (_ref) {
   }));
 });
 
-function _extends$c() {
-  _extends$c = Object.assign || function (target) {
+function _extends$b() {
+  _extends$b = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1749,14 +1916,14 @@ function _extends$c() {
     return target;
   };
 
-  return _extends$c.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
 var OlIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "list-ol",
@@ -1769,8 +1936,8 @@ var OlIcon = (function (_ref) {
   }));
 });
 
-function _extends$d() {
-  _extends$d = Object.assign || function (target) {
+function _extends$c() {
+  _extends$c = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1784,14 +1951,14 @@ function _extends$d() {
     return target;
   };
 
-  return _extends$d.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 var UlIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "list-ul",
@@ -1804,8 +1971,8 @@ var UlIcon = (function (_ref) {
   }));
 });
 
-function _extends$e() {
-  _extends$e = Object.assign || function (target) {
+function _extends$d() {
+  _extends$d = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1819,14 +1986,14 @@ function _extends$e() {
     return target;
   };
 
-  return _extends$e.apply(this, arguments);
+  return _extends$d.apply(this, arguments);
 }
 var QuoteIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "quote-right",
@@ -1860,6 +2027,8 @@ function Selection(props) {
       range = _useContentElementEdi.range;
 
   useEffect(function () {
+    var _getUniformSelectedNo;
+
     var selection = editor.selection;
 
     if (!ref.current) {
@@ -1914,8 +2083,8 @@ function Selection(props) {
 
     setTransientState({
       editableTextIsSingleBlock: editor.children.length <= 1,
-      currentNodeType: getUniformSelectedNodeProperty(editor, 'type'),
-      typographyVariant: getUniformSelectedNodeProperty(editor, 'variant')
+      exampleNode: getUniformSelectedNode(editor, 'type'),
+      typographyVariant: (_getUniformSelectedNo = getUniformSelectedNode(editor, 'variant')) === null || _getUniformSelectedNo === void 0 ? void 0 : _getUniformSelectedNo.variant
     });
     boundsRef.current = {
       start: start,
@@ -2023,42 +2192,6 @@ function getDOMNodes(editor, startIndex, endIndex) {
   }
 }
 
-var listTypes = ['numbered-list', 'bulleted-list'];
-
-function toggleBlock(editor, format) {
-  var isActive = isBlockActive(editor, format);
-  var isList = listTypes.includes(format);
-  Transforms.unwrapNodes(editor, {
-    match: function match(n) {
-      return listTypes.includes(n.type);
-    },
-    split: true
-  });
-  Transforms.setNodes(editor, {
-    type: isActive ? 'paragraph' : isList ? 'list-item' : format
-  });
-
-  if (!isActive && isList) {
-    var block = {
-      type: format,
-      children: []
-    };
-    Transforms.wrapNodes(editor, block);
-  }
-}
-
-function isBlockActive(editor, format) {
-  var _Editor$nodes = Editor.nodes(editor, {
-    match: function match(n) {
-      return n.type === format;
-    }
-  }),
-      _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
-      match = _Editor$nodes2[0];
-
-  return !!match;
-}
-
 function toolbarButtons(t) {
   return [{
     name: 'paragraph',
@@ -2217,19 +2350,126 @@ function measureHeights(editor, container) {
   }]);
 }
 
+var shy = "\xAD";
+function decorateCharacter(_ref, character, attributes, _ref2) {
+  var _ref3 = _slicedToArray(_ref, 2),
+      node = _ref3[0],
+      path = _ref3[1];
+
+  var length = _ref2.length;
+
+  if (Text.isText(node)) {
+    var parts = node.text.split(character);
+    parts.pop();
+    var i = 0;
+    return parts.map(function (part) {
+      i += part.length + 1;
+      return _objectSpread2({
+        anchor: {
+          path: path,
+          offset: i - 1
+        },
+        focus: {
+          path: path,
+          offset: i - 1 + length
+        }
+      }, attributes);
+    });
+  }
+
+  return [];
+}
+function deleteCharacter(editor, node, path, regExp) {
+  var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  var match = regExp.exec(node.text);
+
+  if (match) {
+    Transforms["delete"](editor, {
+      at: {
+        path: path,
+        offset: match.index + offset
+      },
+      distance: 1,
+      unit: 'character'
+    });
+    return true;
+  }
+
+  return false;
+}
+
+function useLineBreakHandler(editor) {
+  return useCallback(function (event) {
+    if (event.key !== 'Enter') {
+      return;
+    }
+
+    if (event.altKey === true) {
+      editor.insertText(shy);
+      event.preventDefault();
+    } else if (event.shiftKey === true) {
+      editor.insertText('\n');
+      event.preventDefault();
+    }
+  }, [editor]);
+}
+function decorateLineBreaks(nodeEntry) {
+  return decorateCharacter(nodeEntry, shy, {
+    shy: true
+  }, {
+    length: 1
+  });
+}
+function renderLeafWithLineBreakDecoration(_ref) {
+  var leaf = _ref.leaf,
+      children = _ref.children,
+      attributes = _ref.attributes;
+
+  if (leaf.shy) {
+    children = /*#__PURE__*/React.createElement("span", {
+      className: styles$7.shy
+    }, children);
+  }
+
+  return renderLeaf$1({
+    leaf: leaf,
+    children: children,
+    attributes: attributes
+  });
+}
+function withLineBreakNormalization(editor) {
+  var normalizeNode = editor.normalizeNode;
+
+  editor.normalizeNode = function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        node = _ref3[0],
+        path = _ref3[1];
+
+    if (node.text) {
+      if (deleteCharacter(editor, node, path, new RegExp("".concat(shy, "\\s"))) || deleteCharacter(editor, node, path, new RegExp("^".concat(shy))) || deleteCharacter(editor, node, path, new RegExp("\\s".concat(shy)), 1) || deleteCharacter(editor, node, path, new RegExp("".concat(shy).concat(shy)))) {
+        return;
+      }
+    }
+
+    return normalizeNode([node, path]);
+  };
+
+  return editor;
+}
+
 var EditableText = React.memo(function EditableText(_ref) {
   var value = _ref.value,
       contentElementId = _ref.contentElementId,
       placeholder = _ref.placeholder,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      selectionRect = _ref.selectionRect,
+      className = _ref.className;
   var editor = useMemo(function () {
-    return withLinks(withCustomInsertBreak(withReact(createEditor())));
-  }, []);
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      linkSelection = _useState2[0],
-      setLinkSelection = _useState2[1];
+    return withLinks(withCustomInsertBreak(withBlockNormalization({
+      onlyParagraphs: !selectionRect
+    }, withLineBreakNormalization(withReact(createEditor())))));
+  }, [selectionRect]);
+  var handleLineBreaks = useLineBreakHandler(editor);
 
   var _useCachedValue = useCachedValue(value, {
     defaultValue: [{
@@ -2247,15 +2487,16 @@ var EditableText = React.memo(function EditableText(_ref) {
       cachedValue = _useCachedValue2[0],
       setCachedValue = _useCachedValue2[1];
 
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected;
+
   useContentElementEditorCommandSubscription(function (command) {
     if (command.type === 'REMOVE') {
       Transforms.removeNodes(editor, {
         mode: 'highest'
       });
     } else if (command.type === 'TRANSIENT_STATE_UPDATE' && 'typographyVariant' in command.payload) {
-      Transforms.setNodes(editor, {
-        variant: command.payload.typographyVariant
-      });
+      applyTypograpyhVariant(editor, command.payload.typographyVariant);
     }
   });
 
@@ -2264,37 +2505,27 @@ var EditableText = React.memo(function EditableText(_ref) {
       dropTargetsActive = _useDropTargetsActive2[0],
       ref = _useDropTargetsActive2[1];
 
-  var decorate = useCallback(function (nodeEntry) {
-    return decorateLinkSelection(nodeEntry, linkSelection);
-  }, [linkSelection]); // Ensure Slate rerenders when decorations change
-  // https://github.com/ianstormtaylor/slate/issues/3447
-
-  var renderLeaf = useCallback(function (options) {
-    return renderLeafWithLinkSelection(options);
-  }, [linkSelection]); // eslint-disable-line react-hooks/exhaustive-deps
-
   return /*#__PURE__*/React.createElement(Text$1, {
     scaleCategory: "body"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.container,
+    className: classNames(styles$7.container, _defineProperty({}, styles$7.selected, isSelected)),
     ref: ref
   }, /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     value: cachedValue,
     onChange: setCachedValue
   }, /*#__PURE__*/React.createElement(LinkTooltipProvider, {
-    disabled: !!linkSelection
-  }, /*#__PURE__*/React.createElement(Selection, {
+    editor: editor
+  }, selectionRect && /*#__PURE__*/React.createElement(Selection, {
     contentElementId: contentElementId
   }), dropTargetsActive && /*#__PURE__*/React.createElement(DropTargets$1, {
     contentElementId: contentElementId
-  }), /*#__PURE__*/React.createElement(HoveringToolbar, {
-    linkSelection: linkSelection,
-    setLinkSelection: setLinkSelection
-  }), /*#__PURE__*/React.createElement(Editable, {
-    decorate: decorate,
+  }), /*#__PURE__*/React.createElement(HoveringToolbar, null), /*#__PURE__*/React.createElement(Editable, {
+    className: className,
+    decorate: decorateLineBreaks,
+    onKeyDown: handleLineBreaks,
     renderElement: renderElementWithLinkPreview,
-    renderLeaf: renderLeaf
+    renderLeaf: renderLeafWithLineBreakDecoration
   }))), /*#__PURE__*/React.createElement(TextPlaceholder, {
     text: placeholder,
     visible: isBlank(cachedValue)
@@ -2326,14 +2557,17 @@ function hasTextAtPoint(editor, point) {
   return Text.isText(node) && point.offset <= node.text.length;
 }
 
-var shy = "\xAD";
-function useLineBreakHandler(editor) {
+function useLineBreakHandler$1(editor) {
   return useCallback(function (event) {
     if (event.key !== 'Enter') {
       return true;
-    }
+    } // Soft hyphens used to be inserted with Shift + Enter.
+    // Since Shift + Enter is now used for soft breaks in text blocks,
+    // we switched to Alt + Enter. Since all line breaks in
+    // EdtiableInlineText are soft, we also keep the old short cut
+
 
-    if (event.shiftKey === true) {
+    if (event.shiftKey === true || event.altKey === true) {
       editor.insertText(shy);
     } else {
       editor.insertText('\n');
@@ -2342,7 +2576,7 @@ function useLineBreakHandler(editor) {
     return false;
   }, [editor]);
 }
-function decorateLineBreaks(nodeEntry) {
+function decorateLineBreaks$1(nodeEntry) {
   return [].concat(_toConsumableArray(decorateCharacter(nodeEntry, shy, {
     shy: true
   }, {
@@ -2353,43 +2587,13 @@ function decorateLineBreaks(nodeEntry) {
     length: 0
   })));
 }
-
-function decorateCharacter(_ref, character, attributes, _ref2) {
-  var _ref3 = _slicedToArray(_ref, 2),
-      node = _ref3[0],
-      path = _ref3[1];
-
-  var length = _ref2.length;
-
-  if (Text.isText(node)) {
-    var parts = node.text.split(character);
-    parts.pop();
-    var i = 0;
-    return parts.map(function (part) {
-      i += part.length + 1;
-      return _objectSpread2({
-        anchor: {
-          path: path,
-          offset: i - 1
-        },
-        focus: {
-          path: path,
-          offset: i - 1 + length
-        }
-      }, attributes);
-    });
-  }
-
-  return [];
-}
-
-function withLineBreakNormalization(editor) {
+function withLineBreakNormalization$1(editor) {
   var normalizeNode = editor.normalizeNode;
 
-  editor.normalizeNode = function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        node = _ref5[0],
-        path = _ref5[1];
+  editor.normalizeNode = function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        node = _ref2[0],
+        path = _ref2[1];
 
     if (path.length === 0 && editor.children.length > 1) {
       Transforms.mergeNodes(editor);
@@ -2406,25 +2610,6 @@ function withLineBreakNormalization(editor) {
   return editor;
 }
 
-function deleteCharacter(editor, node, path, regExp) {
-  var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  var match = regExp.exec(node.text);
-
-  if (match) {
-    Transforms["delete"](editor, {
-      at: {
-        path: path,
-        offset: match.index + offset
-      },
-      distance: 1,
-      unit: 'character'
-    });
-    return true;
-  }
-
-  return false;
-}
-
 var styles$9 = {"shy":"index-module_shy__1E2-J","newLine":"index-module_newLine__1QnIs","selected":"index-module_selected__1U9ro","manualHyphens":"index-module_manualHyphens__16b2t"};
 
 var EditableInlineText = memo(function EditableInlineText(_ref) {
@@ -2437,9 +2622,9 @@ var EditableInlineText = memo(function EditableInlineText(_ref) {
       placeholder = _ref.placeholder,
       onChange = _ref.onChange;
   var editor = useMemo(function () {
-    return withLineBreakNormalization(withReact(createEditor()));
+    return withLineBreakNormalization$1(withReact(createEditor()));
   }, []);
-  var handleLineBreaks = useLineBreakHandler(editor);
+  var handleLineBreaks = useLineBreakHandler$1(editor);
 
   var _useCachedValue = useCachedValue(value, {
     defaultValue: [{
@@ -2458,14 +2643,14 @@ var EditableInlineText = memo(function EditableInlineText(_ref) {
       isSelected = _useContentElementEdi.isSelected;
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(frontendStyles.root, _defineProperty({}, styles$9.manualHyphens, hyphens === 'manual'), _defineProperty({}, frontendStyles.manualHyphens, hyphens === 'manual'), _defineProperty({}, styles$9.selected, isSelected)),
+    className: classNames(frontendStyles.root, frontendStyles["hyphens-".concat(hyphens)], _defineProperty({}, styles$9.manualHyphens, hyphens === 'manual'), _defineProperty({}, styles$9.selected, isSelected)),
     spellCheck: "false"
   }, /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     value: cachedValue,
     onChange: setCachedValue
   }, /*#__PURE__*/React.createElement(Editable, {
-    decorate: decorateLineBreaks,
+    decorate: decorateLineBreaks$1,
     onKeyDown: handleLineBreaks,
     renderLeaf: renderLeaf
   })), /*#__PURE__*/React.createElement(TextPlaceholder, {