@wordpress/format-library/build/image/index.js

Format library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.image = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _richText = require("@wordpress/rich-text");
var _blockEditor = require("@wordpress/block-editor");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

const ALLOWED_MEDIA_TYPES = ['image'];
const name = 'core/image';
const title = (0, _i18n.__)('Inline image');
const image = exports.image = {
  name,
  title,
  keywords: [(0, _i18n.__)('photo'), (0, _i18n.__)('media')],
  object: true,
  tagName: 'img',
  className: null,
  attributes: {
    className: 'class',
    style: 'style',
    url: 'src',
    alt: 'alt'
  },
  edit: Edit
};
function InlineUI({
  value,
  onChange,
  activeObjectAttributes,
  contentRef
}) {
  const {
    style,
    alt
  } = activeObjectAttributes;
  const width = style?.replace(/\D/g, '');
  const [editedWidth, setEditedWidth] = (0, _element.useState)(width);
  const [editedAlt, setEditedAlt] = (0, _element.useState)(alt);
  const hasChanged = editedWidth !== width || editedAlt !== alt;
  const popoverAnchor = (0, _richText.useAnchor)({
    editableContentElement: contentRef.current,
    settings: image
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
    placement: "bottom",
    focusOnMount: false,
    anchor: popoverAnchor,
    className: "block-editor-format-toolbar__image-popover",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
      className: "block-editor-format-toolbar__image-container-content",
      onSubmit: event => {
        const newReplacements = value.replacements.slice();
        newReplacements[value.start] = {
          type: name,
          attributes: {
            ...activeObjectAttributes,
            style: editedWidth ? `width: ${editedWidth}px;` : '',
            alt: editedAlt
          }
        };
        onChange({
          ...value,
          replacements: newReplacements
        });
        event.preventDefault();
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: 4,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
          __next40pxDefaultSize: true,
          label: (0, _i18n.__)('Width'),
          value: editedWidth,
          min: 1,
          onChange: newWidth => {
            setEditedWidth(newWidth);
          }
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
          label: (0, _i18n.__)('Alternative text'),
          __nextHasNoMarginBottom: true,
          value: editedAlt,
          onChange: newAlt => {
            setEditedAlt(newAlt);
          },
          help: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
              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/'),
              children: (0, _i18n.__)('Describe the purpose of the image.')
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), (0, _i18n.__)('Leave empty if decorative.')]
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
          justify: "right",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            disabled: !hasChanged,
            accessibleWhenDisabled: true,
            variant: "primary",
            type: "submit",
            size: "compact",
            children: (0, _i18n.__)('Apply')
          })
        })]
      })
    })
  });
}
function Edit({
  value,
  onChange,
  onFocus,
  isObjectActive,
  activeObjectAttributes,
  contentRef
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.MediaUploadCheck, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
      allowedTypes: ALLOWED_MEDIA_TYPES,
      onSelect: ({
        id,
        url,
        alt,
        width: imgWidth
      }) => {
        onChange((0, _richText.insertObject)(value, {
          type: name,
          attributes: {
            className: `wp-image-${id}`,
            style: `width: ${Math.min(imgWidth, 150)}px;`,
            url,
            alt
          }
        }));
        onFocus();
      },
      render: ({
        open
      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichTextToolbarButton, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
          xmlns: "http://www.w3.org/2000/svg",
          viewBox: "0 0 24 24",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
            d: "M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z"
          })
        }),
        title: title,
        onClick: open,
        isActive: isObjectActive
      })
    }), isObjectActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(InlineUI, {
      value: value,
      onChange: onChange,
      activeObjectAttributes: activeObjectAttributes,
      contentRef: contentRef
    })]
  });
}
//# sourceMappingURL=index.js.map