fix: prose control and interfaces

prose control now uses schema to determine whether to render for complex components, i now export a function to generate prose schema - this omits id if not specified
opengovsg · Jul 23, 2024 · 7edaae0 · 7edaae0
1 parent e000312
commit 7edaae0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 34 deletions.
diff --git a/...s/editing-experience/components/form-builder/renderers/controls/JsonFormsProseControl.tsx b/...s/editing-experience/components/form-builder/renderers/controls/JsonFormsProseControl.tsx
@@ -1,16 +1,16 @@
 import type { ControlProps, RankedTester } from "@jsonforms/core"
 import { Box, FormControl } from "@chakra-ui/react"
-import { hasType, rankWith, schemaMatches } from "@jsonforms/core"
+import { rankWith } from "@jsonforms/core"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 import { FormLabel, Textarea } from "@opengovsg/design-system-react"
 
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
 
 export const jsonFormsProseControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.ProseControl,
-  schemaMatches(
-    (schema) => hasType(schema, "array") && schema.format === "prose",
-  ),
+  (_, schema) => {
+    return schema.format === "prose"
+  },
 )
 
 // TODO: Replace this with the Tiptap editor

diff --git a/packages/components/src/interfaces/complex/Accordion.ts b/packages/components/src/interfaces/complex/Accordion.ts
@@ -1,7 +1,8 @@
 import type { Static } from "@sinclair/typebox"
 import { Type } from "@sinclair/typebox"
+import { InnerProseSchema } from "../native/Prose"
+
 
-import { ProseSchema } from "../native"
 
 export const AccordionSchema = Type.Object(
   {
@@ -10,7 +11,7 @@ export const AccordionSchema = Type.Object(
       title: "Accordion summary",
       description: "The summary for the accordion",
     }),
-    details: Type.Ref(ProseSchema),
+    details: InnerProseSchema,
   },
   { title: "Accordion component" },
 )

diff --git a/packages/components/src/interfaces/complex/Callout.ts b/packages/components/src/interfaces/complex/Callout.ts
@@ -1,7 +1,7 @@
 import type { Static } from "@sinclair/typebox"
 import { Type } from "@sinclair/typebox"
 
-import { ProseSchema } from "../native"
+import { InnerProseSchema } from "../native/Prose"
 
 export const CALLOUT_VARIANTS = [
   "info",
@@ -13,7 +13,7 @@ export const CALLOUT_VARIANTS = [
 export const CalloutSchema = Type.Object(
   {
     type: Type.Literal("callout", { default: "callout" }),
-    content: Type.Ref(ProseSchema),
+    content: InnerProseSchema,
     variant: Type.Union(
       CALLOUT_VARIANTS.map((variant) => Type.Literal(variant)),
       {

diff --git a/packages/components/src/interfaces/native/Prose.ts b/packages/components/src/interfaces/native/Prose.ts
@@ -8,33 +8,45 @@ import { ParagraphSchema } from "./Paragraph"
 import { TableSchema } from "./Table"
 import { UnorderedListSchema } from "./UnorderedList"
 
-export const ProseSchema = Type.Object(
-  {
-    type: Type.Literal("prose"),
-    content: Type.Optional(
-      Type.Array(
-        Type.Union([
-          Type.Ref(DividerSchema),
-          Type.Ref(HeadingSchema),
-          Type.Ref(OrderedListSchema),
-          Type.Ref(ParagraphSchema),
-          Type.Ref(TableSchema),
-          Type.Ref(UnorderedListSchema),
-        ]),
-        {
-          title: "Content block",
-          description: "A collection of native content components.",
-          minItems: 1,
-        },
+const BASE_PROSE_META = {
+
+  title: "Content block",
+  description: "A collection of native content components.",
+  format: "prose",
+
+}
+
+const generateProseSchema = (id?: string) => {
+  return Type.Object(
+    {
+      type: Type.Literal("prose"),
+      content: Type.Optional(
+        Type.Array(
+          Type.Union([
+            Type.Ref(DividerSchema),
+            Type.Ref(HeadingSchema),
+            Type.Ref(OrderedListSchema),
+            Type.Ref(ParagraphSchema),
+            Type.Ref(TableSchema),
+            Type.Ref(UnorderedListSchema),
+          ]),
+          {
+            title: "Content block",
+            description: "A collection of native content components.",
+            minItems: 1,
+          },
+        ),
       ),
-    ),
-  },
-  {
-    $id: "components-native-prose",
-    title: "Content block",
-    description: "A collection of native content components.",
-  },
-)
+    },
+    {
+      ...(id && { $id: id }),
+      ...BASE_PROSE_META
+    },
+  )
+}
+
+export const ProseSchema = generateProseSchema("components-native-prose")
+export const InnerProseSchema = generateProseSchema()
 
 export type ProseProps = Static<typeof ProseSchema>
 export type ProseContent = ProseProps["content"]