From 16484cad4c226dd4c4bcd2ab5eeac9259a272db3 Mon Sep 17 00:00:00 2001
From: Angelo Ashmore <angeloashmore@users.noreply.github.com>
Date: Wed, 16 Mar 2022 14:44:32 -1000
Subject: [PATCH] feat: add `fallback` prop to `<PrismicRichText>` which is
 rendered when given an empty field

---
 src/PrismicRichText.tsx       |  9 ++++++++-
 test/PrismicRichText.test.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/PrismicRichText.tsx b/src/PrismicRichText.tsx
index 12a2705..652f25a 100644
--- a/src/PrismicRichText.tsx
+++ b/src/PrismicRichText.tsx
@@ -79,6 +79,12 @@ export type PrismicRichTextProps = {
 	 * @defaultValue `<a>`
 	 */
 	externalLinkComponent?: PrismicLinkProps["externalComponent"];
+
+	/**
+	 * The value to be rendered when the field is empty. If a fallback is not
+	 * given, `null` will be rendered.
+	 */
+	fallback?: React.ReactNode;
 };
 
 type CreateDefaultSerializerArgs = {
@@ -255,7 +261,7 @@ export const PrismicRichText = (
 
 			return <>{serialized}</>;
 		} else {
-			return null;
+			return props.fallback != null ? <>{props.fallback}</> : null;
 		}
 	}, [
 		props.field,
@@ -263,6 +269,7 @@ export const PrismicRichText = (
 		props.externalLinkComponent,
 		props.components,
 		props.linkResolver,
+		props.fallback,
 		context.linkResolver,
 		context.richTextComponents,
 	]);
diff --git a/test/PrismicRichText.test.tsx b/test/PrismicRichText.test.tsx
index 969aed2..721ffd2 100644
--- a/test/PrismicRichText.test.tsx
+++ b/test/PrismicRichText.test.tsx
@@ -35,6 +35,31 @@ test("returns null if passed an empty field", (t) => {
 	t.deepEqual(actualEmpty2, expected);
 });
 
+test("returns fallback if given when passed empty field", (t) => {
+	const fallback = <div>fallback</div>;
+	const actualNull = renderJSON(
+		<PrismicRichText field={null} fallback={fallback} />,
+	);
+	const actualUndefined = renderJSON(
+		<PrismicRichText field={undefined} fallback={fallback} />,
+	);
+	const actualEmpty = renderJSON(
+		<PrismicRichText field={[]} fallback={fallback} />,
+	);
+	const actualEmpty2 = renderJSON(
+		<PrismicRichText
+			field={[{ type: "paragraph", text: "", spans: [] }]}
+			fallback={fallback}
+		/>,
+	);
+	const expected = renderJSON(fallback);
+
+	t.deepEqual(actualNull, expected);
+	t.deepEqual(actualUndefined, expected);
+	t.deepEqual(actualEmpty, expected);
+	t.deepEqual(actualEmpty2, expected);
+});
+
 test("returns <h1> if type is heading1", (t) => {
 	const field: prismicT.RichTextField = [
 		{