Replace richtextblock with plain string component

src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx

@@ -3,8 +3,8 @@ import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/l
 import ImageSection from "./image/ImageSection";
 import QuoteBlock from "./quote/QuoteBlock";
 import ResultsBlock from "./results/ResultsBlock";
-import RichTextSection from "./richText/RichTextSection";
 import SplitSection from "./splitSection/SplitSection";
+import TextSection from "./text/TextSection";
 
 export function CustomerCaseSection({
   section,
@@ -14,8 +14,8 @@ export function CustomerCaseSection({
   switch (section._type) {
     case "splitSection":
       return <SplitSection section={section} />;
-    case "richTextBlock":
-      return <RichTextSection section={section} />;
+    case "textBlock":
+      return <TextSection section={section} />;
     case "quoteBlock":
       return <QuoteBlock section={section} />;
     case "imageBlock":

src/components/customerCases/customerCase/sections/text/TextSection.tsx

@@ -0,0 +1,24 @@
+import Text from "src/components/text/Text";
+import { TextBlock } from "studioShared/lib/interfaces/textBlock";
+
+import styles from "./textSection.module.css";
+
+export interface TextSectionProps {
+  section: TextBlock;
+}
+
+export default function TextSection({ section }: TextSectionProps) {
+  return (
+    <div className={styles.wrapper}>
+      <div
+        className={
+          styles.content + (section.highlighted ? ` ${styles.highlighted}` : "")
+        }
+      >
+        <div className={styles.innerContent}>
+          <Text>{section.text}</Text>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/navigation/header/Header.tsx

@@ -78,7 +78,7 @@ export const Header = ({
 
   const showAnnouncement =
     announcement !== null &&
-    announcement.text.length > 0 &&
+    announcement.text?.length > 0 &&
     (!announcement.hideAfter || new Date(announcement.hideAfter) > new Date());
 
   return (

studio/utils/preview.ts

@@ -4,7 +4,7 @@ import {
   isPortableTextTextBlock,
 } from "sanity";
 
-// Convert rich text content to plaintext preview string
+// This help method convert rich text content to plaintext so it could be used as preview in sanity studio
 // (inspired by https://www.sanity.io/docs/previewing-block-content)
 export function richTextPreview(
   richText: PortableTextBlock[],

studioShared/lib/interfaces/customerCases.ts

@@ -3,8 +3,8 @@ import { IImage } from "studio/lib/interfaces/media";
 import { ImageBlock } from "./imageBlock";
 import { QuoteBlock } from "./quoteBlock";
 import { ResultsBlock } from "./resultsBlock";
-import { RichTextBlock } from "./richTextBlock";
 import { SplitSection } from "./splitSection";
+import { TextBlock } from "./textBlock";
 
 export interface CustomerCaseProjectInfo {
   customer: string;
@@ -29,7 +29,7 @@ export interface CustomerCaseBase {
   image: IImage;
 }
 
-export type BaseCustomerCaseSection = RichTextBlock | ImageBlock | QuoteBlock;
+export type BaseCustomerCaseSection = TextBlock | ImageBlock | QuoteBlock;
 
 export type CustomerCaseSection =
   | BaseCustomerCaseSection

studioShared/lib/interfaces/textBlock.ts

@@ -0,0 +1,6 @@
+export interface TextBlock {
+  _key: string;
+  _type: "textBlock";
+  text: string;
+  highlighted?: boolean;
+}

studioShared/lib/queries/customerCases.ts

@@ -29,8 +29,8 @@ export const CUSTOMER_CASES_QUERY = groq`
 `;
 
 export const BASE_SECTIONS_FRAGMENT = groq`
-  _type == "richTextBlock" => {
-    "richText": ${translatedFieldFragment("richText")},
+  _type == "textBlock" => {
+    "text": ${translatedFieldFragment("text")},
     highlighted
   },
   _type == "imageBlock" => {

studioShared/schemas/objects/sections.ts

@@ -1,7 +1,7 @@
 import imageBlock from "./imageBlock";
 import listBlock from "./listBlock";
 import quoteBlock from "./quoteBlock";
-import richTextBlock from "./richTextBlock";
+import richTextBlock from "./textBlock";
 
 export const baseCustomerCaseSections = [
   richTextBlock,

studioShared/schemas/objects/textBlock.ts

@@ -0,0 +1,40 @@
+import { defineField } from "sanity";
+
+import { firstTranslation } from "studio/utils/i18n";
+
+const textBlock = defineField({
+  name: "textBlock",
+  title: "Text Block",
+  type: "object",
+  fields: [
+    {
+      name: "text",
+      title: "Text",
+      type: "internationalizedArrayText",
+    },
+    {
+      name: "highlighted",
+      title: "Highlighted",
+      type: "boolean",
+      description: "Display the text with a highlight frame",
+      initialValue: false,
+    },
+  ],
+  preview: {
+    select: {
+      text: "text",
+      highlighted: "highlighted",
+    },
+    prepare({ text, highlighted }) {
+      return {
+        title: firstTranslation(text) ?? undefined,
+        subtitle:
+          typeof highlighted === "boolean" && highlighted
+            ? "Highlighted"
+            : undefined,
+      };
+    },
+  },
+});
+
+export default textBlock;