@supernova-studio/client 0.0.15 → 0.2.0

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,10 @@ import { PageBlockEditorModel } from "./model/block";
 import {
   PageBlockDefinition,
   PageBlockDefinitionPropertyType,
+  PageBlockItemEmbedPropertyValue,
+  PageBlockItemMultiRichTextPropertyValue,
+  PageBlockItemRichTextPropertyValue,
+  PageBlockItemUntypedPropertyValue,
   PageBlockItemV2,
   PageBlockText,
 } from "@supernova-studio/model";
@@ -14,15 +18,29 @@ 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;
+  },
+
+  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.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 +49,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,12 +64,24 @@ 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;
     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");
   },