pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/contentElements-editor.js

@@ -1,8 +1,9 @@
 import I18n from 'i18n-js';
-import { editor, InlineFileRightsMenuItem, ImageModifierListInputView, EditMotifAreaDialogView, buttonStyles, dialogViewStyles, dialogView } from 'pageflow-scrolled/editor';
-import { contentElementWidths, utils, paletteColor } from 'pageflow-scrolled/frontend';
-import { SelectInputView, SeparatorView, CheckBoxInputView, LabelOnlyView, ColorInputView, UrlInputView, TextInputView, SliderInputView, ConfigurationEditorView, cssModulesUtils, TabsView, inputView, NumberInputView } from 'pageflow/ui';
-import { InfoBoxView, FileInputView, CheckBoxInputView as CheckBoxInputView$1, ColorInputView as ColorInputView$1, editor as editor$1, transientReferences, ListView, cssModulesUtils as cssModulesUtils$1, app, SelectInputView as SelectInputView$1, SeparatorView as SeparatorView$1, SliderInputView as SliderInputView$1, EnumTableCellView } from 'pageflow/editor';
+import { editor, InlineFileRightsMenuItem, ImageModifierListInputView, EditMotifAreaDialogView, buttonStyles, dialogViewStyles, dialogView, PlaybackStartSelectInputView, ScrollRangeSelectInputView } from 'pageflow-scrolled/editor';
+import { contentElementWidths, utils, processImageModifiers, paletteColor } from 'pageflow-scrolled/frontend';
+import { SelectInputView, SeparatorView, CheckBoxInputView, LabelOnlyView, ColorInputView, UrlInputView, TextInputView, SliderInputView, cssModulesUtils, TabsView, inputView, NumberInputView } from 'pageflow/ui';
+import { InfoBoxView, FileInputView, CheckBoxInputView as CheckBoxInputView$1, ColorInputView as ColorInputView$1, EditConfigurationView, DestroyMenuItem, transientReferences, ListView, cssModulesUtils as cssModulesUtils$1, app, SelectInputView as SelectInputView$1, SeparatorView as SeparatorView$1, SliderInputView as SliderInputView$1, EnumTableCellView, editor as editor$1, UploadableFile, altMetaDataAttribute, altConfigurationEditorInput, OembedUrlInputView } from 'pageflow/editor';
+import { Point, Node } from 'slate';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import _ from 'underscore';
@@ -10,55 +11,9 @@ import React, { useReducer, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { DraggableCore } from 'react-draggable';
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
+import { DotLottie } from '@lottiefiles/dotlottie-web';
+import wasmUrl from '@lottiefiles/dotlottie-web/dotlottie-player.wasm';
+import { review } from 'pageflow-scrolled/review';
 
 var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M448 448c0 17.69-14.33 32-32 32h-96c-17.67 0-32-14.31-32-32s14.33-32 32-32h16v-144h-224v144H128c17.67 0 32 14.31 32 32s-14.33 32-32 32H32c-17.67 0-32-14.31-32-32s14.33-32 32-32h16v-320H32c-17.67 0-32-14.31-32-32s14.33-32 32-32h96c17.67 0 32 14.31 32 32s-14.33 32-32 32H112v112h224v-112H320c-17.67 0-32-14.31-32-32s14.33-32 32-32h96c17.67 0 32 14.31 32 32s-14.33 32-32 32h-16v320H416C433.7 416 448 430.3 448 448z'/%3e%3c/svg%3e";
 
@@ -70,29 +25,34 @@ editor.contentElementTypes.register('heading', {
     width: contentElementWidths.xl,
     marginTop: 'none'
   },
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  defaultsInputs() {
+    this.input('hyphens', SelectInputView, {
+      values: ['auto', 'manual']
+    });
+  },
+  configurationEditor({
+    entry
+  }) {
     this.listenTo(this.model, 'change:hyphens', this.refresh);
-    var modelDelegator = entry.createLegacyTypographyVariantDelegator({
+    const modelDelegator = entry.createLegacyTypographyVariantDelegator({
       model: this.model,
       paletteColorPropertyName: 'color'
     });
     this.tab('general', function () {
       this.group('ContentElementTypographyVariant', {
-        entry: entry,
+        entry,
         model: modelDelegator,
-        getPreviewConfiguration: function getPreviewConfiguration(configuration, typographyVariant) {
-          return _objectSpread2(_objectSpread2({}, configuration), {}, {
-            textSize: 'small',
-            typographyVariant: typographyVariant
-          });
-        }
+        getPreviewConfiguration: (configuration, typographyVariant) => ({
+          ...configuration,
+          textSize: 'small',
+          typographyVariant
+        })
       });
       this.input('textSize', SelectInputView, {
         values: ['auto', 'large', 'medium', 'small']
       });
       this.group('PaletteColor', {
-        entry: entry,
+        entry,
         model: modelDelegator,
         propertyName: 'color'
       });
@@ -109,7 +69,7 @@ editor.contentElementTypes.register('heading', {
       }
       this.view(SeparatorView);
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
     });
   }
@@ -120,42 +80,36 @@ var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBo
 editor.contentElementTypes.register('textBlock', {
   pictogram: img$1,
   supportedPositions: ['inline'],
-  configurationEditor: function configurationEditor(_ref) {
-    var _this = this;
-    var entry = _ref.entry,
-      contentElement = _ref.contentElement;
-    var pendingRefresh;
-    this.listenTo(contentElement.transientState, 'change:exampleNode', function () {
-      // This is a terrible hack to prevent closing the minicolors
-      // dropdown while adjusting colors. Calling refresh is needed
-      // to update typography drop downs. Delay until color picker
-      // is closed.
-      if (document.activeElement && document.activeElement.tagName === 'INPUT' && document.activeElement.className === 'minicolors-input') {
-        if (!pendingRefresh) {
-          document.activeElement.addEventListener('blur', function () {
-            pendingRefresh = false;
-            _this.refresh();
-          }, {
-            once: true
-          });
-          pendingRefresh = true;
-        }
-        return;
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
+    var _contentElement$trans;
+    let lastExampleNodeType = (_contentElement$trans = contentElement.transientState.get('exampleNode')) === null || _contentElement$trans === void 0 ? void 0 : _contentElement$trans.type;
+    this.listenTo(contentElement.transientState, 'change:exampleNode', () => {
+      var _contentElement$trans2;
+      const exampleNodeType = (_contentElement$trans2 = contentElement.transientState.get('exampleNode')) === null || _contentElement$trans2 === void 0 ? void 0 : _contentElement$trans2.type;
+      if (exampleNodeType !== lastExampleNodeType) {
+        lastExampleNodeType = exampleNodeType;
+        this.refresh();
       }
-      _this.refresh();
     });
     this.tab('general', function () {
-      var exampleNode = ensureTextContent(contentElement.transientState.get('exampleNode'));
-      var modelDelegator = entry.createLegacyTypographyVariantDelegator({
+      const exampleNode = contentElement.transientState.get('exampleNode');
+      const modelDelegator = entry.createLegacyTypographyVariantDelegator({
         model: contentElement.transientState,
         paletteColorPropertyName: 'color'
       });
-      var _getPreviewConfiguration = function getPreviewConfiguration(configuration, properties) {
-        return exampleNode ? _objectSpread2(_objectSpread2({}, configuration), {}, {
-          value: [_objectSpread2(_objectSpread2({}, exampleNode), {}, {
+      const getPreviewConfiguration = (configuration, properties) => {
+        const currentExampleNode = ensureTextContent(contentElement.transientState.get('exampleNode'));
+        return currentExampleNode ? {
+          ...configuration,
+          value: [{
+            ...currentExampleNode,
             // Ensure size in preview is not overridden by legacy variant
-            variant: modelDelegator.get('typographyVariant')
-          }, properties),
+            variant: modelDelegator.get('typographyVariant'),
+            ...properties
+          },
           // Ensure content spans whole preview viewport if
           // section uses "cards" appearance.
           {
@@ -169,30 +123,34 @@ editor.contentElementTypes.register('textBlock', {
               text: ''
             }]
           }]
-        }) : configuration;
+        } : configuration;
       };
       this.group('ContentElementTypographyVariant', {
-        entry: entry,
+        entry,
         model: modelDelegator,
         prefix: exampleNode ? utils.camelize(exampleNode.type) : 'none',
-        getPreviewConfiguration: function getPreviewConfiguration(configuration, variant) {
-          return _getPreviewConfiguration(configuration, {
-            variant: variant
+        previewConfigurationBindingModel: contentElement.transientState,
+        previewConfigurationBinding: 'exampleNode',
+        getPreviewConfiguration(configuration, variant) {
+          return getPreviewConfiguration(configuration, {
+            variant
           });
         }
       });
       this.group('ContentElementTypographySize', {
-        entry: entry,
+        entry,
         model: modelDelegator,
         prefix: exampleNode ? utils.camelize(exampleNode.type) : 'none',
-        getPreviewConfiguration: function getPreviewConfiguration(configuration, size) {
-          return _getPreviewConfiguration(configuration, {
-            size: size
+        previewConfigurationBindingModel: contentElement.transientState,
+        previewConfigurationBinding: 'exampleNode',
+        getPreviewConfiguration(configuration, size) {
+          return getPreviewConfiguration(configuration, {
+            size
           });
         }
       });
       this.group('PaletteColor', {
-        entry: entry,
+        entry,
         model: modelDelegator,
         propertyName: 'color'
       });
@@ -206,31 +164,90 @@ editor.contentElementTypes.register('textBlock', {
       });
     });
   },
-  split: function split(configuration, insertIndex) {
-    var value = getValue(configuration);
-    return [_objectSpread2(_objectSpread2({}, configuration), {}, {
-      value: value.slice(0, insertIndex)
-    }), _objectSpread2(_objectSpread2({}, configuration), {}, {
-      value: value.slice(insertIndex)
-    })];
+  split(configuration, at, {
+    ranges
+  }) {
+    const value = getValue(configuration);
+    const beforeValue = value.slice(0, at);
+    const afterValue = value.slice(at);
+    const beforeRanges = {};
+    const afterRanges = {};
+    Object.entries(ranges).forEach(([id, range]) => {
+      const startPath = Math.min(range.anchor.path[0], range.focus.path[0]);
+      const endPath = Math.max(range.anchor.path[0], range.focus.path[0]);
+      if (endPath < at) {
+        beforeRanges[id] = range;
+      } else if (startPath >= at) {
+        afterRanges[id] = shiftRange(range, -at);
+      } else {
+        const start = Point.isBefore(range.anchor, range.focus) ? range.anchor : range.focus;
+        beforeRanges[id] = {
+          anchor: start,
+          focus: endOfBlock(beforeValue, at - 1)
+        };
+      }
+    });
+    return {
+      before: {
+        configuration: {
+          ...configuration,
+          value: beforeValue
+        },
+        ranges: beforeRanges
+      },
+      after: {
+        configuration: {
+          ...configuration,
+          value: afterValue
+        },
+        ranges: afterRanges
+      }
+    };
   },
-  merge: function merge(configurationA, configurationB) {
-    var value = getValue(configurationA).concat(getValue(configurationB));
-    return _objectSpread2(_objectSpread2({}, configurationA), {}, {
-      value: value
+  merge(configurationA, configurationB, {
+    rangesA,
+    rangesB
+  }) {
+    const valueA = getValue(configurationA);
+    const valueB = getValue(configurationB);
+    const ranges = {
+      ...rangesA
+    };
+    Object.entries(rangesB).forEach(([id, range]) => {
+      ranges[id] = shiftRange(range, valueA.length);
     });
+    return {
+      configuration: {
+        ...configurationA,
+        value: valueA.concat(valueB)
+      },
+      ranges
+    };
   },
-  getLength: function getLength(configuration) {
+  getLength(configuration) {
     return getValue(configuration).length;
   },
-  handleDestroy: function handleDestroy(contentElement) {
-    var transientState = contentElement.get('transientState') || {};
+  handleDestroy(contentElement) {
+    const transientState = contentElement.get('transientState') || {};
     if (!transientState.editableTextIsSingleBlock) {
       contentElement.postCommand({
         type: 'REMOVE'
       });
       return false;
     }
+  },
+  handleDuplicate(contentElement) {
+    contentElement.postCommand({
+      type: 'DUPLICATE'
+    });
+  },
+  handleMove(contentElement, to) {
+    contentElement.postCommand({
+      type: 'MOVE_TO',
+      payload: {
+        to
+      }
+    });
   }
 });
 function getValue(configuration) {
@@ -242,13 +259,35 @@ function getValue(configuration) {
     }]
   }];
 }
+function shiftRange(range, delta) {
+  return {
+    anchor: shiftPoint(range.anchor, delta),
+    focus: shiftPoint(range.focus, delta)
+  };
+}
+function shiftPoint(point, delta) {
+  return {
+    ...point,
+    path: [point.path[0] + delta, ...point.path.slice(1)]
+  };
+}
+function endOfBlock(value, blockIndex) {
+  const [lastNode, lastPath] = Node.last({
+    children: value
+  }, [blockIndex]);
+  return {
+    path: lastPath,
+    offset: lastNode.text.length
+  };
+}
 function ensureTextContent(node) {
   if (node && node.children.length === 1 && node.children[0].text === '') {
-    return _objectSpread2(_objectSpread2({}, node), {}, {
+    return {
+      ...node,
       children: [{
         text: 'Lorem ipsum dolor sit amet'
       }]
-    });
+    };
   } else {
     return node;
   }
@@ -261,155 +300,94 @@ editor.contentElementTypes.register('inlineImage', {
   category: 'media',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry,
-      contentElement = _ref.contentElement;
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  defaultsInputs() {
+    this.input('enableFullscreen', CheckBoxInputView);
+  },
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
     this.tab('general', function () {
-      var _this = this;
       this.input('id', FileInputView, {
         collection: 'image_files',
         fileSelectionHandler: 'contentElementConfiguration',
-        positioning: function positioning(imageModifiers) {
-          return imageModifiers === null || imageModifiers === void 0 ? void 0 : imageModifiers.length;
-        },
+        positioning: imageModifiers => !!processImageModifiers(imageModifiers).aspectRatio,
         positioningBinding: 'imageModifiers',
-        positioningOptions: function positioningOptions() {
-          var _this$model$get, _this$model$get$;
-          var aspectRatio = entry.getAspectRatio((_this$model$get = _this.model.get('imageModifiers')) === null || _this$model$get === void 0 ? void 0 : (_this$model$get$ = _this$model$get[0]) === null || _this$model$get$ === void 0 ? void 0 : _this$model$get$.value);
+        positioningOptions: () => {
+          const {
+            aspectRatio
+          } = processImageModifiers(this.model.get('imageModifiers'));
           return {
-            preview: aspectRatio && 1 / aspectRatio
+            preview: aspectRatio && 1 / entry.getAspectRatio(aspectRatio)
           };
         },
         dropDownMenuItems: [InlineFileRightsMenuItem]
       });
       this.input('imageModifiers', ImageModifierListInputView, {
-        entry: entry,
+        entry,
         visibleBinding: 'id',
-        visible: function visible() {
-          return _this.model.getReference('id', 'image_files');
-        }
+        visible: () => this.model.getReference('id', 'image_files')
       });
       this.input('portraitId', FileInputView, {
         collection: 'image_files',
         fileSelectionHandler: 'contentElementConfiguration',
-        positioning: function positioning(imageModifiers) {
-          return imageModifiers === null || imageModifiers === void 0 ? void 0 : imageModifiers.length;
-        },
+        positioning: imageModifiers => !!processImageModifiers(imageModifiers).aspectRatio,
         positioningBinding: 'portraitImageModifiers',
-        positioningOptions: function positioningOptions() {
-          var _this$model$get2, _this$model$get2$;
-          var aspectRatio = entry.getAspectRatio((_this$model$get2 = _this.model.get('portraitImageModifiers')) === null || _this$model$get2 === void 0 ? void 0 : (_this$model$get2$ = _this$model$get2[0]) === null || _this$model$get2$ === void 0 ? void 0 : _this$model$get2$.value);
+        positioningOptions: () => {
+          const {
+            aspectRatio
+          } = processImageModifiers(this.model.get('portraitImageModifiers'));
           return {
-            preview: aspectRatio && 1 / aspectRatio
+            preview: aspectRatio && 1 / entry.getAspectRatio(aspectRatio)
           };
         }
       });
       this.input('portraitImageModifiers', ImageModifierListInputView, {
-        entry: entry,
+        entry,
         visibleBinding: 'portraitId',
-        visible: function visible() {
-          return _this.model.getReference('portraitId', 'image_files');
-        }
+        visible: () => this.model.getReference('portraitId', 'image_files')
       });
       this.input('enableFullscreen', CheckBoxInputView, {
         disabledBinding: ['position', 'width'],
-        disabled: function disabled() {
-          return contentElement.getWidth() === contentElementWidths.full;
-        },
+        disabled: () => contentElement.getWidth() === contentElementWidths.full,
         displayUncheckedIfDisabled: true
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
       this.group('ContentElementInlineFileRightsSettings');
     });
   }
 });
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
 var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M463.1 32h-416C21.49 32-.0001 53.49-.0001 80v352c0 26.51 21.49 48 47.1 48h416c26.51 0 48-21.49 48-48v-352C511.1 53.49 490.5 32 463.1 32zM111.1 408c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8L111.1 408zM111.1 280c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V280zM111.1 152c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8L111.1 152zM351.1 400c0 8.836-7.164 16-16 16H175.1c-8.836 0-16-7.164-16-16v-96c0-8.838 7.164-16 16-16h160c8.836 0 16 7.162 16 16V400zM351.1 208c0 8.836-7.164 16-16 16H175.1c-8.836 0-16-7.164-16-16v-96c0-8.838 7.164-16 16-16h160c8.836 0 16 7.162 16 16V208zM463.1 408c0 4.418-3.582 8-8 8h-47.1c-4.418 0-7.1-3.582-7.1-8l0-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V408zM463.1 280c0 4.418-3.582 8-8 8h-47.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V280zM463.1 152c0 4.418-3.582 8-8 8h-47.1c-4.418 0-8-3.582-8-8l0-48c0-4.418 3.582-8 7.1-8h47.1c4.418 0 8 3.582 8 8V152z'/%3e%3c/svg%3e";
 
-var EditMotifAreaMenuItem = Backbone.Model.extend({
+const EditMotifAreaMenuItem = Backbone.Model.extend({
   defaults: {
     name: 'editMotifArea'
   },
-  initialize: function initialize(attributes, _ref) {
-    var _this = this;
-    var inputModel = _ref.inputModel,
-      propertyName = _ref.propertyName,
-      file = _ref.file;
+  initialize(attributes, {
+    inputModel,
+    propertyName,
+    file
+  }) {
     this.set('label', I18n.t('pageflow_scrolled.editor.edit_motif_area_menu_item'));
-    var update = function update() {
-      _this.set('hidden', inputModel.get('position') !== 'backdrop');
+    const update = () => {
+      this.set('hidden', inputModel.get('position') !== 'backdrop');
     };
-    this.listenTo(inputModel, "change:position", update);
+    this.listenTo(inputModel, `change:position`, update);
     update();
-    this.selected = function () {
+    this.selected = () => {
       EditMotifAreaDialogView.show({
         model: inputModel,
-        propertyName: propertyName,
-        file: file
+        propertyName,
+        file
       });
     };
   }
@@ -419,15 +397,32 @@ editor.contentElementTypes.register('inlineVideo', {
   category: 'media',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
   supportedWidthRange: ['xxs', 'full'],
-  configurationEditor: function configurationEditor(_ref2) {
-    var entry = _ref2.entry;
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  defaultsInputs() {
+    this.input('playbackMode', SelectInputView, {
+      values: ['manual', 'autoplay', 'autoplayIfUnmuted', 'loop']
+    });
+    this.input('enableFullscreen', CheckBoxInputView$1);
+  },
+  configurationEditor({
+    entry
+  }) {
     migrateLegacyAutoplay(this.model);
     this.tab('general', function () {
-      var _this2 = this;
       this.input('id', FileInputView, {
         collection: 'video_files',
         fileSelectionHandler: 'contentElementConfiguration',
-        positioning: false,
+        positioning: imageModifiers => !!processImageModifiers(imageModifiers).aspectRatio,
+        positioningBinding: 'imageModifiers',
+        positioningOptions: () => {
+          const {
+            aspectRatio
+          } = processImageModifiers(this.model.get('imageModifiers'));
+          return {
+            preview: aspectRatio && 1 / entry.getAspectRatio(aspectRatio)
+          };
+        },
         defaultTextTrackFilePropertyName: 'defaultTextTrackFileId',
         dropDownMenuItems: [EditMotifAreaMenuItem, InlineFileRightsMenuItem]
       });
@@ -437,10 +432,24 @@ editor.contentElementTypes.register('inlineVideo', {
         positioning: false,
         dropDownMenuItems: [InlineFileRightsMenuItem]
       });
+      this.input('imageModifiers', ImageModifierListInputView, {
+        entry,
+        visibleBinding: 'id',
+        visible: () => this.model.getReference('id', 'video_files')
+      });
       this.input('portraitId', FileInputView, {
         collection: 'video_files',
         fileSelectionHandler: 'contentElementConfiguration',
-        positioning: false,
+        positioning: imageModifiers => !!processImageModifiers(imageModifiers).aspectRatio,
+        positioningBinding: 'portraitImageModifiers',
+        positioningOptions: () => {
+          const {
+            aspectRatio
+          } = processImageModifiers(this.model.get('portraitImageModifiers'));
+          return {
+            preview: aspectRatio && 1 / entry.getAspectRatio(aspectRatio)
+          };
+        },
         defaultTextTrackFilePropertyName: 'defaultTextTrackFileId',
         dropDownMenuItems: [EditMotifAreaMenuItem, InlineFileRightsMenuItem]
       });
@@ -449,20 +458,21 @@ editor.contentElementTypes.register('inlineVideo', {
         fileSelectionHandler: 'contentElementConfiguration',
         positioning: false,
         visibleBinding: 'portraitId',
-        visible: function visible() {
-          return _this2.model.getReference('portraitId', 'video_files');
-        },
+        visible: () => this.model.getReference('portraitId', 'video_files'),
         dropDownMenuItems: [InlineFileRightsMenuItem]
       });
+      this.input('portraitImageModifiers', ImageModifierListInputView, {
+        entry,
+        visibleBinding: 'portraitId',
+        visible: () => this.model.getReference('portraitId', 'video_files')
+      });
       this.view(SeparatorView);
       this.input('playbackMode', SelectInputView, {
-        values: ['manual', 'autoplay', 'loop']
+        values: ['manual', 'autoplay', 'autoplayIfUnmuted', 'loop']
       });
       this.input('hideControlBar', CheckBoxInputView$1, {
-        disabledBinding: 'playbackMode',
-        disabled: function disabled(playbackMode) {
-          return playbackMode === 'loop';
-        },
+        disabledBinding: ['playbackMode', 'imageModifiers'],
+        disabled: ([playbackMode, imageModifiers]) => playbackMode === 'loop' || processImageModifiers(imageModifiers).rounded === 'circle',
         displayCheckedIfDisabled: true
       });
       this.input('unmuteLabel', LabelOnlyView);
@@ -471,12 +481,7 @@ editor.contentElementTypes.register('inlineVideo', {
       });
       this.input('rewindOnUnmute', CheckBoxInputView$1, {
         disabledBinding: ['playbackMode', 'keepMuted'],
-        disabled: function disabled(_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2),
-            playbackMode = _ref4[0],
-            keepMuted = _ref4[1];
-          return playbackMode !== 'autoplay' || keepMuted;
-        },
+        disabled: ([playbackMode, keepMuted]) => playbackMode !== 'autoplay' || keepMuted,
         displayUncheckedIfDisabled: true
       });
       this.view(SeparatorView);
@@ -484,12 +489,17 @@ editor.contentElementTypes.register('inlineVideo', {
         values: ['play', 'mute', 'turnDown']
       });
       this.view(SeparatorView);
+      this.input('enableFullscreen', CheckBoxInputView$1, {
+        disabledBinding: ['position', 'playbackMode'],
+        disabled: ([position, playbackMode]) => position === 'backdrop' || playbackMode === 'loop',
+        displayUncheckedIfDisabled: true
+      });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
       this.group('ContentElementInlineFileRightsSettings');
     });
@@ -503,6 +513,11 @@ function migrateLegacyAutoplay(model) {
   }
 }
 
+const defaultRemainingWaveformColor = '#828282ed';
+const defaultRemainingWaveformColorInverted = 'rgba(0, 0, 0, 0.5)';
+const defaultWaveformCursorColor = '#fff';
+const defaultWaveformCursorColorInverted = '#888';
+
 var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M192 352c53.03 0 96-42.97 96-96v-160c0-53.03-42.97-96-96-96s-96 42.97-96 96v160C96 309 138.1 352 192 352zM344 192C330.7 192 320 202.7 320 215.1V256c0 73.33-61.97 132.4-136.3 127.7c-66.08-4.169-119.7-66.59-119.7-132.8L64 215.1C64 202.7 53.25 192 40 192S16 202.7 16 215.1v32.15c0 89.66 63.97 169.6 152 181.7V464H128c-18.19 0-32.84 15.18-31.96 33.57C96.43 505.8 103.8 512 112 512h160c8.222 0 15.57-6.216 15.96-14.43C288.8 479.2 274.2 464 256 464h-40v-33.77C301.7 418.5 368 344.9 368 256V215.1C368 202.7 357.3 192 344 192z'/%3e%3c/svg%3e";
 
 editor.contentElementTypes.register('inlineAudio', {
@@ -510,14 +525,33 @@ editor.contentElementTypes.register('inlineAudio', {
   category: 'media',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
+  supportedCaptions: true,
+  supportedStyles: [{
+    name: 'boxShadow',
+    when: posterId => !!posterId,
+    binding: 'posterId'
+  }, {
+    name: 'outline',
+    when: posterId => !!posterId,
+    binding: 'posterId'
+  }],
   defaultConfig: {
     playerControlVariant: 'waveformBars'
   },
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
-    var themeOptions = entry.getTheme().get('options');
+  defaultsInputs() {
+    this.input('autoplay', CheckBoxInputView$1);
+    this.input('playerControlVariant', SelectInputView, {
+      values: ['waveformBars', 'waveformLines', 'waveform', 'classic']
+    });
+  },
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
+    const themeProperties = entry.getThemeProperties();
+    const invert = contentElement.section.configuration.get('invert');
     this.tab('general', function () {
-      var _themeOptions$propert, _themeOptions$propert2, _themeOptions$colors;
+      var _themeProperties$root, _themeProperties$colo;
       this.input('id', FileInputView, {
         collection: 'audio_files',
         fileSelectionHandler: 'contentElementConfiguration',
@@ -542,19 +576,39 @@ editor.contentElementTypes.register('inlineAudio', {
         ensureValueDefined: true
       });
       this.input('waveformColor', ColorInputView, {
+        alpha: true,
         visibleBinding: 'playerControlVariant',
-        visible: function visible(variant) {
-          return variant === null || variant === void 0 ? void 0 : variant.startsWith('waveform');
-        },
-        defaultValue: ((_themeOptions$propert = themeOptions.properties) === null || _themeOptions$propert === void 0 ? void 0 : (_themeOptions$propert2 = _themeOptions$propert.root) === null || _themeOptions$propert2 === void 0 ? void 0 : _themeOptions$propert2.accent_color) || ((_themeOptions$colors = themeOptions.colors) === null || _themeOptions$colors === void 0 ? void 0 : _themeOptions$colors.accent)
+        visible: variant => variant === null || variant === void 0 ? void 0 : variant.startsWith('waveform'),
+        defaultValue: ((_themeProperties$root = themeProperties.root) === null || _themeProperties$root === void 0 ? void 0 : _themeProperties$root.accentColor) || ((_themeProperties$colo = themeProperties.colors) === null || _themeProperties$colo === void 0 ? void 0 : _themeProperties$colo.accent),
+        swatches: entry.getUsedContentElementColors('waveformColor')
+      });
+      this.input('remainingWaveformColor', ColorInputView, {
+        alpha: true,
+        visibleBinding: 'playerControlVariant',
+        visible: variant => variant === null || variant === void 0 ? void 0 : variant.startsWith('waveform'),
+        placeholder: I18n.t('pageflow_scrolled.editor.content_elements.inlineAudio.attributes.remainingWaveformColor.auto'),
+        placeholderColor: invert ? defaultRemainingWaveformColorInverted : defaultRemainingWaveformColor,
+        swatches: entry.getUsedContentElementColors('remainingWaveformColor')
+      });
+      this.input('waveformCursorColor', ColorInputView, {
+        alpha: true,
+        visibleBinding: 'playerControlVariant',
+        visible: variant => variant === null || variant === void 0 ? void 0 : variant.startsWith('waveform'),
+        placeholder: I18n.t('pageflow_scrolled.editor.content_elements.inlineAudio.attributes.waveformCursorColor.auto'),
+        placeholderColor: invert ? defaultWaveformCursorColorInverted : defaultWaveformCursorColor,
+        swatches: entry.getUsedContentElementColors('waveformCursorColor')
+      });
+      this.input('invertPlayButton', CheckBoxInputView$1, {
+        visibleBinding: 'playerControlVariant',
+        visible: variant => variant === null || variant === void 0 ? void 0 : variant.startsWith('waveform')
       });
       this.view(SeparatorView);
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
       this.group('ContentElementInlineFileRightsSettings');
     });
@@ -568,8 +622,11 @@ editor.contentElementTypes.register('videoEmbed', {
   category: 'media',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
       this.input('videoSource', UrlInputView, {
         supportedHosts: ['http://youtu.be', 'https://youtu.be', 'http://www.youtube.com', 'https://www.youtube.com', 'http://vimeo.com', 'https://vimeo.com', 'http://www.facebook.com', 'https://www.facebook.com'],
@@ -593,11 +650,11 @@ editor.contentElementTypes.register('videoEmbed', {
       });
       this.view(SeparatorView);
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
     });
   }
@@ -609,8 +666,9 @@ editor.contentElementTypes.register('soundDisclaimer', {
   pictogram: img$6,
   category: 'media',
   supportedPositions: ['inline'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
       this.input('mutedText', TextInputView, {
         placeholder: I18n.t('pageflow_scrolled.public.sound_disclaimer.help_muted', {
@@ -626,10 +684,13 @@ editor.contentElementTypes.register('soundDisclaimer', {
   }
 });
 
-var DatawrapperAdView = Marionette.ItemView.extend({
-  template: function template(data) {
-    return "\n    <form action=\"https://app.datawrapper.de/create/chart\" method=\"GET\" target=\"_blank\">\n      <input type=\"hidden\" name=\"theme\" value=\"pageflow\" />\n      <input type=\"submit\" value=\"".concat(I18n.t('pageflow_scrolled.editor.content_elements.dataWrapperChart.attributes.create_chart.label'), "\" />\n    </form>\n  ");
-  },
+const DatawrapperAdView = Marionette.ItemView.extend({
+  template: data => `
+    <form action="https://app.datawrapper.de/create/chart" method="GET" target="_blank">
+      <input type="hidden" name="theme" value="pageflow" />
+      <input type="submit" value="${I18n.t('pageflow_scrolled.editor.content_elements.dataWrapperChart.attributes.create_chart.label')}" />
+    </form>
+  `,
   className: 'datawrapper_ad'
 });
 
@@ -640,8 +701,11 @@ editor.contentElementTypes.register('dataWrapperChart', {
   pictogram: img$7,
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
       this.input('url', UrlInputView, {
         supportedHosts: ['cf.datawrapper.de', 'charts.datawrapper.de', 'datawrapper.dwcdn.de', 'datawrapper.dwcdn.net'],
@@ -657,11 +721,11 @@ editor.contentElementTypes.register('dataWrapperChart', {
         defaultValue: '#323d4d'
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
     });
   }
@@ -674,8 +738,11 @@ editor.contentElementTypes.register('inlineBeforeAfter', {
   category: 'interactive',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
   supportedWidthRange: ['xxs', 'full'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
       this.input('before_id', FileInputView, {
         collection: 'image_files',
@@ -694,11 +761,11 @@ editor.contentElementTypes.register('inlineBeforeAfter', {
       this.input('initial_slider_position', SliderInputView);
       this.input('slider_color', ColorInputView$1);
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
       this.group('ContentElementInlineFileRightsSettings');
     });
@@ -708,41 +775,47 @@ editor.contentElementTypes.register('inlineBeforeAfter', {
   }
 });
 
-var SidebarRouter = Marionette.AppRouter.extend({
+const SidebarRouter = Marionette.AppRouter.extend({
   appRoutes: {
     'scrolled/external_links/:id/:link_id': 'link'
   }
 });
 
-var SidebarEditLinkView = Marionette.Layout.extend({
-  template: function template(data) {
-    return "\n    <a class=\"back\">".concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.back'), "</a>\n    <a class=\"destroy\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.destroy'), "</a>\n\n    <div class='form_container'></div>\n  ");
+const SidebarEditLinkView = EditConfigurationView.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.content_elements.externalLinkList',
+  containingCollection() {
+    return this.options.collection;
   },
-  className: 'edit_external_link',
-  regions: {
-    formContainer: '.form_container'
+  getConfigurationModel() {
+    return this.model;
   },
-  events: {
-    'click a.back': 'goBack',
-    'click a.destroy': 'destroyLink'
+  goBackPath() {
+    return `/scrolled/content_elements/${this.options.contentElement.get('id')}`;
   },
-  initialize: function initialize(options) {},
-  onRender: function onRender() {
-    var configurationEditor = new ConfigurationEditorView({
-      model: this.model,
-      attributeTranslationKeyPrefixes: ['pageflow_scrolled.editor.content_elements.externalLinkList.attributes'],
-      tabTranslationKeyPrefix: 'pageflow_scrolled.editor.content_elements.externalLinkList.tabs'
+  goBack() {
+    this.options.contentElement.postCommand({
+      type: 'SET_SELECTED_ITEM',
+      index: -1
     });
-    var self = this;
-    var thumbnailAspectRatio = this.options.contentElement.configuration.get('thumbnailAspectRatio');
-    var previewAspectRatio = this.options.entry.getAspectRatio(thumbnailAspectRatio);
-    var thumbnailFit = this.options.contentElement.configuration.get('thumbnailFit');
+    EditConfigurationView.prototype.goBack.call(this);
+  },
+  getActionsMenuItems() {
+    return [new DestroyLinkMenuItem({}, {
+      collection: this.options.collection,
+      model: this.model
+    })];
+  },
+  configure(configurationEditor) {
+    const contentElement = this.options.contentElement;
+    const thumbnailAspectRatio = contentElement.configuration.get('thumbnailAspectRatio');
+    const previewAspectRatio = this.options.entry.getAspectRatio(thumbnailAspectRatio);
+    const thumbnailFit = contentElement.configuration.get('thumbnailFit');
     configurationEditor.tab('edit_link', function () {
       this.input('thumbnail', FileInputView, {
         collection: 'image_files',
         fileSelectionHandler: 'contentElement.externalLinks.link',
         fileSelectionHandlerOptions: {
-          contentElementId: self.options.contentElement.get('id')
+          contentElementId: contentElement.get('id')
         },
         positioning: previewAspectRatio && thumbnailFit !== 'contain',
         positioningOptions: {
@@ -756,148 +829,129 @@ var SidebarEditLinkView = Marionette.Layout.extend({
         text: I18n.t('pageflow_scrolled.editor.content_elements.textBlock.help_texts.shortcuts')
       });
     });
-    this.formContainer.show(configurationEditor);
-  },
-  goBack: function goBack() {
-    this.options.contentElement.postCommand({
-      type: 'SET_SELECTED_ITEM',
-      index: -1
-    });
-    editor$1.navigate("/scrolled/content_elements/".concat(this.options.contentElement.get('id')), {
-      trigger: true
-    });
-  },
-  destroyLink: function destroyLink() {
-    if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_item'))) {
-      this.options.collection.remove(this.model);
-      this.goBack();
-    }
+  }
+});
+const DestroyLinkMenuItem = DestroyMenuItem.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.content_elements.externalLinkList',
+  destroyModel() {
+    this.options.collection.remove(this.options.model);
   }
 });
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-var ExternalLinkModel = Backbone.Model.extend({
+const ExternalLinkModel = Backbone.Model.extend({
   modelName: 'ExternalLink',
   i18nKey: 'external_link',
   mixins: [transientReferences],
-  thumbnailUrl: function thumbnailUrl() {
+  thumbnailFile: function () {
     var _this$thumbnail;
-    return ((_this$thumbnail = this.thumbnail()) === null || _this$thumbnail === void 0 ? void 0 : _this$thumbnail.get('thumbnail_url')) || '';
+    return (_this$thumbnail = this.thumbnail()) === null || _this$thumbnail === void 0 ? void 0 : _this$thumbnail.thumbnailFile();
   },
-  thumbnail: function thumbnail() {
+  thumbnail: function () {
     return this.collection.entry.getFileCollection('image_files').getByPermaId(this.get('thumbnail'));
   },
-  title: function title() {
-    var configuration = this.collection.contentElement.configuration;
+  title: function () {
+    const configuration = this.collection.contentElement.configuration;
     if (configuration.get('textPosition') === 'none') {
       var _this$thumbnail2;
       return (_this$thumbnail2 = this.thumbnail()) === null || _this$thumbnail2 === void 0 ? void 0 : _this$thumbnail2.configuration.get('alt');
     } else {
       var _itemTexts$this$id, _itemTexts$this$id2, _itemTexts$this$id2$t, _itemTexts$this$id2$t2, _itemTexts$this$id2$t3;
-      var itemTexts = configuration.get('itemTexts');
+      const itemTexts = configuration.get('itemTexts');
       return (itemTexts === null || itemTexts === void 0 ? void 0 : (_itemTexts$this$id = itemTexts[this.id]) === null || _itemTexts$this$id === void 0 ? void 0 : _itemTexts$this$id.title) ? itemTexts === null || itemTexts === void 0 ? void 0 : (_itemTexts$this$id2 = itemTexts[this.id]) === null || _itemTexts$this$id2 === void 0 ? void 0 : (_itemTexts$this$id2$t = _itemTexts$this$id2.title[0]) === null || _itemTexts$this$id2$t === void 0 ? void 0 : (_itemTexts$this$id2$t2 = _itemTexts$this$id2$t.children) === null || _itemTexts$this$id2$t2 === void 0 ? void 0 : (_itemTexts$this$id2$t3 = _itemTexts$this$id2$t2[0]) === null || _itemTexts$this$id2$t3 === void 0 ? void 0 : _itemTexts$this$id2$t3.text : this.get('title');
     }
   },
-  getFilePosition: function getFilePosition(attribute, coord) {
-    var cropPosition = this.get('thumbnailCropPosition');
+  getFilePosition: function (attribute, coord) {
+    const cropPosition = this.get('thumbnailCropPosition');
     return cropPosition ? cropPosition[coord] : 50;
   },
-  setFilePosition: function setFilePosition(attribute, coord, value) {
-    this.set('thumbnailCropPosition', _objectSpread2(_objectSpread2({}, this.get('thumbnailCropPosition')), {}, _defineProperty({}, coord, value)));
+  setFilePosition: function (attribute, coord, value) {
+    this.set('thumbnailCropPosition', {
+      ...this.get('thumbnailCropPosition'),
+      [coord]: value
+    });
   },
-  setFilePositions: function setFilePositions(attribute, x, y) {
+  setFilePositions: function (attribute, x, y) {
     this.set('thumbnailCropPosition', {
-      x: x,
-      y: y
+      x,
+      y
     });
   },
-  highlight: function highlight() {
+  highlight() {
     this.collection.contentElement.postCommand({
       type: 'HIGHLIGHT_ITEM',
       index: this.collection.indexOf(this)
     });
   },
-  resetHighlight: function resetHighlight() {
+  resetHighlight() {
     this.collection.contentElement.postCommand({
       type: 'RESET_ITEM_HIGHLIGHT'
     });
   }
 });
 
-var ExternalLinkCollection = Backbone.Collection.extend({
+const ExternalLinkCollection = Backbone.Collection.extend({
   model: ExternalLinkModel,
   comparator: 'position',
-  initialize: function initialize(models, options) {
-    var _this = this;
+  initialize: function (models, options) {
     this.entry = options.entry;
     this.contentElement = options.contentElement;
     this.listenTo(this, 'add sort change', this.updateConfiguration);
-    this.listenTo(this, 'remove', function () {
-      return _this.updateConfiguration({
-        prune: true
-      });
-    });
+    this.listenTo(this, 'remove', () => this.updateConfiguration({
+      prune: true
+    }));
   },
-  modelId: function modelId(attrs) {
+  modelId: function (attrs) {
     return attrs.id;
   },
-  updateConfiguration: function updateConfiguration(_ref) {
-    var prune = _ref.prune;
-    var updatedAttributes = {
+  updateConfiguration: function ({
+    prune
+  }) {
+    let updatedAttributes = {
       links: this.toJSON()
     };
     if (prune) {
-      updatedAttributes = _objectSpread2(_objectSpread2(_objectSpread2({}, updatedAttributes), this.getPrunedProperty('itemTexts')), this.getPrunedProperty('itemLinks'));
+      updatedAttributes = {
+        ...updatedAttributes,
+        ...this.getPrunedProperty('itemTexts'),
+        ...this.getPrunedProperty('itemLinks')
+      };
     }
     this.contentElement.configuration.set(updatedAttributes);
   },
-  getPrunedProperty: function getPrunedProperty(propertyName) {
-    return _defineProperty({}, propertyName, _.pick.apply(_, [this.contentElement.configuration.get(propertyName) || {}].concat(_toConsumableArray(this.pluck('id')))));
+  getPrunedProperty(propertyName) {
+    return {
+      [propertyName]: _.pick(this.contentElement.configuration.get(propertyName) || {}, ...this.pluck('id'))
+    };
   },
-  addNewLink: function addNewLink() {
-    var id = this.length ? Math.max.apply(Math, _toConsumableArray(this.pluck('id'))) + 1 : 1;
+  addNewLink() {
+    const id = this.length ? Math.max(...this.pluck('id')) + 1 : 1;
     this.add({
-      id: id
+      id
     });
     return this.get(id);
   },
-  saveOrder: function saveOrder() {}
+  saveOrder() {}
 });
 ExternalLinkCollection.forContentElement = function (contentElement, entry) {
   return new ExternalLinkCollection(contentElement.configuration.get('links') || [], {
-    entry: entry,
-    contentElement: contentElement
+    entry,
+    contentElement
   });
 };
 
-var SidebarController = Marionette.Controller.extend({
-  initialize: function initialize(options) {
+const SidebarController = Marionette.Controller.extend({
+  initialize: function (options) {
     this.entry = options.entry;
     this.region = options.region;
   },
-  link: function link(id, linkId) {
-    var contentElement = this.entry.contentElements.get(id);
-    var linksCollection = ExternalLinkCollection.forContentElement(contentElement, this.entry);
+  link: function (id, linkId) {
+    const contentElement = this.entry.contentElements.get(id);
+    const linksCollection = ExternalLinkCollection.forContentElement(contentElement, this.entry);
     this.region.show(new SidebarEditLinkView({
       model: linksCollection.get(linkId),
       collection: linksCollection,
       entry: this.entry,
-      contentElement: contentElement
+      contentElement
     }));
   }
 });
@@ -933,19 +987,23 @@ var css = ".SidebarListView-module_linksContainer__HvWq- {\n}\n";
 var styles = {"linksContainer":"SidebarListView-module_linksContainer__HvWq-"};
 styleInject(css);
 
-var SidebarListView = Marionette.Layout.extend({
-  template: function template(data) {
-    return "\n    <label>".concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.items'), "</label>\n    <div class='").concat(styles.linksContainer, "'></div>\n    <button class=\"").concat(buttonStyles.addButton, "\">\n      ").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.add'), "\n    </button>\n  ");
-  },
+const SidebarListView = Marionette.Layout.extend({
+  template: data => `
+    <label>${I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.items')}</label>
+    <div class='${styles.linksContainer}'></div>
+    <button class="${buttonStyles.addButton}">
+      ${I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.add')}
+    </button>
+  `,
   regions: cssModulesUtils.ui(styles, 'linksContainer'),
   events: cssModulesUtils.events(buttonStyles, {
     'click addButton': 'addElement'
   }),
-  onRender: function onRender() {
+  onRender: function () {
     this.listenTo(this.options.contentElement.configuration, 'change:textPosition', this.renderListView);
     this.renderListView();
   },
-  renderListView: function renderListView() {
+  renderListView() {
     this.linksContainer.show(new ListView({
       collection: this.collection,
       sortable: true,
@@ -954,26 +1012,26 @@ var SidebarListView = Marionette.Layout.extend({
       onRemove: _.bind(this.onRemove, this)
     }));
   },
-  addElement: function addElement() {
+  addElement: function () {
     this.collection.addNewLink();
   },
-  onEdit: function onEdit(linkModel) {
+  onEdit: function (linkModel) {
     this.options.contentElement.postCommand({
       type: 'SET_SELECTED_ITEM',
       index: this.collection.indexOf(linkModel)
     });
-    editor.navigate("/scrolled/external_links/".concat(this.options.contentElement.id, "/").concat(linkModel.id), {
+    editor.navigate(`/scrolled/external_links/${this.options.contentElement.id}/${linkModel.id}`, {
       trigger: true
     });
   },
-  onRemove: function onRemove(linkModel) {
+  onRemove: function (linkModel) {
     if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_item'))) {
       this.collection.remove(linkModel);
     }
   }
 });
 
-var linkWidths = {
+const linkWidths = {
   xs: -2,
   sm: -1,
   md: 0,
@@ -981,21 +1039,43 @@ var linkWidths = {
   xl: 2,
   xxl: 3
 };
-function maxLinkWidth(_ref) {
-  var layout = _ref.layout,
-    textPosition = _ref.textPosition,
-    width = _ref.width;
+function maxLinkWidth({
+  layout,
+  textPosition,
+  width
+}) {
+  width = width || contentElementWidths.md;
   if (layout === 'center' || layout === 'centerRagged') {
     if (textPosition === 'right') {
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, contentElementWidths.md, linkWidths.md), contentElementWidths.lg, linkWidths.lg), contentElementWidths.xl, linkWidths.xl), contentElementWidths.full, linkWidths.xl)[width];
+      return {
+        [contentElementWidths.md]: linkWidths.md,
+        [contentElementWidths.lg]: linkWidths.lg,
+        [contentElementWidths.xl]: linkWidths.xl,
+        [contentElementWidths.full]: linkWidths.xl
+      }[width];
     } else {
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, contentElementWidths.md, linkWidths.lg), contentElementWidths.lg, linkWidths.xl), contentElementWidths.xl, linkWidths.xxl), contentElementWidths.full, linkWidths.xxl)[width];
+      return {
+        [contentElementWidths.md]: linkWidths.lg,
+        [contentElementWidths.lg]: linkWidths.xl,
+        [contentElementWidths.xl]: linkWidths.xxl,
+        [contentElementWidths.full]: linkWidths.xxl
+      }[width];
     }
   } else {
     if (textPosition === 'right') {
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, contentElementWidths.md, linkWidths.sm), contentElementWidths.lg, linkWidths.md), contentElementWidths.xl, linkWidths.xl), contentElementWidths.full, linkWidths.xl)[width];
+      return {
+        [contentElementWidths.md]: linkWidths.sm,
+        [contentElementWidths.lg]: linkWidths.md,
+        [contentElementWidths.xl]: linkWidths.xl,
+        [contentElementWidths.full]: linkWidths.xl
+      }[width];
     } else {
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, contentElementWidths.md, linkWidths.lg), contentElementWidths.lg, linkWidths.lg), contentElementWidths.xl, linkWidths.xxl), contentElementWidths.full, linkWidths.xxl)[width];
+      return {
+        [contentElementWidths.md]: linkWidths.lg,
+        [contentElementWidths.lg]: linkWidths.lg,
+        [contentElementWidths.xl]: linkWidths.xxl,
+        [contentElementWidths.full]: linkWidths.xxl
+      }[width];
     }
   }
 }
@@ -1015,20 +1095,44 @@ editor.contentElementTypes.register('externalLinkList', {
   category: 'tilesAndLinks',
   supportedPositions: ['inline', 'standAlone'],
   supportedWidthRange: ['m', 'full'],
+  supportedStyles: ['boxShadow', 'outline'],
   defaultConfig: {
     thumbnailAspectRatio: 'square'
   },
-  editorPath: function editorPath(contentElement) {
-    var selectedItemId = contentElement.transientState.get('selectedItemId');
+  editorPath(contentElement) {
+    const selectedItemId = contentElement.transientState.get('selectedItemId');
     if (selectedItemId) {
-      return "/scrolled/external_links/".concat(contentElement.id, "/").concat(selectedItemId);
+      return `/scrolled/external_links/${contentElement.id}/${selectedItemId}`;
+    }
+  },
+  configurationPlace(contentElement, path) {
+    const [propertyName, index, linkProperty] = path;
+    if (propertyName !== 'links') {
+      return;
     }
+    const link = contentElement.configuration.get('links')[index];
+    return {
+      label: attributeLabel(linkProperty),
+      select() {
+        contentElement.postCommand({
+          type: 'SET_SELECTED_ITEM',
+          index: Number(index)
+        });
+        contentElement.select({
+          navigate: false
+        });
+        editor.navigate(`/scrolled/external_links/${contentElement.id}/${link.id}`, {
+          trigger: true
+        });
+      }
+    };
   },
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry,
-      contentElement = _ref.contentElement;
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
     this.tab('general', function () {
-      var layout = contentElement.section.configuration.get('layout');
+      const layout = contentElement.section.configuration.get('layout');
       this.view(SidebarListView, {
         contentElement: this.model.parent,
         collection: ExternalLinkCollection.forContentElement(this.model.parent, entry)
@@ -1037,7 +1141,7 @@ editor.contentElementTypes.register('externalLinkList', {
         values: ['below', 'right', 'overlay', 'none']
       });
       this.group('ContentElementVariant', {
-        entry: entry
+        entry
       });
       this.input('overlayOpacity', SliderInputView, {
         defaultValue: 70,
@@ -1046,63 +1150,43 @@ editor.contentElementTypes.register('externalLinkList', {
       });
       this.view(SeparatorView);
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.input('enableScroller', SelectInputView, {
         values: ['never', 'always']
       });
       this.input('linkWidth', SliderInputView, {
-        displayText: function displayText(value) {
-          return ['XS', 'S', 'M', 'L', 'XL', 'XXL'][value + 2];
-        },
+        displayText: value => ['XS', 'S', 'M', 'L', 'XL', 'XXL'][value + 2],
         saveOnSlide: true,
         minValue: -2,
         maxValueBinding: ['width', 'textPosition'],
-        maxValue: function maxValue(_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 2),
-            width = _ref3[0],
-            textPosition = _ref3[1];
-          return maxLinkWidth({
-            width: width,
-            layout: layout,
-            textPosition: textPosition
-          });
-        },
+        maxValue: ([width, textPosition]) => maxLinkWidth({
+          width,
+          layout,
+          textPosition
+        }),
         defaultValue: -1
       });
       this.input('linkAlignment', SelectInputView, {
         values: ['spaceEvenly', 'left', 'right', 'center'],
         visibleBinding: ['textPosition', 'enableScroller'],
-        visible: function visible(_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-            textPosition = _ref5[0],
-            enableScroller = _ref5[1];
-          return textPosition !== 'right' && enableScroller !== 'always';
-        }
+        visible: ([textPosition, enableScroller]) => textPosition !== 'right' && enableScroller !== 'always'
       });
       this.input('linkAlignment', SelectInputView, {
         values: ['left'],
         disabled: true,
         visibleBinding: ['textPosition', 'enableScroller'],
-        visible: function visible(_ref6) {
-          var _ref7 = _slicedToArray(_ref6, 2),
-            textPosition = _ref7[0],
-            enableScroller = _ref7[1];
-          return textPosition !== 'right' && enableScroller === 'always';
-        }
+        visible: ([textPosition, enableScroller]) => textPosition !== 'right' && enableScroller === 'always'
       });
       this.input('thumbnailSize', SelectInputView, {
         values: ['small', 'medium', 'large'],
         visibleBinding: 'textPosition',
         visibleBindingValue: 'right'
       });
-      var _entry$getAspectRatio = entry.getAspectRatios({
-          includeOriginal: true
-        }),
-        _entry$getAspectRatio2 = _slicedToArray(_entry$getAspectRatio, 2),
-        aspectRatios = _entry$getAspectRatio2[0],
-        aspectRatiosTexts = _entry$getAspectRatio2[1];
+      const [aspectRatios, aspectRatiosTexts] = entry.getAspectRatios({
+        includeOriginal: true
+      });
       this.input('thumbnailAspectRatio', SelectInputView, {
         values: aspectRatios,
         texts: aspectRatiosTexts
@@ -1116,7 +1200,16 @@ editor.contentElementTypes.register('externalLinkList', {
       this.input('textAlign', SelectInputView, {
         values: ['left', 'right', 'center']
       });
-      this.input('displayButtons', CheckBoxInputView);
+      this.input('backfaces', CheckBoxInputView);
+      this.input('displayButtons', CheckBoxInputView, {
+        disabledBinding: 'backfaces',
+        displayCheckedIfDisabled: true
+      });
+      this.group('LinkButtonVariant', {
+        entry,
+        visibleBinding: ['displayButtons', 'backfaces'],
+        visible: ([displayButtons, backfaces]) => displayButtons || backfaces
+      });
       this.group('ContentElementInlineFileRightsSettings');
     });
   }
@@ -1124,31 +1217,36 @@ editor.contentElementTypes.register('externalLinkList', {
 
 // register file handler for thumbnail of external link
 editor.registerFileSelectionHandler('contentElement.externalLinks.link', function (options) {
-  var contentElement = options.entry.contentElements.get(options.contentElementId);
-  var links = ExternalLinkCollection.forContentElement(contentElement, options.entry);
+  const contentElement = options.entry.contentElements.get(options.contentElementId);
+  const links = ExternalLinkCollection.forContentElement(contentElement, options.entry);
   this.call = function (file) {
-    var link = links.get(options.id);
+    const link = links.get(options.id);
     link.setReference('thumbnail', file);
   };
   this.getReferer = function () {
     return '/scrolled/external_links/' + contentElement.id + '/' + options.id;
   };
 });
+function attributeLabel(propertyName) {
+  return I18n.t(`${propertyName}.label`, {
+    scope: 'pageflow_scrolled.editor.content_elements.externalLinkList.attributes'
+  });
+}
 
-var SET_MODE = 'SET_MODE';
-var DRAG = 'DRAG';
-var CLICK_HANDLE = 'CLICK_HANDLE';
-var DRAG_HANDLE = 'DRAG_HANDLE';
-var DRAG_HANDLE_STOP = 'DRAG_HANDLE_STOP';
-var DOUBLE_CLICK_HANDLE = 'DOUBLE_CLICK_HANDLE';
-var MOUSE_MOVE = 'MOUSE_MOVE';
-var DRAG_POTENTIAL_POINT = 'DRAG_POTENTIAL_POINT';
-var DRAG_POTENTIAL_POINT_STOP = 'DRAG_POTENTIAL_POINT_STOP';
-var CLICK_INDICATOR = 'CLICK_INDICATOR';
-var DRAG_INDICATOR = 'DRAG_INDICATOR';
-var CENTER_INDICATOR = 'CENTER_INDICATOR';
-var UPDATE_SELECTION_POSITION = 'UPDATE_SELECTION_POSITION';
-var BLUR_SELECTION_POSITION = 'BLUR_SELECTION_POSITION';
+const SET_MODE = 'SET_MODE';
+const DRAG = 'DRAG';
+const CLICK_HANDLE = 'CLICK_HANDLE';
+const DRAG_HANDLE = 'DRAG_HANDLE';
+const DRAG_HANDLE_STOP = 'DRAG_HANDLE_STOP';
+const DOUBLE_CLICK_HANDLE = 'DOUBLE_CLICK_HANDLE';
+const MOUSE_MOVE = 'MOUSE_MOVE';
+const DRAG_POTENTIAL_POINT = 'DRAG_POTENTIAL_POINT';
+const DRAG_POTENTIAL_POINT_STOP = 'DRAG_POTENTIAL_POINT_STOP';
+const CLICK_INDICATOR = 'CLICK_INDICATOR';
+const DRAG_INDICATOR = 'DRAG_INDICATOR';
+const CENTER_INDICATOR = 'CENTER_INDICATOR';
+const UPDATE_SELECTION_POSITION = 'UPDATE_SELECTION_POSITION';
+const BLUR_SELECTION_POSITION = 'BLUR_SELECTION_POSITION';
 function reducer(state, action) {
   var _state$selection, _state$selection2, _state$selection3;
   switch (action.type) {
@@ -1156,24 +1254,24 @@ function reducer(state, action) {
       if (action.value === state.mode) {
         return state;
       } else if (action.value === 'rect') {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           mode: 'rect',
           previousPolygonPoints: state.points,
           points: getBoundingBox(state.points),
           selection: null
-        });
+        };
       } else {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           mode: 'polygon',
           points: state.previousPolygonPoints || state.points,
           selection: null
-        });
+        };
       }
     case DRAG:
-      var _action$delta = _slicedToArray(action.delta, 2),
-        deltaX = _action$delta[0],
-        deltaY = _action$delta[1];
-      state.points.forEach(function (point) {
+      let [deltaX, deltaY] = action.delta;
+      state.points.forEach(point => {
         if (point[0] + deltaX > 100) {
           deltaX = 100 - point[0];
         }
@@ -1187,70 +1285,74 @@ function reducer(state, action) {
           deltaY = -point[1];
         }
       });
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        points: state.points.map(function (point) {
-          return [point[0] + deltaX, point[1] + deltaY];
-        }),
+      return {
+        ...state,
+        points: state.points.map(point => [point[0] + deltaX, point[1] + deltaY]),
         indicatorPosition: [state.indicatorPosition[0] + deltaX, state.indicatorPosition[1] + deltaY]
-      });
+      };
     case CLICK_HANDLE:
       if (state.mode === 'polygon') {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           selection: {
             type: 'handle',
             index: action.index,
             position: round(state.points[action.index])
           }
-        });
+        };
       } else {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           selection: rectHandleSelection(action.index, state.points)
-        });
+        };
       }
     case DRAG_HANDLE:
       state = updatePoints(state, action.index, action.cursor);
-      return _objectSpread2(_objectSpread2({}, state), {}, {
+      return {
+        ...state,
         indicatorPosition: ensureInPolygon(state.points, state.indicatorPosition)
-      });
+      };
     case DRAG_HANDLE_STOP:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
+      return {
+        ...state,
         startPoints: null
-      });
+      };
     case DOUBLE_CLICK_HANDLE:
       if (state.mode !== 'polygon' || state.points.length <= 3) {
         return state;
       }
-      var points = [].concat(_toConsumableArray(state.points.slice(0, action.index)), _toConsumableArray(state.points.slice(action.index + 1)));
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        points: points,
+      const points = [...state.points.slice(0, action.index), ...state.points.slice(action.index + 1)];
+      return {
+        ...state,
+        points,
         potentialPoint: null,
         indicatorPosition: ensureInPolygon(points, state.indicatorPosition),
         selection: null
-      });
+      };
     case MOUSE_MOVE:
       if (state.mode !== 'polygon' || state.draggingPotentialPoint) {
         return state;
       }
-      var _closestPointOnPolygo = closestPointOnPolygon(state.points, action.cursor),
-        _closestPointOnPolygo2 = _slicedToArray(_closestPointOnPolygo, 2),
-        index = _closestPointOnPolygo2[0],
-        potentialPoint = _closestPointOnPolygo2[1];
-      return _objectSpread2(_objectSpread2({}, state), {}, {
+      const [index, potentialPoint] = closestPointOnPolygon(state.points, action.cursor);
+      return {
+        ...state,
         potentialPointInsertIndex: index,
-        potentialPoint: potentialPoint
-      });
+        potentialPoint
+      };
     case DRAG_POTENTIAL_POINT:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
+      return {
+        ...state,
         draggingPotentialPoint: true,
         potentialPoint: action.cursor,
         selection: {
           type: 'potentialPoint',
           position: round(action.cursor)
         }
-      });
+      };
     case DRAG_POTENTIAL_POINT_STOP:
-      var newPoints = withPotentialPoint(state);
-      return _objectSpread2(_objectSpread2({}, state), {}, {
+      const newPoints = withPotentialPoint(state);
+      return {
+        ...state,
         points: newPoints,
         draggingPotentialPoint: false,
         potentialPoint: null,
@@ -1259,35 +1361,40 @@ function reducer(state, action) {
           index: state.potentialPointInsertIndex,
           position: round(newPoints[state.potentialPointInsertIndex])
         }
-      });
+      };
     case CLICK_INDICATOR:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
+      return {
+        ...state,
         selection: {
           type: 'indicator',
           position: round(state.indicatorPosition)
         }
-      });
+      };
     case DRAG_INDICATOR:
-      var indicatorPosition = ensureInPolygon(state.points, action.cursor);
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        indicatorPosition: indicatorPosition,
+      const indicatorPosition = ensureInPolygon(state.points, action.cursor);
+      return {
+        ...state,
+        indicatorPosition,
         selection: {
           type: 'indicator',
           position: round(indicatorPosition)
         }
-      });
+      };
     case CENTER_INDICATOR:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
+      return {
+        ...state,
         indicatorPosition: polygonCentroid(state.points)
-      });
+      };
     case UPDATE_SELECTION_POSITION:
       if (((_state$selection = state.selection) === null || _state$selection === void 0 ? void 0 : _state$selection.type) === 'indicator') {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           indicatorPosition: ensureInPolygon(state.points, action.position),
-          selection: _objectSpread2(_objectSpread2({}, state.selection), {}, {
+          selection: {
+            ...state.selection,
             position: action.position
-          })
-        });
+          }
+        };
       } else if (((_state$selection2 = state.selection) === null || _state$selection2 === void 0 ? void 0 : _state$selection2.type) === 'handle') {
         return updatePoints(state, state.selection.index, ensureInBounds(action.position), action.position);
       } else {
@@ -1295,24 +1402,28 @@ function reducer(state, action) {
       }
     case BLUR_SELECTION_POSITION:
       if (((_state$selection3 = state.selection) === null || _state$selection3 === void 0 ? void 0 : _state$selection3.type) === 'indicator') {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          selection: _objectSpread2(_objectSpread2({}, state.selection), {}, {
+        return {
+          ...state,
+          selection: {
+            ...state.selection,
             position: state.indicatorPosition
-          })
-        });
+          }
+        };
       } else if (state.selection) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           startPoints: null,
-          selection: _objectSpread2(_objectSpread2({}, state.selection), {}, {
+          selection: {
+            ...state.selection,
             position: handles(state)[state.selection.index].point
-          }),
+          },
           indicatorPosition: ensureInPolygon(state.points, state.indicatorPosition)
-        });
+        };
       } else {
         return state;
       }
     default:
-      throw new Error("Unknown action ".concat(action.type, "."));
+      throw new Error(`Unknown action ${action.type}.`);
   }
 }
 function drawnOutlinePoints(state) {
@@ -1322,50 +1433,46 @@ function drawnOutlinePoints(state) {
     return state.points;
   }
 }
-var rectCursors = ['nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize'];
+const rectCursors = ['nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize'];
 function handles(state) {
   if (state.mode === 'rect') {
-    return state.points.flatMap(function (point, index) {
-      return [point, midpoint(point, state.points[(index + 1) % state.points.length])];
-    }).map(function (point, index) {
-      return {
-        point: point,
-        axis: index % 4 === 1 ? 'y' : index % 4 === 3 ? 'x' : null,
-        cursor: rectCursors[index % 4],
-        deletable: false
-      };
-    });
+    return state.points.flatMap((point, index) => [point, midpoint(point, state.points[(index + 1) % state.points.length])]).map((point, index) => ({
+      point,
+      axis: index % 4 === 1 ? 'y' : index % 4 === 3 ? 'x' : null,
+      cursor: rectCursors[index % 4],
+      deletable: false
+    }));
   } else {
-    return state.points.map(function (point) {
-      return {
-        point: point,
-        circle: true,
-        cursor: 'move',
-        deletable: state.points.length > 3
-      };
-    });
+    return state.points.map(point => ({
+      point,
+      circle: true,
+      cursor: 'move',
+      deletable: state.points.length > 3
+    }));
   }
 }
 function updatePoints(state, index, position, selectionPosition) {
   if (state.mode === 'polygon') {
-    return _objectSpread2(_objectSpread2({}, state), {}, {
-      points: [].concat(_toConsumableArray(state.points.slice(0, index)), [position], _toConsumableArray(state.points.slice(index + 1))),
+    return {
+      ...state,
+      points: [...state.points.slice(0, index), position, ...state.points.slice(index + 1)],
       selection: {
         type: 'handle',
         index: index,
         position: selectionPosition || round(position)
       }
-    });
+    };
   } else {
-    var startPoints = state.startPoints || (rectHandleAxis(index) === 'both' ? [state.points[(index / 2 + 2) % 4]] : [state.points[(index + 3) / 2 % 4], state.points[(index + 5) / 2 % 4]]);
+    const startPoints = state.startPoints || (rectHandleAxis(index) === 'both' ? [state.points[(index / 2 + 2) % 4]] : [state.points[(index + 3) / 2 % 4], state.points[(index + 5) / 2 % 4]]);
     position = constrainToAxis(index, position, state.points);
-    var points = getBoundingBox([position].concat(_toConsumableArray(startPoints)));
-    return _objectSpread2(_objectSpread2({}, state), {}, {
-      startPoints: startPoints,
+    const points = getBoundingBox([position, ...startPoints]);
+    return {
+      ...state,
+      startPoints,
       previousPolygonPoints: null,
-      points: points,
+      points,
       selection: rectHandleSelection(mapIndexOfRectHandleCrossingOver(index, position, startPoints), points, selectionPosition)
-    });
+    };
   }
 }
 function rectHandleSelection(index, points, selectionPosition) {
@@ -1377,7 +1484,7 @@ function rectHandleSelection(index, points, selectionPosition) {
   };
 }
 function constrainToAxis(index, cursor, points) {
-  var axis = rectHandleAxis(index);
+  const axis = rectHandleAxis(index);
   if (axis === 'x') {
     return [cursor[0], points[(index - 1) / 2][1]];
   } else if (axis === 'y') {
@@ -1399,7 +1506,7 @@ function mapIndexOfRectHandleCrossingOver(index, position, startPoints) {
   return index;
 }
 function withPotentialPoint(state) {
-  return [].concat(_toConsumableArray(state.points.slice(0, state.potentialPointInsertIndex)), [state.potentialPoint], _toConsumableArray(state.points.slice(state.potentialPointInsertIndex)));
+  return [...state.points.slice(0, state.potentialPointInsertIndex), state.potentialPoint, ...state.points.slice(state.potentialPointInsertIndex)];
 }
 function midpoint(p1, p2) {
   return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
@@ -1408,14 +1515,12 @@ function getBoundingBox(polygon) {
   if (polygon.length === 0) {
     return null;
   }
-  var minX = polygon[0][0];
-  var minY = polygon[0][1];
-  var maxX = polygon[0][0];
-  var maxY = polygon[0][1];
-  for (var i = 1; i < polygon.length; i++) {
-    var _polygon$i = _slicedToArray(polygon[i], 2),
-      x = _polygon$i[0],
-      y = _polygon$i[1];
+  let minX = polygon[0][0];
+  let minY = polygon[0][1];
+  let maxX = polygon[0][0];
+  let maxY = polygon[0][1];
+  for (let i = 1; i < polygon.length; i++) {
+    let [x, y] = polygon[i];
     if (x < minX) minX = x;
     if (x > maxX) maxX = x;
     if (y < minY) minY = y;
@@ -1424,51 +1529,49 @@ function getBoundingBox(polygon) {
   return [[minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY]];
 }
 function ensureInBounds(point) {
-  return point.map(function (coord) {
-    return Math.min(100, Math.max(0, coord));
-  });
+  return point.map(coord => Math.min(100, Math.max(0, coord)));
 }
 function ensureInPolygon(polygon, point) {
   return isPointInPolygon(polygon, point) ? point : closestPointOnPolygon(polygon, point)[1];
 }
 function isPointInPolygon(polygon, point) {
-  var x = point[0],
+  let x = point[0],
     y = point[1];
-  var inside = false;
-  for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    var xi = polygon[i][0],
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    let xi = polygon[i][0],
       yi = polygon[i][1];
-    var xj = polygon[j][0],
+    let xj = polygon[j][0],
       yj = polygon[j][1];
-    var intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    let intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
     if (intersect) inside = !inside;
   }
   return inside;
 }
-function closestPointOnPolygon(polygon, c) {
+function closestPointOnPolygon(polygon, c, maxDistance = 5) {
   function distance(p1, p2) {
-    return Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2));
+    return Math.sqrt((p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2);
   }
   function closestPoint(A, B, C) {
-    var AB = [B[0] - A[0], B[1] - A[1]];
-    var AC = [C[0] - A[0], C[1] - A[1]];
-    var abLength = AB[0] * AB[0] + AB[1] * AB[1]; // Dot product of AB with itself
+    const AB = [B[0] - A[0], B[1] - A[1]];
+    const AC = [C[0] - A[0], C[1] - A[1]];
+    const abLength = AB[0] * AB[0] + AB[1] * AB[1]; // Dot product of AB with itself
 
     if (abLength === 0) return A; // A and B are the same points
 
-    var proj = (AC[0] * AB[0] + AC[1] * AB[1]) / abLength; // Projection ratio of AC on AB
+    const proj = (AC[0] * AB[0] + AC[1] * AB[1]) / abLength; // Projection ratio of AC on AB
 
     if (proj < 0) return A; // Closer to A
     else if (proj > 1) return B; // Closer to B
     else return [A[0] + proj * AB[0], A[1] + proj * AB[1]]; // Point on the segment
   }
-  var closest = null;
-  var minDistance = Infinity;
-  for (var i = 0; i < polygon.length; i++) {
-    var A = polygon[i];
-    var B = polygon[(i + 1) % polygon.length];
-    var point = closestPoint(A, B, c);
-    var dist = distance(c, point);
+  let closest = null;
+  let minDistance = Infinity;
+  for (let i = 0; i < polygon.length; i++) {
+    const A = polygon[i];
+    const B = polygon[(i + 1) % polygon.length];
+    const point = closestPoint(A, B, c);
+    const dist = distance(c, point);
     if (dist < minDistance) {
       minDistance = dist;
       closest = [i + 1, point];
@@ -1477,15 +1580,15 @@ function closestPointOnPolygon(polygon, c) {
   return closest;
 }
 function polygonCentroid(points) {
-  var centroidX = 0;
-  var centroidY = 0;
-  var signedArea = 0;
-  var x0 = 0;
-  var y0 = 0;
-  var x1 = 0;
-  var y1 = 0;
-  var a = 0;
-  for (var i = 0; i < points.length - 1; i++) {
+  let centroidX = 0;
+  let centroidY = 0;
+  let signedArea = 0;
+  let x0 = 0;
+  let y0 = 0;
+  let x1 = 0;
+  let y1 = 0;
+  let a = 0;
+  for (let i = 0; i < points.length - 1; i++) {
     x0 = points[i][0];
     y0 = points[i][1];
     x1 = points[i + 1][0];
@@ -1509,9 +1612,7 @@ function polygonCentroid(points) {
   return [centroidX, centroidY];
 }
 function round(point) {
-  return point.map(function (coord) {
-    return Math.round(coord * 10) / 10;
-  });
+  return point.map(coord => Math.round(coord * 10) / 10);
 }
 
 var css$1 = ".DraggableEditorView-module_wrapper__J8JLO {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n\n  background-image:\n    linear-gradient(45deg, var(--ui-on-surface-color-lighter) 25%, transparent 25%),\n    linear-gradient(135deg, var(--ui-on-surface-color-lighter) 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, var(--ui-on-surface-color-lighter) 75%),\n    linear-gradient(135deg, transparent 75%, var(--ui-on-surface-color-lighter) 75%);\n  background-size: 16px 16px;\n  background-position:0 0, 8px 0, 8px -8px, 0px 8px;\n}\n\n.DraggableEditorView-module_buttons__1Xob0 {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 10px 0;\n  gap: 15px;\n}\n\n.DraggableEditorView-module_buttons__1Xob0 button {\n  white-space: nowrap;\n}\n\n.DraggableEditorView-module_coordinates__3dVEt,\n.DraggableEditorView-module_coordinates__3dVEt label {\n  display: flex;\n  align-items: center;\n  margin: 0;\n}\n\n.DraggableEditorView-module_coordinates__3dVEt {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n\n.DraggableEditorView-module_coordinates__3dVEt {\n  gap: 10px;\n}\n\n.DraggableEditorView-module_coordinates__3dVEt label {\n  gap: 5px;\n}\n\n.DraggableEditorView-module_coordinates__3dVEt input[disabled] {\n  background-color: var(--ui-on-surface-color-lightest);\n}\n\n.DraggableEditorView-module_modeButtons__4wZBu {\n  flex: 1;\n  white-space: nowrap;\n}\n\n.DraggableEditorView-module_modeButtons__4wZBu button:first-child {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.DraggableEditorView-module_modeButtons__4wZBu button:last-child {\n  margin-left: -1px;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.DraggableEditorView-module_modeButtons__4wZBu button[aria-pressed=true] {\n  background-color: var(--ui-selection-color-light);\n}\n\n.DraggableEditorView-module_buttons__1Xob0 img {\n  vertical-align: middle;\n  margin-right: 6px;\n}\n\n.DraggableEditorView-module_placeholderImage__JyyId {\n  aspect-ratio: 16 / 9;\n  background-color: #000;\n}\n\n.DraggableEditorView-module_image__1Ockp {\n  display: block;\n  height: calc(100vh - 250px);\n  max-height: 600px;\n  min-height: 200px;\n}\n\n.DraggableEditorView-module_portraitImage__2lYIE {\n  max-height: 1200px;\n}\n\n.DraggableEditorView-module_overlay__3QLpM {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.DraggableEditorView-module_overlay__3QLpM svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.DraggableEditorView-module_overlay__3QLpM polygon {\n  vector-effect: non-scaling-stroke;\n  stroke-width: 1px;\n  stroke-linejoin: round;\n  stroke: #fff;\n  fill: transparent;\n  opacity: 0.9;\n  cursor: move;\n}\n\n.DraggableEditorView-module_handle__9LHSy {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background-color: #fff;\n  transform: translate(-50%, -50%);\n  border: solid 1px var(--ui-primary-color);\n  border-radius: 2px;\n  opacity: 0.9;\n  z-index: 2;\n}\n\n.DraggableEditorView-module_handle__9LHSy::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  margin: -10px 0 0 -10px;\n  border-radius: 100%;\n  z-index: 1;\n}\n\n.DraggableEditorView-module_circle__35Pba {\n  border-radius: 100%;\n  cursor: move;\n}\n\n.DraggableEditorView-module_potential__vxrma {\n  opacity: 0;\n  z-index: 1;\n  cursor: default;\n}\n\n.DraggableEditorView-module_handle__9LHSy:hover {\n  opacity: 1;\n}\n\n.DraggableEditorView-module_indicator__23yQO {\n  --size: 15px;\n  position: absolute;\n  left: var(--center-x);\n  top: var(--center-y);\n  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);\n  border-radius: 50%;\n  width: var(--size);\n  height: var(--size);\n  background-color: var(--color, #fff);\n  transition: transform 0.2s ease;\n  cursor: move;\n  z-index: 3;\n}\n\n.DraggableEditorView-module_indicator__23yQO:hover {\n  transform: scale(1.2);\n}\n\n.DraggableEditorView-module_indicator__23yQO::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--size);\n  height: var(--size);\n  border-radius: 50%;\n  background-color: #fff;\n  animation: DraggableEditorView-module_blink__1SdQI 1s infinite;\n  opacity: 0.3;\n  z-index: -1;\n}\n\n.DraggableEditorView-module_selected__2bQtv {\n  box-shadow: 0 0 0 3px var(--ui-selection-color),\n              0 0 0 4px var(--ui-primary-color-light);\n}\n\n@keyframes DraggableEditorView-module_blink__1SdQI {\n  0% {\n    transform: scale(1.7);\n  }\n\n  50% {\n    transform: scale(2);\n  }\n\n  100% {\n    transform: scale(1.7);\n  }\n}\n";
@@ -1524,11 +1625,11 @@ var img$b = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBo
 
 var img$c = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' version='1.1'%3e %3cpath d='m 243%2c25.5 c -3%2c3.6 -6%2c8.5 -6%2c14 V 129 l -8%2c-7 c -7%2c-8 -20%2c-8 -28%2c0 -7%2c7 -7%2c19 0%2c26 l 42%2c42 v 0 c 2%2c2 4%2c3 6%2c4 3%2c1 5%2c1 8%2c2 v 0 c 5%2c-1 10%2c-2 14%2c-6 l 41%2c-42 c 7%2c-7 7%2c-19 0%2c-26 -8%2c-8 -20%2c-8 -28%2c0 l -8%2c7 V 38.9 C 276%2c28.5 268%2c20 257%2c20 c -6%2c0 -11%2c2.4 -14%2c5.5 z' style='stroke-width:0.608' /%3e %3cpath d='m 486%2c243 c -4%2c-3 -8%2c-6 -14%2c-6 h -89 l 7%2c-8 c 8%2c-7 8%2c-21 0%2c-29 -7%2c-7 -19%2c-7 -26%2c0 l -42%2c43 v 0 c -2%2c2 -3%2c4 -4%2c6 -1%2c3 -1%2c5 -2%2c8 v 0 c 1%2c5 2%2c10 6%2c14 l 42%2c41 c 7%2c7 19%2c7 26%2c0 8%2c-8 8%2c-20 0%2c-28 l -7%2c-8 h 90 c 10%2c0 19%2c-8 19%2c-19 0%2c-6 -3%2c-11 -6%2c-14 z' style='stroke-width:0.608' /%3e %3cpath d='m 269%2c486 c 3%2c-4 6%2c-8 6%2c-14 v -89 l 8%2c7 c 7%2c8 21%2c8 29%2c0 7%2c-7 7%2c-19 0%2c-26 l -43%2c-42 v 0 c -2%2c-2 -4%2c-3 -6%2c-4 -3%2c-1 -5%2c-1 -8%2c-2 v 0 c -5%2c1 -10%2c2 -14%2c6 l -41%2c42 c -7%2c7 -7%2c19 0%2c26 8%2c8 20%2c8 28%2c0 l 8%2c-7 v 90 c 0%2c10 8%2c19 19%2c19 6%2c0 11%2c-3 14%2c-6 z' style='stroke-width:0.608' /%3e %3cpath d='m 26%2c269 c 4%2c3 8%2c6 14%2c6 h 89 l -7%2c8 c -8%2c7 -8%2c21 0%2c29 7%2c7 19%2c7 26%2c0 l 42%2c-43 v 0 c 2%2c-2 3%2c-4 4%2c-6 1%2c-3 1%2c-5 2%2c-8 v 0 c -1%2c-5 -2%2c-10 -6%2c-14 l -42%2c-41 c -7%2c-7 -19%2c-7 -26%2c0 -8%2c8 -8%2c20 0%2c28 l 7%2c8 H 39 c -10%2c0 -19%2c8 -19%2c19 0%2c6 3%2c11 6%2c14 z' style='stroke-width:0.608' /%3e%3c/svg%3e";
 
-var i18nPrefix = 'pageflow_scrolled.editor.content_elements.hotspots.edit_area_dialog';
-var DraggableEditorView = Marionette.View.extend({
-  render: function render() {
-    var _this$options$file,
-      _this = this;
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js";
+const i18nPrefix = 'pageflow_scrolled.editor.content_elements.hotspots.edit_area_dialog';
+const DraggableEditorView = Marionette.View.extend({
+  render() {
+    var _this$options$file;
     ReactDOM.render( /*#__PURE__*/React.createElement(DraggableEditor, {
       imageSrc: (_this$options$file = this.options.file) === null || _this$options$file === void 0 ? void 0 : _this$options$file.getBackgroundPositioningImageUrl(),
       portrait: this.options.file && this.options.file.get('width') < this.options.file.get('height'),
@@ -1536,19 +1637,19 @@ var DraggableEditorView = Marionette.View.extend({
       initialMode: this.model.get(this.getPropertyName('mode')),
       initialPoints: this.model.get(this.getPropertyName('outline')),
       initialIndicatorPosition: this.model.get(this.getPropertyName('indicatorPosition')),
-      onModeChange: function onModeChange(mode) {
-        return _this.mode = mode;
-      },
-      onPointsChange: function onPointsChange(points) {
-        return _this.points = points;
-      },
-      onIndicatorPositionChange: function onIndicatorPositionChange(indicatorPosition) {
-        return _this.indicatorPosition = indicatorPosition;
+      onModeChange: mode => this.mode = mode,
+      onPointsChange: points => this.points = points,
+      onIndicatorPositionChange: indicatorPosition => this.indicatorPosition = indicatorPosition,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 42,
+        columnNumber: 7
       }
     }), this.el);
     return this;
   },
-  save: function save() {
+  save() {
     if (this.mode) {
       this.model.set(this.getPropertyName('mode'), this.mode);
     }
@@ -1559,108 +1660,171 @@ var DraggableEditorView = Marionette.View.extend({
       this.model.set(this.getPropertyName('indicatorPosition'), this.indicatorPosition);
     }
   },
-  getPropertyName: function getPropertyName(suffix) {
-    return this.options.portrait ? "portrait".concat(utils.capitalize(suffix)) : suffix;
+  getPropertyName(suffix) {
+    return this.options.portrait ? `portrait${utils.capitalize(suffix)}` : suffix;
   }
 });
-function DraggableEditor(_ref) {
+function DraggableEditor({
+  imageSrc,
+  portrait,
+  indicatorColor,
+  initialMode,
+  initialPoints,
+  initialIndicatorPosition,
+  onModeChange,
+  onPointsChange,
+  onIndicatorPositionChange
+}) {
   var _state$selection2, _state$selection3;
-  var imageSrc = _ref.imageSrc,
-    portrait = _ref.portrait,
-    indicatorColor = _ref.indicatorColor,
-    initialMode = _ref.initialMode,
-    initialPoints = _ref.initialPoints,
-    initialIndicatorPosition = _ref.initialIndicatorPosition,
-    onModeChange = _ref.onModeChange,
-    onPointsChange = _ref.onPointsChange,
-    onIndicatorPositionChange = _ref.onIndicatorPositionChange;
-  var _useReducer = useReducer(reducer, {
-      mode: initialMode || 'rect',
-      points: initialPoints || [[40, 40], [60, 40], [60, 60], [40, 60]],
-      indicatorPosition: initialIndicatorPosition || [50, 50]
-    }),
-    _useReducer2 = _slicedToArray(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  var mode = state.mode,
-    points = state.points,
-    potentialPoint = state.potentialPoint,
-    indicatorPosition = state.indicatorPosition,
-    selection = state.selection;
-  useEffect(function () {
+  const [state, dispatch] = useReducer(reducer, {
+    mode: initialMode || 'rect',
+    points: initialPoints || [[40, 40], [60, 40], [60, 60], [40, 60]],
+    indicatorPosition: initialIndicatorPosition || [50, 50]
+  });
+  const {
+    mode,
+    points,
+    potentialPoint,
+    indicatorPosition,
+    selection
+  } = state;
+  useEffect(() => {
     onModeChange(mode);
   }, [onModeChange, mode]);
-  useEffect(function () {
+  useEffect(() => {
     onPointsChange(points);
   }, [onPointsChange, points]);
-  useEffect(function () {
+  useEffect(() => {
     onIndicatorPositionChange(indicatorPosition);
   }, [onIndicatorPositionChange, indicatorPosition]);
-  var ref = useRef();
+  const ref = useRef();
   function clientToPercent(event) {
-    var rect = ref.current.getBoundingClientRect();
+    const rect = ref.current.getBoundingClientRect();
     return [Math.max(0, Math.min(100, (event.clientX - rect.left) / rect.width * 100)), Math.max(0, Math.min(100, (event.clientY - rect.top) / rect.height * 100))];
   }
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.buttons
+  return /*#__PURE__*/React.createElement("div", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 121,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$1.buttons,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 122,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(ModeButtons, {
     mode: mode,
-    dispatch: dispatch
+    dispatch: dispatch,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 123,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement(Coordinates, {
     selection: selection,
-    onChange: function onChange(position) {
-      return dispatch({
-        type: UPDATE_SELECTION_POSITION,
-        position: position
-      });
-    },
-    onBlur: function onBlur() {
-      return dispatch({
-        type: BLUR_SELECTION_POSITION
-      });
+    onChange: position => dispatch({
+      type: UPDATE_SELECTION_POSITION,
+      position
+    }),
+    onBlur: () => dispatch({
+      type: BLUR_SELECTION_POSITION
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 124,
+      columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(CenterIndicatorButton, {
-    onClick: function onClick() {
-      return dispatch({
-        type: CENTER_INDICATOR
-      });
+    onClick: () => dispatch({
+      type: CENTER_INDICATOR
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 132,
+      columnNumber: 9
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$1.wrapper
+    className: styles$1.wrapper,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 137,
+      columnNumber: 7
+    }
   }, imageSrc ? /*#__PURE__*/React.createElement("img", {
-    className: classNames(styles$1.image, _defineProperty({}, styles$1.portraitImage, portrait)),
+    className: classNames(styles$1.image, {
+      [styles$1.portraitImage]: portrait
+    }),
     src: imageSrc,
-    alt: I18n.t("".concat(i18nPrefix, ".hotspots_image"))
+    alt: I18n.t(`${i18nPrefix}.hotspots_image`),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 139,
+      columnNumber: 10
+    }
   }) : /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$1.image, styles$1.placeholderImage)
+    className: classNames(styles$1.image, styles$1.placeholderImage),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 142,
+      columnNumber: 10
+    }
   }), /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: styles$1.overlay,
-    onMouseMove: function onMouseMove(event) {
-      return dispatch({
-        type: MOUSE_MOVE,
-        cursor: clientToPercent(event)
-      });
+    onMouseMove: event => dispatch({
+      type: MOUSE_MOVE,
+      cursor: clientToPercent(event)
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 143,
+      columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100",
-    preserveAspectRatio: "none"
+    preserveAspectRatio: "none",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 146,
+      columnNumber: 11
+    }
   }, /*#__PURE__*/React.createElement(DraggableCore, {
-    onDrag: function onDrag(event, dragEvent) {
-      var rect = ref.current.getBoundingClientRect();
+    onDrag: (event, dragEvent) => {
+      const rect = ref.current.getBoundingClientRect();
       dispatch({
         type: DRAG,
         delta: [dragEvent.deltaX / rect.width * 100, dragEvent.deltaY / rect.height * 100]
       });
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 147,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement("polygon", {
-    points: drawnOutlinePoints(state).map(function (coords) {
-      return coords.map(function (coord) {
-        return coord;
-      }).join(',');
-    }).join(' ')
-  }))), handles(state).map(function (handle, index) {
+    points: drawnOutlinePoints(state).map(coords => coords.map(coord => coord).join(',')).join(' '),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 158,
+      columnNumber: 15
+    }
+  }))), handles(state).map((handle, index) => {
     var _state$selection;
     return /*#__PURE__*/React.createElement(Handle, {
       key: index,
@@ -1669,30 +1833,28 @@ function DraggableEditor(_ref) {
       axis: handle.axis,
       cursor: handle.cursor,
       circle: handle.circle,
-      title: handle.deletable ? I18n.t("".concat(i18nPrefix, ".double_click_to_delete")) : null,
-      onClick: function onClick(event) {
-        return dispatch({
-          type: CLICK_HANDLE,
-          index: index
-        });
-      },
-      onDoubleClick: function onDoubleClick(event) {
-        return dispatch({
-          type: DOUBLE_CLICK_HANDLE,
-          index: index
-        });
-      },
-      onDrag: function onDrag(event) {
-        return dispatch({
-          type: DRAG_HANDLE,
-          index: index,
-          cursor: clientToPercent(event)
-        });
-      },
-      onDragStop: function onDragStop(event) {
-        return dispatch({
-          type: DRAG_HANDLE_STOP
-        });
+      title: handle.deletable ? I18n.t(`${i18nPrefix}.double_click_to_delete`) : null,
+      onClick: event => dispatch({
+        type: CLICK_HANDLE,
+        index
+      }),
+      onDoubleClick: event => dispatch({
+        type: DOUBLE_CLICK_HANDLE,
+        index
+      }),
+      onDrag: event => dispatch({
+        type: DRAG_HANDLE,
+        index,
+        cursor: clientToPercent(event)
+      }),
+      onDragStop: event => dispatch({
+        type: DRAG_HANDLE_STOP
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 165,
+        columnNumber: 13
       }
     });
   }), potentialPoint && /*#__PURE__*/React.createElement(Handle, {
@@ -1700,189 +1862,304 @@ function DraggableEditor(_ref) {
     circle: true,
     potential: true,
     selected: ((_state$selection2 = state.selection) === null || _state$selection2 === void 0 ? void 0 : _state$selection2.type) === 'potentialPoint',
-    onDrag: function onDrag(event) {
-      return dispatch({
-        type: DRAG_POTENTIAL_POINT,
-        cursor: clientToPercent(event)
-      });
-    },
-    onDragStop: function onDragStop(event) {
-      return dispatch({
-        type: DRAG_POTENTIAL_POINT_STOP
-      });
+    onDrag: event => dispatch({
+      type: DRAG_POTENTIAL_POINT,
+      cursor: clientToPercent(event)
+    }),
+    onDragStop: event => dispatch({
+      type: DRAG_POTENTIAL_POINT_STOP
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 191,
+      columnNumber: 30
     }
   }), /*#__PURE__*/React.createElement(Indicator, {
     position: indicatorPosition,
     selected: ((_state$selection3 = state.selection) === null || _state$selection3 === void 0 ? void 0 : _state$selection3.type) === 'indicator',
     color: indicatorColor,
-    onClick: function onClick(event) {
-      return dispatch({
-        type: CLICK_INDICATOR
-      });
-    },
-    onDrag: function onDrag(event) {
-      return dispatch({
-        type: DRAG_INDICATOR,
-        cursor: clientToPercent(event)
-      });
+    onClick: event => dispatch({
+      type: CLICK_INDICATOR
+    }),
+    onDrag: event => dispatch({
+      type: DRAG_INDICATOR,
+      cursor: clientToPercent(event)
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 203,
+      columnNumber: 11
     }
   }))));
 }
-var modeIcons = {
+const modeIcons = {
   rect: img$a,
   polygon: img$b
 };
-function ModeButtons(_ref2) {
-  var mode = _ref2.mode,
-    dispatch = _ref2.dispatch;
+function ModeButtons({
+  mode,
+  dispatch
+}) {
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.modeButtons
-  }, ['rect', 'polygon'].map(function (availableMode) {
-    return /*#__PURE__*/React.createElement("button", {
-      key: availableMode,
-      type: "button",
-      className: buttonStyles.secondaryIconButton,
-      "aria-pressed": mode === availableMode,
-      onClick: function onClick() {
-        return dispatch({
-          type: SET_MODE,
-          value: availableMode
-        });
-      }
-    }, /*#__PURE__*/React.createElement("img", {
-      src: modeIcons[availableMode],
-      alt: "",
-      width: "20",
-      height: "20"
-    }), I18n.t(availableMode, {
-      scope: "".concat(i18nPrefix, ".modes")
-    }));
-  }));
+    className: styles$1.modeButtons,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 226,
+      columnNumber: 5
+    }
+  }, ['rect', 'polygon'].map(availableMode => /*#__PURE__*/React.createElement("button", {
+    key: availableMode,
+    type: "button",
+    className: buttonStyles.secondaryIconButton,
+    "aria-pressed": mode === availableMode,
+    onClick: () => dispatch({
+      type: SET_MODE,
+      value: availableMode
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 228,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: modeIcons[availableMode],
+    alt: "",
+    width: "20",
+    height: "20",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 233,
+      columnNumber: 11
+    }
+  }), I18n.t(availableMode, {
+    scope: `${i18nPrefix}.modes`
+  }))));
 }
-function Handle(_ref3) {
-  var point = _ref3.point,
-    selected = _ref3.selected,
-    circle = _ref3.circle,
-    potential = _ref3.potential,
-    title = _ref3.title,
-    cursor = _ref3.cursor,
-    onDrag = _ref3.onDrag,
-    onDragStop = _ref3.onDragStop,
-    onClick = _ref3.onClick,
-    onDoubleClick = _ref3.onDoubleClick;
+function Handle({
+  point,
+  selected,
+  circle,
+  potential,
+  title,
+  cursor,
+  onDrag,
+  onDragStop,
+  onClick,
+  onDoubleClick
+}) {
   return /*#__PURE__*/React.createElement(DraggableCore, {
     onDrag: onDrag,
-    onStop: onDragStop
+    onStop: onDragStop,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 244,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$1.handle, _defineProperty(_defineProperty(_defineProperty({}, styles$1.circle, circle), styles$1.selected, selected), styles$1.potential, potential)),
+    className: classNames(styles$1.handle, {
+      [styles$1.circle]: circle,
+      [styles$1.selected]: selected,
+      [styles$1.potential]: potential
+    }),
     tabIndex: "0",
     onClick: onClick,
     onDoubleClick: onDoubleClick,
     title: title,
     style: {
-      left: "".concat(point[0], "%"),
-      top: "".concat(point[1], "%"),
-      cursor: cursor
+      left: `${point[0]}%`,
+      top: `${point[1]}%`,
+      cursor
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 246,
+      columnNumber: 7
     }
   }));
 }
-function Indicator(_ref4) {
-  var position = _ref4.position,
-    selected = _ref4.selected,
-    color = _ref4.color,
-    onClick = _ref4.onClick,
-    onDrag = _ref4.onDrag;
+function Indicator({
+  position,
+  selected,
+  color,
+  onClick,
+  onDrag
+}) {
   return /*#__PURE__*/React.createElement(DraggableCore, {
-    onDrag: onDrag
+    onDrag: onDrag,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 261,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$1.indicator, _defineProperty({}, styles$1.selected, selected)),
+    className: classNames(styles$1.indicator, {
+      [styles$1.selected]: selected
+    }),
     onClick: onClick,
     style: {
-      left: "".concat(position[0], "%"),
-      top: "".concat(position[1], "%"),
+      left: `${position[0]}%`,
+      top: `${position[1]}%`,
       '--color': color
     },
-    title: I18n.t("".concat(i18nPrefix, ".indicator_title"))
+    title: I18n.t(`${i18nPrefix}.indicator_title`),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 262,
+      columnNumber: 7
+    }
   }));
 }
-function CenterIndicatorButton(_ref5) {
-  var onClick = _ref5.onClick;
+function CenterIndicatorButton({
+  onClick
+}) {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: buttonStyles.secondaryIconButton,
-    onClick: onClick
+    onClick: onClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 276,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("img", {
     src: img$c,
     alt: "",
     width: "20",
-    height: "20"
-  }), I18n.t("".concat(i18nPrefix, ".centerIndicator")));
+    height: "20",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 279,
+      columnNumber: 7
+    }
+  }), I18n.t(`${i18nPrefix}.centerIndicator`));
 }
-function Coordinates(_ref6) {
-  var selection = _ref6.selection,
-    _onChange = _ref6.onChange,
-    onBlur = _ref6.onBlur;
+function Coordinates({
+  selection,
+  onChange,
+  onBlur
+}) {
   if (!selection) {
     return null;
   }
-  var position = selection.position;
+  const position = selection.position;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.coordinates
+    className: styles$1.coordinates,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 293,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement(CoordinateInput, {
     label: "X",
     disabled: selection.axis === 'y',
     value: position[0],
-    onChange: function onChange(event) {
-      return _onChange([parseFloat(event.target.value || 0), position[1]]);
-    },
-    onBlur: onBlur
+    onChange: event => onChange([parseFloat(event.target.value || 0), position[1]]),
+    onBlur: onBlur,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 294,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement(CoordinateInput, {
     label: "Y",
     disabled: selection.axis === 'x',
     value: position[1],
-    onChange: function onChange(event) {
-      return _onChange([position[0], parseFloat(event.target.value || 0)]);
-    },
-    onBlur: onBlur
+    onChange: event => onChange([position[0], parseFloat(event.target.value || 0)]),
+    onBlur: onBlur,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 299,
+      columnNumber: 7
+    }
   }));
 }
-function CoordinateInput(_ref7) {
-  var disabled = _ref7.disabled,
-    label = _ref7.label,
-    value = _ref7.value,
-    onChange = _ref7.onChange,
-    onBlur = _ref7.onBlur;
+function CoordinateInput({
+  disabled,
+  label,
+  value,
+  onChange,
+  onBlur
+}) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames({
       'input-disabled': disabled
-    })
-  }, /*#__PURE__*/React.createElement("label", null, label, ":", /*#__PURE__*/React.createElement("input", {
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 310,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 311,
+      columnNumber: 7
+    }
+  }, label, ":", /*#__PURE__*/React.createElement("input", {
     type: "number",
     min: "0",
     max: "100",
     disabled: disabled,
     value: value,
-    onClick: function onClick(event) {
-      return event.target.focus();
-    },
+    onClick: event => event.target.focus(),
     onChange: onChange,
-    onBlur: onBlur
+    onBlur: onBlur,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 313,
+      columnNumber: 9
+    }
   }), "%"));
 }
 
-var css$2 = ".EditAreaDialogView-module_box__1IOYj {\n  width: -moz-min-content;\n  width: min-content;\n  min-height: 310px;\n  min-width: 400px;\n}\n\n.EditAreaDialogView-module_wrapper__F28hP {}\n\n.EditAreaDialogView-module_save__1o3Qg {}\n";
+var css$2 = ".EditAreaDialogView-module_box__1IOYj {\n  width: min-content;\n  min-height: 310px;\n  min-width: 400px;\n}\n\n.EditAreaDialogView-module_wrapper__F28hP {}\n\n.EditAreaDialogView-module_save__1o3Qg {}\n";
 var styles$2 = {"box":"EditAreaDialogView-module_box__1IOYj","wrapper":"EditAreaDialogView-module_wrapper__F28hP","save":"EditAreaDialogView-module_save__1o3Qg"};
 styleInject(css$2);
 
-var i18nPrefix$1 = 'pageflow_scrolled.editor.content_elements.hotspots.edit_area_dialog';
-var EditAreaDialogView = Marionette.ItemView.extend({
-  template: function template() {
-    return "\n    <div class=\"".concat(dialogViewStyles.backdrop, "\">\n      <div class=\"editor ").concat(dialogViewStyles.box, " ").concat(styles$2.box, "\">\n        <h1 class=\"").concat(dialogViewStyles.header, "\">\n          ").concat(I18n.t("".concat(i18nPrefix$1, ".header")), "\n        </h1>\n\n        <div class=\"").concat(styles$2.wrapper, "\">\n        </div>\n\n        <div class=\"").concat(dialogViewStyles.footer, "\">\n          <button class=\"").concat(styles$2.save, " ").concat(buttonStyles.saveButton, "\">\n            ").concat(I18n.t("".concat(i18nPrefix$1, ".save")), "\n          </button>\n          <button class=\"").concat(dialogViewStyles.close, "\">\n            ").concat(I18n.t("".concat(i18nPrefix$1, ".cancel")), "\n          </button>\n        </div>\n     </div>\n  </div>\n            ");
-  },
+const i18nPrefix$1 = 'pageflow_scrolled.editor.content_elements.hotspots.edit_area_dialog';
+const EditAreaDialogView = Marionette.ItemView.extend({
+  template: () => `
+    <div class="${dialogViewStyles.backdrop}">
+      <div class="editor ${dialogViewStyles.box} ${styles$2.box}">
+        <h1 class="${dialogViewStyles.header}">
+          ${I18n.t(`${i18nPrefix$1}.header`)}
+        </h1>
+
+        <div class="${styles$2.wrapper}">
+        </div>
+
+        <div class="${dialogViewStyles.footer}">
+          <button class="${styles$2.save} ${buttonStyles.saveButton}">
+            ${I18n.t(`${i18nPrefix$1}.save`)}
+          </button>
+          <button class="${dialogViewStyles.close}">
+            ${I18n.t(`${i18nPrefix$1}.cancel`)}
+          </button>
+        </div>
+     </div>
+  </div>
+            `,
   mixins: [dialogView],
   ui: cssModulesUtils$1.ui(styles$2, 'wrapper'),
   events: cssModulesUtils$1.events(styles$2, {
-    'click save': function clickSave() {
+    'click save': function () {
       this.save();
       this.close();
       if (this.options.onSave) {
@@ -1890,11 +2167,10 @@ var EditAreaDialogView = Marionette.ItemView.extend({
       }
     }
   }),
-  onRender: function onRender() {
-    var _this = this;
+  onRender() {
     if (this.options.portraitFile) {
-      var tabsView = new TabsView({
-        translationKeyPrefixes: ["".concat(i18nPrefix$1, ".tabs")],
+      const tabsView = new TabsView({
+        translationKeyPrefixes: [`${i18nPrefix$1}.tabs`],
         defaultTab: this.options.defaultTab
       });
       this.editorViews = [new DraggableEditorView({
@@ -1905,13 +2181,9 @@ var EditAreaDialogView = Marionette.ItemView.extend({
         file: this.options.portraitFile,
         portrait: true
       })];
-      tabsView.tab('default', function () {
-        return _this.editorViews[0];
-      });
-      tabsView.tab('portrait', function () {
-        return _this.editorViews[1];
-      });
-      this.appendSubview(tabsView.render(), {
+      tabsView.tab('default', () => this.editorViews[0]);
+      tabsView.tab('portrait', () => this.editorViews[1]);
+      this.appendSubview(tabsView, {
         to: this.ui.wrapper
       });
     } else {
@@ -1919,42 +2191,40 @@ var EditAreaDialogView = Marionette.ItemView.extend({
         model: this.model,
         file: this.options.file
       })];
-      this.appendSubview(this.editorViews[0].render(), {
+      this.appendSubview(this.editorViews[0], {
         to: this.ui.wrapper
       });
     }
   },
-  save: function save() {
-    this.editorViews.forEach(function (view) {
-      return view.save();
-    });
+  save() {
+    this.editorViews.forEach(view => view.save());
   }
 });
 EditAreaDialogView.show = function (options) {
   app.dialogRegion.show(new EditAreaDialogView(options));
 };
 
-var Area = Backbone.Model.extend({
+const Area = Backbone.Model.extend({
   mixins: [transientReferences],
-  thumbnailFile: function thumbnailFile() {
+  thumbnailFile() {
     var _this$imageFile;
     return (_this$imageFile = this.imageFile()) === null || _this$imageFile === void 0 ? void 0 : _this$imageFile.thumbnailFile();
   },
-  title: function title() {
+  title() {
     var _tooltipTexts$this$id, _tooltipTexts$this$id2, _tooltipTexts$this$id3, _tooltipTexts$this$id4, _tooltipTexts$this$id5;
-    var tooltipTexts = this.collection.contentElement.configuration.get('tooltipTexts');
+    const tooltipTexts = this.collection.contentElement.configuration.get('tooltipTexts');
     return tooltipTexts === null || tooltipTexts === void 0 ? void 0 : (_tooltipTexts$this$id = tooltipTexts[this.id]) === null || _tooltipTexts$this$id === void 0 ? void 0 : (_tooltipTexts$this$id2 = _tooltipTexts$this$id.title) === null || _tooltipTexts$this$id2 === void 0 ? void 0 : (_tooltipTexts$this$id3 = _tooltipTexts$this$id2[0]) === null || _tooltipTexts$this$id3 === void 0 ? void 0 : (_tooltipTexts$this$id4 = _tooltipTexts$this$id3.children) === null || _tooltipTexts$this$id4 === void 0 ? void 0 : (_tooltipTexts$this$id5 = _tooltipTexts$this$id4[0]) === null || _tooltipTexts$this$id5 === void 0 ? void 0 : _tooltipTexts$this$id5.text;
   },
-  imageFile: function imageFile() {
+  imageFile() {
     return this.collection.entry.imageFiles.getByPermaId(this.get('activeImage'));
   },
-  highlight: function highlight() {
+  highlight() {
     this.collection.contentElement.postCommand({
       type: 'HIGHLIGHT_AREA',
       index: this.collection.indexOf(this)
     });
   },
-  resetHighlight: function resetHighlight() {
+  resetHighlight() {
     this.collection.contentElement.postCommand({
       type: 'RESET_AREA_HIGHLIGHT'
     });
@@ -1965,82 +2235,85 @@ var css$3 = ".AreasListView-module_listContainer__1vyoU {}\n";
 var styles$3 = {"listContainer":"AreasListView-module_listContainer__1vyoU"};
 styleInject(css$3);
 
-var AreasListView = Marionette.Layout.extend({
-  template: function template(data) {
-    return "\n    <div class='".concat(styles$3.listContainer, "'></div>\n    <button class=\"").concat(buttonStyles.addButton, "\">\n      ").concat(I18n.t('pageflow_scrolled.editor.content_elements.hotspots.areas.add'), "\n    </button>\n  ");
-  },
+const AreasListView = Marionette.Layout.extend({
+  template: data => `
+    <div class='${styles$3.listContainer}'></div>
+    <button class="${buttonStyles.addButton}">
+      ${I18n.t('pageflow_scrolled.editor.content_elements.hotspots.areas.add')}
+    </button>
+  `,
   regions: cssModulesUtils.ui(styles$3, 'listContainer'),
   events: cssModulesUtils.events(buttonStyles, {
-    'click addButton': function clickAddButton() {
-      var _this = this;
-      var model = new Area();
+    'click addButton': function () {
+      const model = new Area();
       EditAreaDialogView.show({
-        model: model,
+        model,
         file: this.model.getImageFile('image'),
         portraitFile: this.model.getImageFile('portraitImage'),
-        onSave: function onSave() {
-          return _this.collection.addWithId(model);
-        }
+        onSave: () => this.collection.addWithId(model)
       });
     }
   }),
-  onRender: function onRender() {
-    var _this2 = this;
+  onRender() {
     this.listContainer.show(new ListView({
       label: I18n.t('pageflow_scrolled.editor.content_elements.hotspots.areas.label'),
       collection: this.collection,
       sortable: true,
       highlight: true,
-      onEdit: function onEdit(model) {
-        _this2.options.contentElement.postCommand({
+      onEdit: model => {
+        this.options.contentElement.postCommand({
           type: 'SET_ACTIVE_AREA',
-          index: _this2.collection.indexOf(model)
+          index: this.collection.indexOf(model)
         });
-        editor.navigate("/scrolled/hotspots/".concat(_this2.options.contentElement.id, "/").concat(model.id), {
+        editor.navigate(`/scrolled/hotspots/${this.options.contentElement.id}/${model.id}`, {
           trigger: true
         });
       },
-      onRemove: function onRemove(model) {
+      onRemove: model => {
         if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.hotspots.areas.confirm_delete'))) {
-          _this2.collection.remove(model);
+          this.collection.remove(model);
         }
       }
     }));
   }
 });
 
-var AreasCollection = Backbone.Collection.extend({
+const AreasCollection = Backbone.Collection.extend({
   model: Area,
   comparator: 'position',
-  initialize: function initialize(models, options) {
-    var _this = this;
+  initialize(models, options) {
     this.entry = options.entry;
     this.contentElement = options.contentElement;
     this.listenTo(this, 'add change sort', this.updateConfiguration);
-    this.listenTo(this, 'remove', function () {
-      return _this.updateConfiguration({
-        pruneTooltips: true
-      });
-    });
+    this.listenTo(this, 'remove', () => this.updateConfiguration({
+      pruneTooltips: true
+    }));
   },
-  updateConfiguration: function updateConfiguration(_ref) {
-    var pruneTooltips = _ref.pruneTooltips;
-    var updatedAttributes = {
+  updateConfiguration({
+    pruneTooltips
+  }) {
+    let updatedAttributes = {
       areas: this.toJSON()
     };
     if (pruneTooltips) {
-      updatedAttributes = _objectSpread2(_objectSpread2(_objectSpread2({}, updatedAttributes), this.getPrunedProperty('tooltipTexts')), this.getPrunedProperty('tooltipLinks'));
+      updatedAttributes = {
+        ...updatedAttributes,
+        ...this.getPrunedProperty('tooltipTexts'),
+        ...this.getPrunedProperty('tooltipLinks')
+      };
     }
     this.contentElement.configuration.set(updatedAttributes);
   },
-  getPrunedProperty: function getPrunedProperty(propertyName) {
-    return _defineProperty({}, propertyName, _.pick.apply(_, [this.contentElement.configuration.get(propertyName) || {}].concat(_toConsumableArray(this.pluck('id')))));
+  getPrunedProperty(propertyName) {
+    return {
+      [propertyName]: _.pick(this.contentElement.configuration.get(propertyName) || {}, ...this.pluck('id'))
+    };
   },
-  addWithId: function addWithId(model) {
-    model.set('id', this.length ? Math.max.apply(Math, _toConsumableArray(this.pluck('id'))) + 1 : 1);
+  addWithId(model) {
+    model.set('id', this.length ? Math.max(...this.pluck('id')) + 1 : 1);
     this.add(model);
   },
-  saveOrder: function saveOrder() {}
+  saveOrder() {}
 });
 AreasCollection.forContentElement = function (contentElement, entry) {
   return new AreasCollection(contentElement.configuration.get('areas') || [], {
@@ -2049,7 +2322,7 @@ AreasCollection.forContentElement = function (contentElement, entry) {
   });
 };
 
-var SidebarRouter$1 = Marionette.AppRouter.extend({
+const SidebarRouter$1 = Marionette.AppRouter.extend({
   appRoutes: {
     'scrolled/hotspots/:id/:area_id': 'area',
     'scrolled/hotspots/:id/:area_id/:tab': 'area'
@@ -2060,13 +2333,19 @@ var css$4 = ".AreaInputView-module_button__3LSo- {\n  width: 100%;\n}\n";
 var styles$4 = {"button":"AreaInputView-module_button__3LSo-"};
 styleInject(css$4);
 
-var AreaInputView = Marionette.Layout.extend({
-  template: function template(data) {
-    return "\n    <label>\n      <span class=\"name\"></span>\n      <span class=\"inline_help\"></span>\n    </label>\n    <button class=\"".concat(buttonStyles.targetButton, " ").concat(styles$4.button, "\">\n      ").concat(I18n.t('pageflow_scrolled.editor.content_elements.hotspots.area_input.edit'), "\n    </button>\n  ");
-  },
+const AreaInputView = Marionette.Layout.extend({
+  template: data => `
+    <label>
+      <span class="name"></span>
+      <span class="inline_help"></span>
+    </label>
+    <button class="${buttonStyles.targetButton} ${styles$4.button}">
+      ${I18n.t('pageflow_scrolled.editor.content_elements.hotspots.area_input.edit')}
+    </button>
+  `,
   mixins: [inputView],
   events: cssModulesUtils.events(buttonStyles, {
-    'click targetButton': function clickTargetButton() {
+    'click targetButton': function () {
       EditAreaDialogView.show({
         model: this.model,
         file: this.options.file,
@@ -2077,42 +2356,47 @@ var AreaInputView = Marionette.Layout.extend({
   })
 });
 
-var css$5 = ".SidebarEditAreaView-module_view__2AVKF .tabs_view-headers li:nth-child(2) {\n  margin-left: 5px;\n}\n\n.SidebarEditAreaView-module_view__2AVKF .tabs_view-headers li:nth-child(2)::before {\n  content: \"\\203A\";\n  margin-left: -15px;\n  margin-right: 10px;\n  font-weight: normal;\n}\n";
+var css$5 = ".SidebarEditAreaView-module_view__2AVKF .tabs_view-tabs > :nth-child(2) {\n  margin-left: 5px;\n}\n\n.SidebarEditAreaView-module_view__2AVKF .tabs_view-tabs > :nth-child(2)::before {\n  content: \"\\203A\";\n  margin-left: -15px;\n  margin-right: 10px;\n  font-weight: normal;\n}\n";
 var styles$5 = {"view":"SidebarEditAreaView-module_view__2AVKF"};
 styleInject(css$5);
 
-var SidebarEditAreaView = Marionette.Layout.extend({
-  template: function template(data) {
-    return "\n    <a class=\"back\">".concat(I18n.t('pageflow_scrolled.editor.content_elements.hotspots.edit_area.back'), "</a>\n    <a class=\"destroy\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.hotspots.edit_area.destroy'), "</a>\n\n    <div class='form_container'></div>\n  ");
+const SidebarEditAreaView = EditConfigurationView.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.content_elements.hotspots.edit_area',
+  className: 'edit_configuration_view ' + styles$5.view,
+  containingCollection() {
+    return this.options.collection;
   },
-  className: styles$5.view,
-  regions: {
-    formContainer: '.form_container'
+  getConfigurationModel() {
+    return this.model;
   },
-  events: {
-    'click a.back': 'goBack',
-    'click a.destroy': 'destroyLink'
+  defaultTab() {
+    return this.options.tab || (this.options.entry.get('emulation_mode') === 'phone' ? 'portrait' : 'area');
   },
-  onRender: function onRender() {
-    var _this = this;
-    var options = this.options;
-    var configurationEditor = new ConfigurationEditorView({
-      model: this.model,
-      attributeTranslationKeyPrefixes: ['pageflow_scrolled.editor.content_elements.hotspots.edit_area.attributes'],
-      tabTranslationKeyPrefix: 'pageflow_scrolled.editor.content_elements.hotspots.edit_area.tabs',
-      tab: options.tab || (options.entry.get('emulation_mode') === 'phone' ? 'portrait' : 'area')
+  goBackPath() {
+    return `/scrolled/content_elements/${this.options.contentElement.get('id')}`;
+  },
+  goBack() {
+    this.options.contentElement.postCommand({
+      type: 'SET_ACTIVE_AREA',
+      index: -1
     });
-    var file = options.contentElement.configuration.getImageFile('image');
-    var portraitFile = options.contentElement.configuration.getImageFile('portraitImage');
-    var panZoomEnabled = options.contentElement.configuration.get('enablePanZoom') !== 'never';
-    var preserveActiveArea = function preserveActiveArea() {
-      return setTimeout(function () {
-        return options.contentElement.postCommand({
-          type: 'SET_ACTIVE_AREA',
-          index: options.collection.indexOf(_this.model)
-        });
-      }, 200);
-    };
+    EditConfigurationView.prototype.goBack.call(this);
+  },
+  getActionsMenuItems() {
+    return [new DestroyAreaMenuItem({}, {
+      collection: this.options.collection,
+      model: this.model
+    })];
+  },
+  configure(configurationEditor) {
+    const options = this.options;
+    const file = options.contentElement.configuration.getImageFile('image');
+    const portraitFile = options.contentElement.configuration.getImageFile('portraitImage');
+    const panZoomEnabled = options.contentElement.configuration.get('enablePanZoom') !== 'never';
+    const preserveActiveArea = () => setTimeout(() => options.contentElement.postCommand({
+      type: 'SET_ACTIVE_AREA',
+      index: options.collection.indexOf(this.model)
+    }), 200);
     if (file && portraitFile) {
       this.previousEmulationMode = options.entry.get('emulation_mode') || 'desktop';
     }
@@ -2122,8 +2406,8 @@ var SidebarEditAreaView = Marionette.Layout.extend({
         preserveActiveArea();
       }
       this.input('area', AreaInputView, {
-        file: file,
-        portraitFile: portraitFile
+        file,
+        portraitFile
       });
       this.input('activeImage', FileInputView, {
         collection: 'image_files',
@@ -2172,8 +2456,8 @@ var SidebarEditAreaView = Marionette.Layout.extend({
           preserveActiveArea();
         }
         this.input('portraitArea', AreaInputView, {
-          file: file,
-          portraitFile: portraitFile,
+          file,
+          portraitFile,
           defaultTab: 'portrait'
         });
         this.input('portraitActiveImage', FileInputView, {
@@ -2204,35 +2488,29 @@ var SidebarEditAreaView = Marionette.Layout.extend({
         });
       });
     }
-    this.formContainer.show(configurationEditor);
-  },
-  goBack: function goBack() {
-    editor$1.navigate("/scrolled/content_elements/".concat(this.options.contentElement.get('id')), {
-      trigger: true
-    });
-  },
-  destroyLink: function destroyLink() {
-    if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.hotspots.edit_area.confirm_delete_link'))) {
-      this.options.collection.remove(this.model);
-      this.goBack();
-    }
+  }
+});
+const DestroyAreaMenuItem = DestroyMenuItem.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.content_elements.hotspots.edit_area',
+  destroyModel() {
+    this.options.collection.remove(this.options.model);
   }
 });
 
-var SidebarController$1 = Marionette.Controller.extend({
-  initialize: function initialize(options) {
+const SidebarController$1 = Marionette.Controller.extend({
+  initialize: function (options) {
     this.entry = options.entry;
     this.region = options.region;
   },
-  area: function area(id, areaId, tab) {
-    var contentElement = this.entry.contentElements.get(id);
-    var areasCollection = AreasCollection.forContentElement(contentElement, this.entry);
+  area: function (id, areaId, tab) {
+    const contentElement = this.entry.contentElements.get(id);
+    const areasCollection = AreasCollection.forContentElement(contentElement, this.entry);
     this.region.show(new SidebarEditAreaView({
       model: areasCollection.get(areaId),
       collection: areasCollection,
       entry: this.entry,
-      contentElement: contentElement,
-      tab: tab
+      contentElement,
+      tab
     }));
   }
 });
@@ -2248,15 +2526,25 @@ editor.contentElementTypes.register('hotspots', {
   category: 'interactive',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
   supportedWidthRange: ['xxs', 'full'],
-  editorPath: function editorPath(contentElement) {
-    var activeAreaId = contentElement.transientState.get('activeAreaId');
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  editorPath(contentElement) {
+    const activeAreaId = contentElement.transientState.get('activeAreaId');
     if (activeAreaId) {
-      return "/scrolled/hotspots/".concat(contentElement.id, "/").concat(activeAreaId);
+      return `/scrolled/hotspots/${contentElement.id}/${activeAreaId}`;
     }
   },
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry,
-      contentElement = _ref.contentElement;
+  configurationPlace(contentElement, path) {
+    const [propertyName] = path;
+    if (propertyName !== 'areas') {
+      return elementConfigurationPlace(contentElement);
+    }
+    return areaConfigurationPlace(contentElement, path);
+  },
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
     this.tab('general', function () {
       this.input('image', FileInputView, {
         collection: 'image_files',
@@ -2271,7 +2559,7 @@ editor.contentElementTypes.register('hotspots', {
       });
       this.view(AreasListView, {
         configuration: this.model,
-        contentElement: contentElement,
+        contentElement,
         collection: AreasCollection.forContentElement(contentElement, entry)
       });
       this.input('invertTooltips', CheckBoxInputView$1);
@@ -2281,25 +2569,26 @@ editor.contentElementTypes.register('hotspots', {
       this.view(SeparatorView$1);
       this.input('enableFullscreen', CheckBoxInputView$1, {
         disabledBinding: ['position', 'width'],
-        disabled: function disabled() {
-          return contentElement.getWidth() === contentElementWidths.full || contentElement.getPosition() === 'backdrop';
-        },
+        disabled: () => contentElement.getWidth() === contentElementWidths.full || contentElement.getPosition() === 'backdrop',
         displayUncheckedIfDisabled: true
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView$1);
+      this.group('LinkButtonVariant', {
+        entry
+      });
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
       this.group('ContentElementInlineFileRightsSettings');
     });
   }
 });
 editor.registerFileSelectionHandler('hotspotsArea', function (options) {
-  var contentElement = options.entry.contentElements.get(options.contentElementId);
-  var areas = AreasCollection.forContentElement(contentElement, options.entry);
+  const contentElement = options.entry.contentElements.get(options.contentElementId);
+  const areas = AreasCollection.forContentElement(contentElement, options.entry);
   this.call = function (file) {
     areas.get(options.id).setReference(options.attributeName, file);
   };
@@ -2308,16 +2597,57 @@ editor.registerFileSelectionHandler('hotspotsArea', function (options) {
   };
 });
 
+// The editor path of the element points at the active area, which
+// would send the sidebar back to an area the property is not in.
+function elementConfigurationPlace(contentElement) {
+  return {
+    select() {
+      contentElement.postCommand({
+        type: 'SET_ACTIVE_AREA',
+        index: -1
+      });
+      contentElement.select();
+    }
+  };
+}
+function areaConfigurationPlace(contentElement, [, index, propertyName]) {
+  const area = contentElement.configuration.get('areas')[index];
+  const tab = propertyName.startsWith('portrait') ? 'portrait' : 'area';
+  return {
+    label: areaAttributeLabel(propertyName),
+    select() {
+      contentElement.postCommand({
+        type: 'SET_ACTIVE_AREA',
+        index: Number(index)
+      });
+      contentElement.select({
+        navigate: false
+      });
+      editor.navigate(`/scrolled/hotspots/${contentElement.id}/${area.id}/${tab}`, {
+        trigger: true
+      });
+    }
+  };
+}
+function areaAttributeLabel(propertyName) {
+  return I18n.t(`${propertyName}.label`, {
+    scope: 'pageflow_scrolled.editor.content_elements.hotspots.edit_area.attributes'
+  });
+}
+
 var img$e = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M578.2 66.06C409.8 116.6 230.2 116.6 61.8 66.06C31 56.82 0 79.88 0 112v319.9c0 32.15 30.1 55.21 61.79 45.97c168.4-50.53 347.1-50.53 516.4-.002C608.1 487.2 640 464.1 640 431.1V112C640 79.88 609 56.82 578.2 66.06zM128 224C110.3 224 96 209.7 96 192s14.33-32 32-32c17.68 0 32 14.33 32 32S145.7 224 128 224zM474.3 388.6C423.4 380.3 371.8 376 320 376c-50.45 0-100.7 4.043-150.3 11.93c-14.14 2.246-24.11-13.19-15.78-24.84l49.18-68.56C206.1 290.4 210.9 288 216 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C357.7 194.7 362.7 192 368 192s10.35 2.672 13.31 7.125l109.1 165.1C498.1 375.9 488.1 390.8 474.3 388.6z'/%3e%3c/svg%3e";
 
-var aspectRatios = ['wide', 'narrow', 'square', 'portrait'];
+const aspectRatios = ['wide', 'narrow', 'square', 'portrait'];
 editor.contentElementTypes.register('vrImage', {
   pictogram: img$e,
   category: 'interactive',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
   supportedWidthRange: ['xxs', 'full'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
       this.input('image', FileInputView, {
         collection: 'image_files',
@@ -2348,18 +2678,18 @@ editor.contentElementTypes.register('vrImage', {
       });
       this.view(SeparatorView$1);
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView$1);
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
       this.group('ContentElementInlineFileRightsSettings');
     });
   }
 });
 editor.fileTypes.modify('image_files', {
-  configurationEditorInputs: function configurationEditorInputs(model) {
+  configurationEditorInputs(model) {
     var values = ['equirectangular_mono', 'equirectangular_stereo'];
     return [{
       name: 'projection',
@@ -2376,7 +2706,7 @@ editor.fileTypes.modify('image_files', {
   }],
   filters: [{
     name: 'with_projection',
-    matches: function matches(file) {
+    matches: function (file) {
       return !!file.configuration.get('projection');
     }
   }]
@@ -2384,28 +2714,28 @@ editor.fileTypes.modify('image_files', {
 
 var img$f = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Pro 6.1.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons%2c Inc. --%3e%3cpath fill='white' d='M414.8 40.79L286.8 488.8C281.9 505.8 264.2 515.6 247.2 510.8C230.2 505.9 220.4 488.2 225.2 471.2L353.2 23.21C358.1 6.216 375.8-3.624 392.8 1.232C409.8 6.087 419.6 23.8 414.8 40.79H414.8zM518.6 121.4L630.6 233.4C643.1 245.9 643.1 266.1 630.6 278.6L518.6 390.6C506.1 403.1 485.9 403.1 473.4 390.6C460.9 378.1 460.9 357.9 473.4 345.4L562.7 256L473.4 166.6C460.9 154.1 460.9 133.9 473.4 121.4C485.9 108.9 506.1 108.9 518.6 121.4V121.4zM166.6 166.6L77.25 256L166.6 345.4C179.1 357.9 179.1 378.1 166.6 390.6C154.1 403.1 133.9 403.1 121.4 390.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4L121.4 121.4C133.9 108.9 154.1 108.9 166.6 121.4C179.1 133.9 179.1 154.1 166.6 166.6V166.6z'/%3e%3c/svg%3e";
 
-var aspectRatios$1 = ['wide', 'narrow', 'square', 'portrait'];
+const aspectRatios$1 = ['wide', 'narrow', 'square', 'portrait'];
 editor.contentElementTypes.register('iframeEmbed', {
   pictogram: img$f,
   category: 'interactive',
   featureName: 'iframe_embed_content_element',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
-      this.input('source', TextInputView);
+      this.input('source', TextInputView, {
+        maxLength: 2000
+      });
       this.input('requireConsent', CheckBoxInputView);
       this.view(InfoBoxView, {
         level: 'error',
         text: I18n.t('pageflow_scrolled.editor.content_elements.iframeEmbed.help_texts.missingConsentVendor'),
         visibleBinding: ['source', 'requireConsent'],
-        visible: function visible(_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 2),
-            source = _ref3[0],
-            requireConsent = _ref3[1];
-          return source && requireConsent && !entry.consentVendors.fromUrl(source);
-        }
+        visible: ([source, requireConsent]) => source && requireConsent && !entry.consentVendors.fromUrl(source)
       });
       this.input('title', TextInputView);
       this.input('aspectRatio', SelectInputView, {
@@ -2428,11 +2758,11 @@ editor.contentElementTypes.register('iframeEmbed', {
         values: ['p100', 'p75', 'p50', 'p33']
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.group('ContentElementCaption', {
-        entry: entry
+        entry
       });
     });
   }
@@ -2442,76 +2772,80 @@ var css$6 = ".ItemsListView-module_listContainer__2XDCy {\n}\n";
 var styles$6 = {"listContainer":"ItemsListView-module_listContainer__2XDCy"};
 styleInject(css$6);
 
-var ItemsListView = Marionette.Layout.extend({
-  template: function template(data) {
-    return "\n    <div class='".concat(styles$6.listContainer, "'></div>\n    <button class=\"").concat(buttonStyles.addButton, "\">\n      ").concat(I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.items.add'), "\n    </button>\n  ");
-  },
+const ItemsListView = Marionette.Layout.extend({
+  template: data => `
+    <div class='${styles$6.listContainer}'></div>
+    <button class="${buttonStyles.addButton}">
+      ${I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.items.add')}
+    </button>
+  `,
   regions: cssModulesUtils.ui(styles$6, 'listContainer'),
   events: cssModulesUtils.events(buttonStyles, {
-    'click addButton': function clickAddButton() {
+    'click addButton': function () {
       this.collection.selectImage();
     }
   }),
-  onRender: function onRender() {
-    var _this = this;
+  onRender() {
     this.listContainer.show(new ListView({
       label: I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.items.label'),
       collection: this.collection,
       sortable: true,
-      onEdit: function onEdit(model) {
-        editor.navigate("/scrolled/imageGalleries/".concat(_this.options.contentElement.id, "/").concat(model.id), {
+      onEdit: model => {
+        this.options.contentElement.postCommand({
+          type: 'SET_CURRENT_ITEM',
+          index: this.collection.indexOf(model)
+        });
+        editor.navigate(`/scrolled/imageGalleries/${this.options.contentElement.id}/${model.id}`, {
           trigger: true
         });
       },
-      onRemove: function onRemove(model) {
-        return _this.collection.remove(model);
-      }
+      onRemove: model => this.collection.remove(model)
     }));
   }
 });
 
-var Item = Backbone.Model.extend({
+const Item = Backbone.Model.extend({
   mixins: [transientReferences],
-  thumbnailFile: function thumbnailFile() {
+  thumbnailFile() {
     var _this$imageFile;
     return (_this$imageFile = this.imageFile()) === null || _this$imageFile === void 0 ? void 0 : _this$imageFile.thumbnailFile();
   },
-  title: function title() {
+  title() {
     var _this$imageFile2;
     return (_this$imageFile2 = this.imageFile()) === null || _this$imageFile2 === void 0 ? void 0 : _this$imageFile2.title();
   },
-  imageFile: function imageFile() {
+  imageFile() {
     return this.collection.entry.imageFiles.getByPermaId(this.get('image'));
   }
 });
 
-var ItemsCollection = Backbone.Collection.extend({
+const ItemsCollection = Backbone.Collection.extend({
   model: Item,
   comparator: 'position',
-  initialize: function initialize(models, options) {
+  initialize(models, options) {
     this.entry = options.entry;
     this.contentElement = options.contentElement;
     this.listenTo(this, 'add change remove sort', this.updateConfiguration);
     this.listenTo(this, 'remove', this.pruneCaptions);
   },
-  updateConfiguration: function updateConfiguration() {
+  updateConfiguration() {
     this.contentElement.configuration.set('items', this.toJSON());
   },
-  pruneCaptions: function pruneCaptions() {
-    this.contentElement.configuration.set('captions', _.pick.apply(_, [this.contentElement.configuration.get('captions') || {}].concat(_toConsumableArray(this.pluck('id')))));
+  pruneCaptions() {
+    this.contentElement.configuration.set('captions', _.pick(this.contentElement.configuration.get('captions') || {}, ...this.pluck('id')));
   },
-  selectImage: function selectImage() {
+  selectImage() {
     editor$1.selectFile('image_files', 'newImageGalleryItem', {
       id: this.contentElement.id
     });
   },
-  addWithId: function addWithId(imageFile) {
+  addWithId(imageFile) {
     this.add({
-      id: this.length ? Math.max.apply(Math, _toConsumableArray(this.pluck('id'))) + 1 : 1,
+      id: this.length ? Math.max(...this.pluck('id')) + 1 : 1,
       image: imageFile.get('perma_id')
     });
   },
-  saveOrder: function saveOrder() {}
+  saveOrder() {}
 });
 ItemsCollection.forContentElement = function (contentElement, entry) {
   return new ItemsCollection(contentElement.configuration.get('items') || [], {
@@ -2519,8 +2853,8 @@ ItemsCollection.forContentElement = function (contentElement, entry) {
     contentElement: contentElement
   });
 };
-var FileSelectionHandler = function FileSelectionHandler(options) {
-  var contentElement = options.entry.contentElements.get(options.id);
+const FileSelectionHandler = function (options) {
+  const contentElement = options.entry.contentElements.get(options.id);
   this.call = function (file) {
     ItemsCollection.forContentElement(contentElement).addWithId(file);
   };
@@ -2530,36 +2864,37 @@ var FileSelectionHandler = function FileSelectionHandler(options) {
 };
 editor$1.registerFileSelectionHandler('newImageGalleryItem', FileSelectionHandler);
 
-var SidebarRouter$2 = Marionette.AppRouter.extend({
+const SidebarRouter$2 = Marionette.AppRouter.extend({
   appRoutes: {
     'scrolled/imageGalleries/:id/:item_id': 'item'
   }
 });
 
-var SidebarEditItemView = Marionette.Layout.extend({
-  template: function template(data) {
-    return "\n    <a class=\"back\">".concat(I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.edit_item.back'), "</a>\n    <a class=\"destroy\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.edit_item.destroy'), "</a>\n\n    <div class='form_container'></div>\n  ");
+const SidebarEditItemView = EditConfigurationView.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.content_elements.imageGallery.edit_item',
+  containingCollection() {
+    return this.options.collection;
   },
-  regions: {
-    formContainer: '.form_container'
+  getConfigurationModel() {
+    return this.model;
   },
-  events: {
-    'click a.back': 'goBack',
-    'click a.destroy': 'destroyLink'
+  goBackPath() {
+    return `/scrolled/content_elements/${this.options.contentElement.get('id')}`;
   },
-  onRender: function onRender() {
-    var options = this.options;
-    var configurationEditor = new ConfigurationEditorView({
-      model: this.model,
-      attributeTranslationKeyPrefixes: ['pageflow_scrolled.editor.content_elements.imageGallery.edit_item.attributes'],
-      tabTranslationKeyPrefix: 'pageflow_scrolled.editor.content_elements.imageGallery.edit_item.tabs'
-    });
+  getActionsMenuItems() {
+    return [new DestroyItemMenuItem({}, {
+      collection: this.options.collection,
+      model: this.model
+    })];
+  },
+  configure(configurationEditor) {
+    const contentElement = this.options.contentElement;
     configurationEditor.tab('item', function () {
       this.input('image', FileInputView, {
         collection: 'image_files',
         fileSelectionHandler: 'imageGalleryItem',
         fileSelectionHandlerOptions: {
-          contentElementId: options.contentElement.get('id')
+          contentElementId: contentElement.get('id')
         },
         positioning: false
       });
@@ -2567,39 +2902,33 @@ var SidebarEditItemView = Marionette.Layout.extend({
         collection: 'image_files',
         fileSelectionHandler: 'imageGalleryItem',
         fileSelectionHandlerOptions: {
-          contentElementId: options.contentElement.get('id')
+          contentElementId: contentElement.get('id')
         },
         positioning: false
       });
     });
-    this.formContainer.show(configurationEditor);
-  },
-  goBack: function goBack() {
-    editor$1.navigate("/scrolled/content_elements/".concat(this.options.contentElement.get('id')), {
-      trigger: true
-    });
-  },
-  destroyLink: function destroyLink() {
-    if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.edit_item.confirm_delete_link'))) {
-      this.options.collection.remove(this.model);
-      this.goBack();
-    }
+  }
+});
+const DestroyItemMenuItem = DestroyMenuItem.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.content_elements.imageGallery.edit_item',
+  destroyModel() {
+    this.options.collection.remove(this.options.model);
   }
 });
 
-var SidebarController$2 = Marionette.Controller.extend({
-  initialize: function initialize(options) {
+const SidebarController$2 = Marionette.Controller.extend({
+  initialize: function (options) {
     this.entry = options.entry;
     this.region = options.region;
   },
-  item: function item(id, itemId) {
-    var contentElement = this.entry.contentElements.get(id);
-    var itemsCollection = ItemsCollection.forContentElement(contentElement, this.entry);
+  item: function (id, itemId) {
+    const contentElement = this.entry.contentElements.get(id);
+    const itemsCollection = ItemsCollection.forContentElement(contentElement, this.entry);
     this.region.show(new SidebarEditItemView({
       model: itemsCollection.get(itemId),
       collection: itemsCollection,
       entry: this.entry,
-      contentElement: contentElement
+      contentElement
     }));
   }
 });
@@ -2615,12 +2944,39 @@ editor.contentElementTypes.register('imageGallery', {
   category: 'media',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry,
-      contentElement = _ref.contentElement;
+  supportedCaptions: {
+    disableWhenNoCaption: false
+  },
+  supportedStyles: ['boxShadow', 'outline'],
+  configurationPlace(contentElement, path) {
+    const [propertyName, index, itemProperty] = path;
+    if (propertyName !== 'items') {
+      return;
+    }
+    const item = contentElement.configuration.get('items')[index];
+    return {
+      label: attributeLabel$1(itemProperty),
+      select() {
+        contentElement.postCommand({
+          type: 'SET_CURRENT_ITEM',
+          index: Number(index)
+        });
+        contentElement.select({
+          navigate: false
+        });
+        editor.navigate(`/scrolled/imageGalleries/${contentElement.id}/${item.id}`, {
+          trigger: true
+        });
+      }
+    };
+  },
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
     this.tab('general', function () {
       this.view(ItemsListView, {
-        contentElement: contentElement,
+        contentElement,
         collection: ItemsCollection.forContentElement(this.model.parent, entry)
       });
       this.input('displayPeeks', CheckBoxInputView$1, {
@@ -2629,21 +2985,19 @@ editor.contentElementTypes.register('imageGallery', {
       this.input('displayPaginationIndicator', CheckBoxInputView$1);
       this.input('enableFullscreenOnDesktop', CheckBoxInputView$1, {
         disabledBinding: ['position', 'width'],
-        disabled: function disabled() {
-          return contentElement.getWidth() === contentElementWidths.full;
-        },
+        disabled: () => contentElement.getWidth() === contentElementWidths.full,
         displayUncheckedIfDisabled: true
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView$1);
       this.group('ContentElementCaption', {
-        entry: entry,
+        entry,
         disableWhenNoCaption: false
       });
       this.group('ContentElementInlineFileRightsSettings', {
-        entry: entry,
+        entry,
         disableWhenNoFileRights: false
       });
     });
@@ -2653,8 +3007,8 @@ editor.contentElementTypes.register('imageGallery', {
   }
 });
 editor.registerFileSelectionHandler('imageGalleryItem', function (options) {
-  var contentElement = options.entry.contentElements.get(options.contentElementId);
-  var items = ItemsCollection.forContentElement(contentElement, options.entry);
+  const contentElement = options.entry.contentElements.get(options.contentElementId);
+  const items = ItemsCollection.forContentElement(contentElement, options.entry);
   this.call = function (file) {
     items.get(options.id).setReference(options.attributeName, file);
   };
@@ -2662,15 +3016,350 @@ editor.registerFileSelectionHandler('imageGalleryItem', function (options) {
     return '/scrolled/imageGalleries/' + contentElement.id + '/' + options.id;
   };
 });
+function attributeLabel$1(propertyName) {
+  return I18n.t(`${propertyName}.label`, {
+    scope: 'pageflow_scrolled.editor.content_elements.imageGallery.edit_item.attributes'
+  });
+}
 
-var img$h = "data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e %3cpath fill='white' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3e%3c/svg%3e";
+const LottieFile = UploadableFile.extend({
+  isPositionable: function () {
+    return this.isReady();
+  }
+});
 
-editor.contentElementTypes.register('twitterEmbed', {
+// Prevent the player from fetching its WebAssembly module from a CDN.
+// Frontend and editor run in separate bundles and thus each need to
+// point the player at the module emitted by their own build.
+DotLottie.setWasmUrl(wasmUrl);
+
+// Base class for views which play a lottie file. Sub classes render a
+// canvas, return the options the player shall be created with from
+// `playerOptions` and use `onAnimationLoad` for everything that
+// requires the player to have read the file.
+const LottieFilePlayerView = Marionette.ItemView.extend({
+  ui: {
+    canvas: 'canvas'
+  },
+  onRender: function () {
+    // Sub classes size themselves based on dimensions which only the
+    // animation provides. The canvas stays invisible until the player
+    // has read them. Taking it out of the layout instead would let the
+    // surrounding box collapse and jump back open.
+    this.$el.css('visibility', 'hidden');
+    this.player = new DotLottie({
+      canvas: this.ui.canvas[0],
+      src: this.model.get('original_url'),
+      renderConfig: {
+        autoResize: true
+      },
+      ...this.playerOptions()
+    });
+    this.player.addEventListener('load', () => {
+      this.onAnimationLoad();
+
+      // The player has already drawn a frame into a canvas of the size
+      // the view had before. It only notices the new size via a resize
+      // observer, which fires too late to keep the frame from being
+      // stretched into the new box.
+      this.player.resize();
+      this.$el.css('visibility', '');
+    });
+  },
+  playerOptions: function () {
+    return {};
+  },
+  onAnimationLoad: function () {},
+  onClose: function () {
+    this.player.destroy();
+  }
+});
+
+var css$7 = ".LottieFilePositioningView-module_cover__3ZKEB {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* A max height would squash the canvas instead of scaling it down,\n   since the aspect ratio only determines the height before it is\n   clamped. Limiting the width covers both directions. */\n.LottieFilePositioningView-module_contain__2UeDA {\n  display: block;\n  width: var(--positioning-width, 100%);\n  max-width: min(var(--positioning-max-width, 100%),\n                 var(--positioning-max-height, 100vh) *\n                   var(--positioning-aspect-ratio, 1));\n  aspect-ratio: var(--positioning-aspect-ratio, 1);\n}\n\n.LottieFilePositioningView-module_canvas__3OxWg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n";
+var styles$7 = {"cover":"LottieFilePositioningView-module_cover__3ZKEB","contain":"LottieFilePositioningView-module_contain__2UeDA","canvas":"LottieFilePositioningView-module_canvas__3OxWg"};
+styleInject(css$7);
+
+const LottieFilePositioningView = LottieFilePlayerView.extend({
+  template: () => `<canvas class="${styles$7.canvas}"></canvas>`,
+  className: function () {
+    return styles$7[this.options.fit];
+  },
+  playerOptions: function () {
+    return {
+      autoplay: true,
+      loop: true,
+      layout: this.layout()
+    };
+  },
+  setPosition: function (x, y) {
+    this.align = [x / 100, y / 100];
+    this.player.setLayout(this.layout());
+  },
+  // The player ignores layout changes as long as it is still reading
+  // the file.
+  onAnimationLoad: function () {
+    this.player.setLayout(this.layout());
+    this.applyDimensions();
+  },
+  layout: function () {
+    return {
+      fit: this.options.fit,
+      align: this.align
+    };
+  },
+  // Unlike images and videos, lottie files have no dimensions stored on
+  // the server. The box can thus only be sized once the player has read
+  // them from the file.
+  applyDimensions: function () {
+    var size = this.player.animationSize();
+    if (size.width && size.height) {
+      this.el.style.setProperty('--positioning-aspect-ratio', `${size.width / size.height}`);
+      this.el.style.setProperty('--positioning-width', `${size.width}px`);
+    }
+  }
+});
+
+var css$8 = "/* Scaled down to whatever height the overlay has left, just like the\n   image and video previews. The player keeps the animation centered\n   inside the canvas, so a clamped height only adds transparent space\n   left and right. */\n.LottieFilePreviewView-module_canvas__h1U-D {\n  display: block;\n  width: 100%;\n  max-width: var(--preview-width, 100%);\n  max-height: var(--preview-max-height, none);\n  margin: 0 auto;\n  aspect-ratio: var(--preview-aspect-ratio, 1);\n}\n";
+var styles$8 = {"canvas":"LottieFilePreviewView-module_canvas__h1U-D"};
+styleInject(css$8);
+
+const LottieFilePreviewView = LottieFilePlayerView.extend({
+  template: () => `<canvas class="${styles$8.canvas}"></canvas>`,
+  className: 'file_preview',
+  playerOptions: function () {
+    return {
+      autoplay: true,
+      loop: true
+    };
+  },
+  // Unlike images and videos, lottie files have no dimensions stored on
+  // the server. The box can thus only be sized once the player has read
+  // them from the file.
+  onAnimationLoad: function () {
+    var size = this.player.animationSize();
+    if (size.width && size.height) {
+      this.ui.canvas[0].style.setProperty('--preview-aspect-ratio', `${size.width} / ${size.height}`);
+      this.ui.canvas[0].style.setProperty('--preview-width', `${size.width}px`);
+    }
+  }
+});
+
+var css$9 = ".LottieFileThumbnailView-module_thumbnail__2joie,\n.LottieFileThumbnailView-module_canvas__1Aby1 {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n";
+var styles$9 = {"thumbnail":"LottieFileThumbnailView-module_thumbnail__2joie","canvas":"LottieFileThumbnailView-module_canvas__1Aby1"};
+styleInject(css$9);
+
+const LottieFileThumbnailView = LottieFilePlayerView.extend({
+  template: () => `<canvas class="${styles$9.canvas}"></canvas>`,
+  className: styles$9.thumbnail,
+  playerOptions: function () {
+    return {
+      autoplay: false,
+      layout: {
+        fit: 'cover'
+      }
+    };
+  },
+  // Animations commonly build up their scene over time, which would
+  // leave the thumbnail close to blank on the first frame the player
+  // draws once it has loaded the file.
+  onAnimationLoad: function () {
+    this.player.setFrame(this.player.totalFrames - 1);
+  }
+});
+
+var img$h = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='white' d='M400 176a72 72 0 1 1-144 0 72 72 0 0 1 144 0zM240 288a44 44 0 1 1-88 0 44 44 0 0 1 88 0zM136 384a28 28 0 1 1-56 0 28 28 0 0 1 56 0zM72 448a16 16 0 1 1-32 0 16 16 0 0 1 32 0z'/%3e%3c/svg%3e";
+
+editor.fileTypes.register('lottie_files', {
+  model: LottieFile,
+  positioningView: LottieFilePositioningView,
+  previewView: LottieFilePreviewView,
+  thumbnailView: LottieFileThumbnailView,
+  metaDataAttributes: [altMetaDataAttribute],
+  configurationEditorInputs: [altConfigurationEditorInput],
+  // Browsers derive the content type of uploads from the file
+  // extension. Since dotLottie is missing from their mappings, uploads
+  // have an empty content type and matching by name is the only option.
+  matchUpload: upload => /\.lottie$/i.test(upload.name)
+});
+const playbackModes = ['loop', 'playOnce', 'scroll'];
+const startAnimationTriggers = ['onActivate', 'onVisible'];
+const scrollRanges = ['cover', 'contain', 'inFocus', 'entry'];
+const pinnedPositions = ['sticky', 'standAlone'];
+const scrollRangeValuesKey = 'pageflow_scrolled.editor.content_elements.lottieAnimation.attributes.scrollRange.values';
+const pinnedScrollRangeKeys = ['cover', 'contain', 'inFocusWhenPinned', 'entry'].map(name => `${scrollRangeValuesKey}.${name}`);
+editor.contentElementTypes.register('lottieAnimation', {
   pictogram: img$h,
   category: 'media',
+  featureName: 'lottie_animation_content_element',
+  supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
+  supportedWidthRange: ['xxs', 'full'],
+  supportedCaptions: true,
+  supportedStyles: ['boxShadow', 'outline'],
+  defaultConfig: {
+    playbackMode: 'loop'
+  },
+  defaultsInputs() {
+    this.input('playbackMode', SelectInputView, {
+      values: playbackModes
+    });
+  },
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
+    this.tab('general', function () {
+      this.input('id', FileInputView, {
+        collection: 'lottie_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: imageModifiers => !!processImageModifiers(imageModifiers).aspectRatio,
+        positioningBinding: 'imageModifiers',
+        positioningOptions: () => {
+          const {
+            aspectRatio
+          } = processImageModifiers(this.model.get('imageModifiers'));
+          return {
+            preview: aspectRatio && 1 / entry.getAspectRatio(aspectRatio)
+          };
+        },
+        dropDownMenuItems: [InlineFileRightsMenuItem]
+      });
+      this.input('imageModifiers', ImageModifierListInputView, {
+        entry,
+        visibleBinding: 'id',
+        visible: () => this.model.getReference('id', 'lottie_files')
+      });
+      this.input('playbackMode', SelectInputView, {
+        values: playbackModes
+      });
+      this.input('startAnimationTrigger', PlaybackStartSelectInputView, {
+        values: startAnimationTriggers,
+        ...illustrationOptions(contentElement),
+        visibleBinding: 'playbackMode',
+        visible: playbackMode => playbackMode === 'playOnce'
+      });
+      // Elements that stay in place while scrolling name the inFocus
+      // range after that phase instead of after the center of the
+      // viewport. Since the texts of a select cannot depend on other
+      // attributes, there is one input per wording.
+      this.input('scrollRange', ScrollRangeSelectInputView, {
+        values: scrollRanges,
+        ...illustrationOptions(contentElement),
+        visibleBinding: ['playbackMode', 'position'],
+        visible: ([playbackMode]) => playbackMode === 'scroll' && !staysInPlace(contentElement)
+      });
+      this.input('scrollRange', ScrollRangeSelectInputView, {
+        values: scrollRanges,
+        translationKeys: pinnedScrollRangeKeys,
+        ...illustrationOptions(contentElement),
+        visibleBinding: ['playbackMode', 'position'],
+        visible: ([playbackMode]) => playbackMode === 'scroll' && staysInPlace(contentElement)
+      });
+      this.view(SeparatorView);
+      this.group('ContentElementPosition', {
+        entry
+      });
+      this.view(SeparatorView);
+      this.group('ContentElementCaption', {
+        entry
+      });
+      this.group('ContentElementInlineFileRightsSettings');
+    });
+  }
+});
+
+// Layouts that do not support sticky position render such elements
+// inline, which does not keep them in place while scrolling.
+function staysInPlace(contentElement) {
+  return pinnedPositions.includes(contentElement.getResolvedPosition());
+}
+
+// Illustrate options with the element as it looks in its section.
+function illustrationOptions(contentElement) {
+  return {
+    position: () => contentElement.getResolvedPosition(),
+    sectionLayout: () => contentElement.section.configuration.get('layout')
+  };
+}
+
+var img$i = "data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e %3cpath fill='white' d='m 63.5%2c52 c -35%2c0 -63%2c29 -63%2c64 v 280 c 0%2c35 28%2c64 63%2c64 H 447 c 35%2c0 65%2c-29 65%2c-64 V 116 C 512%2c81 483%2c52 447%2c52 Z m 78.5%2c80 c 51%2c0 93%2c42 93%2c93 0%2c51 -42%2c93 -93%2c93 -51.4%2c0 -93%2c-42 -93%2c-93 0%2c-51 41.6%2c-93 93%2c-93 z m 172%2c15 h 113 c 19%2c0 34%2c15 34%2c34 0%2c19 -15%2c34 -34%2c34 H 314 c -19%2c0 -34%2c-15 -34%2c-34 0%2c-19 15%2c-34 34%2c-34 z m -13%2c111 h 116 c 11%2c0 21%2c10 21%2c21 0%2c12 -10%2c22 -21%2c22 H 301 c -11%2c0 -21%2c-10 -21%2c-22 0%2c-11 10%2c-21 21%2c-21 z'/%3e%3c/svg%3e";
+
+function processBlueskyOembed(oembedResponse) {
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(oembedResponse.html, 'text/html');
+  var blockquote = doc.querySelector('blockquote.bluesky-embed');
+  if (blockquote) {
+    var dataUri = blockquote.getAttribute('data-bluesky-uri');
+    if (dataUri) {
+      return dataUri;
+    }
+  }
+
+  // Fallback to original URL if extraction fails
+  return oembedResponse.url;
+}
+
+editor.contentElementTypes.register('socialEmbed', {
+  pictogram: img$i,
+  category: 'media',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  featureName: 'social_embed_content_element',
+  defaultConfig: {
+    provider: 'bluesky'
+  },
+  configurationEditor({
+    entry
+  }) {
+    this.tab('general', function () {
+      this.input('provider', SelectInputView, {
+        values: ['bluesky', 'instagram', 'tiktok', 'x']
+      });
+      this.input('url', OembedUrlInputView, {
+        displayPropertyName: 'displayPostId',
+        providerNameProperty: 'provider',
+        providers: {
+          bluesky: {
+            supportedHosts: ['bsky.app', 'bsky.social'],
+            transform: processBlueskyOembed
+          },
+          instagram: {
+            supportedHosts: ['instagram.com', 'www.instagram.com'],
+            skipOembedValidation: true
+          },
+          x: {
+            supportedHosts: ['twitter.com', 'www.twitter.com', 'x.com', 'www.x.com'],
+            skipOembedValidation: true
+          },
+          tiktok: {
+            supportedHosts: ['https://www.tiktok.com'],
+            skipOembedValidation: true
+          }
+        }
+      });
+      this.group('ContentElementPosition', {
+        entry
+      });
+      this.input('hideConversation', CheckBoxInputView, {
+        visibleBinding: 'provider',
+        visibleBindingValue: 'x'
+      });
+      this.input('hideMedia', CheckBoxInputView, {
+        visibleBinding: 'provider',
+        visibleBindingValue: 'x'
+      });
+    });
+  }
+});
+
+var img$j = "data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e %3cpath fill='white' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3e%3c/svg%3e";
+
+editor.contentElementTypes.register('twitterEmbed', {
+  pictogram: img$j,
+  category: 'media',
+  featureName: 'legacy_social_embed_content_elements',
+  supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
       this.input('url', UrlInputView, {
         supportedHosts: ['http://twitter.com', 'https://twitter.com', 'http://x.com', 'https://x.com'],
@@ -2679,7 +3368,7 @@ editor.contentElementTypes.register('twitterEmbed', {
         permitHttps: true
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.input('hideConversation', CheckBoxInputView);
       this.input('hideMedia', CheckBoxInputView);
@@ -2690,15 +3379,17 @@ editor.contentElementTypes.register('twitterEmbed', {
   }
 });
 
-var img$i = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--!Font Awesome Free 6.5.2 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons%2c Inc.--%3e%3cpath fill='white' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3e%3c/svg%3e";
+var img$k = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--!Font Awesome Free 6.5.2 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons%2c Inc.--%3e%3cpath fill='white' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3e%3c/svg%3e";
 
 editor.contentElementTypes.register('tikTokEmbed', {
-  pictogram: img$i,
+  pictogram: img$k,
   category: 'media',
+  featureName: 'legacy_social_embed_content_elements',
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['md', 'full'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
       this.input('url', UrlInputView, {
         supportedHosts: ['https://www.tiktok.com'],
@@ -2707,54 +3398,53 @@ editor.contentElementTypes.register('tikTokEmbed', {
         permitHttps: true
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
     });
   },
   defaultConfig: {}
 });
 
-var img$j = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' version='1.1'%3e %3cpath style='fill:white%3bstroke-width:1.0715934' d='M 154.45629%2c72.962988 C 141.76916%2c73.980674 134.17753%2c85.77696 126.39089%2c94.31369 115.08265%2c105.89861 104.03984%2c117.73757 92.93941%2c129.52047 75.031239%2c111.21828 59.122369%2c90.77981 39.104383%2c74.658023 24.482281%2c67.834512 6.4140221%2c83.81238 10.775786%2c99.1746 c 2.708951%2c12.98866 15.286417%2c19.97415 22.964661%2c29.74046 17.657732%2c17.41285 32.403074%2c38.12856 52.621136%2c52.73529 10.829773%2c3.83939 22.062597%2c-3.51996 28.134937%2c-12.18527 19.44195%2c-22.50249 42.21653%2c-42.18327 59.90279%2c-66.14032 5.6424%2c-13.25737 -5.31055%2c-30.615753 -19.94302%2c-30.361772 z' /%3e %3cpath style='fill:white' d='M 256%2c428 H 31.999999 C 14.329999%2c428 -9.5000001e-7%2c442.33 -9.5000001e-7%2c460 -9.5000001e-7%2c477.67 14.329999%2c492 31.999999%2c492 H 256 c 17.7%2c0 32%2c-14.33 32%2c-32 0%2c-17.67 -14.3%2c-32 -32%2c-32 z M -9.5000001e-7%2c332 C -9.5000001e-7%2c349.7 14.329999%2c364 31.999999%2c364 H 416 c 17.7%2c0 32%2c-14.3 32%2c-32 0%2c-17.7 -14.3%2c-32 -32%2c-32 H 31.999999 C 14.329999%2c300 -9.5000001e-7%2c314.3 -9.5000001e-7%2c332 Z' /%3e %3cpath style='fill:white%3bstroke:white%3bstroke-width:0' d='m 356.05605%2c1.671899 c -22.75276%2c2.300391 -47.49513%2c-4.661754 -68.50543%2c6.450454 -16.00534%2c8.484395 -29.74636%2c27.036262 -24.98608%2c45.803882 5.50667%2c15.699356 29.05588%2c21.427535 39.82967%2c7.900392 4.46727%2c-4.523763 5.45002%2c-13.464333 13.29935%2c-12.285569 15.47565%2c-0.207336 30.89377%2c0.32159 46.37678%2c-0.223975 7.3323%2c-0.346315 15.23462%2c5.874856 12.62272%2c13.740223 -2.68086%2c9.147994 -13.45058%2c10.823444 -20.24491%2c15.836144 -11.40111%2c6.6584 -24.83231%2c11.40873 -32.94777%2c22.30075 -5.41404%2c11.18313 -4.76974%2c25.17905 -0.0141%2c36.40876 8.15241%2c13.79679 31.57231%2c15.50575 40.17388%2c0.85347 4.19853%2c-4.46787 1.87713%2c-12.57946 8.75385%2c-14.22118 18.79687%2c-10.20424 40.72904%2c-20.78924 48.43263%2c-42.36648 C 431.32621%2c52.120851 413.71956%2c13.332394 382.01823%2c4.732093 373.62266%2c2.216616 364.78493%2c1.519639 356.05609%2c1.671899 Z M 341.22896%2c172.48634 c -21.90876%2c-0.63629 -38.00737%2c26.58485 -26.67177%2c45.4856 9.43025%2c18.07827 37.60246%2c22.17393 50.69123%2c5.8469 12.093%2c-13.5735 9.43272%2c-37.5803 -6.86539%2c-46.64791 -5.10378%2c-3.1728 -11.1363%2c-4.88155 -17.15407%2c-4.68459 z' /%3e%3c/svg%3e";
+var img$l = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' version='1.1'%3e %3cpath style='fill:white%3bstroke-width:1.0715934' d='M 154.45629%2c72.962988 C 141.76916%2c73.980674 134.17753%2c85.77696 126.39089%2c94.31369 115.08265%2c105.89861 104.03984%2c117.73757 92.93941%2c129.52047 75.031239%2c111.21828 59.122369%2c90.77981 39.104383%2c74.658023 24.482281%2c67.834512 6.4140221%2c83.81238 10.775786%2c99.1746 c 2.708951%2c12.98866 15.286417%2c19.97415 22.964661%2c29.74046 17.657732%2c17.41285 32.403074%2c38.12856 52.621136%2c52.73529 10.829773%2c3.83939 22.062597%2c-3.51996 28.134937%2c-12.18527 19.44195%2c-22.50249 42.21653%2c-42.18327 59.90279%2c-66.14032 5.6424%2c-13.25737 -5.31055%2c-30.615753 -19.94302%2c-30.361772 z' /%3e %3cpath style='fill:white' d='M 256%2c428 H 31.999999 C 14.329999%2c428 -9.5000001e-7%2c442.33 -9.5000001e-7%2c460 -9.5000001e-7%2c477.67 14.329999%2c492 31.999999%2c492 H 256 c 17.7%2c0 32%2c-14.33 32%2c-32 0%2c-17.67 -14.3%2c-32 -32%2c-32 z M -9.5000001e-7%2c332 C -9.5000001e-7%2c349.7 14.329999%2c364 31.999999%2c364 H 416 c 17.7%2c0 32%2c-14.3 32%2c-32 0%2c-17.7 -14.3%2c-32 -32%2c-32 H 31.999999 C 14.329999%2c300 -9.5000001e-7%2c314.3 -9.5000001e-7%2c332 Z' /%3e %3cpath style='fill:white%3bstroke:white%3bstroke-width:0' d='m 356.05605%2c1.671899 c -22.75276%2c2.300391 -47.49513%2c-4.661754 -68.50543%2c6.450454 -16.00534%2c8.484395 -29.74636%2c27.036262 -24.98608%2c45.803882 5.50667%2c15.699356 29.05588%2c21.427535 39.82967%2c7.900392 4.46727%2c-4.523763 5.45002%2c-13.464333 13.29935%2c-12.285569 15.47565%2c-0.207336 30.89377%2c0.32159 46.37678%2c-0.223975 7.3323%2c-0.346315 15.23462%2c5.874856 12.62272%2c13.740223 -2.68086%2c9.147994 -13.45058%2c10.823444 -20.24491%2c15.836144 -11.40111%2c6.6584 -24.83231%2c11.40873 -32.94777%2c22.30075 -5.41404%2c11.18313 -4.76974%2c25.17905 -0.0141%2c36.40876 8.15241%2c13.79679 31.57231%2c15.50575 40.17388%2c0.85347 4.19853%2c-4.46787 1.87713%2c-12.57946 8.75385%2c-14.22118 18.79687%2c-10.20424 40.72904%2c-20.78924 48.43263%2c-42.36648 C 431.32621%2c52.120851 413.71956%2c13.332394 382.01823%2c4.732093 373.62266%2c2.216616 364.78493%2c1.519639 356.05609%2c1.671899 Z M 341.22896%2c172.48634 c -21.90876%2c-0.63629 -38.00737%2c26.58485 -26.67177%2c45.4856 9.43025%2c18.07827 37.60246%2c22.17393 50.69123%2c5.8469 12.093%2c-13.5735 9.43272%2c-37.5803 -6.86539%2c-46.64791 -5.10378%2c-3.1728 -11.1363%2c-4.88155 -17.15407%2c-4.68459 z' /%3e%3c/svg%3e";
 
 editor.contentElementTypes.register('question', {
-  pictogram: img$j,
+  pictogram: img$l,
   supportedPositions: ['inline'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry,
-      contentElement = _ref.contentElement;
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
     this.tab('general', function () {
-      var modelDelegator = entry.createLegacyTypographyVariantDelegator({
+      const modelDelegator = entry.createLegacyTypographyVariantDelegator({
         model: this.model,
         paletteColorPropertyName: 'color'
       });
       this.group('ContentElementTypographyVariant', {
-        entry: entry,
+        entry,
         model: modelDelegator,
-        getPreviewConfiguration: function getPreviewConfiguration(configuration, typographyVariant) {
-          return _objectSpread2(_objectSpread2({}, configuration), {}, {
-            expandByDefault: true,
-            typographyVariant: typographyVariant
-          });
-        }
+        getPreviewConfiguration: (configuration, typographyVariant) => ({
+          ...configuration,
+          expandByDefault: true,
+          typographyVariant
+        })
       });
       this.group('ContentElementTypographySize', {
-        entry: entry,
+        entry,
         model: modelDelegator,
-        getPreviewConfiguration: function getPreviewConfiguration(configuration, typographySize) {
-          return _objectSpread2(_objectSpread2({}, configuration), {}, {
-            expandByDefault: true,
-            // Ensure size in preview is not overridden by legacy variant
-            typographyVariant: modelDelegator.get('typographyVariant'),
-            typographySize: typographySize
-          });
-        }
+        getPreviewConfiguration: (configuration, typographySize) => ({
+          ...configuration,
+          expandByDefault: true,
+          // Ensure size in preview is not overridden by legacy variant
+          typographyVariant: modelDelegator.get('typographyVariant'),
+          typographySize
+        })
       });
       this.group('PaletteColor', {
-        entry: entry,
+        entry,
         propertyName: 'color'
       });
       this.group('PaletteColor', {
-        entry: entry,
+        entry,
         propertyName: 'answerColor'
       });
       this.input('expandByDefault', CheckBoxInputView);
@@ -2762,32 +3452,53 @@ editor.contentElementTypes.register('question', {
   }
 });
 
-var img$k = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath fill='white' d='M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320h95.1l21.3-128H187.1z'/%3e%3c/svg%3e";
+const legacyTextSizes = {
+  verySmall: 'xs',
+  small: 'md',
+  medium: 'xl',
+  large: 'xxxl'
+};
+function createLegacyConfigurationDelegator(model) {
+  const delegator = Object.create(model);
+  delegator.get = function (name) {
+    const result = model.get(name);
+    if (name === 'numberSize') {
+      return result || legacyTextSizes[model.get('textSize')];
+    }
+    if (name === 'countingAnimation') {
+      const countingSpeed = model.get('countingSpeed');
+      return result || (countingSpeed && countingSpeed !== 'none' ? 'plain' : undefined);
+    }
+    return result;
+  };
+  return delegator;
+}
+
+var img$m = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath fill='white' d='M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320h95.1l21.3-128H187.1z'/%3e%3c/svg%3e";
 
 editor.contentElementTypes.register('counter', {
   category: 'data',
-  pictogram: img$k,
+  pictogram: img$m,
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
   defaultConfig: {
     targetValue: 100,
-    countingSpeed: 'medium',
-    textSize: 'medium'
+    countingSpeed: 'medium'
   },
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
-    var locale = entry.metadata.get('locale');
+  configurationEditor({
+    entry
+  }) {
+    const locale = entry.metadata.get('locale');
     this.tab('general', function () {
+      const modelDelegator = createLegacyConfigurationDelegator(this.model);
       this.input('targetValue', NumberInputView, {
-        locale: locale
+        locale
       });
       this.input('decimalPlaces', SelectInputView, {
         values: [0, 1, 2, 3],
-        texts: [0, 1, 2, 3].map(function (i) {
-          return 0 .toLocaleString(locale, {
-            minimumFractionDigits: i
-          });
-        })
+        texts: [0, 1, 2, 3].map(i => 0 .toLocaleString(locale, {
+          minimumFractionDigits: i
+        }))
       });
       this.input('thousandsSeparators', CheckBoxInputView, {
         storeInverted: 'hideThousandsSeparators'
@@ -2797,70 +3508,131 @@ editor.contentElementTypes.register('counter', {
         values: ['trailing', 'leading']
       });
       this.view(SeparatorView);
+      const [numberSizes, numberTexts] = entry.getTypographySizes({
+        scaleCategory: 'counterNumber',
+        texts: 'short',
+        order: 'asc'
+      });
+      this.input('numberSize', SliderInputView, {
+        model: modelDelegator,
+        values: numberSizes,
+        texts: numberTexts,
+        defaultValue: 'xl',
+        saveOnSlide: true
+      });
+      const [unitSizes, unitTexts] = entry.getTypographySizes({
+        scaleCategory: 'counterUnit',
+        texts: 'short',
+        order: 'asc'
+      });
+      this.input('unitSize', SliderInputView, {
+        values: unitSizes,
+        texts: unitTexts,
+        defaultValue: 'md',
+        saveOnSlide: true,
+        visibleBinding: 'unit',
+        visible: unit => !!unit
+      });
+      const [descriptionSizes, descriptionTexts] = entry.getTypographySizes({
+        scaleCategory: 'counterDescription',
+        texts: 'short',
+        order: 'asc'
+      });
+      this.input('descriptionSize', SliderInputView, {
+        values: descriptionSizes,
+        texts: descriptionTexts,
+        defaultValue: 'md',
+        saveOnSlide: true
+      });
+      this.view(SeparatorView);
+      this.group('PaletteColor', {
+        propertyName: 'numberColor',
+        entry
+      });
+      this.group('PaletteColor', {
+        propertyName: 'unitColor',
+        entry,
+        visibleBinding: 'unit',
+        visible: unit => !!unit
+      });
+      this.group('PaletteColor', {
+        propertyName: 'descriptionColor',
+        entry
+      });
+      this.view(SeparatorView);
       this.input('entranceAnimation', SelectInputView, {
         values: ['none', 'fadeIn', 'fadeInFromBelow', 'fadeInFromAbove', 'fadeInScaleUp', 'fadeInScaleDown']
       });
+      this.input('countingAnimation', SelectInputView, {
+        model: modelDelegator,
+        values: ['none', 'plain', 'wheel']
+      });
       this.input('countingSpeed', SelectInputView, {
-        values: ['none', 'slow', 'medium', 'fast']
+        model: modelDelegator,
+        values: ['slow', 'medium', 'fast'],
+        visibleBinding: 'countingAnimation',
+        visible: countingAnimation => countingAnimation && countingAnimation !== 'none'
       });
       this.input('startValue', NumberInputView, {
-        locale: locale,
-        visibleBinding: 'countingSpeed',
-        visible: function visible(countingSpeed) {
-          return countingSpeed !== 'none';
-        }
+        model: modelDelegator,
+        locale,
+        visibleBinding: 'countingAnimation',
+        visible: countingAnimation => countingAnimation && countingAnimation !== 'none'
       });
-      this.view(SeparatorView);
-      this.input('textSize', SelectInputView, {
-        values: ['large', 'medium', 'small', 'verySmall']
+      this.input('startAnimationTrigger', SelectInputView, {
+        model: modelDelegator,
+        values: ['onActivate', 'onVisible'],
+        visibleBinding: ['entranceAnimation', 'countingAnimation'],
+        visible: ([entranceAnimation, countingAnimation]) => (entranceAnimation || 'none') !== 'none' || countingAnimation && countingAnimation !== 'none'
       });
+      this.view(SeparatorView);
       this.group('ContentElementTypographyVariant', {
-        entry: entry,
-        getPreviewConfiguration: function getPreviewConfiguration(configuration, typographyVariant) {
-          return _objectSpread2(_objectSpread2({}, configuration), {}, {
-            typographyVariant: typographyVariant,
-            entranceAnimation: 'none',
-            countingSpeed: 'none',
-            textSize: 'small',
-            position: 'inline'
-          });
-        }
+        entry,
+        getPreviewConfiguration: (configuration, typographyVariant) => ({
+          ...configuration,
+          typographyVariant,
+          entranceAnimation: 'none',
+          countingSpeed: 'none',
+          numberSize: 'sm',
+          position: 'inline'
+        })
       });
-      this.group('PaletteColor', {
-        propertyName: 'numberColor',
-        entry: entry
+      this.input('textAlign', SelectInputView, {
+        values: ['left', 'right', 'center', 'centerRagged'],
+        includeBlank: true
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
     });
   }
 });
 
-var img$l = "data:image/svg+xml,%3csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='quote-right' class='svg-inline--fa fa-quote-right fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 612 612'%3e%3cpath fill='white' 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'%3e%3c/path%3e%3c/svg%3e";
+var img$n = "data:image/svg+xml,%3csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='quote-right' class='svg-inline--fa fa-quote-right fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 612 612'%3e%3cpath fill='white' 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'%3e%3c/path%3e%3c/svg%3e";
 
 editor.contentElementTypes.register('quote', {
-  pictogram: img$l,
+  pictogram: img$n,
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xs', 'xl'],
   defaultConfig: {
     textSize: 'medium'
   },
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry;
+  configurationEditor({
+    entry
+  }) {
     this.tab('general', function () {
       this.group('ContentElementVariant', {
-        entry: entry
+        entry
       });
       this.input('textSize', SelectInputView, {
         values: ['large', 'medium', 'small', 'verySmall']
       });
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.group('PaletteColor', {
         propertyName: 'color',
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.view(InfoBoxView, {
@@ -2870,15 +3642,16 @@ editor.contentElementTypes.register('quote', {
   }
 });
 
-var img$m = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--!Font Awesome Free 6.7.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons%2c Inc.--%3e%3cpath fill='white' d='M 446%2c37.9 C 341%2c38.2 236%2c37.8 132%2c38 106%2c38.4 80.7%2c37.3 55.3%2c38.5 26.6%2c42.6 3.13%2c70.8 6.21%2c100 5.84%2c203 5.94%2c305 6.15%2c408 c -0.18%2c12 0.3%2c26 7.25%2c36 11.2%2c20 34.2%2c33 57%2c30 128.6%2c0 256.6%2c0 384.6%2c0 30%2c-4 55%2c-34 51%2c-64 0%2c-107 0%2c-215 0%2c-322.2 C 501%2c59.7 475%2c36.7 446%2c37.9 Z M 60%2c90 c 24.7%2c0 49%2c0 74%2c0 0%2c25 0%2c51 0%2c76 -25%2c0 -50.7%2c0 -76%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z m 128%2c0 c 89%2c0 177%2c0 266%2c0 0%2c25 0%2c51 0%2c76 -89%2c0 -179%2c0 -268%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z M 60%2c218 c 24.7%2c0 49%2c0 74%2c0 0%2c25 0%2c51 0%2c76 -25%2c0 -50.7%2c0 -76%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z m 128%2c0 c 89%2c0 177%2c0 266%2c0 0%2c25 0%2c51 0%2c76 -89%2c0 -179%2c0 -268%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z M 60%2c346 c 24.7%2c0 49%2c0 74%2c0 0%2c25 0%2c51 0%2c76 -25%2c0 -50.7%2c0 -76%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z m 128%2c0 c 89%2c0 177%2c0 266%2c0 0%2c25 0%2c51 0%2c76 -89%2c0 -179%2c0 -268%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z' /%3e%3c/svg%3e";
+var img$o = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--!Font Awesome Free 6.7.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons%2c Inc.--%3e%3cpath fill='white' d='M 446%2c37.9 C 341%2c38.2 236%2c37.8 132%2c38 106%2c38.4 80.7%2c37.3 55.3%2c38.5 26.6%2c42.6 3.13%2c70.8 6.21%2c100 5.84%2c203 5.94%2c305 6.15%2c408 c -0.18%2c12 0.3%2c26 7.25%2c36 11.2%2c20 34.2%2c33 57%2c30 128.6%2c0 256.6%2c0 384.6%2c0 30%2c-4 55%2c-34 51%2c-64 0%2c-107 0%2c-215 0%2c-322.2 C 501%2c59.7 475%2c36.7 446%2c37.9 Z M 60%2c90 c 24.7%2c0 49%2c0 74%2c0 0%2c25 0%2c51 0%2c76 -25%2c0 -50.7%2c0 -76%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z m 128%2c0 c 89%2c0 177%2c0 266%2c0 0%2c25 0%2c51 0%2c76 -89%2c0 -179%2c0 -268%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z M 60%2c218 c 24.7%2c0 49%2c0 74%2c0 0%2c25 0%2c51 0%2c76 -25%2c0 -50.7%2c0 -76%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z m 128%2c0 c 89%2c0 177%2c0 266%2c0 0%2c25 0%2c51 0%2c76 -89%2c0 -179%2c0 -268%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z M 60%2c346 c 24.7%2c0 49%2c0 74%2c0 0%2c25 0%2c51 0%2c76 -25%2c0 -50.7%2c0 -76%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z m 128%2c0 c 89%2c0 177%2c0 266%2c0 0%2c25 0%2c51 0%2c76 -89%2c0 -179%2c0 -268%2c0 0%2c-25 0%2c-51 0%2c-76 h 1 z' /%3e%3c/svg%3e";
 
 editor.contentElementTypes.register('infoTable', {
-  pictogram: img$m,
+  pictogram: img$o,
   supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['s', 'xl'],
-  configurationEditor: function configurationEditor(_ref) {
-    var entry = _ref.entry,
-      contentElement = _ref.contentElement;
+  configurationEditor({
+    entry,
+    contentElement
+  }) {
     this.tab('general', function () {
       this.input('labelColumnAlign', SelectInputView, {
         values: ['auto', 'left', 'center', 'right']
@@ -2894,15 +3667,15 @@ editor.contentElementTypes.register('infoTable', {
       this.view(SeparatorView);
       this.group('PaletteColor', {
         propertyName: 'labelColor',
-        entry: entry
+        entry
       });
       this.group('PaletteColor', {
         propertyName: 'valueColor',
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.group('ContentElementPosition', {
-        entry: entry
+        entry
       });
       this.view(SeparatorView);
       this.view(InfoBoxView, {
@@ -2911,3 +3684,48 @@ editor.contentElementTypes.register('infoTable', {
     });
   }
 });
+
+// Headings carry no ranged comments since EditableInlineText has no
+// commenting alternative, so every comment refers to the header as a whole
+// and the quote covers all three of its texts.
+review.contentElementTypes.register('heading', {
+  extractQuote(configuration) {
+    const parts = [inlineText(configuration.tagline), mainText(configuration), inlineText(configuration.subtitle)];
+    return parts.map(part => part.trim()).filter(Boolean).join('\n') || null;
+  }
+});
+
+// Mirrors how EditableInlineText picks the legacy string value, so the quote
+// never contains text the heading does not display.
+function mainText(configuration) {
+  return configuration.value ? inlineText(configuration.value) : configuration.children || '';
+}
+function inlineText(value) {
+  return value ? value.map(node => Node.string(node)).join(' ') : '';
+}
+
+review.contentElementTypes.register('textBlock', {
+  compareRanges(a, b) {
+    if (!a && !b) return 0;
+    if (!a) return 1;
+    if (!b) return -1;
+    return Point.compare(rangeStart(a), rangeStart(b));
+  },
+  // Element wide comments stay unquoted: the whole text is too long to serve
+  // as a point of reference, and any edit anywhere in it would mark the quote
+  // outdated.
+  extractQuote(configuration, range) {
+    if (!range) return null;
+    const root = {
+      children: configuration.value || []
+    };
+    if (!Node.has(root, range.anchor.path) || !Node.has(root, range.focus.path)) {
+      return null;
+    }
+    const text = Node.fragment(root, range).map(node => Node.string(node)).join('\n').trim();
+    return text || null;
+  }
+});
+function rangeStart(range) {
+  return Point.isBefore(range.anchor, range.focus) ? range.anchor : range.focus;
+}