updated contentful deps, improved image rendering for rich content
This commit is contained in:
parent
6056c291aa
commit
fee43349f9
|
@ -76,16 +76,33 @@ export function RichBody(props: Props): ReactElement {
|
|||
// const children;
|
||||
const plaintext = documentToPlainTextString(node);
|
||||
const isShortcode = CMS.SHORTCODE_REGEX.test(plaintext);
|
||||
|
||||
return isShortcode ? (
|
||||
renderShortcode(plaintext)
|
||||
) : (
|
||||
if (isShortcode) {
|
||||
return renderShortcode(plaintext);
|
||||
} else {
|
||||
let hasImage = false;
|
||||
Children.map(children, (child: any) => {
|
||||
if (child.type === 'figure') {
|
||||
hasImage = true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
if (hasImage) {
|
||||
return (
|
||||
<span className={classNames('leading-relaxed pb-6')}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<p
|
||||
className={classNames('mb-3 font-sans tracking-wide text-justify')}
|
||||
className={classNames(
|
||||
'mb-3 font-sans tracking-wide text-justify',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
},
|
||||
[BLOCKS.HEADING_1]: (node, children) => (
|
||||
<h1
|
||||
|
|
|
@ -14,9 +14,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^4.2.2",
|
||||
"@contentful/rich-text-html-renderer": "^15.0.0",
|
||||
"@contentful/rich-text-plain-text-renderer": "^15.0.0",
|
||||
"@contentful/rich-text-react-renderer": "^15.0.0",
|
||||
"@contentful/rich-text-html-renderer": "^15.3.5",
|
||||
"@contentful/rich-text-plain-text-renderer": "^15.3.5",
|
||||
"@contentful/rich-text-react-renderer": "^15.3.5",
|
||||
"@tailwindcss/aspect-ratio": "^0.2.0",
|
||||
"@types/jest": "^26.0.20",
|
||||
"@types/lodash": "^4.14.161",
|
||||
|
@ -64,7 +64,7 @@
|
|||
"@babel/core": "^7.12.17",
|
||||
"@babel/preset-env": "^7.12.17",
|
||||
"@babel/preset-react": "^7.12.13",
|
||||
"@contentful/rich-text-types": "^15.0.0",
|
||||
"@contentful/rich-text-types": "^15.3.5",
|
||||
"@tailwindcss/forms": "^0.3.3",
|
||||
"@types/base-64": "^1.0.0",
|
||||
"@types/lodash.get": "^4.4.6",
|
||||
|
|
|
@ -7,7 +7,7 @@ import sanitize from '../utils/sanitize';
|
|||
|
||||
import EmbedContent from '../components/EmbedContent';
|
||||
import { ScreenContext } from '../contexts/screen';
|
||||
import { ReactElement } from 'react';
|
||||
import { ReactElement, CSSProperties } from 'react';
|
||||
|
||||
function Markup(node: any): ReactElement {
|
||||
const frontTags: string[] = [];
|
||||
|
@ -72,7 +72,7 @@ function EmbeddedMedia(node: any, isInline = false): ReactElement {
|
|||
const imageWidth = node.width ?? media.file.details.image.width;
|
||||
const imageHeight = node.height ?? media.file.details.image.height;
|
||||
const figureClasses = [
|
||||
isInline && node.position && 'text-center mx-auto mb-5',
|
||||
isInline && node.position && 'text-center mx-auto mt-4 mb-5',
|
||||
isInline && !node.position && 'inline-block align-middle mx-1',
|
||||
isInline && node.position === 'left' && 'tablet:float-left tablet:mr-4',
|
||||
isInline && node.position === 'right' && 'tablet:float-right tablet:ml-4',
|
||||
|
@ -84,14 +84,15 @@ function EmbeddedMedia(node: any, isInline = false): ReactElement {
|
|||
!node.position &&
|
||||
'text-center tablet:inline-block tablet:align-middle tablet:mx-1',
|
||||
];
|
||||
const figureStyles: CSSProperties = {};
|
||||
if (!isMobile && node.position) {
|
||||
figureStyles.width = imageWidth;
|
||||
}
|
||||
if (isDesktop) {
|
||||
figureStyles.maxWidth = '800px';
|
||||
}
|
||||
return (
|
||||
<figure
|
||||
className={classNames(figureClasses)}
|
||||
style={{
|
||||
width: !isMobile && node.position ? imageWidth : '',
|
||||
maxWidth: isDesktop ? '800px' : '',
|
||||
}}
|
||||
>
|
||||
<figure className={classNames(figureClasses)} style={figureStyles}>
|
||||
<Image
|
||||
src={`${url}${isMobile ? '?w=300' : isTablet ? '?w=600' : ''}`}
|
||||
alt={node.title}
|
||||
|
|
38
yarn.lock
38
yarn.lock
|
@ -1414,32 +1414,32 @@
|
|||
exec-sh "^0.3.2"
|
||||
minimist "^1.2.0"
|
||||
|
||||
"@contentful/rich-text-html-renderer@^15.0.0":
|
||||
version "15.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-15.2.0.tgz#112bb9f748b5bc4df9d2e2065cb9f6d6e9ca085a"
|
||||
integrity sha512-htcPzKiKsfINv6wkHtx38Vw0QLeGwzRTLe8dNHU2lvGZ+tgmqsgmt6C0XcpBbdon98Afl8xdToOpZdfQImI8NA==
|
||||
"@contentful/rich-text-html-renderer@^15.3.5":
|
||||
version "15.3.5"
|
||||
resolved "https://registry.yarnpkg.com/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-15.3.5.tgz#b8e9d5226f9e75f2ac7cf2c5761d2b4ea195b7bd"
|
||||
integrity sha512-xB9mL8Vb1Ebh0To5jxDb1mYuf1fy4j/pfcl8ZxQppB9nIc7jlHfYUePMl3P3t1kPtED7GjHmsV7kLAxEoWqtgg==
|
||||
dependencies:
|
||||
"@contentful/rich-text-types" "^15.1.0"
|
||||
"@contentful/rich-text-types" "^15.3.5"
|
||||
escape-html "^1.0.3"
|
||||
|
||||
"@contentful/rich-text-plain-text-renderer@^15.0.0":
|
||||
version "15.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@contentful/rich-text-plain-text-renderer/-/rich-text-plain-text-renderer-15.1.0.tgz#d6deb9f78de24b606d96dffd00abe8e2f957801e"
|
||||
integrity sha512-aPyDMQpb5rXfTJFRDur10qNZm1roKtXcXi6nIUP582NSLEzkp5GRydJsbp0Zcu+8qLcNMfvc7nwn4725P+Ma8w==
|
||||
"@contentful/rich-text-plain-text-renderer@^15.3.5":
|
||||
version "15.3.5"
|
||||
resolved "https://registry.yarnpkg.com/@contentful/rich-text-plain-text-renderer/-/rich-text-plain-text-renderer-15.3.5.tgz#d92761ca118c5f0b16b2c55c9a190a8c02e75ffd"
|
||||
integrity sha512-AFNP1gAopmFiFK8E4qzMcgemYzSUHfmgVZeZAzypPDKQhhS3x/L4u9kihZcK55YkLpSJgUisc8XcrJlUTYMl4g==
|
||||
dependencies:
|
||||
"@contentful/rich-text-types" "^15.1.0"
|
||||
"@contentful/rich-text-types" "^15.3.5"
|
||||
|
||||
"@contentful/rich-text-react-renderer@^15.0.0":
|
||||
version "15.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@contentful/rich-text-react-renderer/-/rich-text-react-renderer-15.2.0.tgz#b5ff25b4746f063f15d83eccaff555597d46683e"
|
||||
integrity sha512-mMvs1tvd8Uab1Rqu1oNNqrVwaiQ3+EiLbjZQkBuQ0vTpVCmFI5w60X/mUg5aLMQzJMyEW/kzzcGEjo5oG7im5Q==
|
||||
"@contentful/rich-text-react-renderer@^15.3.5":
|
||||
version "15.3.5"
|
||||
resolved "https://registry.yarnpkg.com/@contentful/rich-text-react-renderer/-/rich-text-react-renderer-15.3.5.tgz#94a94ea937c7a2f331942307f9998c460a5dd221"
|
||||
integrity sha512-BDZQ0Z1koj5C9VzOt9V5vaEIKRfbakHBqU2DpjmWCx0h+wRdmmVQdTX6VHousH7TOHjWLUi8w7xHH3Kjnzh0EQ==
|
||||
dependencies:
|
||||
"@contentful/rich-text-types" "^15.1.0"
|
||||
"@contentful/rich-text-types" "^15.3.5"
|
||||
|
||||
"@contentful/rich-text-types@^15.0.0", "@contentful/rich-text-types@^15.1.0":
|
||||
version "15.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@contentful/rich-text-types/-/rich-text-types-15.1.0.tgz#5637452257e6c7c6fc406ec1ec6ab7fcc1158105"
|
||||
integrity sha512-3PgQi/B5yKC3xXDar1Ry4i4l9jgt56PFZ40cOkE+oCNLmNlFtZolo6cTrf4VunuufSsCfjTs4iWovy7fbM1I8Q==
|
||||
"@contentful/rich-text-types@^15.3.5":
|
||||
version "15.3.5"
|
||||
resolved "https://registry.yarnpkg.com/@contentful/rich-text-types/-/rich-text-types-15.3.5.tgz#414e7b4e671d9c3a4f75e5c762e4e109ccd4ba20"
|
||||
integrity sha512-NOAdIfWUadOxhnv4IR+vBtgPtAtV0hv1uoZJogm2mniXZHRIpmKNbEBncjfr/SSHhOG98tQgHCUw6b/nvDTVaQ==
|
||||
|
||||
"@csstools/convert-colors@^1.4.0":
|
||||
version "1.4.0"
|
||||
|
|
Loading…
Reference in New Issue