From dcabe0c8d1aceb3afa6ec26c30c772a3a0279a19 Mon Sep 17 00:00:00 2001 From: Ane Date: Tue, 5 Nov 2024 15:37:10 +0100 Subject: [PATCH 1/2] replace richtextblock with plain string component --- .../sections/CustomerCaseSection.tsx | 6 +-- .../sections/richText/RichTextSection.tsx | 24 --------- .../sections/text/TextSection.tsx | 24 +++++++++ .../textSection.module.css} | 0 src/components/navigation/header/Header.tsx | 2 +- studio/utils/preview.ts | 20 -------- studioShared/lib/interfaces/customerCases.ts | 4 +- studioShared/lib/interfaces/richTextBlock.ts | 8 --- studioShared/lib/interfaces/textBlock.ts | 6 +++ studioShared/lib/queries/customerCases.ts | 4 +- studioShared/schemas/objects/richTextBlock.ts | 51 ------------------- studioShared/schemas/objects/sections.ts | 2 +- studioShared/schemas/objects/textBlock.ts | 40 +++++++++++++++ 13 files changed, 79 insertions(+), 112 deletions(-) delete mode 100644 src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx create mode 100644 src/components/customerCases/customerCase/sections/text/TextSection.tsx rename src/components/customerCases/customerCase/sections/{richText/richTextSection.module.css => text/textSection.module.css} (100%) delete mode 100644 studio/utils/preview.ts delete mode 100644 studioShared/lib/interfaces/richTextBlock.ts create mode 100644 studioShared/lib/interfaces/textBlock.ts delete mode 100644 studioShared/schemas/objects/richTextBlock.ts create mode 100644 studioShared/schemas/objects/textBlock.ts diff --git a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx index 9e0b7c84a..9797443ef 100644 --- a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx +++ b/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 ; - case "richTextBlock": - return ; + case "textBlock": + return ; case "quoteBlock": return ; case "imageBlock": diff --git a/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx b/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx deleted file mode 100644 index 65239a01d..000000000 --- a/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { RichText } from "src/components/richText/RichText"; -import { RichTextBlock } from "studioShared/lib/interfaces/richTextBlock"; - -import styles from "./richTextSection.module.css"; - -export interface RichTextSectionProps { - section: RichTextBlock; -} - -export default function RichTextSection({ section }: RichTextSectionProps) { - return ( -
-
-
- -
-
-
- ); -} diff --git a/src/components/customerCases/customerCase/sections/text/TextSection.tsx b/src/components/customerCases/customerCase/sections/text/TextSection.tsx new file mode 100644 index 000000000..44d0caf17 --- /dev/null +++ b/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 ( +
+
+
+ {section.text} +
+
+
+ ); +} diff --git a/src/components/customerCases/customerCase/sections/richText/richTextSection.module.css b/src/components/customerCases/customerCase/sections/text/textSection.module.css similarity index 100% rename from src/components/customerCases/customerCase/sections/richText/richTextSection.module.css rename to src/components/customerCases/customerCase/sections/text/textSection.module.css diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index 31dd6e0f8..3101fd656 100644 --- a/src/components/navigation/header/Header.tsx +++ b/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 ( diff --git a/studio/utils/preview.ts b/studio/utils/preview.ts deleted file mode 100644 index ae701d939..000000000 --- a/studio/utils/preview.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { - PortableTextBlock, - isPortableTextSpan, - isPortableTextTextBlock, -} from "sanity"; - -// Convert rich text content to plaintext preview string -// (inspired by https://www.sanity.io/docs/previewing-block-content) -export function richTextPreview( - richText: PortableTextBlock[], -): string | undefined { - const block = richText.find((block) => block._type === "block"); - if (!isPortableTextTextBlock(block)) { - return undefined; - } - return block.children - .filter((child) => isPortableTextSpan(child)) - .map((span) => span.text) - .join(""); -} diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts index 15300b857..6796dbeed 100644 --- a/studioShared/lib/interfaces/customerCases.ts +++ b/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 diff --git a/studioShared/lib/interfaces/richTextBlock.ts b/studioShared/lib/interfaces/richTextBlock.ts deleted file mode 100644 index 971bf4832..000000000 --- a/studioShared/lib/interfaces/richTextBlock.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { PortableTextBlock } from "sanity"; - -export interface RichTextBlock { - _key: string; - _type: "richTextBlock"; - richText: PortableTextBlock[]; - highlighted?: boolean; -} diff --git a/studioShared/lib/interfaces/textBlock.ts b/studioShared/lib/interfaces/textBlock.ts new file mode 100644 index 000000000..2c5a60491 --- /dev/null +++ b/studioShared/lib/interfaces/textBlock.ts @@ -0,0 +1,6 @@ +export interface TextBlock { + _key: string; + _type: "textBlock"; + text: string; + highlighted?: boolean; +} diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts index 0793b8c7d..9c038156a 100644 --- a/studioShared/lib/queries/customerCases.ts +++ b/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" => { diff --git a/studioShared/schemas/objects/richTextBlock.ts b/studioShared/schemas/objects/richTextBlock.ts deleted file mode 100644 index c23e77ad6..000000000 --- a/studioShared/schemas/objects/richTextBlock.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { defineField } from "sanity"; - -import { isInternationalizedRichText } 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", - type: "object", - fields: [ - { - name: "richText", - title: "Rich Text", - type: "internationalizedArrayRichText", - }, - { - name: "highlighted", - title: "Highlighted", - type: "boolean", - description: "Display the rich text with a highlight frame", - initialValue: false, - }, - ], - preview: { - select: { - richText: "richText", - highlighted: "highlighted", - }, - prepare({ richText, highlighted }) { - if (!isInternationalizedRichText(richText)) { - throw new TypeError( - `Expected 'richText' to be InternationalizedRichText, was ${typeof richText}`, - ); - } - const translatedRichText = firstTranslation(richText); - return { - title: - translatedRichText !== null - ? richTextPreview(translatedRichText) - : undefined, - subtitle: - typeof highlighted === "boolean" && highlighted - ? "Highlighted" - : undefined, - }; - }, - }, -}); - -export default richTextBlock; diff --git a/studioShared/schemas/objects/sections.ts b/studioShared/schemas/objects/sections.ts index 3158f7214..82f75de8d 100644 --- a/studioShared/schemas/objects/sections.ts +++ b/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, diff --git a/studioShared/schemas/objects/textBlock.ts b/studioShared/schemas/objects/textBlock.ts new file mode 100644 index 000000000..b3576d8b2 --- /dev/null +++ b/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; From a01547af54ed0ac94ed2565063f56d67c7f55941 Mon Sep 17 00:00:00 2001 From: Ane Date: Wed, 6 Nov 2024 08:33:56 +0100 Subject: [PATCH 2/2] added preview method --- studio/utils/preview.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 studio/utils/preview.ts diff --git a/studio/utils/preview.ts b/studio/utils/preview.ts new file mode 100644 index 000000000..2763ba776 --- /dev/null +++ b/studio/utils/preview.ts @@ -0,0 +1,20 @@ +import { + PortableTextBlock, + isPortableTextSpan, + isPortableTextTextBlock, +} from "sanity"; + +// 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[], +): string | undefined { + const block = richText.find((block) => block._type === "block"); + if (!isPortableTextTextBlock(block)) { + return undefined; + } + return block.children + .filter((child) => isPortableTextSpan(child)) + .map((span) => span.text) + .join(""); +}