pageflow 15.5.0 → 15.7.0

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

@@ -1,12 +1,12 @@
 import React, { useMemo, useState, useCallback, useContext, useRef, useEffect, createContext, useLayoutEffect, memo } from 'react';
-import { _ as _slicedToArray, r as useEntryStateDispatch, a as _defineProperty, b as _objectWithoutProperties, u as useI18n, w as updateContentElementConfiguration, k as _objectSpread2, p as _toConsumableArray } from './i18n-4dc6c377.js';
-import classNames from 'classnames';
+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 'i18n-js';
 import 'use-context-selector';
 import 'reselect';
-import 'i18n-js';
 import 'slugify';
-import { C as ContentElementEditorCommandEmitterContext, d as usePostMessageListener, m as MotifAreaVisibilityProvider, n as ForcePaddingContext, o as ContentElementConfigurationUpdateContext, p as ContentElementEditorStateContext, f as api, i as useContentElementEditorState, q as LayoutWithoutInlineEditing, r as renderElement, s as renderLeaf, h as useContentElementEditorCommandSubscription, T as Text$1, P as PhonePlatformContext } from './EditableText-7093fd0e.js';
-import './getPrototypeOf-63c7c8e8.js';
+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 { DndProvider, useDrop, useDrag } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -37,12 +37,9 @@ function EditorStateProvider(props) {
       setSelection: setSelection
     };
   }, [setSelection, selection]);
-  return (
-    /*#__PURE__*/
-    React.createElement(Context.Provider, {
-      value: value
-    }, props.children)
-  );
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: value
+  }, props.children);
 }
 function useEditorSelection(options) {
   var _useContext = useContext(Context),
@@ -57,6 +54,7 @@ function useEditorSelection(options) {
   }, [setSelection, options]);
   return useMemo(function () {
     return setSelection ? {
+      range: selection === null || selection === void 0 ? void 0 : selection.range,
       isSelected: selection && options && selection.id === options.id && selection.type === options.type,
       select: select,
       resetSelection: resetSelection
@@ -72,12 +70,9 @@ function useContentElementEditorCommandEmitter() {
 function ContentElementEditorCommandSubscriptionProvider(_ref) {
   var emitter = _ref.emitter,
       children = _ref.children;
-  return (
-    /*#__PURE__*/
-    React.createElement(ContentElementEditorCommandEmitterContext.Provider, {
-      value: emitter
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement(ContentElementEditorCommandEmitterContext.Provider, {
+    value: emitter
+  }, children);
 }
 
 // the editor phone preview. Each ContentElementDecorator renders a
@@ -157,26 +152,15 @@ function restoreScrollPoint(name) {
   }
 }
 
-function EntryDecorator(props) {
+function ContentDecorator(props) {
   var contentElementEditorCommandEmitter = useContentElementEditorCommandEmitter();
-  return (
-    /*#__PURE__*/
-    React.createElement(EditorStateProvider, null,
-    /*#__PURE__*/
-    React.createElement(MessageHandler, {
-      contentElementEditorCommandEmitter: contentElementEditorCommandEmitter
-    }),
-    /*#__PURE__*/
-    React.createElement(ScrollPointMessageHandler, null),
-    /*#__PURE__*/
-    React.createElement(ContentElementEditorCommandSubscriptionProvider, {
-      emitter: contentElementEditorCommandEmitter
-    },
-    /*#__PURE__*/
-    React.createElement(DndProvider, {
-      backend: HTML5Backend
-    }, props.children)))
-  );
+  return /*#__PURE__*/React.createElement(EditorStateProvider, null, /*#__PURE__*/React.createElement(MessageHandler, {
+    contentElementEditorCommandEmitter: contentElementEditorCommandEmitter
+  }), /*#__PURE__*/React.createElement(ScrollPointMessageHandler, null), /*#__PURE__*/React.createElement(ContentElementEditorCommandSubscriptionProvider, {
+    emitter: contentElementEditorCommandEmitter
+  }, /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, props.children)));
 }
 
 function MessageHandler(_ref) {
@@ -217,33 +201,25 @@ function Toolbar(_ref) {
       onButtonClick = _ref.onButtonClick,
       iconSize = _ref.iconSize,
       collapsible = _ref.collapsible;
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$2.Toolbar, _defineProperty({}, styles$2.collapsible, collapsible)),
-      contentEditable: false
-    }, buttons.map(function (button) {
-      var Icon = button.icon;
-      return (
-        /*#__PURE__*/
-        React.createElement("button", {
-          key: button.name,
-          title: button.text,
-          className: classNames(styles$2.button, _defineProperty({}, styles$2.activeButton, button.active)),
-          onMouseDown: function onMouseDown(event) {
-            event.preventDefault();
-            event.stopPropagation();
-            onButtonClick(button.name);
-          }
-        },
-        /*#__PURE__*/
-        React.createElement(Icon, {
-          width: iconSize,
-          height: iconSize
-        }))
-      );
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$2.Toolbar, _defineProperty({}, styles$2.collapsible, collapsible)),
+    contentEditable: false
+  }, buttons.map(function (button) {
+    var Icon = button.icon;
+    return /*#__PURE__*/React.createElement("button", {
+      key: button.name,
+      title: button.text,
+      className: classNames(styles$2.button, _defineProperty({}, styles$2.activeButton, button.active)),
+      onMouseDown: function onMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        onButtonClick(button.name);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      width: iconSize,
+      height: iconSize
+    }));
+  }));
 }
 Toolbar.defaultProps = {
   iconSize: 15
@@ -271,27 +247,31 @@ var transitionIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "random",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-random"] || "fa-random") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 01-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 00122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 00-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z"
   }));
 });
 
-function SectionDecorator(props) {
+function SectionDecorator(_ref) {
+  var section = _ref.section,
+      contentElements = _ref.contentElements,
+      children = _ref.children;
+
   var _useI18n = useI18n({
     locale: 'ui'
   }),
       t = _useI18n.t;
 
   var _useEditorSelection = useEditorSelection({
-    id: props.id,
+    id: section.id,
     type: 'sectionSettings'
   }),
       isSelected = _useEditorSelection.isSelected,
@@ -299,14 +279,14 @@ function SectionDecorator(props) {
       resetSelection = _useEditorSelection.resetSelection;
 
   var transitionSelection = useEditorSelection({
-    id: props.id,
+    id: section.id,
     type: 'sectionTransition'
   });
   var nextTransitionSelection = useEditorSelection({
-    id: props.nextSection && props.nextSection.id,
+    id: section.nextSection && section.nextSection.id,
     type: 'sectionTransition'
   });
-  var lastContentElement = props.contentElements[props.contentElements.length - 1];
+  var lastContentElement = contentElements[contentElements.length - 1];
 
   var _useEditorSelection2 = useEditorSelection({
     id: lastContentElement && lastContentElement.id,
@@ -320,34 +300,25 @@ function SectionDecorator(props) {
     }
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      "aria-label": t('pageflow_scrolled.inline_editing.select_section'),
-      className: className(isSelected, transitionSelection),
-      onMouseDown: selectIfOutsideContentItem
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles.controls
-    }, renderEditTransitionButton({
-      id: props.previousSection && props.id,
-      selection: transitionSelection,
-      position: 'before'
-    }), renderEditTransitionButton({
-      id: props.nextSection && props.nextSection.id,
-      selection: nextTransitionSelection,
-      position: 'after'
-    })),
-    /*#__PURE__*/
-    React.createElement(MotifAreaVisibilityProvider, {
-      visible: isSelected
-    },
-    /*#__PURE__*/
-    React.createElement(ForcePaddingContext.Provider, {
-      value: isLastContentElementSelected || isSelected
-    }, props.children)))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-label": t('pageflow_scrolled.inline_editing.select_section'),
+    className: className(isSelected, transitionSelection),
+    onMouseDown: selectIfOutsideContentItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.controls
+  }, renderEditTransitionButton({
+    id: section.previousSection && section.id,
+    selection: transitionSelection,
+    position: 'before'
+  }), renderEditTransitionButton({
+    id: section.nextSection && section.nextSection.id,
+    selection: nextTransitionSelection,
+    position: 'after'
+  })), /*#__PURE__*/React.createElement(MotifAreaVisibilityProvider, {
+    visible: isSelected
+  }, /*#__PURE__*/React.createElement(ForcePaddingContext.Provider, {
+    value: isLastContentElementSelected || isSelected
+  }, children)));
 }
 
 function className(isSectionSelected, transitionSelection) {
@@ -356,70 +327,59 @@ function className(isSectionSelected, transitionSelection) {
   return classNames(styles.wrapper, (_classNames = {}, _defineProperty(_classNames, styles.selected, isSectionSelected), _defineProperty(_classNames, styles.transitionSelected, transitionSelection.isSelected), _classNames));
 }
 
-function renderEditTransitionButton(_ref) {
-  var id = _ref.id,
-      position = _ref.position,
-      selection = _ref.selection;
+function renderEditTransitionButton(_ref2) {
+  var id = _ref2.id,
+      position = _ref2.position,
+      selection = _ref2.selection;
 
   if (!id) {
     return null;
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles["transitionToolbar-".concat(position)]
-    },
-    /*#__PURE__*/
-    React.createElement(EditTransitionButton, {
-      id: id,
-      selection: selection,
-      position: position
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles["transitionToolbar-".concat(position)]
+  }, /*#__PURE__*/React.createElement(EditTransitionButton, {
+    id: id,
+    selection: selection,
+    position: position
+  }));
 }
 
-function EditTransitionButton(_ref2) {
-  var id = _ref2.id,
-      position = _ref2.position,
-      selection = _ref2.selection;
+function EditTransitionButton(_ref3) {
+  var id = _ref3.id,
+      position = _ref3.position,
+      selection = _ref3.selection;
 
   var _useI18n2 = useI18n({
     locale: 'ui'
   }),
       t = _useI18n2.t;
 
-  return (
-    /*#__PURE__*/
-    React.createElement(EditSectionButton, {
-      id: id,
-      selection: selection,
-      text: t("pageflow_scrolled.inline_editing.edit_section_transition_".concat(position)),
-      icon: transitionIcon
-    })
-  );
+  return /*#__PURE__*/React.createElement(EditSectionButton, {
+    id: id,
+    selection: selection,
+    text: t("pageflow_scrolled.inline_editing.edit_section_transition_".concat(position)),
+    icon: transitionIcon
+  });
 }
 
-function EditSectionButton(_ref3) {
-  var id = _ref3.id,
-      selection = _ref3.selection,
-      icon = _ref3.icon,
-      text = _ref3.text;
-  return (
-    /*#__PURE__*/
-    React.createElement(Toolbar, {
-      buttons: [{
-        name: 'button',
-        active: selection.isSelected,
-        icon: icon,
-        text: text
-      }],
-      iconSize: 20,
-      onButtonClick: function onButtonClick() {
-        return selection.select();
-      }
-    })
-  );
+function EditSectionButton(_ref4) {
+  var id = _ref4.id,
+      selection = _ref4.selection,
+      icon = _ref4.icon,
+      text = _ref4.text;
+  return /*#__PURE__*/React.createElement(Toolbar, {
+    buttons: [{
+      name: 'button',
+      active: selection.isSelected,
+      icon: icon,
+      text: text
+    }],
+    iconSize: 20,
+    onButtonClick: function onButtonClick() {
+      return selection.select();
+    }
+  });
 }
 
 var styles$3 = {"selectionWidth":"1px","selectionPadding":"-6px","selectionPadding2":"-0.5em","main":"SelectionRect-module_main__3AOhG","draggable":"SelectionRect-module_draggable__3Qp53","full":"SelectionRect-module_full__3tsQF","selected":"SelectionRect-module_selected__1PhM6","toolbar":"SelectionRect-module_toolbar__3nPrd","insert":"SelectionRect-module_insert__w0Tl0","insertHovered":"SelectionRect-module_insertHovered__VTsDD","start":"SelectionRect-module_start__3_nAf","insert-before":"SelectionRect-module_insert-before__2Tyq5 SelectionRect-module_insert__w0Tl0","end":"SelectionRect-module_end__3qOoK","insert-after":"SelectionRect-module_insert-after__3FJ4R SelectionRect-module_insert__w0Tl0","insertButton":"SelectionRect-module_insertButton__1g-ZG","dragHandle":"SelectionRect-module_dragHandle__2vVhP"};
@@ -445,10 +405,10 @@ var PlusIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     d: "M256 0C114.844 0 0 114.839 0 256s114.844 256 256 256 256-114.839 256-256S397.156 0 256 0zm133.594 272.699H272.699v116.895c0 9.225-7.48 16.699-16.699 16.699-9.219 0-16.699-7.475-16.699-16.699V272.699H122.406c-9.219 0-16.699-7.475-16.699-16.699 0-9.225 7.48-16.699 16.699-16.699h116.895V122.406c0-9.225 7.48-16.699 16.699-16.699 9.219 0 16.699 7.475 16.699 16.699v116.895h116.895c9.219 0 16.699 7.475 16.699 16.699.001 9.225-7.48 16.699-16.699 16.699z"
   }));
 });
@@ -475,14 +435,14 @@ var MoveIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "arrows-alt",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-arrows-alt"] || "fa-arrows-alt") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M352.201 425.775l-79.196 79.196c-9.373 9.373-24.568 9.373-33.941 0l-79.196-79.196c-15.119-15.119-4.411-40.971 16.971-40.97h51.162L228 284H127.196v51.162c0 21.382-25.851 32.09-40.971 16.971L7.029 272.937c-9.373-9.373-9.373-24.569 0-33.941L86.225 159.8c15.119-15.119 40.971-4.411 40.971 16.971V228H228V127.196h-51.23c-21.382 0-32.09-25.851-16.971-40.971l79.196-79.196c9.373-9.373 24.568-9.373 33.941 0l79.196 79.196c15.119 15.119 4.411 40.971-16.971 40.971h-51.162V228h100.804v-51.162c0-21.382 25.851-32.09 40.97-16.971l79.196 79.196c9.373 9.373 9.373 24.569 0 33.941L425.773 352.2c-15.119 15.119-40.971 4.411-40.97-16.971V284H284v100.804h51.23c21.382 0 32.09 25.851 16.971 40.971z"
   }));
@@ -491,23 +451,16 @@ var MoveIcon = (function (_ref) {
 function SelectionRect(props) {
   var _classNames;
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$3.main, (_classNames = {}, _defineProperty(_classNames, styles$3.full, props.full), _defineProperty(_classNames, styles$3.selected, props.selected), _defineProperty(_classNames, styles$3.draggable, props.drag), _defineProperty(_classNames, styles$3.start, props.selected && props.start), _defineProperty(_classNames, styles$3.end, props.selected && props.end), _classNames)),
-      "aria-label": props.ariaLabel,
-      "data-scrollpoint": props.scrollPoint ? 'selection' : undefined,
-      onClick: props.onClick
-    }, renderDragHandle(props), renderToolbar(props),
-    /*#__PURE__*/
-    React.createElement(InsertButton, Object.assign({}, props, {
-      at: "before"
-    })), props.children,
-    /*#__PURE__*/
-    React.createElement(InsertButton, Object.assign({}, props, {
-      at: "after"
-    })))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$3.main, (_classNames = {}, _defineProperty(_classNames, styles$3.full, props.full), _defineProperty(_classNames, styles$3.selected, props.selected), _defineProperty(_classNames, styles$3.draggable, props.drag), _defineProperty(_classNames, styles$3.start, props.selected && props.start), _defineProperty(_classNames, styles$3.end, props.selected && props.end), _classNames)),
+    "aria-label": props.ariaLabel,
+    "data-scrollpoint": props.scrollPoint ? 'selection' : undefined,
+    onClick: props.onClick
+  }, renderDragHandle(props), renderToolbar(props), /*#__PURE__*/React.createElement(InsertButton, Object.assign({}, props, {
+    at: "before"
+  })), props.children, /*#__PURE__*/React.createElement(InsertButton, Object.assign({}, props, {
+    at: "after"
+  })));
 }
 
 function InsertButton(props) {
@@ -516,33 +469,26 @@ function InsertButton(props) {
       insertHovered = _useState2[0],
       setInsertHovered = _useState2[1];
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$3["insert-".concat(props.at)], _defineProperty({}, styles$3.insertHovered, insertHovered)),
-      contentEditable: false
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$3["insert-".concat(props.at)], _defineProperty({}, styles$3.insertHovered, insertHovered)),
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("button", {
+    className: styles$3.insertButton,
+    title: props.insertButtonTitles && props.insertButtonTitles[props.at],
+    onClick: function onClick() {
+      return props.onInsertButtonClick(props.at);
     },
-    /*#__PURE__*/
-    React.createElement("button", {
-      className: styles$3.insertButton,
-      title: props.insertButtonTitles && props.insertButtonTitles[props.at],
-      onClick: function onClick() {
-        return props.onInsertButtonClick(props.at);
-      },
-      onMouseEnter: function onMouseEnter() {
-        return setInsertHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setInsertHovered(false);
-      }
+    onMouseEnter: function onMouseEnter() {
+      return setInsertHovered(true);
     },
-    /*#__PURE__*/
-    React.createElement(PlusIcon, {
-      width: 15,
-      height: 15,
-      fill: "currentColor"
-    })))
-  );
+    onMouseLeave: function onMouseLeave() {
+      return setInsertHovered(false);
+    }
+  }, /*#__PURE__*/React.createElement(PlusIcon, {
+    width: 15,
+    height: 15,
+    fill: "currentColor"
+  })));
 }
 
 function renderDragHandle(_ref) {
@@ -553,16 +499,11 @@ function renderDragHandle(_ref) {
     return null;
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: drag,
-      className: styles$3.dragHandle,
-      title: dragHandleTitle
-    },
-    /*#__PURE__*/
-    React.createElement(MoveIcon, null))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: drag,
+    className: styles$3.dragHandle,
+    title: dragHandleTitle
+  }, /*#__PURE__*/React.createElement(MoveIcon, null));
 }
 
 function renderToolbar(_ref2) {
@@ -571,18 +512,13 @@ function renderToolbar(_ref2) {
       start = _ref2.start;
 
   if (toolbarButtons && start) {
-    return (
-      /*#__PURE__*/
-      React.createElement("div", {
-        className: styles$3.toolbar
-      },
-      /*#__PURE__*/
-      React.createElement(Toolbar, {
-        buttons: toolbarButtons,
-        collapsible: true,
-        onButtonClick: onToolbarButtonClick
-      }))
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$3.toolbar
+    }, /*#__PURE__*/React.createElement(Toolbar, {
+      buttons: toolbarButtons,
+      collapsible: true,
+      onButtonClick: onToolbarButtonClick
+    }));
   }
 }
 
@@ -615,7 +551,8 @@ function DropTargets(_ref) {
     drop: function drop(item) {
       return onDrop({
         at: 'before',
-        id: item.id
+        id: item.id,
+        range: item.range
       });
     }
   }),
@@ -642,7 +579,8 @@ function DropTargets(_ref) {
     drop: function drop(item) {
       return onDrop({
         at: 'after',
-        id: item.id
+        id: item.id,
+        range: item.range
       });
     }
   }),
@@ -652,23 +590,16 @@ function DropTargets(_ref) {
       isAfter = _useDrop4$.isAfter,
       dropAfter = _useDrop4[1];
 
-  return (
-    /*#__PURE__*/
-    React.createElement(React.Fragment, null, canDropBefore &&
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: dropBefore,
-      "data-testid": "drop-before",
-      className: classNames(styles$4.before, _defineProperty({}, styles$4.isOver, isBefore))
-    }), canDropAfter &&
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: dropAfter,
-      "data-testid": "drop-after",
-      title: "bar",
-      className: classNames(styles$4.after, _defineProperty({}, styles$4.isOver, isAfter))
-    }))
-  );
+  return /*#__PURE__*/React.createElement(React.Fragment, null, canDropBefore && /*#__PURE__*/React.createElement("div", {
+    ref: dropBefore,
+    "data-testid": "drop-before",
+    className: classNames(styles$4.before, _defineProperty({}, styles$4.isOver, isBefore))
+  }), canDropAfter && /*#__PURE__*/React.createElement("div", {
+    ref: dropAfter,
+    "data-testid": "drop-after",
+    title: "bar",
+    className: classNames(styles$4.after, _defineProperty({}, styles$4.isOver, isAfter))
+  }));
 }
 
 function postInsertContentElementMessage(_ref) {
@@ -686,11 +617,13 @@ function postInsertContentElementMessage(_ref) {
 }
 function postMoveContentElementMessage(_ref2) {
   var id = _ref2.id,
+      range = _ref2.range,
       to = _ref2.to;
   window.parent.postMessage({
     type: 'MOVE_CONTENT_ELEMENT',
     payload: {
       id: id,
+      range: range,
       to: to
     }
   }, window.location.origin);
@@ -734,12 +667,9 @@ function ContentElementConfigurationUpdateProvider(_ref) {
       configuration: configuration
     });
   }, [dispatch, permaId, id]);
-  return (
-    /*#__PURE__*/
-    React.createElement(ContentElementConfigurationUpdateContext.Provider, {
-      value: update
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement(ContentElementConfigurationUpdateContext.Provider, {
+    value: update
+  }, children);
 }
 
 function ContentElementEditorStateProvider(_ref) {
@@ -751,7 +681,8 @@ function ContentElementEditorStateProvider(_ref) {
     type: 'contentElement'
   }),
       isSelected = _useEditorSelection.isSelected,
-      select = _useEditorSelection.select;
+      select = _useEditorSelection.select,
+      range = _useEditorSelection.range;
 
   var previousTransientState = useRef({});
   var setTransientState = useCallback(function (state) {
@@ -768,15 +699,13 @@ function ContentElementEditorStateProvider(_ref) {
       isEditable: true,
       select: select,
       isSelected: isSelected,
+      range: range,
       setTransientState: setTransientState
     };
-  }, [select, isSelected, setTransientState]);
-  return (
-    /*#__PURE__*/
-    React.createElement(ContentElementEditorStateContext.Provider, {
-      value: value
-    }, children)
-  );
+  }, [select, isSelected, range, setTransientState]);
+  return /*#__PURE__*/React.createElement(ContentElementEditorStateContext.Provider, {
+    value: value
+  }, children);
 }
 
 function shallowEqual(obj1, obj2) {
@@ -786,24 +715,15 @@ function shallowEqual(obj1, obj2) {
 }
 
 function ContentElementDecorator(props) {
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$1.wrapper,
-      "data-scrollpoint": props.id
-    },
-    /*#__PURE__*/
-    React.createElement(ContentElementEditorStateProvider, {
-      id: props.id
-    },
-    /*#__PURE__*/
-    React.createElement(OptionalSelectionRect, props,
-    /*#__PURE__*/
-    React.createElement(ContentElementConfigurationUpdateProvider, {
-      id: props.id,
-      permaId: props.permaId
-    }, props.children))))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$1.wrapper,
+    "data-scrollpoint": props.id
+  }, /*#__PURE__*/React.createElement(ContentElementEditorStateProvider, {
+    id: props.id
+  }, /*#__PURE__*/React.createElement(OptionalSelectionRect, props, /*#__PURE__*/React.createElement(ContentElementConfigurationUpdateProvider, {
+    id: props.id,
+    permaId: props.permaId
+  }, props.children))));
 }
 
 function OptionalSelectionRect(props) {
@@ -813,10 +733,7 @@ function OptionalSelectionRect(props) {
   if (customSelectionRect) {
     return props.children;
   } else {
-    return (
-      /*#__PURE__*/
-      React.createElement(DefaultSelectionRect, props, props.children)
-    );
+    return /*#__PURE__*/React.createElement(DefaultSelectionRect, props, props.children);
   }
 }
 
@@ -840,50 +757,45 @@ function DefaultSelectionRect(props) {
       drag = _useDrag2[1],
       preview = _useDrag2[2];
 
-  return (
-    /*#__PURE__*/
-    React.createElement(SelectionRect, {
-      selected: isSelected,
-      scrollPoint: isSelected,
-      drag: drag,
-      dragHandleTitle: t('pageflow_scrolled.inline_editing.drag_content_element'),
-      full: props.position === 'full',
-      ariaLabel: t('pageflow_scrolled.inline_editing.select_content_element'),
-      insertButtonTitles: t('pageflow_scrolled.inline_editing.insert_content_element'),
-      onClick: function onClick() {
-        return select();
-      },
-      onInsertButtonClick: function onInsertButtonClick(at) {
-        return postInsertContentElementMessage({
+  return /*#__PURE__*/React.createElement(SelectionRect, {
+    selected: isSelected,
+    scrollPoint: isSelected,
+    drag: drag,
+    dragHandleTitle: t('pageflow_scrolled.inline_editing.drag_content_element'),
+    full: props.position === 'full',
+    ariaLabel: t('pageflow_scrolled.inline_editing.select_content_element'),
+    insertButtonTitles: t('pageflow_scrolled.inline_editing.insert_content_element'),
+    onClick: function onClick() {
+      return select();
+    },
+    onInsertButtonClick: function onInsertButtonClick(at) {
+      return postInsertContentElementMessage({
+        id: props.id,
+        at: at
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: preview
+  }, props.children), /*#__PURE__*/React.createElement(DropTargets, {
+    accept: "contentElement",
+    canDrop: function canDrop(_ref2) {
+      var id = _ref2.id;
+      return id !== props.id;
+    },
+    onDrop: function onDrop(_ref3) {
+      var id = _ref3.id,
+          range = _ref3.range,
+          at = _ref3.at;
+      return postMoveContentElementMessage({
+        id: id,
+        range: range,
+        to: {
           id: props.id,
           at: at
-        });
-      }
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: preview
-    }, props.children),
-    /*#__PURE__*/
-    React.createElement(DropTargets, {
-      accept: "contentElement",
-      canDrop: function canDrop(_ref2) {
-        var id = _ref2.id;
-        return id !== props.id;
-      },
-      onDrop: function onDrop(_ref3) {
-        var id = _ref3.id,
-            at = _ref3.at;
-        return postMoveContentElementMessage({
-          id: id,
-          to: {
-            id: props.id,
-            at: at
-          }
-        });
-      }
-    }))
-  );
+        }
+      });
+    }
+  }));
 }
 
 var styles$5 = {"container":"ContentElementInsertButton-module_container__3dvUS","hovered":"ContentElementInsertButton-module_hovered__3Pggi","button":"ContentElementInsertButton-module_button__2-eE2"};
@@ -901,33 +813,26 @@ function ContentElementInsertButton(_ref) {
   }),
       t = _useI18n.t;
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$5.container, _defineProperty({}, styles$5.hovered, hovered))
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$5.container, _defineProperty({}, styles$5.hovered, hovered))
+  }, /*#__PURE__*/React.createElement("button", {
+    className: styles$5.button,
+    title: t('pageflow_scrolled.inline_editing.add_content_element'),
+    onClick: onClick,
+    onMouseDown: function onMouseDown(event) {
+      return event.stopPropagation();
     },
-    /*#__PURE__*/
-    React.createElement("button", {
-      className: styles$5.button,
-      title: t('pageflow_scrolled.inline_editing.add_content_element'),
-      onClick: onClick,
-      onMouseDown: function onMouseDown(event) {
-        return event.stopPropagation();
-      },
-      onMouseEnter: function onMouseEnter() {
-        return setHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setHovered(false);
-      }
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
     },
-    /*#__PURE__*/
-    React.createElement(PlusIcon, {
-      width: 15,
-      height: 15,
-      fill: "currentColor"
-    })))
-  );
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    }
+  }, /*#__PURE__*/React.createElement(PlusIcon, {
+    width: 15,
+    height: 15,
+    fill: "currentColor"
+  })));
 }
 
 function LayoutWithPlaceholder(props) {
@@ -943,9 +848,7 @@ function LayoutWithPlaceholder(props) {
   }),
       settingsSelected = _useEditorSelection2.isSelected;
 
-  var placeholder = isSelected || settingsSelected ?
-  /*#__PURE__*/
-  React.createElement(ContentElementInsertButton, {
+  var placeholder = isSelected || settingsSelected ? /*#__PURE__*/React.createElement(ContentElementInsertButton, {
     onClick: function onClick() {
       return postInsertContentElementMessage({
         at: 'endOfSection',
@@ -953,12 +856,9 @@ function LayoutWithPlaceholder(props) {
       });
     }
   }) : null;
-  return (
-    /*#__PURE__*/
-    React.createElement(LayoutWithoutInlineEditing, Object.assign({}, props, {
-      placeholder: placeholder
-    }))
-  );
+  return /*#__PURE__*/React.createElement(LayoutWithoutInlineEditing, Object.assign({}, props, {
+    placeholder: placeholder
+  }));
 }
 
 function useCachedValue(value) {
@@ -1028,14 +928,9 @@ function TextPlaceholder(_ref) {
     return null;
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$6.placeholder
-    },
-    /*#__PURE__*/
-    React.createElement("div", null, text))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$6.placeholder
+  }, /*#__PURE__*/React.createElement("div", null, text));
 }
 
 function withCustomInsertBreak(editor) {
@@ -1098,14 +993,14 @@ var ExternalLinkIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "external-link-alt",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-external-link-alt"] || "fa-external-link-alt") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M432 320h-32a16 16 0 00-16 16v112H64V128h144a16 16 0 0016-16V80a16 16 0 00-16-16H48a48 48 0 00-48 48v352a48 48 0 0048 48h352a48 48 0 0048-48V336a16 16 0 00-16-16zM488 0H360c-21.37 0-32.05 25.91-17 41l35.73 35.73L135 320.37a24 24 0 000 34L157.67 377a24 24 0 0034 0l243.61-243.68L471 169c15 15 41 4.5 41-17V24a24 24 0 00-24-24z"
   }));
@@ -1152,26 +1047,15 @@ function LinkTooltipProvider(_ref) {
       }
     };
   }, []);
-  return (
-    /*#__PURE__*/
-    React.createElement(DisabledContext.Provider, {
-      value: disabled
-    },
-    /*#__PURE__*/
-    React.createElement(StateContext.Provider, {
-      value: state
-    },
-    /*#__PURE__*/
-    React.createElement(UpdateContext.Provider, {
-      value: update
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: outerRef
-    },
-    /*#__PURE__*/
-    React.createElement(LinkTooltip, null), children))))
-  );
+  return /*#__PURE__*/React.createElement(DisabledContext.Provider, {
+    value: disabled
+  }, /*#__PURE__*/React.createElement(StateContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React.createElement(UpdateContext.Provider, {
+    value: update
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: outerRef
+  }, /*#__PURE__*/React.createElement(LinkTooltip, null), children))));
 }
 function LinkPreview(_ref2) {
   var href = _ref2.href,
@@ -1182,17 +1066,14 @@ function LinkPreview(_ref2) {
       deactivate = _useContext.deactivate;
 
   var ref = useRef();
-  return (
-    /*#__PURE__*/
-    React.createElement("span", {
-      ref: ref,
-      onMouseEnter: function onMouseEnter() {
-        return activate(href, ref);
-      },
-      onMouseLeave: deactivate,
-      onMouseDown: deactivate
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    onMouseEnter: function onMouseEnter() {
+      return activate(href, ref);
+    },
+    onMouseLeave: deactivate,
+    onMouseDown: deactivate
+  }, children);
 }
 function LinkTooltip() {
   var disabled = useContext(DisabledContext);
@@ -1208,30 +1089,23 @@ function LinkTooltip() {
     return null;
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$7.linkTooltip, styles$7.hoveringToolbar),
-      onMouseEnter: keep,
-      onMouseLeave: deactivate,
-      style: {
-        top: state.top,
-        left: state.left,
-        opacity: 1
-      }
-    },
-    /*#__PURE__*/
-    React.createElement("a", {
-      href: state.href,
-      target: "_blank",
-      rel: "noopener noreferrer"
-    }, state.href,
-    /*#__PURE__*/
-    React.createElement(ExternalLinkIcon, {
-      width: 10,
-      height: 10
-    })))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$7.linkTooltip, styles$7.hoveringToolbar),
+    onMouseEnter: keep,
+    onMouseLeave: deactivate,
+    style: {
+      top: state.top,
+      left: state.left,
+      opacity: 1
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: state.href,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, state.href, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
+    width: 10,
+    height: 10
+  })));
 }
 
 function withLinks(editor) {
@@ -1245,29 +1119,23 @@ function withLinks(editor) {
 }
 function renderElementWithLinkPreview(options) {
   if (options.element.type === 'link') {
-    return (
-      /*#__PURE__*/
-      React.createElement(LinkPreview, {
-        href: options.element.href
-      }, renderElement(options))
-    );
+    return /*#__PURE__*/React.createElement(LinkPreview, {
+      href: options.element.href
+    }, 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(options))
-    );
+    return /*#__PURE__*/React.createElement("span", Object.assign({}, options.attributes, {
+      style: {
+        backgroundColor: '#aaa'
+      }
+    }), renderLeaf$1(options));
   }
 
-  return renderLeaf(options);
+  return renderLeaf$1(options);
 }
 function decorateLinkSelection(_ref, linkSelection) {
   var _ref2 = _slicedToArray(_ref, 2),
@@ -1360,14 +1228,14 @@ var CancelIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$4({
+  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), React.createElement("path", {
+  }, 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"
   }));
@@ -1411,37 +1279,28 @@ function LinkInput(_ref) {
     }
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$7.linkTooltip
+  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);
     },
-    /*#__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')
+    onKeyDown: handleKey
+  }), /*#__PURE__*/React.createElement("button", {
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
     },
-    /*#__PURE__*/
-    React.createElement(CancelIcon, {
-      width: 10,
-      height: 10
-    })))
-  );
+    onClick: onCancel,
+    title: t('pageflow_scrolled.inline_editing.cancel')
+  }, /*#__PURE__*/React.createElement(CancelIcon, {
+    width: 10,
+    height: 10
+  })));
 }
 
 function _extends$5() {
@@ -1466,14 +1325,14 @@ var BoldIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "bold",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-bold"] || "fa-bold") + " " + (styles["fa-w-12"] || "fa-w-12"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 384 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M333.49 238a122 122 0 0027-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 00-16 16v48a16 16 0 0016 16h31.87v288H34a16 16 0 00-16 16v48a16 16 0 0016 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 010 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 010 112z"
   }));
@@ -1501,14 +1360,14 @@ var UnderlineIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "underline",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-underline"] || "fa-underline") + " " + (styles["fa-w-14"] || "fa-w-14"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 448 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M32 64h32v160c0 88.22 71.78 160 160 160s160-71.78 160-160V64h32a16 16 0 0016-16V16a16 16 0 00-16-16H272a16 16 0 00-16 16v32a16 16 0 0016 16h32v160a80 80 0 01-160 0V64h32a16 16 0 0016-16V16a16 16 0 00-16-16H32a16 16 0 00-16 16v32a16 16 0 0016 16zm400 384H16a16 16 0 00-16 16v32a16 16 0 0016 16h416a16 16 0 0016-16v-32a16 16 0 00-16-16z"
   }));
@@ -1536,14 +1395,14 @@ var ItalicIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "italic",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-italic"] || "fa-italic") + " " + (styles["fa-w-10"] || "fa-w-10"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 320 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M320 48v32a16 16 0 01-16 16h-62.76l-80 320H208a16 16 0 0116 16v32a16 16 0 01-16 16H16a16 16 0 01-16-16v-32a16 16 0 0116-16h62.76l80-320H112a16 16 0 01-16-16V48a16 16 0 0116-16h192a16 16 0 0116 16z"
   }));
@@ -1571,14 +1430,14 @@ var StrikethroughIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "strikethrough",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-strikethrough"] || "fa-strikethrough") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M496 224H293.9l-87.17-26.83A43.55 43.55 0 01219.55 112h66.79A49.89 49.89 0 01331 139.58a16 16 0 0021.46 7.15l42.94-21.47a16 16 0 007.16-21.46l-.53-1A128 128 0 00287.51 32h-68a123.68 123.68 0 00-123 135.64c2 20.89 10.1 39.83 21.78 56.36H16a16 16 0 00-16 16v32a16 16 0 0016 16h480a16 16 0 0016-16v-32a16 16 0 00-16-16zm-180.24 96A43 43 0 01336 356.45 43.59 43.59 0 01292.45 400h-66.79A49.89 49.89 0 01181 372.42a16 16 0 00-21.46-7.15l-42.94 21.47a16 16 0 00-7.16 21.46l.53 1A128 128 0 00224.49 480h68a123.68 123.68 0 00123-135.64 114.25 114.25 0 00-5.34-24.36z"
   }));
@@ -1606,14 +1465,14 @@ var LinkIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "link",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-link"] || "fa-link") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 01-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0120.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0020.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 00-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
   }));
@@ -1651,17 +1510,12 @@ function HoveringToolbar(_ref) {
     el.style.top = "".concat(rect.bottom - outerRect.top + 10, "px");
     el.style.left = "".concat(rect.left - outerRect.left, "px");
   });
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: outerRef
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: ref,
-      className: styles$7.hoveringToolbar
-    }, !linkSelection && renderToolbar$1(editor, setLinkSelection, t), linkSelection && renderLinkInput(editor, linkSelection, setLinkSelection)))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: outerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: styles$7.hoveringToolbar
+  }, !linkSelection && renderToolbar$1(editor, setLinkSelection, t), linkSelection && renderLinkInput(editor, linkSelection, setLinkSelection)));
 }
 
 function renderToolbar$1(editor, setLinkSelection, t) {
@@ -1690,15 +1544,12 @@ function renderToolbar$1(editor, setLinkSelection, t) {
       active: isButtonActive(editor, button.name)
     });
   });
-  return (
-    /*#__PURE__*/
-    React.createElement(Toolbar, {
-      buttons: buttons,
-      onButtonClick: function onButtonClick(name) {
-        return handleButtonClick(editor, name, setLinkSelection);
-      }
-    })
-  );
+  return /*#__PURE__*/React.createElement(Toolbar, {
+    buttons: buttons,
+    onButtonClick: function onButtonClick(name) {
+      return handleButtonClick(editor, name, setLinkSelection);
+    }
+  });
 }
 
 function handleButtonClick(editor, format, setLinkSelection) {
@@ -1739,13 +1590,10 @@ function renderLinkInput(editor, linkSelection, setLinkSelection) {
     ReactEditor.focus(editor);
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement(LinkInput, {
-      onSubmit: handleSubmit,
-      onCancel: handleCancel
-    })
-  );
+  return /*#__PURE__*/React.createElement(LinkInput, {
+    onSubmit: handleSubmit,
+    onCancel: handleCancel
+  });
 }
 
 function unwrapLink(editor) {
@@ -1797,6 +1645,25 @@ function isMarkActive(editor, format) {
   return marks ? marks[format] === true : false;
 }
 
+function getUniformSelectedNodeProperty(editor, propertyName) {
+  var currentNodeEntries = _toConsumableArray(Editor.nodes(editor, {
+    match: function match(n) {
+      return !!n.type;
+    },
+    mode: 'highest'
+  }));
+
+  var values = _toConsumableArray(new Set(currentNodeEntries.map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        node = _ref2[0],
+        path = _ref2[1];
+
+    return node[propertyName];
+  })));
+
+  return values.length === 1 ? values[0] : null;
+}
+
 function _extends$a() {
   _extends$a = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1819,14 +1686,14 @@ var TextIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "align-justify",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-align-justify"] || "fa-align-justify") + " " + (styles["fa-w-14"] || "fa-w-14"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 448 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M432 416H16a16 16 0 00-16 16v32a16 16 0 0016 16h416a16 16 0 0016-16v-32a16 16 0 00-16-16zm0-128H16a16 16 0 00-16 16v32a16 16 0 0016 16h416a16 16 0 0016-16v-32a16 16 0 00-16-16zm0-128H16a16 16 0 00-16 16v32a16 16 0 0016 16h416a16 16 0 0016-16v-32a16 16 0 00-16-16zm0-128H16A16 16 0 000 48v32a16 16 0 0016 16h416a16 16 0 0016-16V48a16 16 0 00-16-16z"
   }));
@@ -1854,14 +1721,14 @@ var HeadingIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "heading",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-heading"] || "fa-heading") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M448 96v320h32a16 16 0 0116 16v32a16 16 0 01-16 16H320a16 16 0 01-16-16v-32a16 16 0 0116-16h32V288H160v128h32a16 16 0 0116 16v32a16 16 0 01-16 16H32a16 16 0 01-16-16v-32a16 16 0 0116-16h32V96H32a16 16 0 01-16-16V48a16 16 0 0116-16h160a16 16 0 0116 16v32a16 16 0 01-16 16h-32v128h192V96h-32a16 16 0 01-16-16V48a16 16 0 0116-16h160a16 16 0 0116 16v32a16 16 0 01-16 16z"
   }));
@@ -1889,14 +1756,14 @@ var OlIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "list-ol",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-list-ol"] || "fa-list-ol") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M61.77 401l17.5-20.15a19.92 19.92 0 005.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 00-8 8v16a8 8 0 008 8h22.83a157.41 157.41 0 00-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 01-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 00-16 16v32a16 16 0 0016 16h320a16 16 0 0016-16v-32a16 16 0 00-16-16zm0-160H176a16 16 0 00-16 16v32a16 16 0 0016 16h320a16 16 0 0016-16V80a16 16 0 00-16-16zm0 320H176a16 16 0 00-16 16v32a16 16 0 0016 16h320a16 16 0 0016-16v-32a16 16 0 00-16-16zM16 160h64a8 8 0 008-8v-16a8 8 0 00-8-8H64V40a8 8 0 00-8-8H32a8 8 0 00-7.14 4.42l-8 16A8 8 0 0024 64h8v64H16a8 8 0 00-8 8v16a8 8 0 008 8zm-3.91 160H80a8 8 0 008-8v-16a8 8 0 00-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 019.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z"
   }));
@@ -1924,14 +1791,14 @@ var UlIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "list-ul",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-list-ul"] || "fa-list-ul") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M48 48a48 48 0 1048 48 48 48 0 00-48-48zm0 160a48 48 0 1048 48 48 48 0 00-48-48zm0 160a48 48 0 1048 48 48 48 0 00-48-48zm448 16H176a16 16 0 00-16 16v32a16 16 0 0016 16h320a16 16 0 0016-16v-32a16 16 0 00-16-16zm0-320H176a16 16 0 00-16 16v32a16 16 0 0016 16h320a16 16 0 0016-16V80a16 16 0 00-16-16zm0 160H176a16 16 0 00-16 16v32a16 16 0 0016 16h320a16 16 0 0016-16v-32a16 16 0 00-16-16z"
   }));
@@ -1959,14 +1826,14 @@ var QuoteIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "quote-right",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-quote-right"] || "fa-quote-right") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"
   }));
@@ -1984,11 +1851,13 @@ function Selection(props) {
   var outerRef = useRef();
   var innerRef = useRef();
   var boundsRef = useRef();
+  var lastRangeRef = useRef();
 
   var _useContentElementEdi = useContentElementEditorState(),
       setTransientState = _useContentElementEdi.setTransientState,
       select = _useContentElementEdi.select,
-      isContentElementSelected = _useContentElementEdi.isSelected;
+      isContentElementSelected = _useContentElementEdi.isSelected,
+      range = _useContentElementEdi.range;
 
   useEffect(function () {
     var selection = editor.selection;
@@ -1997,6 +1866,27 @@ function Selection(props) {
       return;
     }
 
+    if (isContentElementSelected && range && lastRangeRef.current !== range) {
+      lastRangeRef.current = range;
+
+      if (range[1] === range[0] + 1) {
+        Transforms.select(editor, Editor.point(editor, [range[0]], {
+          edge: 'start'
+        }));
+      } else {
+        Transforms.select(editor, {
+          anchor: Editor.point(editor, [range[0]], {
+            edge: 'start'
+          }),
+          focus: Editor.point(editor, [range[1] - 1], {
+            edge: 'end'
+          })
+        });
+      }
+
+      ReactEditor.focus(editor);
+    }
+
     if (!selection) {
       if (boundsRef.current) {
         hideRect(ref.current);
@@ -2008,6 +1898,8 @@ function Selection(props) {
 
     if (!isContentElementSelected && boundsRef.current) {
       hideRect(ref.current);
+      boundsRef.current = null;
+      window.getSelection().removeAllRanges();
       return;
     }
 
@@ -2021,7 +1913,9 @@ function Selection(props) {
         end = _computeBounds2[1];
 
     setTransientState({
-      editableTextIsSingleBlock: editor.children.length <= 1
+      editableTextIsSingleBlock: editor.children.length <= 1,
+      currentNodeType: getUniformSelectedNodeProperty(editor, 'type'),
+      typographyVariant: getUniformSelectedNodeProperty(editor, 'variant')
     });
     boundsRef.current = {
       start: start,
@@ -2029,49 +1923,58 @@ function Selection(props) {
     };
     updateRect(editor, start, end, outerRef.current, ref.current, innerRef.current);
   });
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: outerRef
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: ref,
-      className: styles$7.selection
+
+  var _useDrag = useDrag({
+    item: {
+      type: 'contentElement',
+      id: props.contentElementId
     },
-    /*#__PURE__*/
-    React.createElement(SelectionRect, {
-      selected: true,
-      scrollPoint: isContentElementSelected,
-      insertButtonTitles: t('pageflow_scrolled.inline_editing.insert_content_element'),
-      onInsertButtonClick: function onInsertButtonClick(at) {
-        if (at === 'before' && boundsRef.current.start === 0 || at === 'after' && !Node.has(editor, [boundsRef.current.end + 1])) {
-          postInsertContentElementMessage({
-            id: props.contentElementId,
-            at: at
-          });
-        } else {
-          postInsertContentElementMessage({
-            id: props.contentElementId,
-            at: 'split',
-            splitPoint: at === 'before' ? boundsRef.current.start : boundsRef.current.end + 1
-          });
-        }
-      },
-      toolbarButtons: toolbarButtons(t).map(function (button) {
-        return _objectSpread2(_objectSpread2({}, button), {}, {
-          active: isBlockActive(editor, button.name)
+    begin: function begin() {
+      return {
+        type: 'contentElement',
+        id: props.contentElementId,
+        range: [boundsRef.current.start, boundsRef.current.end + 1]
+      };
+    }
+  }),
+      _useDrag2 = _slicedToArray(_useDrag, 2),
+      drag = _useDrag2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: outerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: styles$7.selection
+  }, /*#__PURE__*/React.createElement(SelectionRect, {
+    selected: true,
+    drag: drag,
+    scrollPoint: isContentElementSelected,
+    insertButtonTitles: t('pageflow_scrolled.inline_editing.insert_content_element'),
+    onInsertButtonClick: function onInsertButtonClick(at) {
+      if (at === 'before' && boundsRef.current.start === 0 || at === 'after' && !Node.has(editor, [boundsRef.current.end + 1])) {
+        postInsertContentElementMessage({
+          id: props.contentElementId,
+          at: at
+        });
+      } else {
+        postInsertContentElementMessage({
+          id: props.contentElementId,
+          at: 'split',
+          splitPoint: at === 'before' ? boundsRef.current.start : boundsRef.current.end + 1
         });
-      }),
-      onToolbarButtonClick: function onToolbarButtonClick(name) {
-        return toggleBlock(editor, name);
       }
     },
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: innerRef
-    }))))
-  );
+    toolbarButtons: toolbarButtons(t).map(function (button) {
+      return _objectSpread2(_objectSpread2({}, button), {}, {
+        active: isBlockActive(editor, button.name)
+      });
+    }),
+    onToolbarButtonClick: function onToolbarButtonClick(name) {
+      return toggleBlock(editor, name);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: innerRef
+  }))));
 }
 
 function computeBounds(editor) {
@@ -2197,20 +2100,18 @@ function DropTargets$1(_ref) {
       setTargets(measureHeights(editor, containerRef.current));
     }
   }, [targets, editor]);
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: containerRef,
-      className: styles$8.container
-    }, renderDropTargets(targets || [], contentElementId))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: styles$8.container
+  }, renderDropTargets(targets || [], contentElementId));
 }
 
 function renderDropTargets(targets, contentElementId) {
-  function handleDrop(itemId, index) {
+  function handleDrop(item, index) {
     if (index === 0) {
       postMoveContentElementMessage({
-        id: itemId,
+        id: item.id,
+        range: item.range,
         to: {
           at: 'before',
           id: contentElementId
@@ -2218,7 +2119,8 @@ function renderDropTargets(targets, contentElementId) {
       });
     } else if (index === targets.length - 1) {
       postMoveContentElementMessage({
-        id: itemId,
+        id: item.id,
+        range: item.range,
         to: {
           at: 'after',
           id: contentElementId
@@ -2226,7 +2128,8 @@ function renderDropTargets(targets, contentElementId) {
       });
     } else {
       postMoveContentElementMessage({
-        id: itemId,
+        id: item.id,
+        range: item.range,
         to: {
           at: 'split',
           id: contentElementId,
@@ -2237,20 +2140,18 @@ function renderDropTargets(targets, contentElementId) {
   }
 
   return targets.map(function (target, index) {
-    return (
-      /*#__PURE__*/
-      React.createElement(DropTarget, Object.assign({}, target, {
-        key: index,
-        onDrop: function onDrop(itemId) {
-          return handleDrop(itemId, index);
-        }
-      }))
-    );
+    return /*#__PURE__*/React.createElement(DropTarget, Object.assign({}, target, {
+      key: index,
+      onDrop: function onDrop(item) {
+        return handleDrop(item, index);
+      }
+    }));
   });
 }
 
 function DropTarget(_ref2) {
-  var top = _ref2.top,
+  var display = _ref2.display,
+      top = _ref2.top,
       height = _ref2.height,
       indicatorTop = _ref2.indicatorTop,
       onDrop = _ref2.onDrop;
@@ -2263,31 +2164,27 @@ function DropTarget(_ref2) {
       };
     },
     drop: function drop(item) {
-      return onDrop(item.id);
+      return onDrop(item);
     }
   }),
       _useDrop2 = _slicedToArray(_useDrop, 2),
       isOver = _useDrop2[0].isOver,
       drop = _useDrop2[1];
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: drop,
-      className: classNames(styles$8.dropTarget, _defineProperty({}, styles$8.isOver, isOver)),
-      style: {
-        top: top,
-        height: height
-      }
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$8.dropIndicator,
-      style: {
-        top: indicatorTop
-      }
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: drop,
+    className: classNames(styles$8.dropTarget, _defineProperty({}, styles$8.isOver, isOver)),
+    style: {
+      display: display,
+      top: top,
+      height: height
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$8.dropIndicator,
+    style: {
+      top: indicatorTop
+    }
+  }));
 }
 
 function measureHeights(editor, container) {
@@ -2306,6 +2203,7 @@ function measureHeights(editor, container) {
     var targetDimensions = {
       top: top,
       height: bottom - top,
+      display: editor.selection && Range.includes(editor.selection, [index]) ? 'none' : undefined,
       indicatorTop: index > 0 ? lastRectBottom + (rect.top - lastRectBottom) / 2 - containerRect.top - top : 0
     };
     lastRectBottom = rect.bottom;
@@ -2354,6 +2252,10 @@ var EditableText = React.memo(function EditableText(_ref) {
       Transforms.removeNodes(editor, {
         mode: 'highest'
       });
+    } else if (command.type === 'TRANSIENT_STATE_UPDATE' && 'typographyVariant' in command.payload) {
+      Transforms.setNodes(editor, {
+        variant: command.payload.typographyVariant
+      });
     }
   });
 
@@ -2371,51 +2273,32 @@ var EditableText = React.memo(function EditableText(_ref) {
     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,
-      ref: ref
-    },
-    /*#__PURE__*/
-    React.createElement(Slate, {
-      editor: editor,
-      value: cachedValue,
-      onChange: setCachedValue
-    },
-    /*#__PURE__*/
-    React.createElement(LinkTooltipProvider, {
-      disabled: !!linkSelection
-    },
-    /*#__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,
-      renderElement: renderElementWithLinkPreview,
-      renderLeaf: renderLeaf
-    }))),
-    /*#__PURE__*/
-    React.createElement(TextPlaceholder, {
-      text: placeholder,
-      visible: isBlank(cachedValue)
-    })))
-  );
+  return /*#__PURE__*/React.createElement(Text$1, {
+    scaleCategory: "body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$7.container,
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: cachedValue,
+    onChange: setCachedValue
+  }, /*#__PURE__*/React.createElement(LinkTooltipProvider, {
+    disabled: !!linkSelection
+  }, /*#__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,
+    renderElement: renderElementWithLinkPreview,
+    renderLeaf: renderLeaf
+  }))), /*#__PURE__*/React.createElement(TextPlaceholder, {
+    text: placeholder,
+    visible: isBlank(cachedValue)
+  })));
 });
 
 function isBlank(value) {
@@ -2429,22 +2312,134 @@ function resetSelectionIfOutsideNextValue(editor, nextValue) {
     children: nextValue
   };
 
-  if (editor.selection && (!Node.has(nextEditor, editor.selection.anchor.path) || !Node.has(nextEditor, editor.selection.focus.path))) {
+  if (editor.selection && (!hasTextAtPoint(nextEditor, editor.selection.anchor) || !hasTextAtPoint(nextEditor, editor.selection.focus))) {
     Transforms.deselect(editor);
   }
 }
 
+function hasTextAtPoint(editor, point) {
+  if (!Node.has(editor, point.path)) {
+    return false;
+  }
+
+  var node = Node.get(editor, point.path);
+  return Text.isText(node) && point.offset <= node.text.length;
+}
+
+var shy = "\xAD";
+function useLineBreakHandler(editor) {
+  return useCallback(function (event) {
+    if (event.key !== 'Enter') {
+      return true;
+    }
+
+    if (event.shiftKey === true) {
+      editor.insertText(shy);
+    } else {
+      editor.insertText('\n');
+    }
+
+    return false;
+  }, [editor]);
+}
+function decorateLineBreaks(nodeEntry) {
+  return [].concat(_toConsumableArray(decorateCharacter(nodeEntry, shy, {
+    shy: true
+  }, {
+    length: 1
+  })), _toConsumableArray(decorateCharacter(nodeEntry, "\n", {
+    newLine: true
+  }, {
+    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) {
+  var normalizeNode = editor.normalizeNode;
+
+  editor.normalizeNode = function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        node = _ref5[0],
+        path = _ref5[1];
+
+    if (path.length === 0 && editor.children.length > 1) {
+      Transforms.mergeNodes(editor);
+      return;
+    } else if (node.text) {
+      if (deleteCharacter(editor, node, path, /\n\n/) || deleteCharacter(editor, node, path, new RegExp("^\n")) || 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;
+}
+
+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) {
   var _cachedValue$, _cachedValue$$childre;
 
   var value = _ref.value,
       _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+      hyphens = _ref.hyphens,
       placeholder = _ref.placeholder,
       onChange = _ref.onChange;
   var editor = useMemo(function () {
-    return withSingleLine(withReact(createEditor()));
+    return withLineBreakNormalization(withReact(createEditor()));
   }, []);
+  var handleLineBreaks = useLineBreakHandler(editor);
 
   var _useCachedValue = useCachedValue(value, {
     defaultValue: [{
@@ -2459,43 +2454,44 @@ var EditableInlineText = memo(function EditableInlineText(_ref) {
       cachedValue = _useCachedValue2[0],
       setCachedValue = _useCachedValue2[1];
 
-  return (
-    /*#__PURE__*/
-    React.createElement(React.Fragment, null,
-    /*#__PURE__*/
-    React.createElement(Slate, {
-      editor: editor,
-      value: cachedValue,
-      onChange: setCachedValue
-    },
-    /*#__PURE__*/
-    React.createElement(Editable, null)),
-    /*#__PURE__*/
-    React.createElement(TextPlaceholder, {
-      text: placeholder,
-      visible: !((_cachedValue$ = cachedValue[0]) === null || _cachedValue$ === void 0 ? void 0 : (_cachedValue$$childre = _cachedValue$.children[0]) === null || _cachedValue$$childre === void 0 ? void 0 : _cachedValue$$childre.text)
-    }))
-  );
+  var _useContentElementEdi = useContentElementEditorState(),
+      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)),
+    spellCheck: "false"
+  }, /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: cachedValue,
+    onChange: setCachedValue
+  }, /*#__PURE__*/React.createElement(Editable, {
+    decorate: decorateLineBreaks,
+    onKeyDown: handleLineBreaks,
+    renderLeaf: renderLeaf
+  })), /*#__PURE__*/React.createElement(TextPlaceholder, {
+    text: placeholder,
+    visible: !((_cachedValue$ = cachedValue[0]) === null || _cachedValue$ === void 0 ? void 0 : (_cachedValue$$childre = _cachedValue$.children[0]) === null || _cachedValue$$childre === void 0 ? void 0 : _cachedValue$$childre.text)
+  }));
 });
 
-function withSingleLine(editor) {
-  var normalizeNode = editor.normalizeNode;
-
-  editor.normalizeNode = function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        node = _ref3[0],
-        path = _ref3[1];
+function renderLeaf(_ref2) {
+  var attributes = _ref2.attributes,
+      children = _ref2.children,
+      leaf = _ref2.leaf;
 
-    if (path.length === 0) {
-      if (editor.children.length > 1) {
-        Transforms.mergeNodes(editor);
-      }
-    }
+  if (leaf.shy) {
+    children = /*#__PURE__*/React.createElement("span", {
+      className: styles$9.shy
+    }, children);
+  }
 
-    return normalizeNode([node, path]);
-  };
+  if (leaf.newLine) {
+    children = /*#__PURE__*/React.createElement("span", {
+      className: styles$9.newLine
+    }, children);
+  }
 
-  return editor;
+  return /*#__PURE__*/React.createElement("span", attributes, children);
 }
 
 function PhonePlatformProvider(_ref) {
@@ -2523,12 +2519,9 @@ function PhonePlatformProvider(_ref) {
       return window.removeEventListener('message', receive);
     };
   });
-  return (
-    /*#__PURE__*/
-    React.createElement(PhonePlatformContext.Provider, {
-      value: phoneEmulationMode
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement(PhonePlatformContext.Provider, {
+    value: phoneEmulationMode
+  }, children);
 }
 
-export { ContentElementDecorator, EditableInlineText, EditableText, EntryDecorator, LayoutWithPlaceholder, PhonePlatformProvider, SectionDecorator };
+export { ContentDecorator, ContentElementDecorator, EditableInlineText, EditableText, LayoutWithPlaceholder, PhonePlatformProvider, SectionDecorator };