@supernova-studio/client 0.1.0 → 0.2.0

package/package.json

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

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

@@ -2,7 +2,6 @@ import * as Y from "yjs";
 import {
   PageBlockDefinition,
   PageBlockDefinitionProperty,
-  PageBlockItemV2,
   PageBlockText,
   PageBlockTextSpan,
   PageBlockTextSpanAttribute,
@@ -11,12 +10,7 @@ import {
   PageBlockItemMultiRichTextPropertyValue,
 } from "@supernova-studio/model";
 import { PageBlockEditorModel } from "./model/block";
-import {
-  ProsemirrorBlockItem,
-  ProsemirrorBlockItemPropertyValue,
-  ProsemirrorNode,
-  ProsemirrorMark,
-} from "./prosemirror/types";
+import { ProsemirrorNode, ProsemirrorMark } from "./prosemirror/types";
 import { BlockDefinitionUtils, BlockParsingUtils } from "./utils";
 import { DocumentationPageEditorModel } from "./model";
 import { prosemirrorJSONToYXmlFragment } from "y-prosemirror";
@@ -26,17 +20,20 @@ import { pmSchema } from "./prosemirror";
 // Types
 //
 
-type Input = {
+type BaseInput = {
   block: PageBlockEditorModel;
   definition: PageBlockDefinition;
+};
+
+type InputWithProperty = BaseInput & {
   property: PageBlockDefinitionProperty;
 };
 
-type RichTextInputWithValue = Input & {
+type RichTextInputWithValue = InputWithProperty & {
   richTextPropertyValue: PageBlockItemRichTextPropertyValue;
 };
 
-type MultiRichTextInputWithValue = Input & {
+type MultiRichTextInputWithValue = InputWithProperty & {
   multiRichTextPropertyValue: PageBlockItemMultiRichTextPropertyValue;
 };
 
@@ -79,6 +76,7 @@ export function blockToProsemirrorNode(
   block: PageBlockEditorModel,
   definition: PageBlockDefinition
 ): ProsemirrorNode | null {
+  // Single rich text
   const richTextProperty = BlockDefinitionUtils.firstRichTextProperty(definition);
   if (richTextProperty) {
     return serializeAsRichTextBlock({
@@ -88,6 +86,7 @@ export function blockToProsemirrorNode(
     });
   }
 
+  // Multi rich text
   const multiRichTextProperty = BlockDefinitionUtils.firstMultiRichTextProperty(definition);
   if (multiRichTextProperty) {
     return serializeAsMultiRichTextBlock({
@@ -97,6 +96,28 @@ export function blockToProsemirrorNode(
     });
   }
 
+  // Embed
+  const embedProperty = BlockDefinitionUtils.firstEmbedProperty(definition);
+  const embedType = serializeEmbedType(block.data.packageId);
+  if (embedProperty && embedType) {
+    return serializeAsEmbed(
+      {
+        block: block,
+        definition: definition,
+        property: embedProperty,
+      },
+      embedType
+    );
+  }
+
+  // Divider
+  if (block.data.packageId === "io.supernova.block.divider") {
+    return serializeAsDivider({
+      block: block,
+      definition: definition,
+    });
+  }
+
   return serializeAsCustomBlock(block, definition);
 }
 
@@ -104,7 +125,7 @@ export function blockToProsemirrorNode(
 // Single rich text blocks
 //
 
-export function serializeAsRichTextBlock(input: Input): ProsemirrorNode {
+function serializeAsRichTextBlock(input: InputWithProperty): ProsemirrorNode {
   const { block, definition, property: richTextProperty } = input;
 
   const blockItem = BlockParsingUtils.singleBlockItem(block);
@@ -176,7 +197,7 @@ function serializeAsCallout(input: RichTextInputWithValue): ProsemirrorNode {
 // Multi rich text blocks
 //
 
-export function serializeAsMultiRichTextBlock(input: Input): ProsemirrorNode {
+function serializeAsMultiRichTextBlock(input: InputWithProperty): ProsemirrorNode {
   const { block, definition, property: richTextProperty } = input;
 
   const blockItem = BlockParsingUtils.singleBlockItem(block);
@@ -241,11 +262,57 @@ function serializeAsListItem(text: PageBlockText): ProsemirrorNode {
   };
 }
 
+//
+// Embeds
+//
+
+function serializeAsEmbed(input: InputWithProperty, embedType: string): ProsemirrorNode {
+  const { block, definition, property: embedProperty } = input;
+
+  const blockItem = BlockParsingUtils.singleBlockItem(block);
+  const embedValue = BlockParsingUtils.embedPropertyValue(blockItem, embedProperty.id);
+
+  return {
+    type: "embed",
+    attrs: {
+      ...serializeBlockNodeAttributes(input),
+      type: embedType,
+      url: embedValue.value,
+      height: embedValue.height,
+      caption: embedValue.caption,
+    },
+  };
+}
+
+function serializeEmbedType(blockDefinitionId: string): string | undefined {
+  switch (blockDefinitionId) {
+    case "io.supernova.block.embed":
+      return "generic";
+    case "io.supernova.block.embed-youtube":
+      return "youtube";
+    case "io.supernova.block.embed-figma":
+      return "figma";
+  }
+
+  return undefined;
+}
+
+//
+// Divider
+//
+
+function serializeAsDivider(input: BaseInput): ProsemirrorNode {
+  return {
+    type: "horizontalrule",
+    attrs: serializeBlockNodeAttributes(input),
+  };
+}
+
 //
 // Attributes
 //
 
-function serializeBlockNodeAttributes(input: Input) {
+function serializeBlockNodeAttributes(input: BaseInput) {
   const { block } = input;
 
   return {
@@ -351,118 +418,25 @@ function serializeTextSpanAttribute(spanAttribute: PageBlockTextSpanAttribute):
 }
 
 export function serializeAsCustomBlock(block: PageBlockEditorModel, definition: PageBlockDefinition): ProsemirrorNode {
-  const items = block.data.items.map(i => serializeItem(i, block, definition));
+  const items = block.data.items.map(i => {
+    return {
+      id: i.id,
+      props: i.props,
+      linksTo: i.linksTo,
+    };
+  });
 
   return {
     type: "blockNode",
     attrs: {
       id: block.id,
       definitionId: block.data.packageId,
-      variantId: "default",
-      columns: 1,
+      variantId: block.data.variantId,
       items: JSON.stringify(items),
-
-      // TODO Docs: variant, columns
     },
   };
 }
 
-function serializeItem(
-  item: PageBlockItemV2,
-  block: PageBlockEditorModel,
-  definition: PageBlockDefinition
-): ProsemirrorBlockItem {
-  const result: ProsemirrorBlockItem = {
-    properties: [],
-  };
-
-  for (const property of definition.item.properties) {
-    const serializedValue = serializePropertyValue(item, property);
-    serializedValue && result.properties.push(serializedValue);
-  }
-
-  return result;
-}
-
-function serializePropertyValue(
-  item: PageBlockItemV2,
-  property: PageBlockDefinitionProperty
-): ProsemirrorBlockItemPropertyValue | undefined {
-  const value = item.props[property.id] ?? undefined;
-  if (!value) {
-    return undefined;
-  }
-
-  // TODO Docs: actual property serialization
-
-  const result: ProsemirrorBlockItemPropertyValue = {
-    id: property.id,
-    data: {},
-  };
-
-  if (typeof value === "string") {
-    result.data.value = value;
-  }
-
-  return result;
-}
-
 function nonNullFilter<T>(item: T | null): item is T {
   return !!item;
 }
-
-// function serializePropertyValue(item: SDKBlockItem, property: SDKBlockDefinitionProperty) {
-//   switch (property.type) {
-//     case SDK.DocsBlockItemPropertyType.text: return value as string;
-
-//     case SDK.DocsBlockItemPropertyType.richText: return {}
-
-//     case SDK.DocsBlockItemPropertyType.boolean: return {}
-//     case SDK.DocsBlockItemPropertyType.number: return {}
-//     case SDK.DocsBlockItemPropertyType.singleSelect: return {}
-//     case SDK.DocsBlockItemPropertyType.multiSelect: return {}
-//     case SDK.DocsBlockItemPropertyType.image: return {}
-//     case SDK.DocsBlockItemPropertyType.token: return {}
-//     case SDK.DocsBlockItemPropertyType.tokenType: return {}
-//     case SDK.DocsBlockItemPropertyType.tokenProperty: return {}
-//     case SDK.DocsBlockItemPropertyType.component: return {}
-//     case SDK.DocsBlockItemPropertyType.componentProperty: return {}
-//     case SDK.DocsBlockItemPropertyType.asset: return {}
-//     case SDK.DocsBlockItemPropertyType.assetProperty: return {}
-//     case SDK.DocsBlockItemPropertyType.page: return {}
-//     case SDK.DocsBlockItemPropertyType.pageProperty: return {}
-//     case SDK.DocsBlockItemPropertyType.embedURL: return {}
-//     case SDK.DocsBlockItemPropertyType.embedFrame: return {}
-//     case SDK.DocsBlockItemPropertyType.markdown: return {}
-//     case SDK.DocsBlockItemPropertyType.code: return {}
-//     case SDK.DocsBlockItemPropertyType.codeSandbox: return {}
-//     case SDK.DocsBlockItemPropertyType.table: return {}
-//     case SDK.DocsBlockItemPropertyType.divider: return {}
-//     case SDK.DocsBlockItemPropertyType.storybook: return {}
-//   }
-// }
-
-// richText = "RichText",
-// text = "Text",
-// boolean = "Boolean",
-// number = "Number",
-// singleSelect = "SingleSelect",
-// multiSelect = "MultiSelect",
-// image = "Image",
-// token = "Token",
-// tokenType = "TokenType",
-// tokenProperty = "TokenProperty",
-// component = "Component",
-// componentProperty = "ComponentProperty",
-// asset = "Asset",
-// assetProperty = "AssetProperty",
-// page = "Page",
-// pageProperty = "PageProperty",
-// embedURL = "EmbedURL",
-// embedFrame = "EmbedFrame",
-// markdown = "Markdown",
-// code = "Code",
-// codeSandbox = "CodeSandbox",
-// table = "Table",
-// divider = "Divider",
-// storybook = "Storybook"

package/src/docs-editor/mock.ts

@@ -591,7 +591,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "block.links.property.title",
           name: "Title",
-          type: "RichText",
+          type: "Text",
           description: undefined,
           options: { textStyle: "Title5" },
           variantOptions: undefined,
@@ -599,7 +599,7 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "block.links.property.description",
           name: "Short description",
-          type: "RichText",
+          type: "Text",
           description: undefined,
           options: { textStyle: "Default", color: "NeutralFaded" },
           variantOptions: undefined,

package/src/docs-editor/prosemirror/types.ts

@@ -1,3 +1,5 @@
+import { PageBlockItemUntypedPropertyValue } from "@supernova-studio/model";
+
 export type ProsemirrorNode = {
   type: string;
   text?: string;
@@ -12,12 +14,6 @@ export type ProsemirrorMark = {
 };
 
 export type ProsemirrorBlockItem = {
-  properties: ProsemirrorBlockItemPropertyValue[];
-};
-
-export type ProsemirrorBlockItemPropertyValue = {
   id: string;
-  data: {
-    value?: string;
-  };
+  props: Record<string, PageBlockItemUntypedPropertyValue>;
 };

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

@@ -6,6 +6,14 @@ import {
   PageBlockTextSpan,
   PageBlockTextSpanAttribute,
   PageBlockDefinitionProperty,
+  PageBlockCalloutType,
+  PageBlockItemRichTextPropertyValue,
+  PageBlockItemMultiRichTextPropertyValue,
+  PageBlockItemEmbedPropertyValue,
+  PageBlockItemV2,
+  PageBlockItemTextPropertyValue,
+  PageBlockItemUntypedPropertyValue,
+  PageBlockItemImageValue,
 } from "@supernova-studio/model";
 import { PageBlockEditorModel } from "./model/block";
 import { DocumentationPageEditorModel } from "./model/page";
@@ -52,9 +60,27 @@ export function prosemirrorNodeToBlock(
     return parseAsRichText(prosemirrorNode, definition, richTextProperty);
   }
 
+  const multiRichTextProperty = BlockDefinitionUtils.firstMultiRichTextProperty(definition);
+  if (multiRichTextProperty) {
+    return parseAsMultiRichText(prosemirrorNode, definition, multiRichTextProperty);
+  }
+
+  const embedProperty = BlockDefinitionUtils.firstEmbedProperty(definition);
+  if (prosemirrorNode.type === "embed" && embedProperty) {
+    return parseAsEmbed(prosemirrorNode, definition, embedProperty);
+  }
+
+  if (definition.id === "io.supernova.block.divider") {
+    return parseAsDivider(prosemirrorNode, definition);
+  }
+
   return parseAsCustomBlock(prosemirrorNode, definition);
 }
 
+//
+// Single rich text
+//
+
 function parseAsRichText(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition,
@@ -62,21 +88,89 @@ function parseAsRichText(
 ): PageBlockEditorModel {
   const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
   const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+  const calloutType = parseCalloutType(parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "type"));
 
   return {
     // TODO Artem: indent
     id: id,
+
+    ...(variantId && { variantId: variantId }),
+
     data: {
       packageId: definition.id,
       indentLevel: 0,
-      variantId: variantId,
       items: [
         {
           id: id,
           props: {
             [property.id]: {
+              // Required
               value: parseRichText(prosemirrorNode.content ?? []),
-            },
+
+              // Optional
+              ...(calloutType && { calloutType: calloutType }),
+            } satisfies PageBlockItemRichTextPropertyValue,
+          },
+        },
+      ],
+    },
+  };
+}
+
+function parseCalloutType(prosemirrorCalloutType: string | undefined): PageBlockCalloutType | undefined {
+  if (!prosemirrorCalloutType) return undefined;
+
+  switch (prosemirrorCalloutType) {
+    case "error":
+      return "Error";
+    case "neutral":
+      return "Info";
+    case "success":
+      return "Success";
+    case "warning":
+      return "Warning";
+  }
+}
+
+//
+// Multi rich text
+//
+
+function parseAsMultiRichText(
+  prosemirrorNode: ProsemirrorNode,
+  definition: PageBlockDefinition,
+  property: PageBlockDefinitionProperty
+) {
+  const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
+  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+
+  return {
+    // TODO Artem: indent
+    id: id,
+    data: {
+      packageId: definition.id,
+      indentLevel: 0,
+
+      ...(variantId && { variantId: variantId }),
+
+      items: [
+        {
+          id: id,
+          props: {
+            [property.id]: {
+              // Required
+              value: (prosemirrorNode.content ?? [])
+                .map(listItem => {
+                  if (listItem.type !== "listitem") return null;
+                  if (!listItem.content?.length) return parseRichText([]);
+
+                  const paragraph = listItem.content[0];
+                  if (paragraph.type !== "paragraph") return parseRichText([]);
+
+                  return parseRichText(paragraph.content ?? []);
+                })
+                .filter(nonNullFilter),
+            } satisfies PageBlockItemMultiRichTextPropertyValue,
           },
         },
       ],
@@ -84,6 +178,10 @@ function parseAsRichText(
   };
 }
 
+//
+// Rich text
+//
+
 function parseRichText(spans: ProsemirrorNode[]): PageBlockText {
   return {
     spans: spans.map(parseRichTextSpan).filter(nonNullFilter),
@@ -126,6 +224,67 @@ function parseRichTextAttribute(mark: ProsemirrorMark): PageBlockTextSpanAttribu
   return null;
 }
 
+//
+// Embed
+//
+
+function parseAsEmbed(
+  prosemirrorNode: ProsemirrorNode,
+  definition: PageBlockDefinition,
+  property: PageBlockDefinitionProperty
+): PageBlockEditorModel {
+  const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
+  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+
+  const url = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "url");
+  const caption = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "caption");
+  const height = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "height");
+
+  return {
+    id: id,
+    data: {
+      packageId: definition.id,
+      indentLevel: 0,
+
+      ...(variantId && { variantId: variantId }),
+
+      items: [
+        {
+          id: id,
+          props: {
+            [property.id]: {
+              value: url,
+              caption: caption,
+              height: height,
+            } as PageBlockItemEmbedPropertyValue,
+          },
+        },
+      ],
+    },
+  };
+}
+
+//
+// Divider
+//
+
+function parseAsDivider(prosemirrorNode: ProsemirrorNode, definition: PageBlockDefinition): PageBlockEditorModel {
+  const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
+  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+
+  return {
+    id: id,
+    data: {
+      packageId: definition.id,
+      indentLevel: 0,
+
+      ...(variantId && { variantId: variantId }),
+
+      items: [{ id: id, props: {} }],
+    },
+  };
+}
+
 //
 // Custom block
 //
@@ -134,7 +293,71 @@ function parseAsCustomBlock(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition
 ): PageBlockEditorModel | null {
-  return null;
+  const id = parseProsemirrorBlockAttribute(prosemirrorNode, "id");
+  const variantId = parseProsemirrorOptionalBlockAttribute(prosemirrorNode, "variantId");
+
+  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 parsedItems = itemsJson.map(i => parseItem(i, definition));
+
+  return {
+    id: id,
+    data: {
+      packageId: definition.id,
+      indentLevel: 0,
+
+      ...(variantId && { variantId: variantId }),
+
+      items: parsedItems,
+    },
+  };
+}
+
+function parseItem(rawItem: unknown, definition: PageBlockDefinition): PageBlockItemV2 | null {
+  const parsedItem = PageBlockItemV2.safeParse(rawItem);
+  if (!parsedItem.success) {
+    return null;
+  }
+
+  const sanitizedProps: Record<string, PageBlockItemUntypedPropertyValue> = {};
+
+  for (const property of definition.item.properties) {
+    const value = parsedItem.data.props[property.id];
+    if (!value) {
+      return null;
+    }
+
+    // Validate
+    switch (property.type) {
+      case "Text":
+        PageBlockItemTextPropertyValue.parse(value);
+        break;
+
+      case "EmbedURL":
+        PageBlockItemEmbedPropertyValue.parse(value);
+        break;
+
+      case "Image":
+        PageBlockItemImageValue.parse(value);
+        break;
+
+      default:
+        return null;
+    }
+
+    sanitizedProps[property.id] = value;
+  }
+
+  return {
+    id: parsedItem.data.id,
+    linksTo: parsedItem.data.linksTo,
+    props: sanitizedProps,
+  };
 }
 
 //

package/src/docs-editor/utils.ts

@@ -2,6 +2,7 @@ import { PageBlockEditorModel } from "./model/block";
 import {
   PageBlockDefinition,
   PageBlockDefinitionPropertyType,
+  PageBlockItemEmbedPropertyValue,
   PageBlockItemMultiRichTextPropertyValue,
   PageBlockItemRichTextPropertyValue,
   PageBlockItemUntypedPropertyValue,
@@ -31,6 +32,13 @@ export const BlockParsingUtils = {
     return richText;
   },
 
+  embedPropertyValue(item: PageBlockItemV2, propertyKey: string): PageBlockItemEmbedPropertyValue {
+    const objectValue = this.objectPropertyValue(item, propertyKey);
+    const embed = PageBlockItemEmbedPropertyValue.parse(objectValue);
+
+    return embed;
+  },
+
   objectPropertyValue(item: PageBlockItemV2, propertyKey: string) {
     const value = this.propertyValueOrThrow(item, propertyKey);
 
@@ -68,6 +76,12 @@ export const BlockDefinitionUtils = {
     return undefined;
   },
 
+  firstEmbedProperty(definition: PageBlockDefinition) {
+    const property = definition.item.properties.find(p => p.type === "EmbedURL");
+    if (property) return property;
+    return undefined;
+  },
+
   richTextProperty(definition: PageBlockDefinition, propertyKey: string) {
     return this.property(definition, propertyKey, "RichText");
   },