@supernova-studio/client 0.0.15 → 0.2.0

package/package.json

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

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

@@ -2,34 +2,45 @@ import * as Y from "yjs";
 import {
   PageBlockDefinition,
   PageBlockDefinitionProperty,
-  PageBlockItemV2,
   PageBlockText,
   PageBlockTextSpan,
   PageBlockTextSpanAttribute,
-  PageBlockDefinitionRichTextPropertyStyle,
+  PageBlockItemRichTextPropertyValue,
+  PageBlockCalloutType,
+  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";
 import { pmSchema } from "./prosemirror";
 
-type Input = {
+//
+// Types
+//
+
+type BaseInput = {
   block: PageBlockEditorModel;
   definition: PageBlockDefinition;
-  richTextProperty: PageBlockDefinitionProperty;
 };
 
-type InputWithValue = Input & {
-  richTextPropertyValue: PageBlockText;
+type InputWithProperty = BaseInput & {
+  property: PageBlockDefinitionProperty;
 };
 
+type RichTextInputWithValue = InputWithProperty & {
+  richTextPropertyValue: PageBlockItemRichTextPropertyValue;
+};
+
+type MultiRichTextInputWithValue = InputWithProperty & {
+  multiRichTextPropertyValue: PageBlockItemMultiRichTextPropertyValue;
+};
+
+//
+// Implementation
+//
+
 export function pageToYXmlFragment(
   page: DocumentationPageEditorModel,
   definitions: PageBlockDefinition[],
@@ -65,26 +76,62 @@ export function blockToProsemirrorNode(
   block: PageBlockEditorModel,
   definition: PageBlockDefinition
 ): ProsemirrorNode | null {
+  // Single rich text
   const richTextProperty = BlockDefinitionUtils.firstRichTextProperty(definition);
-
   if (richTextProperty) {
     return serializeAsRichTextBlock({
       block: block,
       definition: definition,
-      richTextProperty: richTextProperty,
+      property: richTextProperty,
+    });
+  }
+
+  // Multi rich text
+  const multiRichTextProperty = BlockDefinitionUtils.firstMultiRichTextProperty(definition);
+  if (multiRichTextProperty) {
+    return serializeAsMultiRichTextBlock({
+      block: block,
+      definition: definition,
+      property: multiRichTextProperty,
+    });
+  }
+
+  // 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);
 }
 
-export function serializeAsRichTextBlock(input: Input): ProsemirrorNode {
-  const { block, definition, richTextProperty } = input;
+//
+// Single rich text blocks
+//
+
+function serializeAsRichTextBlock(input: InputWithProperty): ProsemirrorNode {
+  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 +150,161 @@ 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
+//
+
+function serializeAsMultiRichTextBlock(input: InputWithProperty): ProsemirrorNode {
+  const { block, definition, property: richTextProperty } = input;
+
+  const blockItem = BlockParsingUtils.singleBlockItem(block);
+  const textPropertyValue = BlockParsingUtils.multiRichTextPropertyValue(blockItem, richTextProperty.id);
+
+  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),
+  };
+}
 
-      // TODO Docs: type
-      type: "neutral",
+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),
+      },
+    ],
+  };
+}
+
+//
+// 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),
   };
 }
 
@@ -159,18 +312,18 @@ function serializeAsCallout(input: InputWithValue): ProsemirrorNode {
 // Attributes
 //
 
-function serializeBlockNodeAttributes(input: InputWithValue) {
+function serializeBlockNodeAttributes(input: BaseInput) {
   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 +337,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 +344,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
 //
@@ -255,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

@@ -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,
         },
       ],
@@ -591,17 +591,17 @@ const blocks: PageBlockDefinition[] = [
         {
           id: "block.links.property.title",
           name: "Title",
-          type: "RichText",
+          type: "Text",
           description: undefined,
-          options: { style: "Title5" },
+          options: { textStyle: "Title5" },
           variantOptions: undefined,
         },
         {
           id: "block.links.property.description",
           name: "Short description",
-          type: "RichText",
+          type: "Text",
           description: undefined,
-          options: { style: "Default", color: "NeutralFaded" },
+          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>;
 };