@wordpress/block-library 9.32.0 → 9.33.0

package/build/image/edit.native.js

@@ -1,819 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ImageEdit = void 0;
-var _reactNative = require("react-native");
-var _native = require("@react-navigation/native");
-var _element = require("@wordpress/element");
-var _reactNativeBridge = require("@wordpress/react-native-bridge");
-var _components = require("@wordpress/components");
-var _blockEditor = require("@wordpress/block-editor");
-var _i18n = require("@wordpress/i18n");
-var _url = require("@wordpress/url");
-var _hooks = require("@wordpress/hooks");
-var _compose = require("@wordpress/compose");
-var _data = require("@wordpress/data");
-var _icons = require("@wordpress/icons");
-var _coreData = require("@wordpress/core-data");
-var _notices = require("@wordpress/notices");
-var _editPost = require("@wordpress/edit-post");
-var _styles = _interopRequireDefault(require("./styles.scss"));
-var _utils = require("./utils");
-var _constants = require("./constants");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-// eslint-disable-next-line no-restricted-imports
-
-/**
- * Internal dependencies
- */
-
-const getUrlForSlug = (image, sizeSlug) => {
-  if (!sizeSlug) {
-    return undefined;
-  }
-  return image?.media_details?.sizes?.[sizeSlug]?.source_url;
-};
-function LinkSettings({
-  attributes,
-  image,
-  isLinkSheetVisible,
-  setMappedAttributes
-}) {
-  const route = (0, _native.useRoute)();
-  const {
-    href: url,
-    label,
-    linkDestination,
-    linkTarget,
-    rel
-  } = attributes;
-
-  // Persist attributes passed from child screen.
-  (0, _element.useEffect)(() => {
-    const {
-      inputValue: newUrl
-    } = route.params || {};
-    let newLinkDestination;
-    switch (newUrl) {
-      case attributes.url:
-        newLinkDestination = _constants.LINK_DESTINATION_MEDIA;
-        break;
-      case image?.link:
-        newLinkDestination = _constants.LINK_DESTINATION_ATTACHMENT;
-        break;
-      case '':
-        newLinkDestination = _constants.LINK_DESTINATION_NONE;
-        break;
-      default:
-        newLinkDestination = _constants.LINK_DESTINATION_CUSTOM;
-        break;
-    }
-    setMappedAttributes({
-      url: newUrl,
-      linkDestination: newLinkDestination
-    });
-  }, [route.params?.inputValue]);
-  let valueMask;
-  switch (linkDestination) {
-    case _constants.LINK_DESTINATION_MEDIA:
-      valueMask = (0, _i18n.__)('Media File');
-      break;
-    case _constants.LINK_DESTINATION_ATTACHMENT:
-      valueMask = (0, _i18n.__)('Attachment Page');
-      break;
-    case _constants.LINK_DESTINATION_CUSTOM:
-      valueMask = (0, _i18n.__)('Custom URL');
-      break;
-    default:
-      valueMask = (0, _i18n.__)('None');
-      break;
-  }
-  const linkSettingsOptions = {
-    url: {
-      valueMask,
-      autoFocus: false,
-      autoFill: false
-    },
-    openInNewTab: {
-      label: (0, _i18n.__)('Open in new tab')
-    },
-    linkRel: {
-      label: (0, _i18n.__)('Link relation'),
-      placeholder: (0, _i18n._x)('None', 'Link rel attribute value placeholder')
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
-    title: (0, _i18n.__)('Link Settings'),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.LinkSettingsNavigation, {
-      isVisible: isLinkSheetVisible,
-      url: url,
-      rel: rel,
-      label: label,
-      linkTarget: linkTarget,
-      setAttributes: setMappedAttributes,
-      withBottomSheet: false,
-      hasPicker: true,
-      options: linkSettingsOptions,
-      showIcon: false,
-      onLinkCellPressed: ({
-        navigation
-      }) => {
-        navigation.navigate(_blockEditor.blockSettingsScreens.imageLinkDestinations, {
-          inputValue: attributes.href,
-          linkDestination: attributes.linkDestination,
-          imageUrl: attributes.url,
-          attachmentPageUrl: image?.link
-        });
-      }
-    })
-  });
-}
-const UPLOAD_STATE_IDLE = 0;
-const UPLOAD_STATE_UPLOADING = 1;
-const UPLOAD_STATE_SUCCEEDED = 2;
-const UPLOAD_STATE_FAILED = 3;
-class ImageEdit extends _element.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isCaptionSelected: false,
-      uploadStatus: UPLOAD_STATE_IDLE
-    };
-    this.replacedFeaturedImage = false;
-    this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(this);
-    this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(this);
-    this.mediaUploadStateReset = this.mediaUploadStateReset.bind(this);
-    this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(this);
-    this.updateMediaProgress = this.updateMediaProgress.bind(this);
-    this.updateImageURL = this.updateImageURL.bind(this);
-    this.onSetNewTab = this.onSetNewTab.bind(this);
-    this.onSetSizeSlug = this.onSetSizeSlug.bind(this);
-    this.onImagePressed = this.onImagePressed.bind(this);
-    this.onSetFeatured = this.onSetFeatured.bind(this);
-    this.onFocusCaption = this.onFocusCaption.bind(this);
-    this.onSelectURL = this.onSelectURL.bind(this);
-    this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(this);
-    this.setMappedAttributes = this.setMappedAttributes.bind(this);
-    this.onSizeChangeValue = this.onSizeChangeValue.bind(this);
-  }
-  componentDidMount() {
-    const {
-      attributes,
-      setAttributes
-    } = this.props;
-    // This will warn when we have `id` defined, while `url` is undefined.
-    // This may help track this issue: https://github.com/wordpress-mobile/WordPress-Android/issues/9768
-    // where a cancelled image upload was resulting in a subsequent crash.
-    if (attributes.id && !attributes.url) {
-      // eslint-disable-next-line no-console
-      console.warn('Attributes has id with no url.');
-    }
-
-    // Detect any pasted image and start an upload.
-    if (!attributes.id && attributes.url && (0, _url.getProtocol)(attributes.url) === 'file:') {
-      (0, _reactNativeBridge.requestMediaImport)(attributes.url, (id, url) => {
-        if (url) {
-          setAttributes({
-            id,
-            url
-          });
-        }
-      });
-    }
-
-    // Make sure we mark any temporary images as failed if they failed while
-    // the editor wasn't open.
-    if (attributes.id && attributes.url && (0, _url.getProtocol)(attributes.url) === 'file:') {
-      (0, _reactNativeBridge.mediaUploadSync)();
-    }
-  }
-  componentWillUnmount() {
-    // This action will only exist if the user pressed the trash button on the block holder.
-    if ((0, _hooks.hasAction)('blocks.onRemoveBlockCheckUpload') && this.state.uploadStatus === UPLOAD_STATE_UPLOADING) {
-      (0, _hooks.doAction)('blocks.onRemoveBlockCheckUpload', this.props.attributes.id);
-    }
-  }
-  componentDidUpdate(previousProps) {
-    const {
-      image,
-      attributes,
-      setAttributes,
-      featuredImageId
-    } = this.props;
-    const {
-      url
-    } = attributes;
-    if (!previousProps.image && image) {
-      if (!(0, _url.hasQueryArg)(url, 'w') && attributes?.sizeSlug) {
-        const updatedUrl = getUrlForSlug(image, attributes.sizeSlug) || image.source_url;
-        setAttributes({
-          url: updatedUrl
-        });
-      }
-    }
-    const {
-      id
-    } = attributes;
-    const {
-      id: previousId
-    } = previousProps.attributes;
-
-    // The media changed and the previous media was set as the Featured Image,
-    // we must keep track of the previous media's featured status to act on it
-    // once the new media has a finalized ID.
-    if (!!id && id !== previousId && !!featuredImageId && featuredImageId === previousId) {
-      this.replacedFeaturedImage = true;
-    }
-
-    // The media changed and now has a finalized ID (e.g. upload completed), we
-    // should attempt to replace the featured image if applicable.
-    if (this.replacedFeaturedImage && !!image && this.canImageBeFeatured()) {
-      this.replacedFeaturedImage = false;
-      (0, _reactNativeBridge.setFeaturedImage)(id);
-    }
-    const {
-      align
-    } = attributes;
-    const {
-      __unstableMarkNextChangeAsNotPersistent
-    } = this.props;
-
-    // Update the attributes if the align is wide or full
-    if (['wide', 'full'].includes(align)) {
-      __unstableMarkNextChangeAsNotPersistent();
-      setAttributes({
-        width: undefined,
-        height: undefined,
-        aspectRatio: undefined,
-        scale: undefined
-      });
-    }
-  }
-  static getDerivedStateFromProps(props, state) {
-    // Avoid a UI flicker in the toolbar by insuring that isCaptionSelected
-    // is updated immediately any time the isSelected prop becomes false.
-    return {
-      isCaptionSelected: props.isSelected && state.isCaptionSelected
-    };
-  }
-  accessibilityLabelCreator(caption) {
-    // Checks if caption is empty.
-    return _blockEditor.RichText.isEmpty(caption) ? /* translators: accessibility text. Empty image caption. */
-    'Image caption. Empty' : (0, _i18n.sprintf)(/* translators: accessibility text. %s: image caption. */
-    (0, _i18n.__)('Image caption. %s'), caption);
-  }
-  onImagePressed() {
-    const {
-      attributes,
-      image
-    } = this.props;
-    if (this.state.uploadStatus === UPLOAD_STATE_UPLOADING) {
-      (0, _reactNativeBridge.requestImageUploadCancelDialog)(attributes.id);
-    } else if (attributes.id && (0, _url.getProtocol)(attributes.url) === 'file:') {
-      (0, _reactNativeBridge.requestImageFailedRetryDialog)(attributes.id);
-    } else if (!this.state.isCaptionSelected) {
-      (0, _reactNativeBridge.requestImageFullscreenPreview)(attributes.url, image && image.source_url);
-    }
-    this.setState({
-      isCaptionSelected: false
-    });
-  }
-  updateMediaProgress(payload) {
-    const {
-      setAttributes
-    } = this.props;
-    if (payload.mediaUrl) {
-      setAttributes({
-        url: payload.mediaUrl
-      });
-    }
-    if (this.state.uploadStatus !== UPLOAD_STATE_UPLOADING) {
-      this.setState({
-        uploadStatus: UPLOAD_STATE_UPLOADING
-      });
-    }
-  }
-  finishMediaUploadWithSuccess(payload) {
-    const {
-      setAttributes
-    } = this.props;
-    setAttributes({
-      url: payload.mediaUrl,
-      id: payload.mediaServerId
-    });
-    this.setState({
-      uploadStatus: UPLOAD_STATE_SUCCEEDED
-    });
-  }
-  finishMediaUploadWithFailure(payload) {
-    const {
-      setAttributes
-    } = this.props;
-    setAttributes({
-      id: payload.mediaId
-    });
-    this.setState({
-      uploadStatus: UPLOAD_STATE_FAILED
-    });
-  }
-  mediaUploadStateReset() {
-    const {
-      setAttributes
-    } = this.props;
-    setAttributes({
-      id: null,
-      url: null
-    });
-    this.setState({
-      uploadStatus: UPLOAD_STATE_IDLE
-    });
-  }
-  updateImageURL(url) {
-    this.props.setAttributes({
-      url,
-      width: undefined,
-      height: undefined
-    });
-  }
-  onSetNewTab(value) {
-    const updatedLinkTarget = (0, _utils.getUpdatedLinkTargetSettings)(value, this.props.attributes);
-    this.props.setAttributes(updatedLinkTarget);
-  }
-  onSetSizeSlug(sizeSlug) {
-    const {
-      image,
-      setAttributes
-    } = this.props;
-    const url = getUrlForSlug(image, sizeSlug);
-    if (!url) {
-      return null;
-    }
-    setAttributes({
-      url,
-      width: undefined,
-      height: undefined,
-      sizeSlug
-    });
-  }
-  onSelectMediaUploadOption(media) {
-    const {
-      imageDefaultSize
-    } = this.props;
-    const {
-      id,
-      url,
-      destination
-    } = this.props.attributes;
-    const mediaAttributes = {
-      id: media.id,
-      url: media.url,
-      caption: media.caption,
-      alt: media.alt
-    };
-    let additionalAttributes;
-    // Reset the dimension attributes if changing to a different image.
-    if (!media.id || media.id !== id) {
-      additionalAttributes = {
-        width: undefined,
-        height: undefined,
-        sizeSlug: imageDefaultSize
-      };
-    } else {
-      // Keep the same url when selecting the same file, so "Image Size" option is not changed.
-      additionalAttributes = {
-        url
-      };
-    }
-    let href;
-    switch (destination) {
-      case _constants.LINK_DESTINATION_MEDIA:
-        href = media.url;
-        break;
-      case _constants.LINK_DESTINATION_ATTACHMENT:
-        href = media.link;
-        break;
-    }
-    mediaAttributes.href = href;
-    this.props.setAttributes({
-      ...mediaAttributes,
-      ...additionalAttributes
-    });
-  }
-  onSelectURL(newURL) {
-    const {
-      createErrorNotice,
-      imageDefaultSize,
-      setAttributes
-    } = this.props;
-    if ((0, _url.isURL)(newURL)) {
-      this.setState({
-        isFetchingImage: true
-      });
-
-      // Use RN's Image.getSize to determine if URL is a valid image
-      _reactNative.Image.getSize(newURL, () => {
-        setAttributes({
-          url: newURL,
-          id: undefined,
-          width: undefined,
-          height: undefined,
-          sizeSlug: imageDefaultSize
-        });
-        this.setState({
-          isFetchingImage: false
-        });
-      }, () => {
-        createErrorNotice((0, _i18n.__)('Image file not found.'));
-        this.setState({
-          isFetchingImage: false
-        });
-      });
-    } else {
-      createErrorNotice((0, _i18n.__)('Invalid URL.'));
-    }
-  }
-  onFocusCaption() {
-    if (this.props.onFocus) {
-      this.props.onFocus();
-    }
-    if (!this.state.isCaptionSelected) {
-      this.setState({
-        isCaptionSelected: true
-      });
-    }
-  }
-  getPlaceholderIcon() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
-      icon: _icons.image,
-      ...this.props.getStylesFromColorScheme(_styles.default.iconPlaceholder, _styles.default.iconPlaceholderDark)
-    });
-  }
-  showLoadingIndicator() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: _styles.default.image__loading,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        animating: true
-      })
-    });
-  }
-  getWidth() {
-    const {
-      attributes
-    } = this.props;
-    const {
-      align,
-      width
-    } = attributes;
-    return Object.values(_components.WIDE_ALIGNMENTS.alignments).includes(align) ? '100%' : width;
-  }
-  setMappedAttributes({
-    url: href,
-    linkDestination,
-    ...restAttributes
-  }) {
-    const {
-      setAttributes
-    } = this.props;
-    if (!href && !linkDestination) {
-      linkDestination = _constants.LINK_DESTINATION_NONE;
-    } else if (!linkDestination) {
-      linkDestination = _constants.LINK_DESTINATION_CUSTOM;
-    }
-    return href === undefined || href === this.props.attributes.href ? setAttributes(restAttributes) : setAttributes({
-      ...restAttributes,
-      linkDestination,
-      href
-    });
-  }
-  getAltTextSettings() {
-    const {
-      attributes: {
-        alt
-      }
-    } = this.props;
-    const updateAlt = newAlt => {
-      this.props.setAttributes({
-        alt: newAlt
-      });
-    };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheetTextControl, {
-      initialValue: alt,
-      onChange: updateAlt,
-      placeholder: (0, _i18n.__)('Add alt text'),
-      label: (0, _i18n.__)('Alt Text'),
-      icon: _icons.textColor,
-      footerNote: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _i18n.__)('Describe the purpose of the image. Leave empty if decorative.'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FooterMessageLink, {
-          href:
-          // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-          (0, _i18n.__)('https://www.w3.org/WAI/tutorials/images/decision-tree/'),
-          value: (0, _i18n.__)('What is alt text?')
-        })]
-      })
-    });
-  }
-  onSizeChangeValue(newValue) {
-    this.onSetSizeSlug(newValue);
-  }
-  onSetFeatured(mediaId) {
-    const {
-      closeSettingsBottomSheet
-    } = this.props;
-    (0, _reactNativeBridge.setFeaturedImage)(mediaId);
-    closeSettingsBottomSheet();
-  }
-  getFeaturedButtonPanel(isFeaturedImage) {
-    const {
-      attributes,
-      getStylesFromColorScheme
-    } = this.props;
-    const setFeaturedButtonStyle = getStylesFromColorScheme(_styles.default.setFeaturedButton, _styles.default.setFeaturedButtonDark);
-    const removeFeaturedButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.Cell, {
-      label: (0, _i18n.__)('Remove as Featured Image'),
-      labelStyle: [setFeaturedButtonStyle, _styles.default.removeFeaturedButton],
-      cellContainerStyle: _styles.default.setFeaturedButtonCellContainer,
-      separatorType: "none",
-      onPress: () => this.onSetFeatured(_constants.MEDIA_ID_NO_FEATURED_IMAGE_SET)
-    });
-    const setFeaturedButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.Cell, {
-      label: (0, _i18n.__)('Set as Featured Image'),
-      labelStyle: setFeaturedButtonStyle,
-      cellContainerStyle: _styles.default.setFeaturedButtonCellContainer,
-      separatorType: "none",
-      onPress: () => this.onSetFeatured(attributes.id)
-    });
-    return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton();
-  }
-
-  /**
-   * Featured images must be set to a successfully uploaded self-hosted image,
-   * which has an ID.
-   *
-   * @return {boolean} Boolean indicating whether or not the current may be set as featured.
-   */
-  canImageBeFeatured() {
-    const {
-      attributes: {
-        id
-      }
-    } = this.props;
-    return typeof id !== 'undefined' && this.state.uploadStatus !== UPLOAD_STATE_UPLOADING && this.state.uploadStatus !== UPLOAD_STATE_FAILED;
-  }
-  isGif(url) {
-    return url.toLowerCase().includes('.gif');
-  }
-  render() {
-    const {
-      isCaptionSelected,
-      isFetchingImage
-    } = this.state;
-    const {
-      attributes,
-      isSelected,
-      image,
-      clientId,
-      imageDefaultSize,
-      context,
-      featuredImageId,
-      wasBlockJustInserted,
-      shouldUseFastImage
-    } = this.props;
-    const {
-      align,
-      url,
-      alt,
-      id,
-      sizeSlug,
-      className
-    } = attributes;
-    const hasImageContext = context ? Object.keys(context).length > 0 : false;
-    const imageSizes = Array.isArray(this.props.imageSizes) ? this.props.imageSizes : [];
-    // Only map available image sizes for the user to choose.
-    const sizeOptions = imageSizes.filter(({
-      slug
-    }) => getUrlForSlug(image, slug)).map(({
-      name,
-      slug
-    }) => ({
-      value: slug,
-      label: name
-    }));
-    let selectedSizeOption = sizeSlug || imageDefaultSize;
-    let sizeOptionsValid = sizeOptions.find(option => option.value === selectedSizeOption);
-    if (!sizeOptionsValid) {
-      // Default to 'full' size if the default large size is not available.
-      sizeOptionsValid = sizeOptions.find(option => option.value === 'full');
-      selectedSizeOption = 'full';
-    }
-    const canImageBeFeatured = this.canImageBeFeatured();
-    const isFeaturedImage = canImageBeFeatured && featuredImageId === attributes.id;
-    const getToolbarEditButton = open => /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
-          title: (0, _i18n.__)('Edit image'),
-          icon: _icons.replace,
-          onClick: open
-        })
-      })
-    });
-    const getInspectorControls = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
-        title: (0, _i18n.__)('Settings')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
-        style: _styles.default.panelBody,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockStyles, {
-          clientId: clientId,
-          url: url
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
-        children: [image && sizeOptionsValid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheetSelectControl, {
-          icon: _icons.fullscreen,
-          label: (0, _i18n.__)('Size'),
-          options: sizeOptions,
-          onChange: this.onSizeChangeValue,
-          value: selectedSizeOption
-        }), this.getAltTextSettings()]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkSettings, {
-        attributes: this.props.attributes,
-        image: this.props.image,
-        isLinkSheetVisible: this.state.isLinkSheetVisible,
-        setMappedAttributes: this.setMappedAttributes
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
-        title: (0, _i18n.__)('Featured Image'),
-        titleStyle: _styles.default.featuredImagePanelTitle,
-        children: [canImageBeFeatured && this.getFeaturedButtonPanel(isFeaturedImage), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FooterMessageControl, {
-          label: (0, _i18n.__)('Changes to featured image will not be affected by the undo/redo buttons.'),
-          cellContainerStyle: _styles.default.setFeaturedButtonCellContainer
-        })]
-      })]
-    });
-    if (!url) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.default.content,
-        children: [isFetchingImage && this.showLoadingIndicator(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, {
-          allowedTypes: [_blockEditor.MEDIA_TYPE_IMAGE],
-          onSelect: this.onSelectMediaUploadOption,
-          onSelectURL: this.onSelectURL,
-          icon: this.getPlaceholderIcon(),
-          onFocus: this.props.onFocus,
-          autoOpenMediaUpload: isSelected && wasBlockJustInserted
-        })]
-      });
-    }
-    const alignToFlex = {
-      left: 'flex-start',
-      center: 'center',
-      right: 'flex-end',
-      full: 'center',
-      wide: 'center'
-    };
-    const additionalImageProps = {
-      height: '100%',
-      resizeMode: context?.imageCrop ? 'cover' : 'contain'
-    };
-    const imageContainerStyles = [context?.fixedHeight && _styles.default.fixedHeight];
-    const isGif = this.isGif(url);
-    const badgeLabelShown = isFeaturedImage || isGif;
-    let badgeLabelText = '';
-    if (isFeaturedImage) {
-      badgeLabelText = (0, _i18n.__)('Featured');
-    } else if (isGif) {
-      badgeLabelText = (0, _i18n.__)('GIF');
-    }
-    const getImageComponent = (openMediaOptions, getMediaOptions) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Badge, {
-      label: badgeLabelText,
-      show: badgeLabelShown,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-        accessible: !isSelected,
-        onPress: this.onImagePressed,
-        disabled: !isSelected,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: _styles.default.content,
-          children: [isSelected && getInspectorControls(), isSelected && getMediaOptions(), !this.state.isCaptionSelected && getToolbarEditButton(openMediaOptions), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadProgress, {
-            enablePausedUploads: true,
-            coverUrl: url,
-            mediaId: id,
-            onUpdateMediaProgress: this.updateMediaProgress,
-            onFinishMediaUploadWithSuccess: this.finishMediaUploadWithSuccess,
-            onFinishMediaUploadWithFailure: this.finishMediaUploadWithFailure,
-            onMediaUploadStateReset: this.mediaUploadStateReset,
-            renderContent: ({
-              isUploadPaused,
-              isUploadInProgress,
-              isUploadFailed,
-              retryMessage
-            }) => {
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: imageContainerStyles,
-                children: [isFetchingImage && this.showLoadingIndicator(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Image, {
-                  align: align && alignToFlex[align],
-                  alt: alt,
-                  isSelected: isSelected && !isCaptionSelected,
-                  isUploadFailed: isUploadFailed,
-                  isUploadPaused: isUploadPaused,
-                  isUploadInProgress: isUploadInProgress,
-                  shouldUseFastImage: shouldUseFastImage,
-                  onSelectMediaUploadOption: this.onSelectMediaUploadOption,
-                  openMediaOptions: openMediaOptions,
-                  retryMessage: retryMessage,
-                  url: url,
-                  shapeStyle: _styles.default[className] || className,
-                  width: this.getWidth(),
-                  ...(hasImageContext ? additionalImageProps : {})
-                })]
-              });
-            }
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockCaption, {
-        clientId: this.props.clientId,
-        isSelected: this.state.isCaptionSelected,
-        accessible: !this.state.isCaptionSelected,
-        accessibilityLabelCreator: this.accessibilityLabelCreator,
-        onFocus: this.onFocusCaption,
-        onBlur: this.props.onBlur // Always assign onBlur as props.
-        ,
-        insertBlocksAfter: this.props.insertBlocksAfter
-      })]
-    });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
-      allowedTypes: [_blockEditor.MEDIA_TYPE_IMAGE],
-      isReplacingMedia: true,
-      onSelect: this.onSelectMediaUploadOption,
-      onSelectURL: this.onSelectURL,
-      render: ({
-        open,
-        getMediaOptions
-      }) => {
-        return getImageComponent(open, getMediaOptions);
-      }
-    });
-  }
-}
-exports.ImageEdit = ImageEdit;
-var _default = exports.default = (0, _compose.compose)([(0, _data.withSelect)((select, props) => {
-  const {
-    getEntityRecord
-  } = select(_coreData.store);
-  const {
-    getSettings,
-    wasBlockJustInserted
-  } = select(_blockEditor.store);
-  const {
-    getEditedPostAttribute
-  } = select('core/editor');
-  const {
-    attributes: {
-      id,
-      url
-    },
-    isSelected,
-    clientId
-  } = props;
-  const {
-    imageSizes,
-    imageDefaultSize,
-    capabilities
-  } = getSettings();
-  const isNotFileUrl = id && (0, _url.getProtocol)(url) !== 'file:';
-  const featuredImageId = getEditedPostAttribute('featured_media');
-  const shouldGetMedia = isSelected && isNotFileUrl ||
-  // Edge case to update the image after uploading if the block gets unselected
-  // Check if it's the original image and not the resized one with queryparams.
-  !isSelected && isNotFileUrl && url && !(0, _url.hasQueryArg)(url, 'w');
-  const image = shouldGetMedia ? getEntityRecord('postType', 'attachment', id) : null;
-  return {
-    image,
-    imageSizes,
-    imageDefaultSize,
-    shouldUseFastImage: capabilities?.shouldUseFastImage === true,
-    featuredImageId,
-    wasBlockJustInserted: wasBlockJustInserted(clientId, 'inserter_menu')
-  };
-}), (0, _data.withDispatch)(dispatch => {
-  const {
-    createErrorNotice
-  } = dispatch(_notices.store);
-  const {
-    __unstableMarkNextChangeAsNotPersistent
-  } = dispatch(_blockEditor.store);
-  return {
-    __unstableMarkNextChangeAsNotPersistent,
-    createErrorNotice,
-    closeSettingsBottomSheet() {
-      dispatch(_editPost.store).closeGeneralSidebar();
-    }
-  };
-}), _compose.withPreferredColorScheme])(ImageEdit);
-//# sourceMappingURL=edit.native.js.map