feat(richTextBlock): initial preview

studio/lib/interfaces/global.ts

@@ -3,14 +3,9 @@ export interface Slug {
   current: string;
 }
 
-export interface DocumentWithSlug {
-  slug: Slug;
-  _updatedAt: string;
-}
-
-export function isInternationalizedString(
+export function isInternationalizedValue(
   value: unknown,
-): value is InternationalizedString {
+): value is InternationalizedValue<unknown> {
   return (
     Array.isArray(value) &&
     value.every(
@@ -19,15 +14,25 @@ export function isInternationalizedString(
         item !== null &&
         "_key" in item &&
         typeof item._key === "string" &&
-        "value" in item &&
-        typeof item.value === "string",
+        "value" in item,
     )
   );
 }
 
-export type InternationalizedString = InternationalizedStringRecord[];
+export function isInternationalizedString(
+  value: unknown,
+): value is InternationalizedString {
+  return (
+    isInternationalizedValue(value) &&
+    value.every((item) => typeof item.value === "string")
+  );
+}
+
+export type InternationalizedValue<T> = InternationalizedValueRecord<T>[];
 
-export interface InternationalizedStringRecord {
+export interface InternationalizedValueRecord<T> {
   _key: string;
-  value: string;
+  value: T;
 }
+
+export type InternationalizedString = InternationalizedValueRecord<string>[];

studio/utils/i18n.ts

@@ -1,10 +1,10 @@
-import { InternationalizedString } from "studio/lib/interfaces/global";
+import { InternationalizedValue } from "studio/lib/interfaces/global";
 
-export function firstTranslation(
-  translatedString: InternationalizedString,
-): string | null {
-  if (translatedString.length === 0) {
+export function firstTranslation<T>(
+  internationalizedValue: InternationalizedValue<T>,
+): T | null {
+  if (internationalizedValue.length === 0) {
     return null;
   }
-  return translatedString[0].value;
+  return internationalizedValue[0].value;
 }

studio/utils/preview.ts

@@ -0,0 +1,27 @@
+import { PortableTextBlock } from "sanity";
+
+// Convert rich text content to plaintext preview string
+// (see https://www.sanity.io/docs/previewing-block-content)
+export function richTextPreview(
+  richText: PortableTextBlock[],
+): string | undefined {
+  console.log(richText);
+  const block = richText.find((block) => block._type === "block");
+  if (
+    block === undefined ||
+    !("children" in block) ||
+    !Array.isArray(block.children)
+  ) {
+    return undefined;
+  }
+  return block.children
+    .filter(
+      (child: unknown) =>
+        typeof child === "object" &&
+        child !== null &&
+        "_type" in child &&
+        child._type === "span",
+    )
+    .map((span) => span.text)
+    .join("");
+}

studioShared/schemas/objects/richTextBlock.ts

@@ -1,5 +1,9 @@
 import { defineField } from "sanity";
 
+import { isInternationalizedValue } from "studio/lib/interfaces/global";
+import { firstTranslation } from "studio/utils/i18n";
+import { richTextPreview } from "studio/utils/preview";
+
 const richTextBlock = defineField({
   name: "richTextBlock",
   title: "Rich Text Block",
@@ -13,11 +17,18 @@ const richTextBlock = defineField({
   ],
   preview: {
     select: {
-      text: "richText",
+      richText: "richText",
     },
-    prepare({ text }) {
+    prepare({ richText }) {
+      // TODO: better type guard for rich text
+      if (!isInternationalizedValue(richText)) {
+        throw new TypeError(
+          `Expected 'richText' to be InternationalizedValue, was ${typeof richText}`,
+        );
+      }
+      const translatedRichText = firstTranslation(richText);
       return {
-        title: text, //Does not work
+        title: richTextPreview(translatedRichText),
       };
     },
   },