@supernova-studio/client 0.25.0 → 0.26.0

package/package.json

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

package/src/api/dto/elements/documentation/group-action.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import {
   DTOCreateDocumentationGroupInput,
-  DTOCreateDocumentationTabGroupInput,
+  DTOCreateDocumentationTabInput,
   DTODeleteDocumentationGroupInput,
   DTODeleteDocumentationTabGroupInput,
   DTODuplicateDocumentationGroupInput,
@@ -22,8 +22,8 @@ export const DTODocumentationGroupCreateActionOutputV2 = z.object({
   output: SuccessPayload,
 });
 
-export const DTODocumentationTabGroupCreateActionOutputV2 = z.object({
-  type: z.literal("DocumentationTabGroupCreate"),
+export const DTODocumentationTabCreateActionOutputV2 = z.object({
+  type: z.literal("DocumentationTabCreate"),
   output: SuccessPayload,
 });
 
@@ -53,7 +53,7 @@ export const DTODocumentationTabGroupDeleteActionOutputV2 = z.object({
 });
 
 export type DTODocumentationGroupCreateActionOutputV2 = z.infer<typeof DTODocumentationGroupCreateActionOutputV2>;
-export type DTODocumentationTabGroupCreateActionOutputV2 = z.infer<typeof DTODocumentationTabGroupCreateActionOutputV2>;
+export type DTODocumentationTabCreateActionOutputV2 = z.infer<typeof DTODocumentationTabCreateActionOutputV2>;
 export type DTODocumentationGroupUpdateActionOutputV2 = z.infer<typeof DTODocumentationGroupUpdateActionOutputV2>;
 export type DTODocumentationGroupMoveActionOutputV2 = z.infer<typeof DTODocumentationGroupMoveActionOutputV2>;
 export type DTODocumentationGroupDuplicateActionOutputV2 = z.infer<typeof DTODocumentationGroupDuplicateActionOutputV2>;
@@ -69,9 +69,9 @@ export const DTODocumentationGroupCreateActionInputV2 = z.object({
   input: DTOCreateDocumentationGroupInput,
 });
 
-export const DTODocumentationTabGroupCreateActionInputV2 = z.object({
-  type: z.literal("DocumentationTabGroupCreate"),
-  input: DTOCreateDocumentationTabGroupInput,
+export const DTODocumentationTabCreateActionInputV2 = z.object({
+  type: z.literal("DocumentationTabCreate"),
+  input: DTOCreateDocumentationTabInput,
 });
 
 export const DTODocumentationGroupUpdateActionInputV2 = z.object({
@@ -100,7 +100,7 @@ export const DTODocumentationTabGroupDeleteActionInputV2 = z.object({
 });
 
 export type DTODocumentationGroupCreateActionInputV2 = z.infer<typeof DTODocumentationGroupCreateActionInputV2>;
-export type DTODocumentationTabGroupCreateActionInputV2 = z.infer<typeof DTODocumentationTabGroupCreateActionInputV2>;
+export type DTODocumentationTabGroupCreateActionInputV2 = z.infer<typeof DTODocumentationTabCreateActionInputV2>;
 export type DTODocumentationGroupUpdateActionInputV2 = z.infer<typeof DTODocumentationGroupUpdateActionInputV2>;
 export type DTODocumentationGroupMoveActionInputV2 = z.infer<typeof DTODocumentationGroupMoveActionInputV2>;
 export type DTODocumentationGroupDuplicateActionInputV2 = z.infer<typeof DTODocumentationGroupDuplicateActionInputV2>;

package/src/api/dto/elements/documentation/group.ts

@@ -80,12 +80,12 @@ export const DTODuplicateDocumentationGroupInput = z.object({
   parentPersistentId: z.string().uuid(),
 });
 
-export const DTOCreateDocumentationTabGroupInput = z.object({
+export const DTOCreateDocumentationTabInput = z.object({
   // New group persistent id
   persistentId: z.string().uuid(),
 
   // Page that will become first tab of the tab group
-  fromPageId: z.string(),
+  fromPagePersistentId: z.string(),
   tabName: z.string(),
 });
 
@@ -106,6 +106,6 @@ export type DTOCreateDocumentationGroupInput = z.infer<typeof DTOCreateDocumenta
 export type DTOUpdateDocumentationGroupInput = z.infer<typeof DTOUpdateDocumentationGroupInput>;
 export type DTOMoveDocumentationGroupInput = z.infer<typeof DTOMoveDocumentationGroupInput>;
 export type DTODuplicateDocumentationGroupInput = z.infer<typeof DTODuplicateDocumentationGroupInput>;
-export type DTOCreateDocumentationTabGroupInput = z.infer<typeof DTOCreateDocumentationTabGroupInput>;
+export type DTOCreateDocumentationTabInput = z.infer<typeof DTOCreateDocumentationTabInput>;
 export type DTODeleteDocumentationTabGroupInput = z.infer<typeof DTODeleteDocumentationTabGroupInput>;
 export type DTODeleteDocumentationGroupInput = z.infer<typeof DTODeleteDocumentationGroupInput>;

package/src/api/dto/elements/elements-action-v2.ts

@@ -22,8 +22,8 @@ import {
   DTODocumentationGroupMoveActionOutputV2,
   DTODocumentationGroupUpdateActionInputV2,
   DTODocumentationGroupUpdateActionOutputV2,
-  DTODocumentationTabGroupCreateActionInputV2,
-  DTODocumentationTabGroupCreateActionOutputV2,
+  DTODocumentationTabCreateActionInputV2,
+  DTODocumentationTabCreateActionOutputV2,
   DTODocumentationTabGroupDeleteActionInputV2,
   DTODocumentationTabGroupDeleteActionOutputV2,
 } from "./documentation/group-action";
@@ -43,7 +43,7 @@ export const DTOElementActionOutput = z.discriminatedUnion("type", [
 
   // Documentation groups
   DTODocumentationGroupCreateActionOutputV2,
-  DTODocumentationTabGroupCreateActionOutputV2,
+  DTODocumentationTabCreateActionOutputV2,
   DTODocumentationGroupUpdateActionOutputV2,
   DTODocumentationGroupMoveActionOutputV2,
   DTODocumentationGroupDuplicateActionOutputV2,
@@ -70,7 +70,7 @@ export const DTOElementActionInput = z.discriminatedUnion("type", [
 
   // Documentation groups
   DTODocumentationGroupCreateActionInputV2,
-  DTODocumentationTabGroupCreateActionInputV2,
+  DTODocumentationTabCreateActionInputV2,
   DTODocumentationGroupUpdateActionInputV2,
   DTODocumentationGroupMoveActionInputV2,
   DTODocumentationGroupDuplicateActionInputV2,

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

@@ -16,8 +16,12 @@ import {
   PageBlockDefinitionRichTextOptions,
   PageBlockDefinitionMutiRichTextOptions,
   PageBlockItemImageValue,
+  SupernovaException,
+  PageSectionItemV2,
+  PageSectionColumnV2,
+  mapByUnique,
 } from "@supernova-studio/model";
-import { PageBlockEditorModel } from "./model/block";
+import { PageBlockEditorModel, PageSectionEditorModel } from "./model/block";
 import { ProsemirrorNode, ProsemirrorMark } from "./prosemirror/types";
 import { BlockDefinitionUtils, BlockParsingUtils } from "./utils";
 import { DocumentationPageEditorModel } from "./model";
@@ -62,12 +66,18 @@ export function pageToProsemirrorDoc(
   page: DocumentationPageEditorModel,
   definitions: PageBlockDefinition[]
 ): ProsemirrorNode {
+  const definitionsMap = mapByUnique(definitions, d => d.id);
+
   return {
     type: "doc",
     content: page.blocks
       .map(b => {
-        const definition = blockDefinitionForBlock(b, definitions);
-        return blockToProsemirrorNode(b, definition);
+        switch (b.type) {
+          case "Block":
+            return blockToProsemirrorNode(b, blockDefinitionForBlock(b, definitions));
+          case "Section":
+            return internalSectionToProsemirrorNode(b, definitionsMap);
+        }
       })
       .filter(nonNullFilter),
   };
@@ -82,6 +92,88 @@ export function blockDefinitionForBlock(block: PageBlockEditorModel, definitions
   return definition;
 }
 
+//
+// Sections
+//
+
+export function sectionToProsemirrorNode(
+  section: PageSectionEditorModel,
+  definitions: PageBlockDefinition[]
+): ProsemirrorNode {
+  const definitionsMap = mapByUnique(definitions, d => d.id);
+  return internalSectionToProsemirrorNode(section, definitionsMap);
+}
+
+function internalSectionToProsemirrorNode(
+  section: PageSectionEditorModel,
+  definitionsMap: Map<string, PageBlockDefinition>
+): ProsemirrorNode {
+  return {
+    type: "tabsSection",
+    attrs: {
+      id: section.id,
+      ...(section.variantId && { variantId: section.variantId }),
+    },
+    content: section.items.map(item => sectionItemToProsemirrorNode(item, definitionsMap)),
+  };
+}
+
+function sectionItemToProsemirrorNode(
+  sectionItem: PageSectionItemV2,
+  definitionsMap: Map<string, PageBlockDefinition>
+): ProsemirrorNode {
+  return {
+    type: "sectionItem",
+    attrs: {
+      id: sectionItem.id,
+      title: sectionItem.title,
+    },
+    content: sectionItem.columns.map(column => sectionColumnToProsemirrorNode(column, definitionsMap)),
+  };
+}
+
+function sectionColumnToProsemirrorNode(
+  sectionColumn: PageSectionColumnV2,
+  definitionsMap: Map<string, PageBlockDefinition>
+): ProsemirrorNode {
+  const blocks = sectionColumn.blocks
+    .map(block => {
+      return internalBlockToProsemirrorNode(block, definitionsMap);
+    })
+    .filter(nonNullFilter);
+
+  if (!blocks.length) {
+    blocks.push({
+      type: "paragraph",
+      attrs: {
+        id: "id",
+        definitionId: "io.supernova.block.rich-text",
+      },
+    });
+  }
+
+  return {
+    type: "sectionItemColumn",
+    attrs: {
+      id: sectionColumn.id,
+    },
+    content: blocks,
+  };
+}
+
+//
+// Blocks
+//
+
+function internalBlockToProsemirrorNode(block: PageBlockEditorModel, definitionsMap: Map<string, PageBlockDefinition>) {
+  const definition = definitionsMap.get(block.data.packageId);
+  if (!definition) {
+    throw SupernovaException.shouldNotHappen(`Could not find definition for ${block.id} (${block.data.packageId})`);
+  }
+
+  return blockToProsemirrorNode(block, definition);
+}
+
 export function blockToProsemirrorNode(
   block: PageBlockEditorModel,
   definition: PageBlockDefinition
@@ -525,7 +617,7 @@ export function serializeAsCustomBlock(block: PageBlockEditorModel, definition:
   const columns = block.data.appearance?.numberOfColumns;
 
   return {
-    type: "blockNode",
+    type: serializeCustomBlockNodeType(block, definition),
     attrs: {
       id: block.id,
       definitionId: block.data.packageId,
@@ -537,6 +629,16 @@ export function serializeAsCustomBlock(block: PageBlockEditorModel, definition:
   };
 }
 
+function serializeCustomBlockNodeType(block: PageBlockEditorModel, definition: PageBlockDefinition): string {
+  switch (block.data.packageId) {
+    case "io.supernova.block.image":
+      return "image";
+
+    default:
+      return "blockNode";
+  }
+}
+
 function nonNullFilter<T>(item: T | null): item is T {
   return !!item;
 }

package/src/yjs/docs-editor/model/block.ts

@@ -1,5 +1,8 @@
-import { PageBlockEditorModel as ModelPageBlockEditorModel } from "@supernova-studio/model";
+import { PageBlockEditorModelV2, PageSectionEditorModelV2 } from "@supernova-studio/model";
 import { z } from "zod";
 
-export const PageBlockEditorModel = ModelPageBlockEditorModel;
+export const PageBlockEditorModel = PageBlockEditorModelV2;
 export type PageBlockEditorModel = z.infer<typeof PageBlockEditorModel>;
+
+export const PageSectionEditorModel = PageSectionEditorModelV2;
+export type PageSectionEditorModel = z.infer<typeof PageSectionEditorModel>;

package/src/yjs/docs-editor/model/page.ts

@@ -1,8 +1,8 @@
 import { z } from "zod";
-import { PageBlockEditorModel } from "./block";
+import { PageBlockEditorModel, PageSectionEditorModel } from "./block";
 
 export const DocumentationPageEditorModel = z.object({
-  blocks: z.array(PageBlockEditorModel),
+  blocks: z.array(PageBlockEditorModel.or(PageSectionEditorModel)),
 });
 
 export type DocumentationPageEditorModel = z.infer<typeof DocumentationPageEditorModel>;

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

@@ -42,8 +42,11 @@ import {
   nullishToOptional,
   PageBlockItemFigmaNodeValue,
   PageBlockColorV2,
+  SupernovaException,
+  PageSectionItemV2,
+  PageSectionColumnV2,
 } from "@supernova-studio/model";
-import { PageBlockEditorModel } from "./model/block";
+import { PageBlockEditorModel, PageSectionEditorModel } from "./model/block";
 import { DocumentationPageEditorModel } from "./model/page";
 import { BlockDefinitionUtils } from "./utils";
 import { yXmlFragmentToProsemirrorJSON } from "y-prosemirror";
@@ -69,32 +72,111 @@ export function prosemirrorDocToPage(
   const definitionsById = mapByUnique(definitions, d => d.id);
 
   return {
-    blocks: (prosemirrorDoc.content ?? [])
-      .map(prosemirrorNode => {
-        const definitionId = getProsemirrorAttribute(prosemirrorNode, "definitionId", z.string());
-        if (!definitionId) {
-          console.warn(
-            `definitionId on ${prosemirrorNode.type} is required to be interpreted as a block, skipping node`
-          );
-
-          return null;
-        }
-
-        const definition = definitionsById.get(definitionId);
-        if (!definition) {
-          console.warn(
-            `Block definitionId "${definitionId}" (prosemirror node ${prosemirrorNode.type}) is not among available definitions`
-          );
-          console.warn(prosemirrorNode);
-          return null;
-        }
-
-        return prosemirrorNodeToBlock(prosemirrorNode, definition);
-      })
+    blocks: internalProsemirrorNodesToBlocks(prosemirrorDoc.content ?? [], definitionsById),
+  };
+}
+
+//
+// Sections
+//
+
+export function prosemirrorNodeToSection(
+  prosemirrorNode: ProsemirrorNode,
+  definitions: PageBlockDefinition[]
+): PageSectionEditorModel | null {
+  const definitionsById = mapByUnique(definitions, d => d.id);
+  return internalProsemirrorNodeToSection(prosemirrorNode, definitionsById);
+}
+
+function internalProsemirrorNodeToSection(
+  prosemirrorNode: ProsemirrorNode,
+  definitionsMap: Map<string, PageBlockDefinition>
+): PageSectionEditorModel | null {
+  const id = getProsemirrorBlockId(prosemirrorNode);
+  if (!id) return null;
+
+  return {
+    id: id,
+    type: "Section",
+    variantId: getProsemirrorBlockVariantId(prosemirrorNode),
+    sectionType: "Tabs",
+    appearance: {
+      contentExpandToEdges: true,
+      expandToEdges: true,
+    },
+    items: (prosemirrorNode.content ?? [])
+      .filter(c => c.type === "sectionItem")
+      .map(c => prosemirrorNodeToSectionItem(c, definitionsMap))
       .filter(nonNullFilter),
   };
 }
 
+function prosemirrorNodeToSectionItem(
+  prosemirrorNode: ProsemirrorNode,
+  definitionsMap: Map<string, PageBlockDefinition>
+): PageSectionItemV2 | null {
+  const id = getProsemirrorBlockId(prosemirrorNode);
+  if (!id) return null;
+
+  return {
+    id: id,
+    title: getProsemirrorAttribute(prosemirrorNode, "title", z.string()) ?? "",
+    columns: (prosemirrorNode.content ?? [])
+      .filter(c => c.type === "sectionItemColumn")
+      .map(c => prosemirrorNodeToSectionColumns(c, definitionsMap))
+      .filter(nonNullFilter),
+  };
+}
+
+function prosemirrorNodeToSectionColumns(
+  prosemirrorNode: ProsemirrorNode,
+  definitionsMap: Map<string, PageBlockDefinition>
+): PageSectionColumnV2 | null {
+  const id = getProsemirrorBlockId(prosemirrorNode);
+  if (!id) return null;
+
+  return {
+    id: id,
+    blocks: internalProsemirrorNodesToBlocks(prosemirrorNode.content ?? [], definitionsMap),
+  };
+}
+
+//
+// Blocks
+//
+
+export function prosemirrorNodesToBlocks(prosemirrorNodes: ProsemirrorNode[], definitions: PageBlockDefinition[]) {
+  const definitionsById = mapByUnique(definitions, d => d.id);
+  return internalProsemirrorNodesToBlocks(prosemirrorNodes, definitionsById);
+}
+
+function internalProsemirrorNodesToBlocks(
+  prosemirrorNodes: ProsemirrorNode[],
+  definitionsMap: Map<string, PageBlockDefinition>
+): PageBlockEditorModel[] {
+  return prosemirrorNodes
+    .map(prosemirrorNode => {
+      const definitionId = getProsemirrorAttribute(prosemirrorNode, "definitionId", z.string());
+      if (!definitionId) {
+        console.warn(`definitionId on ${prosemirrorNode.type} is required to be interpreted as a block, skipping node`);
+
+        return null;
+      }
+
+      const definition = definitionsMap.get(definitionId);
+      if (!definition) {
+        console.warn(
+          `Block definitionId "${definitionId}" (prosemirror node ${prosemirrorNode.type}) is not among available definitions`
+        );
+        console.warn(prosemirrorNode);
+        return null;
+      }
+
+      return prosemirrorNodeToBlock(prosemirrorNode, definition);
+    })
+    .filter(nonNullFilter);
+}
+
 export function prosemirrorNodeToBlock(
   prosemirrorNode: ProsemirrorNode,
   definition: PageBlockDefinition
@@ -139,6 +221,7 @@ function parseAsRichText(
   return {
     // TODO Artem: indent
     id: id,
+    type: "Block",
 
     ...(variantId && { variantId: variantId }),
 
@@ -197,6 +280,7 @@ function parseAsMultiRichText(
   return {
     // TODO Artem: indent
     id: id,
+    type: "Block",
     data: {
       packageId: definition.id,
       indentLevel: 0,
@@ -321,6 +405,7 @@ function parseAsTable(
 
   return {
     id: id,
+    type: "Block",
     data: {
       packageId: "io.supernova.block.table",
       indentLevel: 0,
@@ -438,6 +523,7 @@ function emptyTable(id: string, variantId?: string, indentLevel?: number): PageB
 
   return {
     id: id,
+    type: "Block",
     data: {
       packageId: "io.supernova.block.table",
       indentLevel: indentLevel ?? 0,
@@ -479,6 +565,7 @@ function parseAsDivider(
 
   return {
     id: id,
+    type: "Block",
     data: {
       packageId: definition.id,
       indentLevel: 0,
@@ -509,6 +596,7 @@ function parseAsCustomBlock(
 
   return {
     id: id,
+    type: "Block",
     data: {
       packageId: definition.id,
       indentLevel: 0,