@supernova-studio/client 0.3.0 → 0.4.1

package/package.json

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

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

@@ -8,6 +8,8 @@ import {
   PageBlockItemRichTextValue,
   PageBlockCalloutType,
   PageBlockItemMultiRichTextValue,
+  PageBlockTableCellAlignment,
+  PageBlockItemTableNode,
 } from "@supernova-studio/model";
 import { PageBlockEditorModel } from "./model/block";
 import { ProsemirrorNode, ProsemirrorMark } from "./prosemirror/types";
@@ -96,6 +98,15 @@ export function blockToProsemirrorNode(
     });
   }
 
+  const tableProperty = BlockDefinitionUtils.firstTableProperty(definition);
+  if (tableProperty) {
+    return serializeAsTable({
+      block: block,
+      definition: definition,
+      property: tableProperty,
+    });
+  }
+
   // Embed
   const embedProperty = BlockDefinitionUtils.firstEmbedProperty(definition);
   const embedType = serializeEmbedType(block.data.packageId);
@@ -157,7 +168,7 @@ function serializeAsParagraph(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "paragraph",
     attrs: serializeBlockNodeAttributes(input),
-    content: serializeRichText(input.richTextPropertyValue.value),
+    ...serializeRichTextNodePart(input.richTextPropertyValue.value),
   };
 }
 
@@ -168,7 +179,7 @@ function serializeAsHeading(input: RichTextInputWithValue): ProsemirrorNode {
       ...serializeBlockNodeAttributes(input),
       level: richTextHeadingLevel(input.property),
     },
-    content: serializeRichText(input.richTextPropertyValue.value),
+    ...serializeRichTextNodePart(input.richTextPropertyValue.value),
   };
 }
 
@@ -176,7 +187,7 @@ function serializeAsBlockquote(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "blockquote",
     attrs: serializeBlockNodeAttributes(input),
-    content: serializeRichText(input.richTextPropertyValue.value),
+    ...serializeRichTextNodePart(input.richTextPropertyValue.value),
   };
 }
 
@@ -189,7 +200,7 @@ function serializeAsCallout(input: RichTextInputWithValue): ProsemirrorNode {
       ...serializeBlockNodeAttributes(input),
       type: serializeCalloutType(calloutType),
     },
-    content: serializeRichText(input.richTextPropertyValue.value),
+    ...serializeRichTextNodePart(input.richTextPropertyValue.value),
   };
 }
 
@@ -262,6 +273,91 @@ function serializeAsListItem(text: PageBlockText): ProsemirrorNode {
   };
 }
 
+//
+// Tables
+//
+
+function serializeAsTable(input: InputWithProperty): ProsemirrorNode {
+  const { block, definition, property: tableProperty } = input;
+
+  const blockItem = BlockParsingUtils.singleBlockItem(block);
+  const table = BlockParsingUtils.tablePropertyValue(blockItem, tableProperty.id);
+
+  return {
+    type: "tableContainer",
+    attrs: {
+      ...serializeBlockNodeAttributes(input),
+      hasBorder: table.showBorder ?? true,
+    },
+
+    content: [
+      {
+        type: "table",
+        content: table.value.map<ProsemirrorNode>((row, rowIndex) => {
+          const isHeaderRow = rowIndex === 0 && table.highlightHeaderRow === true;
+
+          return {
+            type: "tableRow",
+            content: row.cells.map<ProsemirrorNode>((cell, cellIndex) => {
+              const isHeaderColumn = cellIndex === 0 && table.highlightHeaderColumn === true;
+
+              return {
+                type: isHeaderRow || isHeaderColumn ? "tableHeader" : "tableCell",
+                attrs: {
+                  id: cell.id,
+                  textAlign: serializeTableCellAlignment(cell.alignment),
+                  colspan: 1,
+                  rowspan: 1,
+                  ...(cell.columnWidth && { colwidth: [cell.columnWidth] }),
+                },
+                content: cell.nodes.map<ProsemirrorNode>(serializeTableNode),
+              };
+            }),
+          };
+        }),
+      },
+    ],
+  };
+}
+
+function serializeTableCellAlignment(alignment: PageBlockTableCellAlignment) {
+  switch (alignment) {
+    case "Left":
+      return "left";
+    case "Center":
+      return "center";
+    case "Right":
+      return "right";
+
+    default:
+      return "left";
+  }
+}
+
+function serializeTableNode(node: PageBlockItemTableNode): ProsemirrorNode {
+  switch (node.type) {
+    case "RichText":
+      return {
+        type: "paragraph",
+        ...serializeRichTextNodePart(node.value),
+      };
+
+    case "Image":
+      return {
+        type: "image",
+        attrs: {
+          src: node.value?.url,
+        },
+      };
+
+    case "MultiRichText":
+      // TODO
+      return {
+        type: "paragraph",
+      };
+  }
+}
+
 //
 // Embeds
 //
@@ -361,6 +457,12 @@ function serializeCalloutType(calloutType: PageBlockCalloutType) {
 // Rich text
 //
 
+function serializeRichTextNodePart(richText: PageBlockText): Pick<ProsemirrorNode, "content"> {
+  const spans = serializeRichText(richText);
+  if (spans.length) return { content: spans };
+  return {};
+}
+
 function serializeRichText(richText: PageBlockText) {
   return richText.spans.map(serializeTextSpan).flat();
 }
@@ -373,7 +475,8 @@ function serializeTextSpan(span: PageBlockTextSpan): ProsemirrorNode[] {
     {
       type: "text",
       text: textParts[0],
-      marks: marks,
+
+      ...(marks.length && { marks: marks }),
     },
   ];
 
@@ -385,7 +488,8 @@ function serializeTextSpan(span: PageBlockTextSpan): ProsemirrorNode[] {
       {
         type: "text",
         text: textParts[i],
-        marks: marks,
+
+        ...(marks.length && { marks: marks }),
       }
     );
   }

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

@@ -34,6 +34,9 @@ import {
   PageBlockItemStorybookValue,
   PageBlockItemColorValue,
   PageBlockItemUntypedValue,
+  PageBlockItemTableNode,
+  PageBlockItemTableCell,
+  PageBlockTableCellAlignment,
 } from "@supernova-studio/model";
 import { PageBlockEditorModel } from "./model/block";
 import { DocumentationPageEditorModel } from "./model/page";
@@ -90,6 +93,11 @@ export function prosemirrorNodeToBlock(
     return parseAsEmbed(prosemirrorNode, definition, embedProperty);
   }
 
+  const tableProperty = BlockDefinitionUtils.firstTableProperty(definition);
+  if (tableProperty) {
+    return parseAsTable(prosemirrorNode, definition, tableProperty);
+  }
+
   if (definition.id === "io.supernova.block.divider") {
     return parseAsDivider(prosemirrorNode, definition);
   }
@@ -248,6 +256,180 @@ function parseRichTextAttribute(mark: ProsemirrorMark): PageBlockTextSpanAttribu
 // Embed
 //
 
+function parseAsTable(
+  prosemirrorNode: ProsemirrorNode,
+  definition: PageBlockDefinition,
+  property: PageBlockDefinitionProperty
+): PageBlockEditorModel {
+  const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
+  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+
+  const hasBorder = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "hasBorder") !== false;
+
+  const tableChild = prosemirrorNode.content?.find(c => c.type === "table");
+  if (!tableChild) {
+    return emptyTable(id, variantId, 0);
+  }
+
+  // Nodes can are considered rows if they have correct node type + their content is non-empty
+  const rows = tableChild.content?.filter(c => c.type === "tableRow" && !!c.content?.length) ?? [];
+  if (!rows.length) {
+    return emptyTable(id, variantId, 0);
+  }
+
+  const rowHeaderCells = rows[0].content?.filter(c => c.type === "tableHeader").length ?? 0;
+  const columnHeaderCells = rows.filter(r => r.content?.[0]?.type === "tableHeader").length;
+
+  const hasHeaderRow = rows[0].content?.length === rowHeaderCells;
+  const hasHeaderColumn = rows.length === columnHeaderCells;
+
+  const tableValue: PageBlockItemTableValue = {
+    showBorder: hasBorder,
+    highlightHeaderRow: hasHeaderRow,
+    highlightHeaderColumn: hasHeaderColumn,
+    value: [],
+  };
+
+  tableValue.value = rows.map(row => {
+    return {
+      cells: (row.content ?? []).map(parseAsTableCell),
+    };
+  });
+
+  return {
+    id: id,
+    data: {
+      packageId: "io.supernova.block.table",
+      indentLevel: 0,
+
+      ...(variantId && { variantId: variantId }),
+
+      items: [
+        {
+          id: id,
+          props: {
+            table: tableValue,
+          },
+        },
+      ],
+    },
+  };
+}
+
+function parseAsTableCell(prosemirrorNode: ProsemirrorNode): PageBlockItemTableCell {
+  const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
+  const textAlign = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "textAlign");
+
+  let columnWidth: number | undefined;
+  const columnWidthArray = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "colwidth");
+  if (Array.isArray(columnWidthArray) && typeof columnWidthArray[0] === "number") {
+    columnWidth = columnWidthArray[0];
+  }
+
+  const tableNodes = (prosemirrorNode.content ?? []).map(parseAsTableNode).filter(nonNullFilter);
+
+  return {
+    id: id,
+    alignment: parseTableCellAlignment(textAlign),
+    ...(columnWidth && { columnWidth }),
+    nodes: tableNodes.length ? tableNodes : emptyTableCellContent(),
+  };
+}
+
+function parseTableCellAlignment(alignment?: string): PageBlockTableCellAlignment {
+  if (!alignment) return "Left";
+
+  switch (alignment) {
+    case "left":
+      return "Left";
+    case "center":
+      return "Center";
+    case "right":
+      return "Right";
+
+    default:
+      return "Left";
+  }
+}
+
+function parseAsTableNode(prosemirrorNode: ProsemirrorNode): PageBlockItemTableNode | null {
+  switch (prosemirrorNode.type) {
+    case "paragraph":
+      return {
+        type: "RichText",
+        value: parseRichText(prosemirrorNode.content ?? []),
+      };
+
+    case "image":
+      const url = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "src");
+      if (!url || typeof url !== "string") return null;
+
+      return {
+        type: "Image",
+        value: {
+          type: "Upload",
+          url: url,
+        },
+      };
+
+    default:
+      return null;
+  }
+}
+
+function emptyTable(id: string, variantId?: string, indentLevel?: number): PageBlockEditorModel {
+  const tableValue: PageBlockItemTableValue = {
+    showBorder: true,
+    highlightHeaderColumn: false,
+    highlightHeaderRow: false,
+    value: [],
+  };
+
+  for (let i = 0; i < 2; i++) {
+    tableValue.value.push({
+      cells: [],
+    });
+
+    for (let j = 0; j < 3; j++) {
+      tableValue.value[i].cells.push({
+        id: "",
+        alignment: "Left",
+        nodes: emptyTableCellContent(),
+      });
+    }
+  }
+
+  return {
+    id: id,
+    data: {
+      packageId: "io.supernova.block.table",
+      indentLevel: indentLevel ?? 0,
+      variantId: variantId,
+      items: [
+        {
+          id: id,
+          props: {
+            table: tableValue,
+          },
+        },
+      ],
+    },
+  };
+}
+
+function emptyTableCellContent(): PageBlockItemTableNode[] {
+  return [
+    {
+      type: "RichText",
+      value: { spans: [] },
+    },
+  ];
+}
+
+//
+// Embed
+//
+
 function parseAsEmbed(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition,
@@ -357,6 +539,8 @@ function parseItem(rawItem: unknown, definition: PageBlockDefinition): PageBlock
 
     if (validationResult.success) {
       sanitizedProps[property.id] = validationResult.data;
+    } else {
+      console.log(validationResult.error.flatten());
     }
   }
 
@@ -427,7 +611,7 @@ function valueSchemaForPropertyType(type: PageBlockDefinitionPropertyType) {
 function parseProsemirrorBlockAttribute(prosemirrorNode: ProsemirrorNode, attributeName: string) {
   const attributeValue = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, attributeName); //prosemirrorNode.attrs?.[attributeName];
   if (!attributeValue) {
-    throw new Error(`Attribute ${attributeName} was not defined`);
+    throw new Error(`Attribute ${attributeName} was not defined on node ${prosemirrorNode.type}`);
   }
 
   return attributeValue;

package/src/docs-editor/utils.ts

@@ -5,6 +5,7 @@ import {
   PageBlockItemEmbedValue,
   PageBlockItemMultiRichTextValue,
   PageBlockItemRichTextValue,
+  PageBlockItemTableValue,
   PageBlockItemUntypedValue,
   PageBlockItemV2,
   PageBlockText,
@@ -32,6 +33,13 @@ export const BlockParsingUtils = {
     return richText;
   },
 
+  tablePropertyValue(item: PageBlockItemV2, propertyKey: string): PageBlockItemTableValue {
+    const objectValue = this.objectPropertyValue(item, propertyKey);
+    const table = PageBlockItemTableValue.parse(objectValue);
+
+    return table;
+  },
+
   embedPropertyValue(item: PageBlockItemV2, propertyKey: string): PageBlockItemEmbedValue {
     const objectValue = this.objectPropertyValue(item, propertyKey);
     const embed = PageBlockItemEmbedValue.parse(objectValue);
@@ -71,7 +79,7 @@ export const BlockDefinitionUtils = {
   },
 
   firstTableProperty(definition: PageBlockDefinition) {
-    const property = definition.item.properties.find(p => p.type === "RichText");
+    const property = definition.item.properties.find(p => p.type === "Table");
     if (property) return property;
     return undefined;
   },