fix: detect empty Rich Text fields using @prismicio/helpers's `isFi…

…lled.richText()` (#130)

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": {

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,

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}</>;

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 = [
 		{

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);
 });