From fc0d68c0192892e2bcfb6dbe4ad045f3e58ff6aa Mon Sep 17 00:00:00 2001
From: Angelo Ashmore <angeloashmore@users.noreply.github.com>
Date: Wed, 2 Mar 2022 14:01:24 -1000
Subject: [PATCH] fix: detect empty Rich Text fields using
`@prismicio/helpers`'s `isFilled.richText()` (#130)
---
package-lock.json | 18 +++++++++---------
package.json | 2 +-
src/PrismicRichText.tsx | 6 +++---
src/PrismicText.tsx | 2 +-
test/PrismicRichText.test.tsx | 17 ++++++++++++++---
test/PrismicText.test.tsx | 15 +++++++++++++--
6 files changed, 41 insertions(+), 19 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index a75470c..9a287f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
"version": "2.1.0",
"license": "Apache-2.0",
"dependencies": {
- "@prismicio/helpers": "^2.1.1",
+ "@prismicio/helpers": "^2.2.0",
"@prismicio/richtext": "^2.0.1"
},
"devDependencies": {
@@ -726,12 +726,12 @@
}
},
"node_modules/@prismicio/helpers": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.1.1.tgz",
- "integrity": "sha512-jP17J0ot3zOEMqL3yJteAQW6zwR2ttWwowpVJ02Q6sBk1K9DFfQbQ9ySA4tkBQS0ki3ttWFnrERDzCZ/xCCvGQ==",
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.2.0.tgz",
+ "integrity": "sha512-qgszdfBrPqn4NdmBiyNK+USfUWuI21HCCOMJMoq2R6jp4YDbxcXD7RjixNPK9mjZRtraHnrHzFO/ABK1gLgQIA==",
"dependencies": {
"@prismicio/richtext": "^2.0.1",
- "@prismicio/types": "^0.1.23",
+ "@prismicio/types": "^0.1.24",
"escape-html": "^1.0.3",
"imgix-url-builder": "^0.0.2"
},
@@ -11844,12 +11844,12 @@
}
},
"@prismicio/helpers": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.1.1.tgz",
- "integrity": "sha512-jP17J0ot3zOEMqL3yJteAQW6zwR2ttWwowpVJ02Q6sBk1K9DFfQbQ9ySA4tkBQS0ki3ttWFnrERDzCZ/xCCvGQ==",
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.2.0.tgz",
+ "integrity": "sha512-qgszdfBrPqn4NdmBiyNK+USfUWuI21HCCOMJMoq2R6jp4YDbxcXD7RjixNPK9mjZRtraHnrHzFO/ABK1gLgQIA==",
"requires": {
"@prismicio/richtext": "^2.0.1",
- "@prismicio/types": "^0.1.23",
+ "@prismicio/types": "^0.1.24",
"escape-html": "^1.0.3",
"imgix-url-builder": "^0.0.2"
}
diff --git a/package.json b/package.json
index 8d1b762..b6208d7 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
"unit": "nyc --reporter=lcovonly --reporter=text --exclude-after-remap=false ava"
},
"dependencies": {
- "@prismicio/helpers": "^2.1.1",
+ "@prismicio/helpers": "^2.2.0",
"@prismicio/richtext": "^2.0.1"
},
"devDependencies": {
diff --git a/src/PrismicRichText.tsx b/src/PrismicRichText.tsx
index ba3e216..3d0b315 100644
--- a/src/PrismicRichText.tsx
+++ b/src/PrismicRichText.tsx
@@ -220,9 +220,7 @@ export const PrismicRichText = (
const context = usePrismicContext();
return React.useMemo(() => {
- if (!props.field) {
- return null;
- } else {
+ if (prismicH.isFilled.richText(props.field)) {
const linkResolver = props.linkResolver || context.linkResolver;
const serializer = prismicR.composeSerializers(
@@ -256,6 +254,8 @@ export const PrismicRichText = (
);
return <>{serialized}</>;
+ } else {
+ return null;
}
}, [
props.field,
diff --git a/src/PrismicText.tsx b/src/PrismicText.tsx
index 7e6447d..04a1571 100644
--- a/src/PrismicText.tsx
+++ b/src/PrismicText.tsx
@@ -43,7 +43,7 @@ export type PrismicTextProps = {
*/
export const PrismicText = (props: PrismicTextProps): JSX.Element | null => {
return React.useMemo(() => {
- if (props.field) {
+ if (prismicH.isFilled.richText(props.field)) {
const text = prismicH.asText(props.field, props.separator);
return <>{text}</>;
diff --git a/test/PrismicRichText.test.tsx b/test/PrismicRichText.test.tsx
index 523c178..969aed2 100644
--- a/test/PrismicRichText.test.tsx
+++ b/test/PrismicRichText.test.tsx
@@ -20,13 +20,19 @@ const Link = ({ href, rel, target, children }: LinkProps) => (
</a>
);
-test("returns null if passed nullish field", (t) => {
+test("returns null if passed an empty field", (t) => {
const actualNull = renderJSON(<PrismicRichText field={null} />);
const actualUndefined = renderJSON(<PrismicRichText field={undefined} />);
+ const actualEmpty = renderJSON(<PrismicRichText field={[]} />);
+ const actualEmpty2 = renderJSON(
+ <PrismicRichText field={[{ type: "paragraph", text: "", spans: [] }]} />,
+ );
const expected = null;
t.deepEqual(actualNull, expected);
t.deepEqual(actualUndefined, expected);
+ t.deepEqual(actualEmpty, expected);
+ t.deepEqual(actualEmpty2, expected);
});
test("returns <h1> if type is heading1", (t) => {
@@ -349,11 +355,16 @@ test("returns <image /> wrapped in <PrismicLink />", (t) => {
});
test("returns <div /> with embedded html if type is embed", (t) => {
- const oembed: prismicT.EmbedField = {
+ const oembed: prismicT.EmbedField<
+ prismicT.RichOEmbed & { provider_name: string }
+ > = {
+ version: "1.0",
embed_url: "https://example.com",
type: "rich",
- provider_name: "Prismic",
html: "<marquee>Prismic is fun</marquee>",
+ width: 100,
+ height: 100,
+ provider_name: "Prismic",
};
const field: prismicT.RichTextField = [
{
diff --git a/test/PrismicText.test.tsx b/test/PrismicText.test.tsx
index 3894975..f920be7 100644
--- a/test/PrismicText.test.tsx
+++ b/test/PrismicText.test.tsx
@@ -21,24 +21,35 @@ test("returns string when passed RichTextField", (t) => {
t.deepEqual(actual, expected);
});
-test("returns null when passed nullish field", (t) => {
+test("returns null when passed empty field", (t) => {
const actualNull = renderJSON(<PrismicText field={null} />);
const actualUndefined = renderJSON(<PrismicText field={undefined} />);
+ const actualEmpty = renderJSON(
+ <PrismicText field={[{ type: "paragraph", text: "", spans: [] }]} />,
+ );
const expected = null;
t.deepEqual(actualNull, expected);
t.deepEqual(actualUndefined, expected);
+ t.deepEqual(actualEmpty, expected);
});
-test("returns fallback when passed nullish field", (t) => {
+test("returns fallback when passed empty field", (t) => {
const actualNull = renderJSON(
<PrismicText field={null} fallback="fallback" />,
);
const actualUndefined = renderJSON(
<PrismicText field={undefined} fallback="fallback" />,
);
+ const actualEmpty = renderJSON(
+ <PrismicText
+ field={[{ type: "paragraph", text: "", spans: [] }]}
+ fallback="fallback"
+ />,
+ );
const expected = renderJSON(<>fallback</>);
t.deepEqual(actualNull, expected);
t.deepEqual(actualUndefined, expected);
+ t.deepEqual(actualEmpty, expected);
});