pageflow 15.3.0 → 15.4.0

data/entry_types/scrolled/package/frontend/{EditableText-4264c349.js → EditableText-43c50894.js}

@@ -1,6 +1,9 @@
-import React, { useReducer, useMemo, useContext, createContext, useState, useEffect, useRef } from 'react';
+import React, { useReducer, useMemo, useCallback, createContext as createContext$1, useContext, useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
+import { createContext, useContextSelector } from 'use-context-selector';
+import { createSelectorCreator, defaultMemoize, createSelector } from 'reselect';
 import I18n from 'i18n-js';
+import slugify from 'slugify';
 import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _getPrototypeOf, d as _possibleConstructorReturn } from './getPrototypeOf-63c7c8e8.js';
 
 function _defineProperty(obj, key, value) {
@@ -208,24 +211,43 @@ function updateConfiguration(_ref2) {
     }
   });
 }
-
-function getItems(state, collectionName) {
-  if (state[collectionName]) {
-    var items = state[collectionName].items;
-    return state[collectionName].order.map(function (key) {
-      return items[key];
-    });
-  } else {
-    return [];
-  }
-}
 function getItem(state, collectionName, key) {
   if (state[collectionName]) {
     return state[collectionName].items[key];
   }
 }
+function createItemsSelector(collectionName, filter) {
+  if (filter) {
+    var itemsSelector = createItemsSelector(collectionName);
+    return createShallowEqualArraysSelector(function (collections) {
+      return itemsSelector(collections).filter(filter);
+    }, function (items) {
+      return items;
+    });
+  }
+
+  return createSelector(function (collections) {
+    return collections[collectionName];
+  }, function (collection) {
+    if (collection) {
+      var items = collection.items;
+      return collection.order.map(function (key) {
+        return items[key];
+      });
+    } else {
+      return [];
+    }
+  });
+}
+var createShallowEqualArraysSelector = createSelectorCreator(defaultMemoize, shallowEqualArrays);
+
+function shallowEqualArrays(a, b) {
+  return a.length === b.length && a.every(function (item, index) {
+    return item === b[index];
+  });
+}
 
-var Context = React.createContext();
+var Context = createContext();
 function EntryStateProvider(_ref) {
   var seed = _ref.seed,
       children = _ref.children;
@@ -253,13 +275,38 @@ function EntryStateProvider(_ref) {
     }, children)
   );
 }
+
 function useEntryState() {
-  var value = useContext(Context);
-  return value.entryState;
+  var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (entryState) {
+    return entryState;
+  };
+  return useContextSelector(Context, function (value) {
+    return selector(value.entryState);
+  });
 }
+
 function useEntryStateDispatch() {
-  var value = useContext(Context);
-  return value.dispatch;
+  return useContextSelector(Context, function (value) {
+    return value.dispatch;
+  });
+}
+function useEntryStateConfig() {
+  return useEntryState(function (entryState) {
+    return entryState.config;
+  });
+}
+function useEntryStateCollectionItem(collectionName, key) {
+  return useEntryState(function (entryState) {
+    return getItem(entryState.collections, collectionName, key);
+  });
+}
+function useEntryStateCollectionItems(collectionName, filter) {
+  var itemsSelector = useMemo(function () {
+    return createItemsSelector(collectionName, filter);
+  }, [collectionName, filter]);
+  return useEntryState(function (entryState) {
+    return itemsSelector(entryState.collections);
+  });
 }
 
 /**
@@ -279,10 +326,10 @@ function useEntryStateDispatch() {
  */
 
 function useEntryMetadata() {
-  var entryState = useEntryState();
+  var entries = useEntryStateCollectionItems('entries');
   return useMemo(function () {
-    return getItems(entryState.collections, 'entries')[0];
-  }, [entryState]);
+    return entries[0];
+  }, [entries]);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -517,14 +564,14 @@ var WhatsAppIcon = (function (_ref) {
 
 function useShareProviders(_ref) {
   var isPhonePlatform = _ref.isPhonePlatform;
-  var entryState = useEntryState();
+  var config = useEntryStateConfig();
   var entryMetadata = useEntryMetadata();
   var shareProviders = entryMetadata ? entryMetadata.shareProviders : {};
-  var urlTemplates = entryState.config.shareUrlTemplates;
+  var urlTemplates = config.shareUrlTemplates;
   var sharing = {
     email: {
       icon: EmailIcon,
-      name: 'Email',
+      name: 'Mail',
       url: urlTemplates.email
     },
     facebook: {
@@ -593,12 +640,12 @@ function filterShareProviders(shareProvidersConfig, isPhonePlatform) {
 
 function useShareUrl() {
   var entryMetadata = useEntryMetadata();
-  var entryState = useEntryState();
+  var config = useEntryStateConfig();
 
   if (entryMetadata) {
-    return entryMetadata.shareUrl ? entryMetadata.shareUrl : entryState.config.prettyUrl;
+    return entryMetadata.shareUrl ? entryMetadata.shareUrl : config.prettyUrl;
   } else {
-    return entryState.config.shareUrl;
+    return config.shareUrl;
   }
 }
 
@@ -606,6 +653,8 @@ function useShareUrl() {
  * Returns a nested data structure representing the chapters, sections
  * and content elements of the entry.
  *
+ * @private
+ *
  * @example
  *
  * const structure = useEntryStructure();
@@ -617,28 +666,15 @@ function useShareUrl() {
  *       summary: 'An introductory chapter',
  *       sections: [
  *         {
+ *           id: 1,
  *           permaId: 101,
+ *           chapterId: 3,
  *           sectionIndex: 0,
  *           transition: 'scroll',
  *
  *           // references to adjacent section objects
  *           previousSection: { ... },
  *           nextSection: { ... },
- *
- *           foreground: [
- *             {
- *               type: 'heading',
- *               props: {
- *                 children: 'Heading'
- *               }
- *             },
- *             {
- *               type: 'textBlock',
- *               props: {
- *                 children: 'Some text'
- *               }
- *             }
- *           ]
  *         }
  *       ],
  *     }
@@ -646,29 +682,25 @@ function useShareUrl() {
  */
 
 function useEntryStructure() {
-  var entryState = useEntryState();
+  var chapters = useChapters();
+  var sections = useEntryStateCollectionItems('sections');
   return useMemo(function () {
-    var sections = [];
-    var chapters = getItems(entryState.collections, 'chapters').map(function (chapter) {
-      return _objectSpread2(_objectSpread2({
-        permaId: chapter.permaId
-      }, chapter.configuration), {}, {
-        sections: getItems(entryState.collections, 'sections').filter(function (item) {
+    var linkedSections = sections.map(function (section) {
+      return sectionData(section);
+    });
+    linkedSections.forEach(function (section, index) {
+      section.sectionIndex = index;
+      section.previousSection = linkedSections[index - 1];
+      section.nextSection = linkedSections[index + 1];
+    });
+    return chapters.map(function (chapter) {
+      return _objectSpread2(_objectSpread2({}, chapter), {}, {
+        sections: linkedSections.filter(function (item) {
           return item.chapterId === chapter.id;
-        }).map(function (section) {
-          var result = sectionStructure(entryState.collections, section);
-          sections.push(result);
-          return result;
         })
       });
     });
-    sections.forEach(function (section, index) {
-      section.sectionIndex = index;
-      section.previousSection = sections[index - 1];
-      section.nextSection = sections[index + 1];
-    });
-    return chapters;
-  }, [entryState]);
+  }, [chapters, sections]);
 }
 /**
  * Returns a nested data structure representing the content elements
@@ -677,58 +709,84 @@ function useEntryStructure() {
  * @param {Object} options
  * @param {number} options.sectionPermaId
  *
+ * @private
+ *
  * @example
  *
- * const section = useSectionStructure({sectionPermaId: 4});
+ * const section = useSection({sectionPermaId: 4});
  * section // =>
  *   {
+ *     id: 100,
  *     permaId: 4,
- *     transition: 'scroll',
- *     foreground: [
- *       {
- *         type: 'heading',
- *         props: {
- *           children: 'Heading'
- *         }
- *       },
- *       {
- *         type: 'textBlock',
- *         props: {
- *           children: 'Some text'
- *         }
- *       }
- *     ]
+ *     chapterId: 1,
+ *     transition: 'scroll'
  *   }
  */
 
-function useSectionStructure(_ref) {
+function useSection(_ref) {
   var sectionPermaId = _ref.sectionPermaId;
-  var entryState = useEntryState();
-  var section = getItem(entryState.collections, 'sections', sectionPermaId);
-  return sectionStructure(entryState.collections, section);
+  var section = useEntryStateCollectionItem('sections', sectionPermaId);
+  return sectionData(section);
 }
 
-function sectionStructure(collections, section) {
-  return section && _objectSpread2(_objectSpread2({
+function sectionData(section) {
+  return section && _objectSpread2({
     permaId: section.permaId,
-    id: section.id
-  }, section.configuration), {}, {
-    foreground: getItems(collections, 'contentElements').filter(function (item) {
-      return item.sectionId === section.id;
-    }).map(function (item) {
-      return {
-        id: item.id,
-        permaId: item.permaId,
-        type: item.typeName,
-        position: item.configuration.position,
-        props: item.configuration
-      };
-    })
+    id: section.id,
+    chapterId: section.chapterId
+  }, section.configuration);
+}
+
+function useSectionContentElements(_ref2) {
+  var sectionId = _ref2.sectionId;
+  var filterBySectionId = useCallback(function (contentElement) {
+    return contentElement.sectionId === sectionId;
+  }, [sectionId]);
+  var contentElements = useEntryStateCollectionItems('contentElements', filterBySectionId);
+  return contentElements.map(function (item) {
+    return {
+      id: item.id,
+      permaId: item.permaId,
+      type: item.typeName,
+      position: item.configuration.position,
+      props: item.configuration
+    };
   });
 }
+function useChapters() {
+  var chapters = useEntryStateCollectionItems('chapters');
+  var chapterSlugs = {};
+  return chapters.map(function (chapter) {
+    var chapterSlug = chapter.configuration.title;
+
+    if (chapterSlug) {
+      chapterSlug = slugify(chapterSlug, {
+        lower: true,
+        locale: 'de',
+        strict: true
+      });
+
+      if (chapterSlugs[chapterSlug]) {
+        chapterSlug = chapterSlug + '-' + chapter.permaId; //append permaId if chapter reference is not unique
+      }
 
-function extendFile(collectionName, file, entryState) {
-  return addModelType(collectionName, expandUrls(collectionName, file, entryState.config.fileUrlTemplates), entryState.config.fileModelTypes);
+      chapterSlugs[chapterSlug] = chapter;
+    } else {
+      chapterSlug = 'chapter-' + chapter.permaId;
+    }
+
+    return {
+      id: chapter.id,
+      permaId: chapter.permaId,
+      title: chapter.configuration.title,
+      summary: chapter.configuration.summary,
+      chapterSlug: chapterSlug
+    };
+  });
+}
+
+function extendFile(collectionName, file, config) {
+  return addModelType(collectionName, expandUrls(collectionName, file, config.fileUrlTemplates), config.fileModelTypes);
 }
 
 function addModelType(collectionName, file, modelTypes) {
@@ -819,23 +877,19 @@ function pad(string, size) {
 function useFile(_ref) {
   var collectionName = _ref.collectionName,
       permaId = _ref.permaId;
-  var entryState = useEntryState();
-  return extendFile(collectionName, getItem(entryState.collections, collectionName, permaId), entryState);
+  var file = useEntryStateCollectionItem(collectionName, permaId);
+  return extendFile(collectionName, file, useEntryStateConfig());
 }
 
 function useNestedFiles(_ref) {
   var collectionName = _ref.collectionName,
       parent = _ref.parent;
-  var entryState = useEntryState();
-
-  if (!parent) {
-    return [];
-  }
-
-  return getItems(entryState.collections, collectionName).filter(function (file) {
-    return file.parentFileId === parent.id && file.parentFileModelType === parent.modelType;
-  }).map(function (file) {
-    return extendFile(collectionName, file, entryState);
+  var config = useEntryStateConfig();
+  var files = useEntryStateCollectionItems(collectionName, function (file) {
+    return parent && file.parentFileId === parent.id && file.parentFileModelType === parent.modelType;
+  });
+  return files.map(function (file) {
+    return extendFile(collectionName, file, config);
   });
 }
 
@@ -853,9 +907,9 @@ function useNestedFiles(_ref) {
  */
 
 function useFileRights() {
-  var entryState = useEntryState();
-  var defaultFileRights = entryState.config.defaultFileRights;
-  var imageFiles = getItems(entryState.collections, 'imageFiles');
+  var config = useEntryStateConfig();
+  var imageFiles = useEntryStateCollectionItems('imageFiles');
+  var defaultFileRights = config.defaultFileRights;
   var imageFileRights = imageFiles.reduce(function (result, imageConfig) {
     if (imageConfig && imageConfig.rights) {
       result.push(imageConfig.rights.trim());
@@ -893,8 +947,8 @@ function useFileRights() {
  */
 
 function useLegalInfo() {
-  var entryState = useEntryState();
-  return entryState.config.legalInfo;
+  var config = useEntryStateConfig();
+  return config.legalInfo;
 }
 /**
  * Returns the credits string (rich text) of the entry.
@@ -963,8 +1017,8 @@ function useAvailableQualities(file) {
  */
 
 function useTheme() {
-  var entryState = useEntryState();
-  return entryState.config.theme;
+  var config = useEntryStateConfig();
+  return config.theme;
 }
 
 function updateContentElementConfiguration(_ref) {
@@ -979,7 +1033,7 @@ function updateContentElementConfiguration(_ref) {
   });
 }
 
-var LocaleContext = createContext('en');
+var LocaleContext = createContext$1('en');
 function setupI18n(_ref) {
   var defaultLocale = _ref.defaultLocale,
       locale = _ref.locale,
@@ -1055,10 +1109,16 @@ function useOnScreen(ref) {
 
   useEffect(function () {
     var current = ref.current;
-    var observer = createIntersectionObserver(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 1),
-          entry = _ref3[0];
-
+    var observer = createIntersectionObserver(function (entries) {
+      // Even when observing only a single element, multiple entries
+      // may have queued up. In Chrome this can be observed when
+      // moving an observed element in the DOM: The callback is
+      // invoked once with two entries for the same target, one
+      // claiming the element no longer intersects and one - with a
+      // later timestamp - saying that is does intersect. Assuming
+      // entries are ordered according to time, we only consider the
+      // last entry.
+      var entry = entries[entries.length - 1];
       setIntersecting(entry.isIntersecting);
 
       if (entry.isIntersecting && onIntersecting) {
@@ -1114,7 +1174,7 @@ function createIntersectionObserver(callback, options, skipIframeFix) {
 
 var styles = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isActiveProbe":"useScrollPositionLifecycle-module_isActiveProbe__3VKB5"};
 
-var StaticPreviewContext = createContext(false);
+var StaticPreviewContext = createContext$1(false);
 function StaticPreview(_ref) {
   var children = _ref.children;
   return (
@@ -1124,6 +1184,18 @@ function StaticPreview(_ref) {
     }, children)
   );
 }
+/**
+ * Use inside a content element component to determine whether the
+ * component is being rendered in a static preview, e.g. editor
+ * thumbnails.
+ *
+ * @example
+ * const isStaticPreview = useIsStaticPreview();
+ */
+
+function useIsStaticPreview() {
+  return useContext(StaticPreviewContext);
+}
 function createScrollPositionLifecycleProvider(Context) {
   return function ScrollPositionLifecycleProvider(_ref2) {
     var children = _ref2.children,
@@ -1131,9 +1203,12 @@ function createScrollPositionLifecycleProvider(Context) {
     var ref = useRef();
     var isActiveProbeRef = useRef();
     var isStaticPreview = useContext(StaticPreviewContext);
-    var isPrepared = useOnScreen(ref, {
-      rootMargin: '25% 0px 25% 0px'
+    var shouldLoad = useOnScreen(ref, {
+      rootMargin: '200% 0px 200% 0px'
     });
+    var shouldPrepare = useOnScreen(ref, {
+      rootMargin: '25% 0px 25% 0px'
+    }) && !isStaticPreview;
     var isVisible = useOnScreen(ref) && !isStaticPreview;
     var isActive = useOnScreen(isActiveProbeRef, {
       rootMargin: '-50% 0px -50% 0px',
@@ -1141,11 +1216,12 @@ function createScrollPositionLifecycleProvider(Context) {
     }) && !isStaticPreview;
     var value = useMemo(function () {
       return {
-        isPrepared: isPrepared,
+        shouldLoad: shouldLoad,
+        shouldPrepare: shouldPrepare,
         isVisible: isVisible,
         isActive: isActive
       };
-    }, [isPrepared, isVisible, isActive]);
+    }, [shouldLoad, shouldPrepare, isVisible, isActive]);
     return (
       /*#__PURE__*/
       React.createElement("div", {
@@ -1202,6 +1278,67 @@ function createScrollPositionLifecycleHook(Context) {
   };
 }
 
+var styles$1 = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
+
+var VisibilityContext = React.createContext(false);
+function MotifAreaVisibilityProvider(_ref) {
+  var visible = _ref.visible,
+      children = _ref.children;
+  return (
+    /*#__PURE__*/
+    React.createElement(VisibilityContext.Provider, {
+      value: visible
+    }, children)
+  );
+}
+var MotifArea = function MotifArea(props) {
+  var _props$file;
+
+  var lastPosition = useRef();
+  var position = ((_props$file = props.file) === null || _props$file === void 0 ? void 0 : _props$file.isReady) && getPosition(props);
+  var visible = useContext(VisibilityContext);
+  var elementRef = useRef();
+  var onUpdate = props.onUpdate;
+  var setElementRef = useCallback(function (element) {
+    elementRef.current = element;
+    onUpdate(element);
+  }, [elementRef, onUpdate]);
+  useEffect(function () {
+    if (lastPosition.current && position && (lastPosition.current.top !== position.top || lastPosition.current.left !== position.left || lastPosition.current.width !== position.width || lastPosition.current.height !== position.height)) {
+      onUpdate(elementRef.current);
+    }
+
+    lastPosition.current = position;
+  });
+
+  if (!position) {
+    return null;
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      ref: setElementRef,
+      className: classNames(styles$1.root, _defineProperty({}, styles$1.visible, visible)),
+      style: position,
+      onMouseEnter: props.onMouseEnter,
+      onMouseLeave: props.onMouseLeave
+    })
+  );
+};
+MotifArea.defaultProps = {
+  onUpdate: function onUpdate() {}
+};
+
+function getPosition(props) {
+  return props.file.motifAreaOffsetRect || {
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  };
+}
+
 function useMediaQuery(query) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1235,21 +1372,24 @@ function useMediaQuery(query) {
   return doesMatch;
 }
 
-var styles$1 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","paddingBottom":"Foreground-module_paddingBottom__3OtY4"};
+var styles$2 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","inFirstSection":"Foreground-module_inFirstSection__1r-_i","paddingBottom":"Foreground-module_paddingBottom__3OtY4"};
 
-var ForcePaddingContext = createContext(false);
+var ForcePaddingContext = createContext$1(false);
 function Foreground(props) {
   var forcePadding = useContext(ForcePaddingContext);
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: className(props, forcePadding)
+      className: className(props, forcePadding),
+      style: {
+        minHeight: props.minHeight
+      }
     }, props.children)
   );
 }
 
 function className(props, forcePadding) {
-  return classNames(styles$1.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$1.paddingBottom, props.paddingBottom || forcePadding), styles$1["".concat(props.heightMode, "Height")]);
+  return classNames(styles$2.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$2.paddingBottom, props.paddingBottom || forcePadding), _defineProperty({}, styles$2.inFirstSection, props.inFirstSection), styles$2["".concat(props.heightMode, "Height")]);
 }
 
 /**
@@ -1270,6 +1410,13 @@ function () {
    * @param {string} typeName - Name of the content element type.
    * @param {Object} options
    * @param {React.Component} options.component
+   * @param {boolean} [options.supportsWrappingAroundFloats] -
+   *   In sections with centered layout, content elements can be
+   *   floated to the left or right. By default all content
+   *   elements are cleared to position them below floating
+   *   elements. If a content element renders mainly text that
+   *   can wrap around floating elements, clearing can be
+   *   disabled via this option.
    * @memberof frontend_contentElementTypes
    *
    * @example
@@ -1317,7 +1464,7 @@ var api = {
 // file with an empty one, but found out that extracting the import
 // to a separate file apparently is enough.
 function importComponents() {
-  return import('./components-cfe6a479.js');
+  return import('./components-3ead1b4a.js');
 }
 
 var components = {};
@@ -1363,7 +1510,7 @@ function withInlineEditingAlternative(name, Component) {
   };
 }
 
-var ContentElementAttributesContext = createContext({});
+var ContentElementAttributesContext = createContext$1({});
 function ContentElementAttributesProvider(_ref) {
   var id = _ref.id,
       children = _ref.children;
@@ -1383,7 +1530,7 @@ function useContentElementAttributes() {
   return useContext(ContentElementAttributesContext);
 }
 
-var ContentElementLifecycleContext = createContext();
+var ContentElementLifecycleContext = createContext$1();
 var LifecycleProvider = createScrollPositionLifecycleProvider(ContentElementLifecycleContext);
 var useLifecycle = createScrollPositionLifecycleHook(ContentElementLifecycleContext);
 function ContentElementLifecycleProvider(_ref) {
@@ -1408,7 +1555,11 @@ function ContentElementLifecycleProvider(_ref) {
  * option to be set to true in the `frontend.contentElements.register`
  * call for the content element's type.
  *
- * * `isPrepared is true if the content element is near the viewport.
+ * * `shouldLoad` is true if the content element should start lazy
+ *   load. Becomes true before `shouldPrepare`.
+ *
+ * * `shouldPrepare` is true if the content element is about to enter
+ *   the viewport.
  *
  * * `isActive` is true if the content element is completely in the
  *   viewport.
@@ -1421,7 +1572,7 @@ function ContentElementLifecycleProvider(_ref) {
  *
  * @example
  *
- * const {isActive, isPrepared} = useContentElementLifecycle();
+ * const {isActive, shouldPrepare} = useContentElementLifecycle();
  */
 
 function useContentElementLifecycle(options) {
@@ -1434,7 +1585,7 @@ function useContentElementLifecycle(options) {
   return result;
 }
 
-var styles$2 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
+var styles$3 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
 
 function ContentElementMargin(_ref) {
   var position = _ref.position,
@@ -1447,12 +1598,12 @@ function ContentElementMargin(_ref) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: styles$2.wrapper
+      className: styles$3.wrapper
     }, children)
   );
 }
 
-var styles$3 = {"missing":"ContentElement-module_missing__2_1j9"};
+var styles$4 = {"missing":"ContentElement-module_missing__2_1j9"};
 
 function _createSuper(Derived) {
   function isNativeReflectConstruct() {
@@ -1509,7 +1660,7 @@ function (_React$Component) {
         return (
           /*#__PURE__*/
           React.createElement("div", {
-            className: styles$3.missing
+            className: styles$4.missing
           }, "Error rendering element of type \"", this.props.type, "\"")
         );
       }
@@ -1560,7 +1711,7 @@ var ContentElement = withInlineEditingDecorator('ContentElementDecorator', funct
     return (
       /*#__PURE__*/
       React.createElement("div", {
-        className: styles$3.missing
+        className: styles$4.missing
       }, "Element of unknown type \"", props.type, "\"")
     );
   }
@@ -1575,7 +1726,7 @@ function ContentElements(props) {
     React.createElement(React.Fragment, null, props.items.map(function (item, index) {
       return props.children(item,
       /*#__PURE__*/
-      React.createElement(ContentElement, {
+      React.createElement(MemoizedContentElement, {
         key: item.id,
         id: item.id,
         permaId: item.permaId,
@@ -1588,6 +1739,9 @@ function ContentElements(props) {
     }))
   );
 }
+var MemoizedContentElement = React.memo(ContentElement, function (prevProps, nextProps) {
+  return prevProps.id === nextProps.id && prevProps.permaId === nextProps.permaId && prevProps.type === nextProps.type && prevProps.position === nextProps.position && prevProps.itemProps === nextProps.itemProps && prevProps.sectionProps === nextProps.sectionProps;
+});
 ContentElements.defaultProps = {
   children: function children(item, child) {
     return child;
@@ -1598,7 +1752,7 @@ function useNarrowViewport() {
   return useMediaQuery('(max-width: 950px)');
 }
 
-var styles$4 = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","right":"TwoColumn-module_right__Fr52a","narrow":"TwoColumn-module_narrow__qAgnL","wide":"TwoColumn-module_wide__xdF_t"};
+var styles$5 = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","right":"TwoColumn-module_right__Fr52a","narrow":"TwoColumn-module_narrow__qAgnL","wide":"TwoColumn-module_wide__xdF_t"};
 
 function availablePositions(narrow) {
   if (narrow) {
@@ -1613,13 +1767,18 @@ function TwoColumn(props) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: classNames(styles$4.root, styles$4[props.align], narrow ? styles$4.narrow : styles$4.wide)
+      className: classNames(styles$5.root, styles$5[props.align], narrow ? styles$5.narrow : styles$5.wide)
     },
     /*#__PURE__*/
     React.createElement("div", {
-      className: styles$4.inline,
+      className: classNames(styles$5.group),
+      key: props.align
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$5.inline,
       ref: props.contentAreaRef
-    }), renderItems(props, narrow), renderPlaceholder(props.placeholder))
+    })), renderItems(props, narrow), renderPlaceholder(props.placeholder))
   );
 }
 TwoColumn.defaultProps = {
@@ -1632,7 +1791,7 @@ function renderItems(props, narrow) {
       /*#__PURE__*/
       React.createElement("div", {
         key: index,
-        className: classNames(styles$4.group, styles$4["group-".concat(group.position)])
+        className: classNames(styles$5.group, styles$5["group-".concat(group.position)])
       }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'full'))
     );
   });
@@ -1643,7 +1802,7 @@ function renderItemGroup(props, group, position) {
     return (
       /*#__PURE__*/
       React.createElement("div", {
-        className: styles$4[position]
+        className: styles$5[position]
       }, props.children(
       /*#__PURE__*/
       React.createElement(ContentElements, {
@@ -1694,22 +1853,22 @@ function renderPlaceholder(placeholder) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: classNames(styles$4.group)
+      className: classNames(styles$5.group)
     },
     /*#__PURE__*/
     React.createElement("div", {
-      className: styles$4.inline
+      className: styles$5.inline
     }, placeholder))
   );
 }
 
-var styles$5 = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
+var styles$6 = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","clear":"Center-module_clear__jJEap","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
 
 function Center(props) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: classNames(styles$5.root)
+      className: classNames(styles$6.root)
     },
     /*#__PURE__*/
     React.createElement("div", {
@@ -1724,21 +1883,28 @@ function Center(props) {
         /*#__PURE__*/
         React.createElement("div", {
           key: item.id,
-          className: classNames(styles$5.outer, styles$5["outer-".concat(item.position)])
+          className: outerClassName(item)
         },
         /*#__PURE__*/
         React.createElement("div", {
-          className: classNames(styles$5.item, styles$5["item-".concat(item.position)])
+          className: classNames(styles$6.item, styles$6["item-".concat(item.position)])
         }, props.children(
         /*#__PURE__*/
         React.createElement("div", {
-          className: styles$5["inner-".concat(item.position)]
+          className: styles$6["inner-".concat(item.position)]
         }, child), boxProps(props.items, item, index))))
       );
     }), renderPlaceholder$1(props.placeholder))
   );
 }
 
+function outerClassName(item) {
+  var _api$contentElementTy = api.contentElementTypes.getOptions(item.type),
+      supportsWrappingAroundFloats = _api$contentElementTy.supportsWrappingAroundFloats;
+
+  return classNames(styles$6.outer, styles$6["outer-".concat(item.position)], _defineProperty({}, styles$6.clear, !supportsWrappingAroundFloats));
+}
+
 function boxProps(items, item, index) {
   var previous = items[index - 1];
   var next = items[index + 1];
@@ -1757,16 +1923,18 @@ function renderPlaceholder$1(placeholder) {
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      className: classNames(styles$5.outer)
+      className: classNames(styles$6.outer)
     },
     /*#__PURE__*/
     React.createElement("div", {
-      className: classNames(styles$5.item)
+      className: classNames(styles$6.item)
     }, placeholder))
   );
 }
 
-var Layout = withInlineEditingAlternative('LayoutWithPlaceholder', LayoutWithoutInlineEditing);
+var Layout = React.memo(withInlineEditingAlternative('LayoutWithPlaceholder', LayoutWithoutInlineEditing), function (prevProps, nextProps) {
+  return prevProps.sectionId === nextProps.sectionId && prevProps.items === nextProps.items && prevProps.appearance === nextProps.appearance && prevProps.contentAreaRef === nextProps.contentAreaRef && prevProps.sectionProps === nextProps.sectionProps;
+});
 function LayoutWithoutInlineEditing(props) {
   if (props.sectionProps.layout === 'center') {
     return (
@@ -1809,7 +1977,7 @@ function usePostMessageListener(receiveData) {
   }, [receiveData]);
 }
 
-var styles$6 = {"text-s":"20px","text-base":"22px","text-l":"40px","text-xl":"66px","text-2xl":"110px","h2":"Text-module_h2__34chJ","h1":"Text-module_h1__2_5kX","body":"Text-module_body__4oWD-","caption":"Text-module_caption__3_6Au"};
+var styles$7 = {"text-s":"20px","text-base":"22px","text-l":"40px","text-xl":"66px","text-2xl":"110px","h2":"Text-module_h2__34chJ","h1":"Text-module_h1__2_5kX","body":"Text-module_body__4oWD-","caption":"Text-module_caption__3_6Au"};
 
 /**
  * Render some text using the default typography scale.
@@ -1825,7 +1993,7 @@ function Text(_ref) {
       scaleCategory = _ref.scaleCategory,
       children = _ref.children;
   return React.createElement(inline ? 'span' : 'div', {
-    className: styles$6[scaleCategory]
+    className: styles$7[scaleCategory]
   }, children);
 }
 
@@ -1834,7 +2002,7 @@ function useContentElementConfigurationUpdate() {
   return useContext(ContentElementConfigurationUpdateContext);
 }
 
-var ContentElementEditorCommandEmitterContext = createContext({
+var ContentElementEditorCommandEmitterContext = createContext$1({
   on: function on() {},
   off: function off() {}
 });
@@ -1851,15 +2019,15 @@ function useContentElementEditorCommandSubscription(callback) {
   }, [emitter, callback, contentElementId]);
 }
 
-var ContentElementEditorStateContext = createContext({
+var ContentElementEditorStateContext = createContext$1({
   isSelected: false,
   isEditable: false,
   setTransientState: function setTransientState() {}
 });
 /**
  * Use inside a content element component to determine whether the
- * component is being rendered inside the editor and whether the
- * content element is currently selected. This can be used to
+ * component is being rendered inside the editor iframe, and whether
+ * the content element is currently selected. This can be used to
  * implement simple inline editing capabilities like displaying extra
  * information when the content element is selected.
  *
@@ -1990,4 +2158,4 @@ function renderLeaf(_ref3) {
   );
 }
 
-export { loadInlineEditingComponents as A, api as B, useContentElementConfigurationUpdate as C, useContentElementEditorCommandSubscription as D, EntryStateProvider as E, Foreground as F, useContentElementEditorState as G, useContentElementLifecycle as H, EditableText as I, useOnScreen as J, useLocale as K, Layout as L, ContentElementEditorCommandEmitterContext as M, ForcePaddingContext as N, updateContentElementConfiguration as O, PhonePlatformContext as P, ContentElementConfigurationUpdateContext as Q, ContentElementEditorStateContext as R, StaticPreview as S, Text as T, LayoutWithoutInlineEditing as U, renderElement as V, renderLeaf as W, _defineProperty as _, _objectWithoutProperties as a, useFileRights as b, useLegalInfo as c, useCredits as d, useShareUrl as e, useShareProviders as f, useTheme as g, _slicedToArray as h, useEntryStructure as i, createScrollPositionLifecycleProvider as j, createScrollPositionLifecycleHook as k, _objectSpread2 as l, useEntryMetadata as m, useNestedFiles as n, useFile as o, useMediaQuery as p, usePostMessageListener as q, withInlineEditingAlternative as r, LocaleProvider as s, _toConsumableArray as t, useI18n as u, useAvailableQualities as v, withInlineEditingDecorator as w, useEntryStateDispatch as x, useSectionStructure as y, setupI18n as z };
+export { renderElement as $, useEntryStateDispatch as A, useSection as B, loadInlineEditingComponents as C, setupI18n as D, EntryStateProvider as E, Foreground as F, api as G, useContentElementConfigurationUpdate as H, useContentElementEditorCommandSubscription as I, useContentElementEditorState as J, useContentElementLifecycle as K, Layout as L, MotifArea as M, EditableText as N, useOnScreen as O, PhonePlatformContext as P, useLocale as Q, ContentElementEditorCommandEmitterContext as R, StaticPreview as S, Text as T, MotifAreaVisibilityProvider as U, ForcePaddingContext as V, updateContentElementConfiguration as W, ContentElementConfigurationUpdateContext as X, ContentElementEditorStateContext as Y, LayoutWithoutInlineEditing as Z, _slicedToArray as _, _defineProperty as a, renderLeaf as a0, _objectWithoutProperties as b, useFileRights as c, useLegalInfo as d, useCredits as e, useShareProviders as f, useShareUrl as g, useTheme as h, useChapters as i, createScrollPositionLifecycleProvider as j, createScrollPositionLifecycleHook as k, useEntryStructure as l, _objectSpread2 as m, useIsStaticPreview as n, useEntryMetadata as o, useNestedFiles as p, useFile as q, useMediaQuery as r, useSectionContentElements as s, usePostMessageListener as t, useI18n as u, withInlineEditingAlternative as v, withInlineEditingDecorator as w, LocaleProvider as x, _toConsumableArray as y, useAvailableQualities as z };