@mirrormedia/lilith-draft-editor/lib/website/mirrormedia/block-renderer/image-block.js

## Installation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImageEditorBlock = ImageEditorBlock;

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));

var _imageSelector = require("../selector/image-selector");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const {
  ImageBlock
} = _mirrormedia.default.blockRenderers;
const ImageBlockWrapper = _styledComponents.default.div`
  img {
    min-width: 300px;
    max-width: 600px;
  }
`;
const ImageEditButton = _styledComponents.default.span`
  cursor: pointer;
  background-color: white;
  padding: 6px;
  border-radius: 6px;
`;

function ImageEditorBlock(props) {
  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
  const {
    block,
    blockProps,
    contentState
  } = props;
  const {
    onEditStart,
    onEditFinish
  } = blockProps;
  const entityKey = block.getEntityAt(0);
  const entity = contentState.getEntity(entityKey);
  const {
    id,
    name,
    imageFile,
    resized,
    resizedWebp,
    desc,
    url,
    alignment
  } = entity.getData();
  const imageWithMeta = {
    image: {
      id,
      name,
      imageFile,
      resized,
      resizedWebp
    },
    desc,
    url
  };

  const onImageSelectorChange = (params, align) => {
    if (params.length === 0) {
      onEditFinish({});
    } else {
      const imageEntity = params[0];
      onEditFinish({
        entityKey,
        entityData: { ...imageEntity.image,
          desc: imageEntity.desc,
          url: imageEntity.url,
          alignment: align
        }
      });
    }

    setToShowImageSelector(false);
  };

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(_imageSelector.ImageSelector, {
    onChange: onImageSelectorChange,
    enableCaption: true,
    enableUrl: true,
    enableAlignment: true,
    initialAlign: alignment,
    initialSelected: [imageWithMeta]
  }), /*#__PURE__*/_react.default.createElement(ImageBlockWrapper, null, /*#__PURE__*/_react.default.createElement(ImageBlock, props)), /*#__PURE__*/_react.default.createElement(ImageEditButton, {
    onClick: () => {
      // call `onEditStart` prop as we are trying to update the BGImage entity
      onEditStart(); // open `BGImageInput`

      setToShowImageSelector(true);
    }
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "fa-solid fa-pen"
  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")));
}