@supernova-studio/client 0.0.15 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supernova-studio/client",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "description": "Supernova Data Models",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -24,7 +24,9 @@
   ],
   "scripts": {
     "build": "tsc",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest watch"
   },
   "author": "",
   "license": "ISC",

package/src/docs-editor/blocks-to-prosemirror.ts

@@ -6,7 +6,9 @@ import {
   PageBlockText,
   PageBlockTextSpan,
   PageBlockTextSpanAttribute,
-  PageBlockDefinitionRichTextPropertyStyle,
+  PageBlockItemRichTextPropertyValue,
+  PageBlockCalloutType,
+  PageBlockItemMultiRichTextPropertyValue,
 } from "@supernova-studio/model";
 import { PageBlockEditorModel } from "./model/block";
 import {
@@ -20,16 +22,28 @@ import { DocumentationPageEditorModel } from "./model";
 import { prosemirrorJSONToYXmlFragment } from "y-prosemirror";
 import { pmSchema } from "./prosemirror";
 
+//
+// Types
+//
+
 type Input = {
   block: PageBlockEditorModel;
   definition: PageBlockDefinition;
-  richTextProperty: PageBlockDefinitionProperty;
+  property: PageBlockDefinitionProperty;
+};
+
+type RichTextInputWithValue = Input & {
+  richTextPropertyValue: PageBlockItemRichTextPropertyValue;
 };
 
-type InputWithValue = Input & {
-  richTextPropertyValue: PageBlockText;
+type MultiRichTextInputWithValue = Input & {
+  multiRichTextPropertyValue: PageBlockItemMultiRichTextPropertyValue;
 };
 
+//
+// Implementation
+//
+
 export function pageToYXmlFragment(
   page: DocumentationPageEditorModel,
   definitions: PageBlockDefinition[],
@@ -66,25 +80,37 @@ export function blockToProsemirrorNode(
   definition: PageBlockDefinition
 ): ProsemirrorNode | null {
   const richTextProperty = BlockDefinitionUtils.firstRichTextProperty(definition);
-
   if (richTextProperty) {
     return serializeAsRichTextBlock({
       block: block,
       definition: definition,
-      richTextProperty: richTextProperty,
+      property: richTextProperty,
+    });
+  }
+
+  const multiRichTextProperty = BlockDefinitionUtils.firstMultiRichTextProperty(definition);
+  if (multiRichTextProperty) {
+    return serializeAsMultiRichTextBlock({
+      block: block,
+      definition: definition,
+      property: multiRichTextProperty,
     });
   }
 
   return serializeAsCustomBlock(block, definition);
 }
 
+//
+// Single rich text blocks
+//
+
 export function serializeAsRichTextBlock(input: Input): ProsemirrorNode {
-  const { block, definition, richTextProperty } = input;
+  const { block, definition, property: richTextProperty } = input;
 
   const blockItem = BlockParsingUtils.singleBlockItem(block);
   const textPropertyValue = BlockParsingUtils.richTextPropertyValue(blockItem, richTextProperty.id);
 
-  const enrichedInput: InputWithValue = { ...input, richTextPropertyValue: textPropertyValue };
+  const enrichedInput: RichTextInputWithValue = { ...input, richTextPropertyValue: textPropertyValue };
 
   const style = richTextProperty.options?.richTextStyle ?? "Default";
 
@@ -103,55 +129,115 @@ export function serializeAsRichTextBlock(input: Input): ProsemirrorNode {
     case "Title4":
     case "Title5":
       return serializeAsHeading(enrichedInput);
-
-    // Todo: verify
-    case "OL":
-    case "UL":
-      throw new Error(`Not allowed!`);
   }
 }
 
-//
-// Blocks
-//
-
-function serializeAsParagraph(input: InputWithValue): ProsemirrorNode {
+function serializeAsParagraph(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "paragraph",
     attrs: serializeBlockNodeAttributes(input),
-    content: serializeRichText(input.richTextPropertyValue),
+    content: serializeRichText(input.richTextPropertyValue.value),
   };
 }
 
-function serializeAsHeading(input: InputWithValue): ProsemirrorNode {
+function serializeAsHeading(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "heading",
     attrs: {
       ...serializeBlockNodeAttributes(input),
-      level: richTextHeadingLevel(input.richTextProperty),
+      level: richTextHeadingLevel(input.property),
     },
-    content: serializeRichText(input.richTextPropertyValue),
+    content: serializeRichText(input.richTextPropertyValue.value),
   };
 }
 
-function serializeAsBlockquote(input: InputWithValue): ProsemirrorNode {
+function serializeAsBlockquote(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "blockquote",
     attrs: serializeBlockNodeAttributes(input),
-    content: serializeRichText(input.richTextPropertyValue),
+    content: serializeRichText(input.richTextPropertyValue.value),
   };
 }
 
-function serializeAsCallout(input: InputWithValue): ProsemirrorNode {
+function serializeAsCallout(input: RichTextInputWithValue): ProsemirrorNode {
+  const calloutType = input.richTextPropertyValue.calloutType ?? "Info";
+
   return {
     type: "callout",
     attrs: {
       ...serializeBlockNodeAttributes(input),
+      type: serializeCalloutType(calloutType),
+    },
+    content: serializeRichText(input.richTextPropertyValue.value),
+  };
+}
+
+//
+// Multi rich text blocks
+//
+
+export function serializeAsMultiRichTextBlock(input: Input): ProsemirrorNode {
+  const { block, definition, property: richTextProperty } = input;
+
+  const blockItem = BlockParsingUtils.singleBlockItem(block);
+  const textPropertyValue = BlockParsingUtils.multiRichTextPropertyValue(blockItem, richTextProperty.id);
 
-      // TODO Docs: type
-      type: "neutral",
+  const enrichedInput: MultiRichTextInputWithValue = { ...input, multiRichTextPropertyValue: textPropertyValue };
+
+  const style = richTextProperty.options?.multiRichTextStyle ?? "Default";
+
+  switch (style) {
+    case "Default":
+      return serializeAsMultiParagraph(enrichedInput);
+
+    case "OL":
+      return serializeAsOrderedList(enrichedInput);
+
+    case "UL":
+      return serializeAsUnorderedList(enrichedInput);
+  }
+}
+
+function serializeAsMultiParagraph(input: MultiRichTextInputWithValue): ProsemirrorNode {
+  return {
+    type: "bulletlist",
+    attrs: {
+      ...serializeBlockNodeAttributes(input),
+    },
+    content: input.multiRichTextPropertyValue.value.map(serializeAsListItem),
+  };
+}
+
+function serializeAsOrderedList(input: MultiRichTextInputWithValue): ProsemirrorNode {
+  return {
+    type: "orderedlist",
+    attrs: {
+      ...serializeBlockNodeAttributes(input),
+      start: "1",
+    },
+    content: input.multiRichTextPropertyValue.value.map(serializeAsListItem),
+  };
+}
+
+function serializeAsUnorderedList(input: MultiRichTextInputWithValue): ProsemirrorNode {
+  return {
+    type: "bulletlist",
+    attrs: {
+      ...serializeBlockNodeAttributes(input),
     },
-    content: serializeRichText(input.richTextPropertyValue),
+    content: input.multiRichTextPropertyValue.value.map(serializeAsListItem),
+  };
+}
+
+function serializeAsListItem(text: PageBlockText): ProsemirrorNode {
+  return {
+    type: "listitem",
+    content: [
+      {
+        type: "paragraph",
+        content: serializeRichText(text),
+      },
+    ],
   };
 }
 
@@ -159,18 +245,18 @@ function serializeAsCallout(input: InputWithValue): ProsemirrorNode {
 // Attributes
 //
 
-function serializeBlockNodeAttributes(input: InputWithValue) {
+function serializeBlockNodeAttributes(input: Input) {
   const { block } = input;
 
   return {
     id: block.id,
     definitionId: block.data.packageId,
-    ...(input.block.data.variantId && { variantId: input.block.data.variantId }),
+    ...(block.data.variantId && { variantId: block.data.variantId }),
   };
 }
 
 function richTextHeadingLevel(property: PageBlockDefinitionProperty): number | undefined {
-  const style = property.options?.style;
+  const style = property.options?.richTextStyle;
   if (!style) return undefined;
 
   switch (style) {
@@ -184,9 +270,6 @@ function richTextHeadingLevel(property: PageBlockDefinitionProperty): number | u
       return 4;
     case "Title5":
       return 5;
-
-    case "OL":
-    case "UL":
     case "Callout":
     case "Default":
     case "Quote":
@@ -194,6 +277,19 @@ function richTextHeadingLevel(property: PageBlockDefinitionProperty): number | u
   }
 }
 
+function serializeCalloutType(calloutType: PageBlockCalloutType) {
+  switch (calloutType) {
+    case "Error":
+      return "error";
+    case "Info":
+      return "neutral";
+    case "Success":
+      return "success";
+    case "Warning":
+      return "warning";
+  }
+}
+
 //
 // Rich text
 //

package/src/docs-editor/mock.ts

@@ -21,7 +21,7 @@ const blocks: PageBlockDefinition[] = [
           description: undefined,
           options: {
             placeholder: "Start writing with plain text",
-            style: "Default",
+            richTextStyle: "Default",
           },
           variantOptions: undefined,
         },
@@ -67,7 +67,7 @@ const blocks: PageBlockDefinition[] = [
           id: "text",
           name: "Text",
           type: "RichText",
-          options: { placeholder: "Title 1", style: "Title1" },
+          options: { placeholder: "Title 1", richTextStyle: "Title1" },
         },
       ],
       appearance: { isBordered: false, hasBackground: false },
@@ -112,7 +112,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           description: undefined,
-          options: { placeholder: "Title 2", style: "Title2" },
+          options: { placeholder: "Title 2", richTextStyle: "Title2" },
           variantOptions: undefined,
         },
       ],
@@ -160,7 +160,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           description: undefined,
-          options: { placeholder: "Title 3", style: "Title3" },
+          options: { placeholder: "Title 3", richTextStyle: "Title3" },
           variantOptions: undefined,
         },
       ],
@@ -208,7 +208,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           description: undefined,
-          options: { placeholder: "Title 4", style: "Title4" },
+          options: { placeholder: "Title 4", richTextStyle: "Title4" },
           variantOptions: undefined,
         },
       ],
@@ -256,7 +256,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           description: undefined,
-          options: { placeholder: "Title 5", style: "Title5" },
+          options: { placeholder: "Title 5", richTextStyle: "Title5" },
           variantOptions: undefined,
         },
       ],
@@ -302,9 +302,9 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "text",
           name: "Text",
-          type: "RichText",
+          type: "MultiRichText",
           description: undefined,
-          options: { style: "OL" },
+          options: { multiRichTextStyle: "OL" },
           variantOptions: undefined,
         },
       ],
@@ -350,9 +350,9 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "text",
           name: "Text",
-          type: "RichText",
+          type: "MultiRichText",
           description: undefined,
-          options: { style: "UL" },
+          options: { multiRichTextStyle: "UL" },
           variantOptions: undefined,
         },
       ],
@@ -448,7 +448,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           description: undefined,
-          options: { placeholder: "Empty quote", style: "Quote" },
+          options: { placeholder: "Empty quote", richTextStyle: "Quote" },
           variantOptions: undefined,
         },
       ],
@@ -496,7 +496,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Text",
           type: "RichText",
           description: undefined,
-          options: { style: "Callout" },
+          options: { richTextStyle: "Callout" },
           variantOptions: undefined,
         },
       ],
@@ -593,7 +593,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Title",
           type: "RichText",
           description: undefined,
-          options: { style: "Title5" },
+          options: { textStyle: "Title5" },
           variantOptions: undefined,
         },
         {
@@ -601,7 +601,7 @@ const blocks: PageBlockDefinition[] = [
           name: "Short description",
           type: "RichText",
           description: undefined,
-          options: { style: "Default", color: "NeutralFaded" },
+          options: { textStyle: "Default", color: "NeutralFaded" },
           variantOptions: undefined,
         },
         {

package/src/docs-editor/utils.ts

@@ -2,6 +2,9 @@ import { PageBlockEditorModel } from "./model/block";
 import {
   PageBlockDefinition,
   PageBlockDefinitionPropertyType,
+  PageBlockItemMultiRichTextPropertyValue,
+  PageBlockItemRichTextPropertyValue,
+  PageBlockItemUntypedPropertyValue,
   PageBlockItemV2,
   PageBlockText,
 } from "@supernova-studio/model";
@@ -14,15 +17,22 @@ export const BlockParsingUtils = {
     return block.data.items[0]!;
   },
 
-  richTextPropertyValue(item: PageBlockItemV2, propertyKey: string) {
+  richTextPropertyValue(item: PageBlockItemV2, propertyKey: string): PageBlockItemRichTextPropertyValue {
     const objectValue = this.objectPropertyValue(item, propertyKey);
-    const richText = PageBlockText.parse(objectValue.value);
+    const richText = PageBlockItemRichTextPropertyValue.parse(objectValue);
+
+    return richText;
+  },
+
+  multiRichTextPropertyValue(item: PageBlockItemV2, propertyKey: string): PageBlockItemMultiRichTextPropertyValue {
+    const objectValue = this.objectPropertyValue(item, propertyKey);
+    const richText = PageBlockItemMultiRichTextPropertyValue.parse(objectValue);
 
     return richText;
   },
 
   objectPropertyValue(item: PageBlockItemV2, propertyKey: string) {
-    const value = this.propertyValue(item, propertyKey);
+    const value = this.propertyValueOrThrow(item, propertyKey);
 
     if (typeof value !== "object") {
       throw new Error(`Value for property ${propertyKey} is expected to be an object, but instead is ${typeof value}`);
@@ -31,16 +41,12 @@ export const BlockParsingUtils = {
     return value;
   },
 
-  propertyValue(item: PageBlockItemV2, propertyKey: string) {
-    const value = this.safePropertyValue(item, propertyKey);
+  propertyValueOrThrow(item: PageBlockItemV2, propertyKey: string): PageBlockItemUntypedPropertyValue {
+    const value = item.props[propertyKey];
     if (!value) throw new Error(`Property ${propertyKey} is not defined on block item`);
 
     return value;
   },
-
-  safePropertyValue(item: PageBlockItemV2, propertyKey: string) {
-    return item.props[propertyKey] ?? undefined;
-  },
 };
 
 export const BlockDefinitionUtils = {
@@ -50,6 +56,12 @@ export const BlockDefinitionUtils = {
     return undefined;
   },
 
+  firstMultiRichTextProperty(definition: PageBlockDefinition) {
+    const property = definition.item.properties.find(p => p.type === "MultiRichText");
+    if (property) return property;
+    return undefined;
+  },
+
   firstTableProperty(definition: PageBlockDefinition) {
     const property = definition.item.properties.find(p => p.type === "RichText");
     if (property) return property;