pageflow 16.1.0 → 16.2.0

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

@@ -1,5 +1,5 @@
-import { useContentElementConfigurationUpdate, useI18n, useDarkBackground, contentElementWidths, withShadowClassName, paletteColor, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, FitViewport, ContentElementBox, ContentElementFigure, useContentElementLifecycle, usePortraitOrientation, ExpandableImage, Image, usePlayerState, MediaInteractionTracking, useAudioFocus, VideoPlayerControls, PlayerEventContextDataProvider, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, useTheme, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useAtmo, textColorForBackgroundColor, Panorama, utils, ThemeIcon, useLocale, Figure, usePhonePlatform, FullscreenViewer, ToggleFullscreenCornerButton } from 'pageflow-scrolled/frontend';
-import React, { useState, useEffect, useMemo, useRef, useCallback, forwardRef } from 'react';
+import { useContentElementConfigurationUpdate, useI18n, useDarkBackground, useContentElementEditorState, useIsStaticPreview, useContentElementLifecycle, utils, contentElementWidths, withShadowClassName, paletteColor, Text, EditableInlineText, frontend, useFileWithInlineRights, FitViewport, ContentElementBox, ContentElementFigure, InlineFileRights, usePortraitOrientation, ExpandableImage, Image, usePlayerState, MediaInteractionTracking, useAudioFocus, VideoPlayerControls, PlayerEventContextDataProvider, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, useTheme, EditableText, ThirdPartyOptOutInfo, useFile, ThirdPartyOptIn, useAtmo, textColorForBackgroundColor, Panorama, ThemeIcon, useLocale, Figure, usePhonePlatform, FullscreenViewer, ToggleFullscreenCornerButton } from 'pageflow-scrolled/frontend';
+import React, { useState, useRef, useEffect, useMemo, useCallback, forwardRef } from 'react';
 import classNames from 'classnames';
 import ReactCompareImage from 'react-compare-image';
 import Measure from 'react-measure';
@@ -21,66 +21,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var styles = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","light":"Heading-module_light__1TQE8","dark":"Heading-module_dark__18iWa","centerRagged":"Heading-module_centerRagged__388sq","center":"Heading-module_center__38lDY","forcePaddingTop":"Heading-module_forcePaddingTop__30Juh"};
-
-function Heading(_ref) {
-  var configuration = _ref.configuration,
-      sectionProps = _ref.sectionProps,
-      contentElementWidth = _ref.contentElementWidth;
-  var level = configuration.level || sectionProps.sectionIndex;
-  var firstSectionInEntry = level === 0;
-  var updateConfiguration = useContentElementConfigurationUpdate();
-
-  var _useI18n = useI18n({
-    locale: 'ui'
-  }),
-      t = _useI18n.t;
-
-  var darkBackground = useDarkBackground();
-  var legacyValue = configuration.children;
-  var Tag = firstSectionInEntry ? 'h1' : 'h2';
-  var forcePaddingTop = firstSectionInEntry && !('marginTop' in configuration);
-  return /*#__PURE__*/React.createElement(Tag, {
-    className: classNames(styles.root, 'scope-headings', configuration.typographyVariant && "typography-heading-".concat(configuration.typographyVariant), darkBackground ? styles.light : styles.dark, _defineProperty({}, styles.forcePaddingTop, forcePaddingTop), _defineProperty({}, styles[sectionProps.layout], contentElementWidth > contentElementWidths.md || sectionProps.layout === 'centerRagged'), _defineProperty({}, withShadowClassName, !sectionProps.invert)),
-    style: {
-      color: paletteColor(configuration.color)
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    scaleCategory: getScaleCategory(configuration, firstSectionInEntry),
-    inline: true
-  }, /*#__PURE__*/React.createElement(EditableInlineText, {
-    value: configuration.value,
-    defaultValue: legacyValue,
-    hyphens: configuration.hyphens,
-    placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
-    onChange: function onChange(value) {
-      return updateConfiguration({
-        value: value
-      });
-    }
-  })));
-}
-
-function getScaleCategory(configuration, firstSectionInEntry) {
-  switch (configuration.textSize) {
-    case 'large':
-      return 'heading-lg';
-
-    case 'medium':
-      return 'heading-md';
-
-    case 'small':
-      return 'heading-sm';
-
-    default:
-      return firstSectionInEntry ? 'heading-lg' : 'heading-sm';
-  }
-}
-
-frontend.contentElementTypes.register('heading', {
-  component: Heading
-});
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -139,6 +79,139 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+var styles = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"Heading-module_root__33TFw","animation-fadeIn":"Heading-module_animation-fadeIn__3jlOG","animation-fadeInFast":"Heading-module_animation-fadeInFast__b41KH Heading-module_animation-fadeIn__3jlOG","animation-fadeInSlow":"Heading-module_animation-fadeInSlow__1G1o5 Heading-module_animation-fadeIn__3jlOG","main":"Heading-module_main__35wWK","tagline":"Heading-module_tagline__pvHO5","subtitle":"Heading-module_subtitle__19eD8","animating":"Heading-module_animating__1ziJR","hasTagline":"Heading-module_hasTagline__Pgn8c","right":"Heading-module_right__1TJKF","light":"Heading-module_light__1TQE8","dark":"Heading-module_dark__18iWa","centerRagged":"Heading-module_centerRagged__388sq","center":"Heading-module_center__38lDY","forcePaddingTop":"Heading-module_forcePaddingTop__30Juh"};
+
+function Heading(_ref) {
+  var configuration = _ref.configuration,
+      sectionProps = _ref.sectionProps,
+      contentElementWidth = _ref.contentElementWidth;
+  var level = configuration.level || sectionProps.sectionIndex;
+  var firstSectionInEntry = level === 0;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  var darkBackground = useDarkBackground();
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected,
+      isEditable = _useContentElementEdi.isEditable;
+
+  var legacyValue = configuration.children;
+  var Tag = firstSectionInEntry ? 'h1' : 'h2';
+  var forcePaddingTop = firstSectionInEntry && !('marginTop' in configuration);
+  var entranceAnimation = !useIsStaticPreview() && configuration.entranceAnimation || 'none';
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      animating = _useState2[0],
+      setAnimating = _useState2[1];
+
+  useContentElementLifecycle({
+    onActivate: function onActivate() {
+      setAnimating(entranceAnimation !== 'none');
+    },
+    onInvisible: function onInvisible() {
+      if (isEditable) {
+        setAnimating(false);
+      }
+    }
+  });
+  var previousAnimation = useRef(entranceAnimation);
+  var previouslySelected = useRef(isSelected);
+  useEffect(function () {
+    if (isEditable && previousAnimation.current !== entranceAnimation) {
+      previousAnimation.current = entranceAnimation;
+      setAnimating(false);
+      setTimeout(function () {
+        return setAnimating(true);
+      }, 100);
+    }
+  }, [entranceAnimation, isEditable]);
+  useEffect(function () {
+    if (!previouslySelected.current && isSelected) {
+      setAnimating(true);
+    }
+
+    previouslySelected.current = isSelected;
+  }, [isSelected]);
+
+  function renderSubtitle(name) {
+    var value = configuration[name];
+
+    if (!isSelected && utils.isBlankEditableTextValue(value)) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(Text, {
+      scaleCategory: getScaleCategory(configuration, firstSectionInEntry, name)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles[name],
+      role: "doc-subtitle"
+    }, /*#__PURE__*/React.createElement(EditableInlineText, {
+      value: value,
+      hyphens: configuration.hyphens,
+      placeholder: t("pageflow_scrolled.inline_editing.type_".concat(name)),
+      onChange: function onChange(value) {
+        return updateConfiguration(_defineProperty({}, name, value));
+      }
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement("header", {
+    className: classNames(styles.root, styles["animation-".concat(entranceAnimation)], _defineProperty({}, styles.animating, animating), _defineProperty({}, styles.hasTagline, !utils.isBlankEditableTextValue(configuration.tagline) || isSelected), _defineProperty({}, styles.forcePaddingTop, forcePaddingTop), _defineProperty({}, styles[sectionProps.layout], contentElementWidth > contentElementWidths.md || sectionProps.layout === 'centerRagged'), _defineProperty({}, withShadowClassName, !sectionProps.invert))
+  }, renderSubtitle('tagline'), /*#__PURE__*/React.createElement(Tag, {
+    className: classNames(styles.main, 'scope-headings', configuration.typographyVariant && "typography-heading-".concat(configuration.typographyVariant), darkBackground ? styles.light : styles.dark),
+    style: {
+      color: paletteColor(configuration.color)
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    scaleCategory: getScaleCategory(configuration, firstSectionInEntry),
+    inline: true
+  }, /*#__PURE__*/React.createElement(EditableInlineText, {
+    value: configuration.value,
+    defaultValue: legacyValue,
+    hyphens: configuration.hyphens,
+    placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
+    onChange: function onChange(value) {
+      return updateConfiguration({
+        value: value
+      });
+    }
+  }))), renderSubtitle('subtitle'));
+}
+
+function getScaleCategory(configuration, firstSectionInEntry) {
+  var suffix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var base = "heading".concat(capitalize(suffix));
+
+  switch (configuration.textSize) {
+    case 'large':
+      return "".concat(base, "-lg");
+
+    case 'medium':
+      return "".concat(base, "-md");
+
+    case 'small':
+      return "".concat(base, "-sm");
+
+    default:
+      return firstSectionInEntry ? "".concat(base, "-lg") : "".concat(base, "-sm");
+  }
+}
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+frontend.contentElementTypes.register('heading', {
+  component: Heading,
+  lifecycle: true
+});
+
 var styles$1 = {"sliderStart":"BeforeAfter-module_sliderStart__2C5cN","container":"BeforeAfter-module_container__2Lm06","wiggle":"BeforeAfter-module_wiggle__3nVSe","SliderLeftRightShake":"BeforeAfter-module_SliderLeftRightShake__2mcn5","BeforeImageLeftRightShake":"BeforeAfter-module_BeforeImageLeftRightShake__38m9V","AfterImageLeftRightShake":"BeforeAfter-module_AfterImageLeftRightShake__3WMf1"};
 
 var placeholderForBeforeImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiMzZDVhODAiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
@@ -150,9 +223,7 @@ var placeholderFile = {
 function BeforeAfter(configuration) {
   var isActive = configuration.isActive,
       load = configuration.load,
-      before_id = configuration.before_id,
       before_label = configuration.before_label,
-      after_id = configuration.after_id,
       after_label = configuration.after_label,
       initial_slider_position = configuration.initial_slider_position,
       slider_color = configuration.slider_color;
@@ -174,13 +245,15 @@ function BeforeAfter(configuration) {
       return wiggle || isActive;
     });
   }, [isActive]);
-  var beforeImage = useFile({
+  var beforeImage = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: before_id
+    propertyName: 'before_id'
   });
-  var afterImage = useFile({
+  var afterImage = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: after_id
+    propertyName: 'after_id'
   });
 
   var _useContentElementEdi = useContentElementEditorState(),
@@ -191,6 +264,13 @@ function BeforeAfter(configuration) {
   var afterImageUrl = afterImage && afterImage.urls.large;
   var afterImageAlt = afterImage && afterImage.configuration.alt;
   var initialSliderPos = initial_slider_position / 100;
+  var inlineFileRightsItems = [{
+    file: beforeImage,
+    label: 'before'
+  }, {
+    file: afterImage,
+    label: 'after'
+  }];
   return /*#__PURE__*/React.createElement(FitViewport, {
     file: beforeImage || afterImage || placeholderFile
   }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
@@ -213,7 +293,13 @@ function BeforeAfter(configuration) {
       parentSelected: isSelected,
       position: initial_slider_position
     }), renderCompareImage());
-  })))));
+  }), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "insideElement",
+    items: inlineFileRightsItems
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: inlineFileRightsItems
+  }));
 
   function renderCompareImage() {
     if (!load) {
@@ -275,13 +361,15 @@ function InlineImage(_ref) {
   var contentElementId = _ref.contentElementId,
       contentElementWidth = _ref.contentElementWidth,
       configuration = _ref.configuration;
-  var imageFile = useFile({
+  var imageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.id
+    propertyName: 'id'
   });
-  var portraitImageFile = useFile({
+  var portraitImageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.portraitId
+    propertyName: 'portraitId'
   }); // Only render OrientationAwareInlineImage if a portrait image has
   // been selected. This prevents having the component rerender on
   // orientation changes even if it does not depend on orientation at
@@ -348,7 +436,19 @@ function ImageWithCaption(_ref3) {
     structuredData: true,
     variant: contentElementWidth === contentElementWidths.full ? 'large' : 'medium',
     preferSvg: true
-  }))))));
+  })), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "insideElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  }));
 }
 
 frontend.contentElementTypes.register('inlineImage', {
@@ -461,21 +561,25 @@ function getPlayerClickHandler(_ref) {
 function InlineVideo(_ref) {
   var contentElementId = _ref.contentElementId,
       configuration = _ref.configuration;
-  var videoFile = useFile({
+  var videoFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'videoFiles',
-    permaId: configuration.id
+    propertyName: 'id'
   });
-  var posterImageFile = useFile({
+  var posterImageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.posterId
+    propertyName: 'posterId'
   });
-  var portraitVideoFile = useFile({
+  var portraitVideoFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'videoFiles',
-    permaId: configuration.portraitId
+    propertyName: 'portraitId'
   });
-  var portraitPosterImageFile = useFile({
+  var portraitPosterImageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.portraitPosterId
+    propertyName: 'portraitPosterId'
   }); // Only render OrientationAwareInlineImage if a portrait image has
   // been selected. This prevents having the component rerender on
   // orientation changes even if it does not depend on orientation at
@@ -530,6 +634,13 @@ function OrientationUnawareInlineVideo(_ref3) {
       playerState = _usePlayerState2[0],
       playerActions = _usePlayerState2[1];
 
+  var inlineFileRightsItems = [{
+    label: 'video',
+    file: videoFile
+  }, {
+    label: 'poster',
+    file: posterImageFile
+  }];
   return /*#__PURE__*/React.createElement(MediaInteractionTracking, {
     playerState: playerState,
     playerActions: playerActions
@@ -545,16 +656,21 @@ function OrientationUnawareInlineVideo(_ref3) {
     key: configuration.playbackMode === 'loop',
     videoFile: videoFile,
     posterImageFile: posterImageFile,
+    inlineFileRightsItems: inlineFileRightsItems,
     playerState: playerState,
     playerActions: playerActions,
     contentElementId: contentElementId,
     configuration: configuration
-  }))))));
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: inlineFileRightsItems
+  })));
 }
 
 function Player(_ref4) {
   var videoFile = _ref4.videoFile,
       posterImageFile = _ref4.posterImageFile,
+      inlineFileRightsItems = _ref4.inlineFileRightsItems,
       playerState = _ref4.playerState,
       playerActions = _ref4.playerActions,
       contentElementId = _ref4.contentElementId,
@@ -609,6 +725,7 @@ function Player(_ref4) {
     playerActions: playerActions,
     hideControlBar: configuration.hideControlBar || configuration.playbackMode === 'loop',
     hideBigPlayButton: configuration.playbackMode === 'loop',
+    inlineFileRightsItems: inlineFileRightsItems,
     configuration: configuration,
     onPlayerClick: onPlayerClick
   }, /*#__PURE__*/React.createElement(PlayerEventContextDataProvider, {
@@ -638,13 +755,15 @@ frontend.contentElementTypes.register('inlineVideo', {
 function InlineAudio(_ref) {
   var contentElementId = _ref.contentElementId,
       configuration = _ref.configuration;
-  var audioFile = useFile({
+  var audioFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'audioFiles',
-    permaId: configuration.id
+    propertyName: 'id'
   });
-  var posterImageFile = useFile({
+  var posterImageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.posterId
+    propertyName: 'posterId'
   });
 
   var _usePlayerState = usePlayerState(),
@@ -689,6 +808,13 @@ function InlineAudio(_ref) {
     }
   };
 
+  var inlineFileRightsItems = [{
+    label: 'audio',
+    file: audioFile
+  }, {
+    label: 'image',
+    file: posterImageFile
+  }];
   return /*#__PURE__*/React.createElement(FitViewport, {
     file: posterImageFile
   }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
@@ -699,6 +825,7 @@ function InlineAudio(_ref) {
     playerState: playerState,
     playerActions: playerActions,
     standAlone: !posterImageFile,
+    inlineFileRightsItems: inlineFileRightsItems,
     configuration: configuration,
     onPlayerClick: onPlayerClick
   }, /*#__PURE__*/React.createElement(PlayerEventContextDataProvider, {
@@ -715,7 +842,10 @@ function InlineAudio(_ref) {
     quality: 'high',
     playsInline: true,
     atmoDuringPlayback: configuration.atmoDuringPlayback
-  })))))));
+  })))))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: inlineFileRightsItems
+  }));
 }
 
 frontend.contentElementTypes.register('inlineAudio', {
@@ -1373,9 +1503,10 @@ function VrImage(_ref) {
       isEditable = _useContentElementEdi.isEditable,
       isSelected = _useContentElementEdi.isSelected;
 
-  var imageFile = useFile({
+  var imageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.image
+    propertyName: 'image'
   });
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -1385,7 +1516,19 @@ function VrImage(_ref) {
     aspectRatio: contentElementWidth === contentElementWidths.full ? 0.5 : 0.75
   }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
     configuration: configuration
-  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, renderLazyPanorama(configuration, imageFile, shouldLoad))))));
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, renderLazyPanorama(configuration, imageFile, shouldLoad), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "insideElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  })));
 }
 
 function renderLazyPanorama(configuration, imageFile, shouldLoad) {
@@ -2231,9 +2374,10 @@ var Item = forwardRef(function (_ref5, ref) {
       shouldLoad = _useContentElementLif.shouldLoad;
 
   var caption = captions[item.id];
-  var imageFile = useFile({
+  var imageFile = useFileWithInlineRights({
+    configuration: item,
     collectionName: 'imageFiles',
-    permaId: item.image
+    propertyName: 'image'
   });
 
   var handleCaptionChange = function handleCaptionChange(caption) {
@@ -2262,7 +2406,19 @@ var Item = forwardRef(function (_ref5, ref) {
   }, /*#__PURE__*/React.createElement(Image, {
     imageFile: imageFile,
     load: shouldLoad
-  })), children))))));
+  })), children, /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "insideElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  }))));
 });
 
 frontend.contentElementTypes.register('imageGallery', {