@evfrenkel/decap-cms-core 3.13.0-image-conversions.0

package/dist/esm/components/Editor/withWorkflow.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { EDITORIAL_WORKFLOW } from '../../constants/publishModes';
+import { selectUnpublishedEntry } from '../../reducers';
+import { selectAllowDeletion } from '../../reducers/collections';
+import { loadUnpublishedEntry, persistUnpublishedEntry } from '../../actions/editorialWorkflow';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+function mapStateToProps(state, ownProps) {
+  const {
+    collections
+  } = state;
+  const isEditorialWorkflow = state.config.publish_mode === EDITORIAL_WORKFLOW;
+  const collection = collections.get(ownProps.match.params.name);
+  const returnObj = {
+    isEditorialWorkflow,
+    showDelete: !ownProps.newEntry && selectAllowDeletion(collection)
+  };
+  if (isEditorialWorkflow) {
+    const slug = ownProps.match.params[0];
+    const unpublishedEntry = selectUnpublishedEntry(state, collection.get('name'), slug);
+    if (unpublishedEntry) {
+      returnObj.unpublishedEntry = true;
+      returnObj.entry = unpublishedEntry;
+    }
+  }
+  return returnObj;
+}
+function mergeProps(stateProps, dispatchProps, ownProps) {
+  const {
+    isEditorialWorkflow,
+    unpublishedEntry
+  } = stateProps;
+  const {
+    dispatch
+  } = dispatchProps;
+  const returnObj = {};
+  if (isEditorialWorkflow) {
+    // Overwrite loadEntry to loadUnpublishedEntry
+    returnObj.loadEntry = (collection, slug) => dispatch(loadUnpublishedEntry(collection, slug));
+
+    // Overwrite persistEntry to persistUnpublishedEntry
+    returnObj.persistEntry = collection => dispatch(persistUnpublishedEntry(collection, unpublishedEntry));
+  }
+  return {
+    ...ownProps,
+    ...stateProps,
+    ...returnObj
+  };
+}
+export default function withWorkflow(Editor) {
+  return connect(mapStateToProps, null, mergeProps)(class WorkflowEditor extends React.Component {
+    render() {
+      return ___EmotionJSX(Editor, this.props);
+    }
+  });
+}

package/dist/esm/components/EditorWidgets/Unknown/UnknownControl.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { translate } from 'react-polyglot';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+function UnknownControl({
+  field,
+  t
+}) {
+  return ___EmotionJSX("div", null, t('editor.editorWidgets.unknownControl.noControl', {
+    widget: field.get('widget')
+  }));
+}
+UnknownControl.propTypes = {
+  field: ImmutablePropTypes.map,
+  t: PropTypes.func.isRequired
+};
+export default translate()(UnknownControl);

package/dist/esm/components/EditorWidgets/Unknown/UnknownPreview.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { translate } from 'react-polyglot';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+function UnknownPreview({
+  field,
+  t
+}) {
+  return ___EmotionJSX("div", {
+    className: "nc-widgetPreview"
+  }, t('editor.editorWidgets.unknownPreview.noPreview', {
+    widget: field.get('widget')
+  }));
+}
+UnknownPreview.propTypes = {
+  field: ImmutablePropTypes.map,
+  t: PropTypes.func.isRequired
+};
+export default translate()(UnknownPreview);

package/dist/esm/components/EditorWidgets/index.js

@@ -0,0 +1,4 @@
+import { registerWidget } from '../../lib/registry';
+import UnknownControl from './Unknown/UnknownControl';
+import UnknownPreview from './Unknown/UnknownPreview';
+registerWidget('unknown', UnknownControl, UnknownPreview);

package/dist/esm/components/MediaLibrary/EmptyMessage.js

@@ -0,0 +1,22 @@
+import _styled from "@emotion/styled/base";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { colors } from 'decap-cms-ui-default';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+const EmptyMessageContainer = /*#__PURE__*/_styled("div", {
+  target: "egnwlms0",
+  label: "EmptyMessageContainer"
+})("height:100%;width:100%;display:flex;justify-content:center;align-items:center;color:", props => props.isPrivate && colors.textFieldBorder, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL01lZGlhTGlicmFyeS9FbXB0eU1lc3NhZ2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3dDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL01lZGlhTGlicmFyeS9FbXB0eU1lc3NhZ2UuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycyB9IGZyb20gJ2RlY2FwLWNtcy11aS1kZWZhdWx0JztcblxuY29uc3QgRW1wdHlNZXNzYWdlQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGNvbG9yOiAke3Byb3BzID0+IHByb3BzLmlzUHJpdmF0ZSAmJiBjb2xvcnMudGV4dEZpZWxkQm9yZGVyfTtcbmA7XG5cbmZ1bmN0aW9uIEVtcHR5TWVzc2FnZSh7IGNvbnRlbnQsIGlzUHJpdmF0ZSB9KSB7XG4gIHJldHVybiAoXG4gICAgPEVtcHR5TWVzc2FnZUNvbnRhaW5lciBpc1ByaXZhdGU9e2lzUHJpdmF0ZX0+XG4gICAgICA8aDE+e2NvbnRlbnR9PC9oMT5cbiAgICA8L0VtcHR5TWVzc2FnZUNvbnRhaW5lcj5cbiAgKTtcbn1cblxuRW1wdHlNZXNzYWdlLnByb3BUeXBlcyA9IHtcbiAgY29udGVudDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBpc1ByaXZhdGU6IFByb3BUeXBlcy5ib29sLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgRW1wdHlNZXNzYWdlO1xuIl19 */"));
+function EmptyMessage({
+  content,
+  isPrivate
+}) {
+  return ___EmotionJSX(EmptyMessageContainer, {
+    isPrivate: isPrivate
+  }, ___EmotionJSX("h1", null, content));
+}
+EmptyMessage.propTypes = {
+  content: PropTypes.string.isRequired,
+  isPrivate: PropTypes.bool
+};
+export default EmptyMessage;

package/dist/esm/components/MediaLibrary/MediaLibrary.js

@@ -0,0 +1,446 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+import orderBy from 'lodash/orderBy';
+import map from 'lodash/map';
+import { translate } from 'react-polyglot';
+import fuzzy from 'fuzzy';
+import { fileExtension } from 'decap-cms-lib-util';
+import { loadMedia as loadMediaAction, persistMedia as persistMediaAction, deleteMedia as deleteMediaAction, insertMedia as insertMediaAction, loadMediaDisplayURL as loadMediaDisplayURLAction, closeMediaLibrary as closeMediaLibraryAction } from '../../actions/mediaLibrary';
+import { selectMediaFiles } from '../../reducers/mediaLibrary';
+import MediaLibraryModal, { fileShape } from './MediaLibraryModal';
+
+/**
+ * Extensions used to determine which files to show when the media library is
+ * accessed from an image insertion field.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+const IMAGE_EXTENSIONS_VIEWABLE = ['jpg', 'jpeg', 'webp', 'gif', 'png', 'bmp', 'tiff', 'svg', 'avif'];
+const IMAGE_EXTENSIONS = [...IMAGE_EXTENSIONS_VIEWABLE];
+class MediaLibrary extends React.Component {
+  static propTypes = {
+    isVisible: PropTypes.bool,
+    loadMediaDisplayURL: PropTypes.func,
+    displayURLs: ImmutablePropTypes.map,
+    canInsert: PropTypes.bool,
+    files: PropTypes.arrayOf(PropTypes.shape(fileShape)).isRequired,
+    dynamicSearch: PropTypes.bool,
+    dynamicSearchActive: PropTypes.bool,
+    forImage: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    isPersisting: PropTypes.bool,
+    isDeleting: PropTypes.bool,
+    hasNextPage: PropTypes.bool,
+    isPaginating: PropTypes.bool,
+    privateUpload: PropTypes.bool,
+    config: ImmutablePropTypes.map,
+    loadMedia: PropTypes.func.isRequired,
+    dynamicSearchQuery: PropTypes.string,
+    page: PropTypes.number,
+    persistMedia: PropTypes.func.isRequired,
+    deleteMedia: PropTypes.func.isRequired,
+    insertMedia: PropTypes.func.isRequired,
+    closeMediaLibrary: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired
+  };
+  static defaultProps = {
+    files: []
+  };
+
+  /**
+   * The currently selected file and query are tracked in component state as
+   * they do not impact the rest of the application.
+   */
+  state = {
+    selectedFile: {},
+    query: '',
+    isPersisted: false
+  };
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(MediaLibrary.propTypes, this.props, 'prop', 'MediaLibrary');
+    this.props.loadMedia();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    /**
+     * We clear old state from the media library when it's being re-opened
+     * because, when doing so on close, the state is cleared while the media
+     * library is still fading away.
+     */
+    const isOpening = !this.props.isVisible && nextProps.isVisible;
+    if (isOpening) {
+      this.setState({
+        selectedFile: {},
+        query: ''
+      });
+    }
+    if (this.state.isPersisted) {
+      this.setState({
+        selectedFile: nextProps.files[0],
+        isPersisted: false
+      });
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const isOpening = !prevProps.isVisible && this.props.isVisible;
+    if (isOpening && prevProps.privateUpload !== this.props.privateUpload) {
+      this.props.loadMedia({
+        privateUpload: this.props.privateUpload
+      });
+    }
+    if (this.state.isPersisted) {
+      this.setState({
+        selectedFile: this.props.files[0],
+        isPersisted: false
+      });
+    }
+  }
+  loadDisplayURL = file => {
+    const {
+      loadMediaDisplayURL
+    } = this.props;
+    loadMediaDisplayURL(file);
+  };
+
+  /**
+   * Filter an array of file data to include only images.
+   */
+  filterImages = files => {
+    return files.filter(file => {
+      const ext = fileExtension(file.name).toLowerCase();
+      return IMAGE_EXTENSIONS.includes(ext);
+    });
+  };
+
+  /**
+   * Transform file data for table display.
+   */
+  toTableData = files => {
+    const tableData = files && files.map(({
+      key,
+      name,
+      id,
+      size,
+      path,
+      queryOrder,
+      displayURL,
+      draft
+    }) => {
+      const ext = fileExtension(name).toLowerCase();
+      return {
+        key,
+        id,
+        name,
+        path,
+        type: ext.toUpperCase(),
+        size,
+        queryOrder,
+        displayURL,
+        draft,
+        isImage: IMAGE_EXTENSIONS.includes(ext),
+        isViewableImage: IMAGE_EXTENSIONS_VIEWABLE.includes(ext)
+      };
+    });
+
+    /**
+     * Get the sort order for use with `lodash.orderBy`, and always add the
+     * `queryOrder` sort as the lowest priority sort order.
+     */
+    const {
+      sortFields
+    } = this.state;
+    const fieldNames = map(sortFields, 'fieldName').concat('queryOrder');
+    const directions = map(sortFields, 'direction').concat('asc');
+    return orderBy(tableData, fieldNames, directions);
+  };
+  handleClose = () => {
+    this.props.closeMediaLibrary();
+  };
+
+  /**
+   * Toggle asset selection on click.
+   */
+  handleAssetClick = asset => {
+    const selectedFile = this.state.selectedFile.key === asset.key ? {} : asset;
+    this.setState({
+      selectedFile
+    });
+  };
+
+  /**
+   * Upload a file.
+   */
+  handlePersist = async event => {
+    /**
+     * Stop the browser from automatically handling the file input click, and
+     * get the file for upload, and retain the synthetic event for access after
+     * the asynchronous persist operation.
+     */
+    event.persist();
+    event.stopPropagation();
+    event.preventDefault();
+    const {
+      persistMedia,
+      privateUpload,
+      config,
+      t,
+      field
+    } = this.props;
+    const {
+      files: fileList
+    } = event.dataTransfer || event.target;
+    const files = [...fileList];
+    const file = files[0];
+    const maxFileSize = config.get('max_file_size');
+    if (maxFileSize && file.size > maxFileSize) {
+      window.alert(t('mediaLibrary.mediaLibrary.fileTooLarge', {
+        size: Math.floor(maxFileSize / 1000)
+      }));
+    } else {
+      await persistMedia(file, {
+        privateUpload,
+        field
+      });
+      this.setState({
+        isPersisted: true
+      });
+      this.scrollToTop();
+    }
+    event.target.value = null;
+  };
+
+  /**
+   * Stores the public path of the file in the application store, where the
+   * editor field that launched the media library can retrieve it.
+   */
+  handleInsert = () => {
+    const {
+      selectedFile
+    } = this.state;
+    const {
+      path
+    } = selectedFile;
+    const {
+      insertMedia,
+      field
+    } = this.props;
+    insertMedia(path, field);
+    this.handleClose();
+  };
+
+  /**
+   * Removes the selected file from the backend.
+   */
+  handleDelete = () => {
+    const {
+      selectedFile
+    } = this.state;
+    const {
+      files,
+      deleteMedia,
+      privateUpload,
+      t
+    } = this.props;
+    if (!window.confirm(t('mediaLibrary.mediaLibrary.onDelete'))) {
+      return;
+    }
+    const file = files.find(file => selectedFile.key === file.key);
+    deleteMedia(file, {
+      privateUpload
+    }).then(() => {
+      this.setState({
+        selectedFile: {}
+      });
+    });
+  };
+
+  /**
+   * Downloads the selected file.
+   */
+  handleDownload = () => {
+    const {
+      selectedFile
+    } = this.state;
+    const {
+      displayURLs
+    } = this.props;
+    const url = displayURLs.getIn([selectedFile.id, 'url']) || selectedFile.url;
+    if (!url) {
+      return;
+    }
+    const filename = selectedFile.name;
+    const element = document.createElement('a');
+    element.setAttribute('href', url);
+    element.setAttribute('download', filename);
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+    this.setState({
+      selectedFile: {}
+    });
+  };
+
+  /**
+   *
+   */
+
+  handleLoadMore = () => {
+    const {
+      loadMedia,
+      dynamicSearchQuery,
+      page,
+      privateUpload
+    } = this.props;
+    loadMedia({
+      query: dynamicSearchQuery,
+      page: page + 1,
+      privateUpload
+    });
+  };
+
+  /**
+   * Executes media library search for implementations that support dynamic
+   * search via request. For these implementations, the Enter key must be
+   * pressed to execute search. If assets are being stored directly through
+   * the GitHub backend, search is in-memory and occurs as the query is typed,
+   * so this handler has no impact.
+   */
+  handleSearchKeyDown = async event => {
+    const {
+      dynamicSearch,
+      loadMedia,
+      privateUpload
+    } = this.props;
+    if (event.key === 'Enter' && dynamicSearch) {
+      await loadMedia({
+        query: this.state.query,
+        privateUpload
+      });
+      this.scrollToTop();
+    }
+  };
+  scrollToTop = () => {
+    this.scrollContainerRef.scrollTop = 0;
+  };
+
+  /**
+   * Updates query state as the user types in the search field.
+   */
+  handleSearchChange = event => {
+    this.setState({
+      query: event.target.value
+    });
+  };
+
+  /**
+   * Filters files that do not match the query. Not used for dynamic search.
+   */
+  queryFilter = (query, files) => {
+    /**
+     * Because file names don't have spaces, typing a space eliminates all
+     * potential matches, so we strip them all out internally before running the
+     * query.
+     */
+    const strippedQuery = query.replace(/ /g, '');
+    const matches = fuzzy.filter(strippedQuery, files, {
+      extract: file => file.name
+    });
+    const matchFiles = matches.map((match, queryIndex) => {
+      const file = files[match.index];
+      return {
+        ...file,
+        queryIndex
+      };
+    });
+    return matchFiles;
+  };
+  render() {
+    const {
+      isVisible,
+      canInsert,
+      files,
+      dynamicSearch,
+      dynamicSearchActive,
+      forImage,
+      isLoading,
+      isPersisting,
+      isDeleting,
+      hasNextPage,
+      isPaginating,
+      privateUpload,
+      displayURLs,
+      t
+    } = this.props;
+    return ___EmotionJSX(MediaLibraryModal, {
+      isVisible: isVisible,
+      canInsert: canInsert,
+      files: files,
+      dynamicSearch: dynamicSearch,
+      dynamicSearchActive: dynamicSearchActive,
+      forImage: forImage,
+      isLoading: isLoading,
+      isPersisting: isPersisting,
+      isDeleting: isDeleting,
+      hasNextPage: hasNextPage,
+      isPaginating: isPaginating,
+      privateUpload: privateUpload,
+      query: this.state.query,
+      selectedFile: this.state.selectedFile,
+      handleFilter: this.filterImages,
+      handleQuery: this.queryFilter,
+      toTableData: this.toTableData,
+      handleClose: this.handleClose,
+      handleSearchChange: this.handleSearchChange,
+      handleSearchKeyDown: this.handleSearchKeyDown,
+      handlePersist: this.handlePersist,
+      handleDelete: this.handleDelete,
+      handleInsert: this.handleInsert,
+      handleDownload: this.handleDownload,
+      setScrollContainerRef: ref => this.scrollContainerRef = ref,
+      handleAssetClick: this.handleAssetClick,
+      handleLoadMore: this.handleLoadMore,
+      displayURLs: displayURLs,
+      loadDisplayURL: this.loadDisplayURL,
+      t: t
+    });
+  }
+}
+function mapStateToProps(state) {
+  const {
+    mediaLibrary
+  } = state;
+  const field = mediaLibrary.get('field');
+  const mediaLibraryProps = {
+    isVisible: mediaLibrary.get('isVisible'),
+    canInsert: mediaLibrary.get('canInsert'),
+    files: selectMediaFiles(state, field),
+    displayURLs: mediaLibrary.get('displayURLs'),
+    dynamicSearch: mediaLibrary.get('dynamicSearch'),
+    dynamicSearchActive: mediaLibrary.get('dynamicSearchActive'),
+    dynamicSearchQuery: mediaLibrary.get('dynamicSearchQuery'),
+    forImage: mediaLibrary.get('forImage'),
+    isLoading: mediaLibrary.get('isLoading'),
+    isPersisting: mediaLibrary.get('isPersisting'),
+    isDeleting: mediaLibrary.get('isDeleting'),
+    privateUpload: mediaLibrary.get('privateUpload'),
+    config: mediaLibrary.get('config'),
+    page: mediaLibrary.get('page'),
+    hasNextPage: mediaLibrary.get('hasNextPage'),
+    isPaginating: mediaLibrary.get('isPaginating'),
+    field
+  };
+  return {
+    ...mediaLibraryProps
+  };
+}
+const mapDispatchToProps = {
+  loadMedia: loadMediaAction,
+  persistMedia: persistMediaAction,
+  deleteMedia: deleteMediaAction,
+  insertMedia: insertMediaAction,
+  loadMediaDisplayURL: loadMediaDisplayURLAction,
+  closeMediaLibrary: closeMediaLibraryAction
+};
+export default connect(mapStateToProps, mapDispatchToProps)(translate()(MediaLibrary));