pageflow 15.3.0 → 15.4.0

data/entry_types/scrolled/package/frontend/{Wavesurfer-c3c45324.js → Wavesurfer-b88b02e0.js}

@@ -34,9 +34,6 @@ function _createSuper(Derived) {
   };
 }
 var EVENTS = ['audioprocess', 'error', 'finish', 'loading', 'mouseup', 'pause', 'play', 'ready', 'scroll', 'seek', 'zoom'];
-/**
- * @description Capitalise the first letter of a string
- */
 
 function capitaliseFirstLetter(string) {
   return string.split('-').map(function (part) {

data/entry_types/scrolled/package/frontend/{components-cfe6a479.js → components-3ead1b4a.js}

@@ -1,9 +1,14 @@
-import React, { useMemo, useState, useCallback, useContext, useEffect, useRef, createContext, useLayoutEffect, memo } from 'react';
-import { h as _slicedToArray, M as ContentElementEditorCommandEmitterContext, x as useEntryStateDispatch, q as usePostMessageListener, _ as _defineProperty, a as _objectWithoutProperties, u as useI18n, N as ForcePaddingContext, O as updateContentElementConfiguration, Q as ContentElementConfigurationUpdateContext, R as ContentElementEditorStateContext, B as api, G as useContentElementEditorState, U as LayoutWithoutInlineEditing, V as renderElement, W as renderLeaf, l as _objectSpread2, D as useContentElementEditorCommandSubscription, T as Text$1, P as PhonePlatformContext } from './EditableText-4264c349.js';
+import React, { useMemo, useState, useCallback, useContext, useRef, useEffect, createContext, useLayoutEffect, memo } from 'react';
+import { _ as _slicedToArray, R as ContentElementEditorCommandEmitterContext, t as usePostMessageListener, A as useEntryStateDispatch, a as _defineProperty, b as _objectWithoutProperties, u as useI18n, U as MotifAreaVisibilityProvider, V as ForcePaddingContext, W as updateContentElementConfiguration, X as ContentElementConfigurationUpdateContext, Y as ContentElementEditorStateContext, G as api, J as useContentElementEditorState, Z as LayoutWithoutInlineEditing, $ as renderElement, a0 as renderLeaf, m as _objectSpread2, y as _toConsumableArray, I as useContentElementEditorCommandSubscription, T as Text$1, P as PhonePlatformContext } from './EditableText-43c50894.js';
 import classNames from 'classnames';
+import 'use-context-selector';
+import 'reselect';
 import 'i18n-js';
+import 'slugify';
 import './getPrototypeOf-63c7c8e8.js';
 import BackboneEvents from 'backbone-events-standalone';
+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 { useSlate, ReactEditor, withReact, Slate, Editable } from 'slate-react';
 import debounce from 'debounce';
@@ -74,6 +79,83 @@ function ContentElementEditorCommandSubscriptionProvider(_ref) {
   );
 }
 
+// the editor phone preview. Each ContentElementDecorator renders a
+// `data-scrollpoint` attribute with a unique value on its wrapper
+// div. Before toggling the phone preview mode, the `EntryPreviewView`
+// sends a `SAVE_SCROLL_POINT` message. `getCurrentScrollPoint` looks
+// through all DOM elements with `data-scrollpoint` attributes and
+// stores the unique id of the element with the smallest non-negative
+// y coordinate in the viewport (i.e. the first content element inside
+// the viewport). `ScrollPointMessageHandler` responds with a
+// `SAVED_SCROLL_POINT` message which makes `EntryPreviewView` toggle
+// the preview mode. Once the preview has been resized,
+// `EntryPreviewView` sends a `RESTORE_SCROLL_POINT`
+// message. `restoreScrollPoint` looks up the new position of the
+// element with the saved scroll point and scrolls it into view.
+//
+// When a content element is selected, we want to keep that element
+// in the viewport instead. The `SelectionRect` therefore renders a
+// `data-scrollpoint=selection` attribute. If an element with such an
+// attribute is present, `getCurrentScrollPoint` prefers it over all
+// other scroll points. Since text block elements render a selection
+// rect around the current paragraph, scroll position is also
+// preserved correctly inside long text blocks.
+
+function ScrollPointMessageHandler() {
+  var scrollPoint = useRef();
+  var receiveMessage = useCallback(function (data) {
+    if (data.type === 'SAVE_SCROLL_POINT') {
+      scrollPoint.current = getCurrentScrollPoint();
+      window.parent.postMessage({
+        type: 'SAVED_SCROLL_POINT'
+      }, window.location.origin);
+    } else if (data.type === 'RESTORE_SCROLL_POINT') {
+      if (scrollPoint.current) {
+        restoreScrollPoint(scrollPoint.current);
+      }
+    }
+  }, []);
+  usePostMessageListener(receiveMessage);
+  return null;
+}
+
+function getCurrentScrollPoint() {
+  var scrollPointElement = getSelectionScrollPointElement() || getScrollPointElementWithMinimumTopPositionInViewport();
+  return scrollPointElement === null || scrollPointElement === void 0 ? void 0 : scrollPointElement.getAttribute('data-scrollpoint');
+}
+
+function getSelectionScrollPointElement() {
+  return document.querySelector('[data-scrollpoint=selection]');
+}
+
+function getScrollPointElementWithMinimumTopPositionInViewport() {
+  var minTop = Infinity;
+  var scrollPointElement;
+  var scrollPoints = document.querySelectorAll('[data-scrollpoint]');
+
+  for (var i = 0; i < scrollPoints.length; i++) {
+    var rect = scrollPoints[i].getBoundingClientRect();
+
+    if (rect.top > 0 && rect.top < minTop) {
+      minTop = rect.top;
+      scrollPointElement = scrollPoints[i];
+    }
+  }
+
+  return scrollPointElement;
+}
+
+function restoreScrollPoint(name) {
+  var element = document.querySelector("[data-scrollpoint=\"".concat(name, "\"]"));
+
+  if (element) {
+    window.scrollTo({
+      top: element.getBoundingClientRect().top + window.scrollY - 100,
+      behavior: 'smooth'
+    });
+  }
+}
+
 function EntryDecorator(props) {
   var contentElementEditorCommandEmitter = useContentElementEditorCommandEmitter();
   return (
@@ -84,9 +166,15 @@ function EntryDecorator(props) {
       contentElementEditorCommandEmitter: contentElementEditorCommandEmitter
     }),
     /*#__PURE__*/
+    React.createElement(ScrollPointMessageHandler, null),
+    /*#__PURE__*/
     React.createElement(ContentElementEditorCommandSubscriptionProvider, {
       emitter: contentElementEditorCommandEmitter
-    }, props.children))
+    },
+    /*#__PURE__*/
+    React.createElement(DndProvider, {
+      backend: HTML5Backend
+    }, props.children)))
   );
 }
 
@@ -117,7 +205,7 @@ function MessageHandler(_ref) {
   return null;
 }
 
-var styles = {"wrapper":"SectionDecorator-module_wrapper__3sTk3","selected":"SectionDecorator-module_selected__1gcmF","transitionSelected":"SectionDecorator-module_transitionSelected__Wklk6","controls":"SectionDecorator-module_controls__LVEJG","editToolbar":"SectionDecorator-module_editToolbar__18Kjq SectionDecorator-module_toolbar__2Va1D","toolbar":"SectionDecorator-module_toolbar__2Va1D","transitionToolbar-before":"SectionDecorator-module_transitionToolbar-before__KipOO SectionDecorator-module_toolbar__2Va1D","transitionToolbar-after":"SectionDecorator-module_transitionToolbar-after__2_DVO SectionDecorator-module_toolbar__2Va1D"};
+var styles = {"wrapper":"SectionDecorator-module_wrapper__3sTk3","selected":"SectionDecorator-module_selected__1gcmF","transitionSelected":"SectionDecorator-module_transitionSelected__Wklk6","controls":"SectionDecorator-module_controls__LVEJG","editToolbar":"SectionDecorator-module_editToolbar__18Kjq","toolbar":"SectionDecorator-module_toolbar__2Va1D","transitionToolbar-before":"SectionDecorator-module_transitionToolbar-before__KipOO SectionDecorator-module_toolbar__2Va1D","transitionToolbar-after":"SectionDecorator-module_transitionToolbar-after__2_DVO SectionDecorator-module_toolbar__2Va1D"};
 
 var styles$1 = {"wrapper":"ContentElementDecorator-module_wrapper__NQgFN"};
 
@@ -177,47 +265,12 @@ function _extends() {
 
   return _extends.apply(this, arguments);
 }
-var editIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      styles = _ref$styles === void 0 ? {} : _ref$styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends({
-    "aria-hidden": "true",
-    "data-prefix": "fas",
-    "data-icon": "pencil-alt",
-    className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-pencil-alt"] || "fa-pencil-alt") + " " + (styles["fa-w-16"] || "fa-w-16"),
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
-    fill: "currentColor",
-    d: "M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-  }));
-});
-
-function _extends$1() {
-  _extends$1 = 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];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
 var transitionIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$1({
+  return React.createElement("svg", _extends({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "random",
@@ -238,16 +291,12 @@ function SectionDecorator(props) {
 
   var _useEditorSelection = useEditorSelection({
     id: props.id,
-    type: 'section'
+    type: 'sectionSettings'
   }),
       isSelected = _useEditorSelection.isSelected,
       select = _useEditorSelection.select,
       resetSelection = _useEditorSelection.resetSelection;
 
-  var settingsSelection = useEditorSelection({
-    id: props.id,
-    type: 'sectionSettings'
-  });
   var transitionSelection = useEditorSelection({
     id: props.id,
     type: 'sectionTransition'
@@ -256,7 +305,7 @@ function SectionDecorator(props) {
     id: props.nextSection && props.nextSection.id,
     type: 'sectionTransition'
   });
-  var lastContentElement = props.foreground[props.foreground.length - 1];
+  var lastContentElement = props.contentElements[props.contentElements.length - 1];
 
   var _useEditorSelection2 = useEditorSelection({
     id: lastContentElement && lastContentElement.id,
@@ -264,8 +313,6 @@ function SectionDecorator(props) {
   }),
       isLastContentElementSelected = _useEditorSelection2.isSelected;
 
-  var isSectionSelected = isSelected || settingsSelection.isSelected;
-
   function selectIfOutsideContentItem(event) {
     if (!event.target.closest(".".concat(styles$1.wrapper))) {
       isSelected ? resetSelection() : select();
@@ -276,7 +323,7 @@ function SectionDecorator(props) {
     /*#__PURE__*/
     React.createElement("div", {
       "aria-label": t('pageflow_scrolled.inline_editing.select_section'),
-      className: className(isSectionSelected, transitionSelection),
+      className: className(isSelected, transitionSelection),
       onMouseDown: selectIfOutsideContentItem
     },
     /*#__PURE__*/
@@ -286,26 +333,19 @@ function SectionDecorator(props) {
       id: props.previousSection && props.id,
       selection: transitionSelection,
       position: 'before'
-    }),
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles.editToolbar
-    },
-    /*#__PURE__*/
-    React.createElement(EditSectionButton, {
-      id: props.id,
-      selection: settingsSelection,
-      text: t('pageflow_scrolled.inline_editing.edit_section_settings'),
-      icon: editIcon
-    })), renderEditTransitionButton({
+    }), renderEditTransitionButton({
       id: props.nextSection && props.nextSection.id,
       selection: nextTransitionSelection,
       position: 'after'
     })),
     /*#__PURE__*/
+    React.createElement(MotifAreaVisibilityProvider, {
+      visible: isSelected
+    },
+    /*#__PURE__*/
     React.createElement(ForcePaddingContext.Provider, {
-      value: isLastContentElementSelected || isSectionSelected
-    }, props.children))
+      value: isLastContentElementSelected || isSelected
+    }, props.children)))
   );
 }
 
@@ -381,7 +421,36 @@ function EditSectionButton(_ref3) {
   );
 }
 
-var styles$3 = {"selectionWidth":"1px","selectionPadding":"-6px","selectionPadding2":"-0.5em","main":"SelectionRect-module_main__3AOhG","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"};
+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"};
+
+function _extends$1() {
+  _extends$1 = 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];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+var PlusIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, props), 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"
+  }));
+});
 
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
@@ -400,15 +469,21 @@ function _extends$2() {
 
   return _extends$2.apply(this, arguments);
 }
-var PlusIcon = (function (_ref) {
+var MoveIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return 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", {
-    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"
+    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"
   }));
 });
 
@@ -418,10 +493,11 @@ function SelectionRect(props) {
   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.start, props.selected && props.start), _defineProperty(_classNames, styles$3.end, props.selected && props.end), _classNames)),
+      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
-    }, renderToolbar(props),
+    }, renderDragHandle(props), renderToolbar(props),
     /*#__PURE__*/
     React.createElement(InsertButton, Object.assign({}, props, {
       at: "before"
@@ -468,10 +544,30 @@ function InsertButton(props) {
   );
 }
 
-function renderToolbar(_ref) {
-  var toolbarButtons = _ref.toolbarButtons,
-      onToolbarButtonClick = _ref.onToolbarButtonClick,
-      start = _ref.start;
+function renderDragHandle(_ref) {
+  var drag = _ref.drag,
+      dragHandleTitle = _ref.dragHandleTitle;
+
+  if (!drag) {
+    return null;
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      ref: drag,
+      className: styles$3.dragHandle,
+      title: dragHandleTitle
+    },
+    /*#__PURE__*/
+    React.createElement(MoveIcon, null))
+  );
+}
+
+function renderToolbar(_ref2) {
+  var toolbarButtons = _ref2.toolbarButtons,
+      onToolbarButtonClick = _ref2.onToolbarButtonClick,
+      start = _ref2.start;
 
   if (toolbarButtons && start) {
     return (
@@ -494,6 +590,86 @@ SelectionRect.defaultProps = {
   end: true
 };
 
+var styles$4 = {"target":"DropTargets-module_target__Z2N2d","isOver":"DropTargets-module_isOver__3ksFy","before":"DropTargets-module_before__cAXo1 DropTargets-module_target__Z2N2d","after":"DropTargets-module_after__2Q8QU DropTargets-module_target__Z2N2d"};
+
+function DropTargets(_ref) {
+  var accept = _ref.accept,
+      _canDrop = _ref.canDrop,
+      onDrop = _ref.onDrop;
+
+  var _useDrop = useDrop({
+    accept: accept,
+    canDrop: function canDrop(item) {
+      return _canDrop({
+        at: 'before',
+        id: item.id
+      });
+    },
+    collect: function collect(monitor) {
+      return {
+        canDropBefore: monitor.canDrop(),
+        isBefore: monitor.isOver() && monitor.canDrop()
+      };
+    },
+    drop: function drop(item) {
+      return onDrop({
+        at: 'before',
+        id: item.id
+      });
+    }
+  }),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      _useDrop2$ = _useDrop2[0],
+      canDropBefore = _useDrop2$.canDropBefore,
+      isBefore = _useDrop2$.isBefore,
+      dropBefore = _useDrop2[1];
+
+  var _useDrop3 = useDrop({
+    accept: accept,
+    canDrop: function canDrop(item) {
+      return _canDrop({
+        at: 'after',
+        id: item.id
+      });
+    },
+    collect: function collect(monitor) {
+      return {
+        canDropAfter: monitor.canDrop(),
+        isAfter: monitor.isOver() && monitor.canDrop()
+      };
+    },
+    drop: function drop(item) {
+      return onDrop({
+        at: 'after',
+        id: item.id
+      });
+    }
+  }),
+      _useDrop4 = _slicedToArray(_useDrop3, 2),
+      _useDrop4$ = _useDrop4[0],
+      canDropAfter = _useDrop4$.canDropAfter,
+      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))
+    }))
+  );
+}
+
 function postInsertContentElementMessage(_ref) {
   var id = _ref.id,
       at = _ref.at,
@@ -507,9 +683,20 @@ function postInsertContentElementMessage(_ref) {
     }
   }, window.location.origin);
 }
-function postUpdateContentElementMessage(_ref2) {
+function postMoveContentElementMessage(_ref2) {
   var id = _ref2.id,
-      configuration = _ref2.configuration;
+      to = _ref2.to;
+  window.parent.postMessage({
+    type: 'MOVE_CONTENT_ELEMENT',
+    payload: {
+      id: id,
+      to: to
+    }
+  }, window.location.origin);
+}
+function postUpdateContentElementMessage(_ref3) {
+  var id = _ref3.id,
+      configuration = _ref3.configuration;
   window.parent.postMessage({
     type: 'UPDATE_CONTENT_ELEMENT',
     payload: {
@@ -518,9 +705,9 @@ function postUpdateContentElementMessage(_ref2) {
     }
   }, window.location.origin);
 }
-function postUpdateTransientContentElementStateMessage(_ref3) {
-  var id = _ref3.id,
-      state = _ref3.state;
+function postUpdateTransientContentElementStateMessage(_ref4) {
+  var id = _ref4.id,
+      state = _ref4.state;
   window.parent.postMessage({
     type: 'UPDATE_TRANSIENT_CONTENT_ELEMENT_STATE',
     payload: {
@@ -601,7 +788,8 @@ function ContentElementDecorator(props) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: styles$1.wrapper
+      className: styles$1.wrapper,
+      "data-scrollpoint": props.id
     },
     /*#__PURE__*/
     React.createElement(ContentElementEditorStateProvider, {
@@ -641,10 +829,23 @@ function DefaultSelectionRect(props) {
   }),
       t = _useI18n.t;
 
+  var _useDrag = useDrag({
+    item: {
+      type: 'contentElement',
+      id: props.id
+    }
+  }),
+      _useDrag2 = _slicedToArray(_useDrag, 3),
+      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'),
@@ -657,11 +858,34 @@ function DefaultSelectionRect(props) {
           at: at
         });
       }
-    }, props.children)
+    },
+    /*#__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$4 = {"container":"ContentElementInsertButton-module_container__3dvUS","hovered":"ContentElementInsertButton-module_hovered__3Pggi","button":"ContentElementInsertButton-module_button__2-eE2"};
+var styles$5 = {"container":"ContentElementInsertButton-module_container__3dvUS","hovered":"ContentElementInsertButton-module_hovered__3Pggi","button":"ContentElementInsertButton-module_button__2-eE2"};
 
 function ContentElementInsertButton(_ref) {
   var onClick = _ref.onClick;
@@ -679,11 +903,11 @@ function ContentElementInsertButton(_ref) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: classNames(styles$4.container, _defineProperty({}, styles$4.hovered, hovered))
+      className: classNames(styles$5.container, _defineProperty({}, styles$5.hovered, hovered))
     },
     /*#__PURE__*/
     React.createElement("button", {
-      className: styles$4.button,
+      className: styles$5.button,
       title: t('pageflow_scrolled.inline_editing.add_content_element'),
       onClick: onClick,
       onMouseDown: function onMouseDown(event) {
@@ -793,7 +1017,7 @@ function useDebouncedCallback(callback, delay) {
   }, []);
 }
 
-var styles$5 = {"placeholder":"TextPlaceholder-module_placeholder__sgVwx"};
+var styles$6 = {"placeholder":"TextPlaceholder-module_placeholder__sgVwx"};
 
 function TextPlaceholder(_ref) {
   var text = _ref.text,
@@ -806,8 +1030,10 @@ function TextPlaceholder(_ref) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: styles$5.placeholder
-    }, text)
+      className: styles$6.placeholder
+    },
+    /*#__PURE__*/
+    React.createElement("div", null, text))
   );
 }
 
@@ -847,7 +1073,7 @@ function withCustomInsertBreak(editor) {
   return editor;
 }
 
-var styles$6 = {"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","hoveringToolbar":"index-module_hoveringToolbar__31Xpd","selection":"index-module_selection__3dUiD","linkTooltip":"index-module_linkTooltip__36m1K"};
 
 function _extends$3() {
   _extends$3 = Object.assign || function (target) {
@@ -984,7 +1210,7 @@ function LinkTooltip() {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: classNames(styles$6.linkTooltip, styles$6.hoveringToolbar),
+      className: classNames(styles$7.linkTooltip, styles$7.hoveringToolbar),
       onMouseEnter: keep,
       onMouseLeave: deactivate,
       style: {
@@ -1070,6 +1296,47 @@ function decorateLinkSelection(_ref, linkSelection) {
   return [];
 }
 
+// element is currently being dragged over the element. `react-dnd`
+// causes "Update on unmounted component warning" when dropping an
+// element removes a drop target [1]. As a workaround, couple
+// rendering of drop targets to asynchronously updated state. That way
+// the drop target is only removed after element has been dropped.
+//
+// [1] https://github.com/react-dnd/react-dnd/issues/1573
+
+function useDropTargetsActive() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      dropTargetsActive = _useState2[0],
+      setDropTargetsActive = _useState2[1];
+
+  var _useDrop = useDrop({
+    accept: 'contentElement',
+    collect: function collect(monitor) {
+      return {
+        canDrop: monitor.canDrop() && monitor.isOver()
+      };
+    }
+  }),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      canDrop = _useDrop2[0].canDrop,
+      drop = _useDrop2[1];
+
+  useEffect(function () {
+    if (canDrop) {
+      setDropTargetsActive(true);
+    } else {
+      var timeout = setTimeout(function () {
+        setDropTargetsActive(false);
+      }, 10);
+      return function () {
+        clearTimeout(timeout);
+      };
+    }
+  }, [canDrop]);
+  return [dropTargetsActive, drop];
+}
+
 function _extends$4() {
   _extends$4 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1146,7 +1413,7 @@ function LinkInput(_ref) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: styles$6.linkTooltip
+      className: styles$7.linkTooltip
     },
     /*#__PURE__*/
     React.createElement("input", {
@@ -1391,7 +1658,7 @@ function HoveringToolbar(_ref) {
     /*#__PURE__*/
     React.createElement("div", {
       ref: ref,
-      className: styles$6.hoveringToolbar
+      className: styles$7.hoveringToolbar
     }, !linkSelection && renderToolbar$1(editor, setLinkSelection, t), linkSelection && renderLinkInput(editor, linkSelection, setLinkSelection)))
   );
 }
@@ -1769,11 +2036,12 @@ function Selection(props) {
     /*#__PURE__*/
     React.createElement("div", {
       ref: ref,
-      className: styles$6.selection
+      className: styles$7.selection
     },
     /*#__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])) {
@@ -1911,6 +2179,145 @@ function toolbarButtons(t) {
   }];
 }
 
+var styles$8 = {"container":"DropTargets-module_container__3vudG","dropTarget":"DropTargets-module_dropTarget__3mmox","dropIndicator":"DropTargets-module_dropIndicator__2zu4d","isOver":"DropTargets-module_isOver__2usWn"};
+
+function DropTargets$1(_ref) {
+  var contentElementId = _ref.contentElementId;
+  var editor = useSlate();
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      targets = _useState2[0],
+      setTargets = _useState2[1];
+
+  var containerRef = useRef();
+  useEffect(function () {
+    if (!targets) {
+      setTargets(measureHeights(editor, containerRef.current));
+    }
+  }, [targets, editor]);
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      ref: containerRef,
+      className: styles$8.container
+    }, renderDropTargets(targets || [], contentElementId))
+  );
+}
+
+function renderDropTargets(targets, contentElementId) {
+  function handleDrop(itemId, index) {
+    if (index === 0) {
+      postMoveContentElementMessage({
+        id: itemId,
+        to: {
+          at: 'before',
+          id: contentElementId
+        }
+      });
+    } else if (index === targets.length - 1) {
+      postMoveContentElementMessage({
+        id: itemId,
+        to: {
+          at: 'after',
+          id: contentElementId
+        }
+      });
+    } else {
+      postMoveContentElementMessage({
+        id: itemId,
+        to: {
+          at: 'split',
+          id: contentElementId,
+          splitPoint: index
+        }
+      });
+    }
+  }
+
+  return targets.map(function (target, index) {
+    return (
+      /*#__PURE__*/
+      React.createElement(DropTarget, Object.assign({}, target, {
+        key: index,
+        onDrop: function onDrop(itemId) {
+          return handleDrop(itemId, index);
+        }
+      }))
+    );
+  });
+}
+
+function DropTarget(_ref2) {
+  var top = _ref2.top,
+      height = _ref2.height,
+      indicatorTop = _ref2.indicatorTop,
+      onDrop = _ref2.onDrop;
+
+  var _useDrop = useDrop({
+    accept: 'contentElement',
+    collect: function collect(monitor) {
+      return {
+        isOver: monitor.isOver()
+      };
+    },
+    drop: function drop(item) {
+      return onDrop(item.id);
+    }
+  }),
+      _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
+      }
+    }))
+  );
+}
+
+function measureHeights(editor, container) {
+  var containerRect = container.getBoundingClientRect();
+  var lastTargetDimensions = {
+    top: 0,
+    height: 0
+  };
+  var lastRectBottom = 0;
+  var targetDimensions = editor.children.map(function (child, index) {
+    var node = Node.get(editor, [index]);
+    var domNode = ReactEditor.toDOMNode(editor, node);
+    var rect = domNode.getBoundingClientRect();
+    var top = lastTargetDimensions.top + lastTargetDimensions.height;
+    var bottom = rect.top + rect.height / 2 - containerRect.top;
+    var targetDimensions = {
+      top: top,
+      height: bottom - top,
+      indicatorTop: index > 0 ? lastRectBottom + (rect.top - lastRectBottom) / 2 - containerRect.top - top : 0
+    };
+    lastRectBottom = rect.bottom;
+    lastTargetDimensions = targetDimensions;
+    return targetDimensions;
+  });
+  return [].concat(_toConsumableArray(targetDimensions), [{
+    top: lastTargetDimensions.top + lastTargetDimensions.height,
+    height: containerRect.height - (lastTargetDimensions.top + lastTargetDimensions.height),
+    indicatorTop: containerRect.height - (lastTargetDimensions.top + lastTargetDimensions.height)
+  }]);
+}
+
 var EditableText = React.memo(function EditableText(_ref) {
   var value = _ref.value,
       contentElementId = _ref.contentElementId,
@@ -1948,6 +2355,12 @@ var EditableText = React.memo(function EditableText(_ref) {
       });
     }
   });
+
+  var _useDropTargetsActive = useDropTargetsActive(),
+      _useDropTargetsActive2 = _slicedToArray(_useDropTargetsActive, 2),
+      dropTargetsActive = _useDropTargetsActive2[0],
+      ref = _useDropTargetsActive2[1];
+
   var decorate = useCallback(function (nodeEntry) {
     return decorateLinkSelection(nodeEntry, linkSelection);
   }, [linkSelection]); // Ensure Slate rerenders when decorations change
@@ -1964,7 +2377,8 @@ var EditableText = React.memo(function EditableText(_ref) {
     },
     /*#__PURE__*/
     React.createElement("div", {
-      className: styles$6.container
+      className: styles$7.container,
+      ref: ref
     },
     /*#__PURE__*/
     React.createElement(Slate, {
@@ -1979,6 +2393,10 @@ var EditableText = React.memo(function EditableText(_ref) {
     /*#__PURE__*/
     React.createElement(Selection, {
       contentElementId: contentElementId
+    }), dropTargetsActive &&
+    /*#__PURE__*/
+    React.createElement(DropTargets$1, {
+      contentElementId: contentElementId
     }),
     /*#__PURE__*/
     React.createElement(HoveringToolbar, {