@supernova-studio/client 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supernova-studio/client",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Supernova Data Models",
   "source": "src/index.ts",
   "main": "dist/index.js",

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

@@ -560,6 +560,7 @@ export function serializeAsCustomBlock(block: PageBlockEditorModel, definition:
       definitionId: block.data.packageId,
       variantId: block.data.variantId,
       items: JSON.stringify(items),
+      appearance: JSON.stringify(block.data.appearance),
     },
   };
 }

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

@@ -38,6 +38,9 @@ import {
   PageBlockItemTableCell,
   PageBlockTableCellAlignment,
   DocumentationItemConfiguration,
+  PageBlockAppearanceV2,
+  PageBlockEditorModelV2,
+  ColorValue,
 } from "@supernova-studio/model";
 import { PageBlockEditorModel } from "./model/block";
 import { DocumentationPageEditorModel } from "./model/page";
@@ -65,7 +68,7 @@ export function prosemirrorDocToPage(
   return {
     blocks: (prosemirrorDoc.content ?? [])
       .map(prosemirrorNode => {
-        const definitionId = prosemirrorNode.attrs?.definitionId;
+        const definitionId = parseProsemirrorBlockAttribute(prosemirrorNode, "definitionId");
         if (!definitionId) throw new Error(`Node is missing defintion id`);
         if (typeof definitionId !== "string")
           throw new Error(`Definition id is ${typeof definitionId}, has to be string`);
@@ -118,9 +121,13 @@ function parseAsRichText(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition,
   property: PageBlockDefinitionProperty
-): PageBlockEditorModel {
+): PageBlockEditorModel | null {
   const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
-  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  if (typeof id !== "string") return null;
+
+  const variantIdRaw = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  const variantId = typeof variantIdRaw === "string" ? variantIdRaw : undefined;
+
   const calloutType = parseCalloutType(parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "type"));
 
   return {
@@ -150,7 +157,7 @@ function parseAsRichText(
   };
 }
 
-function parseCalloutType(prosemirrorCalloutType: string | undefined): PageBlockCalloutType | undefined {
+function parseCalloutType(prosemirrorCalloutType: unknown): PageBlockCalloutType | undefined {
   if (!prosemirrorCalloutType) return undefined;
 
   switch (prosemirrorCalloutType) {
@@ -173,9 +180,12 @@ function parseAsMultiRichText(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition,
   property: PageBlockDefinitionProperty
-) {
+): PageBlockEditorModel | null {
   const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
-  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  if (typeof id !== "string") return null;
+
+  const variantIdRaw = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  const variantId = typeof variantIdRaw === "string" ? variantIdRaw : undefined;
 
   return {
     // TODO Artem: indent
@@ -243,8 +253,11 @@ function parseRichTextAttribute(mark: ProsemirrorMark): PageBlockTextSpanAttribu
     case "code":
       return { type: "Code" };
     case "link":
-      const itemId = mark.attrs?.itemId;
-      const href = mark.attrs?.href;
+      const itemIdRaw = parseProsemirrorBlockAttribute(mark, "itemId");
+      const itemId = typeof itemIdRaw === "string" ? itemIdRaw : undefined;
+
+      const hrefRaw = parseProsemirrorBlockAttribute(mark, "href");
+      const href = typeof hrefRaw === "string" ? hrefRaw : undefined;
 
       return {
         type: "Link",
@@ -265,9 +278,12 @@ function parseAsTable(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition,
   property: PageBlockDefinitionProperty
-): PageBlockEditorModel {
+): PageBlockEditorModel | null {
   const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
-  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  if (typeof id !== "string") return null;
+
+  const variantIdRaw = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  const variantId = typeof variantIdRaw === "string" ? variantIdRaw : undefined;
 
   const hasBorder = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "hasBorder") !== false;
 
@@ -297,7 +313,7 @@ function parseAsTable(
 
   tableValue.value = rows.map(row => {
     return {
-      cells: (row.content ?? []).map(parseAsTableCell),
+      cells: (row.content ?? []).map(parseAsTableCell).filter(nonNullFilter),
     };
   });
 
@@ -321,8 +337,10 @@ function parseAsTable(
   };
 }
 
-function parseAsTableCell(prosemirrorNode: ProsemirrorNode): PageBlockItemTableCell {
+function parseAsTableCell(prosemirrorNode: ProsemirrorNode): PageBlockItemTableCell | null {
   const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
+  if (typeof id !== "string") return null;
+
   const textAlign = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "textAlign");
 
   let columnWidth: number | undefined;
@@ -341,7 +359,7 @@ function parseAsTableCell(prosemirrorNode: ProsemirrorNode): PageBlockItemTableC
   };
 }
 
-function parseTableCellAlignment(alignment?: string): PageBlockTableCellAlignment {
+function parseTableCellAlignment(alignment: unknown): PageBlockTableCellAlignment {
   if (!alignment) return "Left";
 
   switch (alignment) {
@@ -439,9 +457,12 @@ function parseAsEmbed(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition,
   property: PageBlockDefinitionProperty
-): PageBlockEditorModel {
+): PageBlockEditorModel | null {
   const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
-  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  if (typeof id !== "string") return null;
+
+  const variantIdRaw = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  const variantId = typeof variantIdRaw === "string" ? variantIdRaw : undefined;
 
   const url = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "url");
   const caption = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "caption");
@@ -475,9 +496,15 @@ function parseAsEmbed(
 // Divider
 //
 
-function parseAsDivider(prosemirrorNode: ProsemirrorNode, definition: PageBlockDefinition): PageBlockEditorModel {
+function parseAsDivider(
+  prosemirrorNode: ProsemirrorNode,
+  definition: PageBlockDefinition
+): PageBlockEditorModel | null {
   const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
-  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  if (typeof id !== "string") return null;
+
+  const variantIdRaw = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  const variantId = typeof variantIdRaw === "string" ? variantIdRaw : undefined;
 
   return {
     id: id,
@@ -501,16 +528,14 @@ function parseAsCustomBlock(
   definition: PageBlockDefinition
 ): PageBlockEditorModel | null {
   const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
-  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  if (typeof id !== "string") return null;
 
-  const itemsString = parseProsemirrorBlockAttribute(prosemirrorNode, "items");
-  const itemsJson = JSON.parse(itemsString);
-  if (!Array.isArray(itemsJson)) {
-    console.error("Block `items` property must be a json array");
-    return null;
-  }
+  const variantIdRaw = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  const variantId = typeof variantIdRaw === "string" ? variantIdRaw : undefined;
 
-  const parsedItems = itemsJson.map(i => parseItem(i, definition)).filter(nonNullFilter);
+  const appearance = parseAppearance(prosemirrorNode);
+  const parsedItems = parseBlockItems(prosemirrorNode, definition);
+  if (!parsedItems) return null;
 
   return {
     id: id,
@@ -520,11 +545,45 @@ function parseAsCustomBlock(
 
       ...(variantId && { variantId: variantId }),
 
+      appearance: appearance,
+
       items: parsedItems,
     },
   };
 }
 
+function parseBlockItems(prosemirrorNode: ProsemirrorNode, definition: PageBlockDefinition): PageBlockItemV2[] | null {
+  const itemsString = parseProsemirrorBlockAttribute(prosemirrorNode, "items");
+  if (typeof itemsString !== "string") return null;
+
+  const itemsJson: unknown = JSON.parse(itemsString);
+  if (!Array.isArray(itemsJson)) {
+    console.error("Block `items` property must be a json array");
+    return null;
+  }
+
+  return itemsJson.map(i => parseItem(i, definition)).filter(nonNullFilter);
+}
+
+function parseAppearance(prosemirrorNode: ProsemirrorNode): PageBlockAppearanceV2 {
+  const appearance: PageBlockAppearanceV2 = {};
+
+  const columns: unknown = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "columns");
+  if (typeof columns === "number") {
+    appearance.numberOfColumns = columns;
+  }
+
+  const backgroundColor: unknown = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "backgroundColor");
+  if (typeof backgroundColor === "string") {
+    const parsedColor = ColorValue.safeParse(JSON.parse(backgroundColor));
+    if (parsedColor.success) {
+      appearance.itemBackgroundColor = parsedColor.data;
+    }
+  }
+
+  return appearance;
+}
+
 function parseItem(rawItem: unknown, definition: PageBlockDefinition): PageBlockItemV2 | null {
   const parsedItem = PageBlockItemV2.safeParse(rawItem);
   if (!parsedItem.success) {
@@ -613,8 +672,8 @@ function valueSchemaForPropertyType(type: PageBlockDefinitionPropertyType) {
 // Attributes
 //
 
-function parseProsemirrorBlockAttribute(prosemirrorNode: ProsemirrorNode, attributeName: string) {
-  const attributeValue = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, attributeName); //prosemirrorNode.attrs?.[attributeName];
+function parseProsemirrorBlockAttribute(prosemirrorNode: ProsemirrorNode, attributeName: string): unknown {
+  const attributeValue = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, attributeName);
   if (!attributeValue) {
     throw new Error(`Attribute ${attributeName} was not defined on node ${prosemirrorNode.type}`);
   }
@@ -622,7 +681,7 @@ function parseProsemirrorBlockAttribute(prosemirrorNode: ProsemirrorNode, attrib
   return attributeValue;
 }
 
-function parseProsemirrorOptionalBlockAttribute(prosemirrorNode: ProsemirrorNode, attributeName: string) {
+function parseProsemirrorOptionalBlockAttribute(prosemirrorNode: ProsemirrorNode, attributeName: string): unknown {
   return prosemirrorNode.attrs?.[attributeName] ?? undefined;
 }