feat: bundle assets with content (#2958)
* fix(media_folder_relative): use collection name in unpublished entry * refactor: pass arguments as object to AssetProxy ctor * feat: support media folders per collection * feat: resolve media files path based on entry path * fix: asset public path resolving * refactor: introduce typescript for AssetProxy * refactor: code cleanup * refactor(asset-proxy): add tests,switch to typescript,extract arguments * refactor: typescript for editorialWorkflow * refactor: add typescript for media library actions * refactor: fix type error on map set * refactor: move locale selector into reducer * refactor: add typescript for entries actions * refactor: remove duplication between asset store and media lib * feat: load assets from backend using API * refactor(github): add typescript, cache media files * fix: don't load media URL if already loaded * feat: add media folder config to collection * fix: load assets from API when not in UI state * feat: load entry media files when opening media library * fix: editorial workflow draft media files bug fixes * test(unit): fix unit tests * fix: editor control losing focus * style: add eslint object-shorthand rule * test(cypress): re-record mock data * fix: fix non github backends, large media * test: uncomment only in tests * fix(backend-test): add missing displayURL property * test(e2e): add media library tests * test(e2e): enable visual testing * test(e2e): add github backend media library tests * test(e2e): add git-gateway large media tests * chore: post rebase fixes * test: fix tests * test: fix tests * test(cypress): fix tests * docs: add media_folder docs * test(e2e): add media library delete test * test(e2e): try and fix image comparison on CI * ci: reduce test machines from 9 to 8 * test: add reducers and selectors unit tests * test(e2e): disable visual regression testing for now * test: add getAsset unit tests * refactor: use Asset class component instead of hooks * build: don't inline source maps * test: add more media path tests
This commit is contained in:
committed by
Shawn Erquhart
parent
7e4d4c1cc4
commit
2b41d8a838
@ -2,21 +2,25 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from '@emotion/styled';
|
||||
import { List } from 'immutable';
|
||||
import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
|
||||
import { WidgetPreviewContainer, Asset } from 'netlify-cms-ui-default';
|
||||
|
||||
const FileLink = styled(({ value, getAsset }) => (
|
||||
<a href={getAsset(value)} rel="noopener noreferrer" target="_blank">
|
||||
{value}
|
||||
const FileLink = styled(({ value: href, path }) => (
|
||||
<a href={href} rel="noopener noreferrer" target="_blank">
|
||||
{path}
|
||||
</a>
|
||||
))`
|
||||
display: block;
|
||||
`;
|
||||
|
||||
const FileLinkAsset = ({ value, getAsset }) => {
|
||||
return <Asset path={value} getAsset={getAsset} component={FileLink} />;
|
||||
};
|
||||
|
||||
function FileLinkList({ values, getAsset }) {
|
||||
return (
|
||||
<div>
|
||||
{values.map(value => (
|
||||
<FileLink key={value} value={value} getAsset={getAsset} />
|
||||
<FileLinkAsset key={value} value={value} getAsset={getAsset} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
@ -26,7 +30,7 @@ function FileContent({ value, getAsset }) {
|
||||
if (Array.isArray(value) || List.isList(value)) {
|
||||
return <FileLinkList values={value} getAsset={getAsset} />;
|
||||
}
|
||||
return <FileLink value={value} getAsset={getAsset} />;
|
||||
return <FileLinkAsset value={value} getAsset={getAsset} />;
|
||||
}
|
||||
|
||||
const FilePreview = props => (
|
||||
|
@ -6,7 +6,15 @@ import { Map, List } from 'immutable';
|
||||
import { once } from 'lodash';
|
||||
import uuid from 'uuid/v4';
|
||||
import { oneLine } from 'common-tags';
|
||||
import { lengths, components, buttons, borders, effects, shadows } from 'netlify-cms-ui-default';
|
||||
import {
|
||||
lengths,
|
||||
components,
|
||||
buttons,
|
||||
borders,
|
||||
effects,
|
||||
shadows,
|
||||
Asset,
|
||||
} from 'netlify-cms-ui-default';
|
||||
|
||||
const MAX_DISPLAY_LENGTH = 50;
|
||||
|
||||
@ -22,12 +30,16 @@ const ImageWrapper = styled.div`
|
||||
${shadows.inset};
|
||||
`;
|
||||
|
||||
const Image = styled.img`
|
||||
const Image = styled(({ value: src }) => <img src={src || ''} role="presentation" />)`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
`;
|
||||
|
||||
const ImageAsset = ({ getAsset, value }) => {
|
||||
return <Asset path={value} getAsset={getAsset} component={Image} />;
|
||||
};
|
||||
|
||||
const MultiImageWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -210,7 +222,7 @@ export default function withFileControl({ forImage } = {}) {
|
||||
<MultiImageWrapper>
|
||||
{value.map(val => (
|
||||
<ImageWrapper key={val}>
|
||||
<Image src={getAsset(val)} />
|
||||
<ImageAsset getAsset={getAsset} value={value} />
|
||||
</ImageWrapper>
|
||||
))}
|
||||
</MultiImageWrapper>
|
||||
@ -218,7 +230,7 @@ export default function withFileControl({ forImage } = {}) {
|
||||
}
|
||||
return (
|
||||
<ImageWrapper>
|
||||
<Image src={getAsset(value)} />
|
||||
<ImageAsset getAsset={getAsset} value={value} />
|
||||
</ImageWrapper>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user