@supernova-studio/client 0.31.0 → 0.32.0

package/package.json

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

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

@@ -84,8 +84,9 @@ export const DTOCreateDocumentationTabInput = z.object({
   // New group persistent id
   persistentId: z.string().uuid(),
 
-  // Page that will become first tab of the tab group
-  fromPagePersistentId: z.string(),
+  // If this is page, we will attempt to convert it to tab
+  // If this is tab group, we will add a new tab to it
+  tabContainerPersistentId: z.string(),
   tabName: z.string(),
 });
 

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

@@ -7,14 +7,12 @@ import {
   PageBlockTextSpanAttribute,
   PageBlockItemRichTextValue,
   PageBlockCalloutType,
-  PageBlockItemMultiRichTextValue,
   PageBlockTableCellAlignment,
   PageBlockItemTableNode,
   PageBlockItemTableCell,
   PageBlockItemTableValue,
   PageBlockItemTableRow,
   PageBlockDefinitionRichTextOptions,
-  PageBlockDefinitionMutiRichTextOptions,
   PageBlockItemImageValue,
   SupernovaException,
   PageSectionItemV2,
@@ -27,6 +25,7 @@ import { BlockDefinitionUtils, BlockParsingUtils } from "./utils";
 import { DocumentationPageEditorModel } from "./model";
 import { prosemirrorJSONToYXmlFragment } from "y-prosemirror";
 import { pmSchema } from "./prosemirror";
+import { ListNode, ListTreeBuilder } from "./list-tree-builder";
 
 //
 // Types
@@ -45,10 +44,6 @@ type RichTextInputWithValue = InputWithProperty & {
   richTextPropertyValue: PageBlockItemRichTextValue;
 };
 
-type MultiRichTextInputWithValue = InputWithProperty & {
-  multiRichTextPropertyValue: PageBlockItemMultiRichTextValue;
-};
-
 //
 // Implementation
 //
@@ -59,6 +54,7 @@ export function pageToYXmlFragment(
   fragment: Y.XmlFragment
 ): Y.XmlFragment {
   const doc = pageToProsemirrorDoc(page, definitions);
+  // console.log(JSON.stringify(doc, null, 2));
   return prosemirrorJSONToYXmlFragment(pmSchema, doc, fragment);
 }
 
@@ -68,42 +64,36 @@ export function pageToProsemirrorDoc(
 ): ProsemirrorNode {
   const definitionsMap = mapByUnique(definitions, d => d.id);
 
-  return {
-    type: "doc",
-    content: page.blocks
-      .map(b => {
-        switch (b.type) {
-          case "Block":
-            return blockToProsemirrorNode(b, blockDefinitionForBlock(b, definitions));
-          case "Section":
-            return internalSectionToProsemirrorNode(b, definitionsMap);
-        }
-      })
-      .filter(nonNullFilter),
-  };
-}
+  const children: ProsemirrorNode[] = [];
+  let blockBuffer: PageBlockEditorModel[] = [];
+
+  page.blocks.forEach(b => {
+    if (b.type === "Block") {
+      blockBuffer.push(b);
+    } else if (b.type === "Section") {
+      if (blockBuffer.length) {
+        children.push(...blocksToProsemirrorNodes(blockBuffer, definitionsMap));
+        blockBuffer = [];
+      }
 
-export function blockDefinitionForBlock(block: PageBlockEditorModel, definitions: PageBlockDefinition[]) {
-  const definition = definitions.find(d => d.id === block.data.packageId);
-  if (!definition) {
-    throw new Error(`Could not find definition for ${block.id} (${block.data.packageId})`);
+      children.push(internalSectionToProsemirrorNode(b, definitionsMap));
+    }
+  });
+
+  if (blockBuffer.length) {
+    children.push(...blocksToProsemirrorNodes(blockBuffer, definitionsMap));
   }
 
-  return definition;
+  return {
+    type: "doc",
+    content: children,
+  };
 }
 
 //
 // 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>
@@ -136,11 +126,7 @@ function sectionColumnToProsemirrorNode(
   sectionColumn: PageSectionColumnV2,
   definitionsMap: Map<string, PageBlockDefinition>
 ): ProsemirrorNode {
-  const blocks = sectionColumn.blocks
-    .map(block => {
-      return internalBlockToProsemirrorNode(block, definitionsMap);
-    })
-    .filter(nonNullFilter);
+  const blocks = blocksToProsemirrorNodes(sectionColumn.blocks, definitionsMap);
 
   if (!blocks.length) {
     blocks.push({
@@ -165,19 +151,51 @@ function sectionColumnToProsemirrorNode(
 // 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})`);
+function blocksToProsemirrorNodes(
+  blocks: PageBlockEditorModel[],
+  definitionsMap: Map<string, PageBlockDefinition>
+): ProsemirrorNode[] {
+  const result: ProsemirrorNode[] = [];
+
+  const listTreeBuilder = new ListTreeBuilder();
+
+  blocks.forEach(b => {
+    const definition = definitionsMap.get(b.data.packageId);
+    if (!definition) {
+      console.warn(`Could not find definition for ${b.id} (${b.data.packageId})`);
+      return;
+    }
+
+    const multiRichTextProp = BlockDefinitionUtils.firstMultiRichTextProperty(definition);
+
+    if (multiRichTextProp) {
+      // This is list
+      const node = listTreeBuilder.add(b, multiRichTextProp);
+      if (node) {
+        result.push(serializeAsMultiRichTextBlock(node));
+      }
+    } else {
+      // This is not a list
+      // Flush the tree builder to inject a non-tree block after it
+      const tree = listTreeBuilder.flush();
+      if (tree) {
+        result.push(serializeAsMultiRichTextBlock(tree));
+      }
+
+      const node = blockToProsemirrorNode(b, definition);
+      node && result.push(node);
+    }
+  });
+
+  const tree = listTreeBuilder.flush();
+  if (tree) {
+    result.push(serializeAsMultiRichTextBlock(tree));
   }
 
-  return blockToProsemirrorNode(block, definition);
+  return result;
 }
 
-export function blockToProsemirrorNode(
-  block: PageBlockEditorModel,
-  definition: PageBlockDefinition
-): ProsemirrorNode | null {
+function blockToProsemirrorNode(block: PageBlockEditorModel, definition: PageBlockDefinition): ProsemirrorNode | null {
   // Single rich text
   const richTextProperty = BlockDefinitionUtils.firstRichTextProperty(definition);
   if (richTextProperty) {
@@ -188,16 +206,6 @@ export function blockToProsemirrorNode(
     });
   }
 
-  // Multi rich text
-  const multiRichTextProperty = BlockDefinitionUtils.firstMultiRichTextProperty(definition);
-  if (multiRichTextProperty) {
-    return serializeAsMultiRichTextBlock({
-      block: block,
-      definition: definition,
-      property: multiRichTextProperty,
-    });
-  }
-
   const tableProperty = BlockDefinitionUtils.firstTableProperty(definition);
   if (tableProperty) {
     return serializeAsTable({
@@ -254,7 +262,7 @@ function serializeAsRichTextBlock(input: InputWithProperty): ProsemirrorNode {
 function serializeAsParagraph(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "paragraph",
-    attrs: serializeBlockNodeAttributes(input),
+    attrs: serializeBlockNodeAttributes(input.block),
     ...serializeRichTextNodePart(input.richTextPropertyValue.value),
   };
 }
@@ -263,7 +271,7 @@ function serializeAsHeading(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "heading",
     attrs: {
-      ...serializeBlockNodeAttributes(input),
+      ...serializeBlockNodeAttributes(input.block),
       level: richTextHeadingLevel(input.property),
     },
     ...serializeRichTextNodePart(input.richTextPropertyValue.value),
@@ -273,7 +281,7 @@ function serializeAsHeading(input: RichTextInputWithValue): ProsemirrorNode {
 function serializeAsBlockquote(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "blockquote",
-    attrs: serializeBlockNodeAttributes(input),
+    attrs: serializeBlockNodeAttributes(input.block),
     ...serializeRichTextNodePart(input.richTextPropertyValue.value),
   };
 }
@@ -284,7 +292,7 @@ function serializeAsCallout(input: RichTextInputWithValue): ProsemirrorNode {
   return {
     type: "callout",
     attrs: {
-      ...serializeBlockNodeAttributes(input),
+      ...serializeBlockNodeAttributes(input.block),
       type: serializeCalloutType(calloutType),
     },
     ...serializeRichTextNodePart(input.richTextPropertyValue.value),
@@ -295,66 +303,78 @@ function serializeAsCallout(input: RichTextInputWithValue): ProsemirrorNode {
 // Multi rich text blocks
 //
 
-function serializeAsMultiRichTextBlock(input: InputWithProperty): ProsemirrorNode {
-  const { block, definition, property: multiRichTextProperty } = input;
-
-  const blockItem = BlockParsingUtils.singleBlockItem(block);
-  const textPropertyValue = BlockParsingUtils.multiRichTextPropertyValue(blockItem, multiRichTextProperty.id);
-
-  const enrichedInput: MultiRichTextInputWithValue = { ...input, multiRichTextPropertyValue: textPropertyValue };
-
-  const parsedOptions = PageBlockDefinitionMutiRichTextOptions.optional().parse(multiRichTextProperty.options);
-  const style = parsedOptions?.multiRichTextStyle ?? "Default";
-
-  switch (style) {
-    case "Default":
-      return serializeAsMultiParagraph(enrichedInput);
-
-    case "OL":
-      return serializeAsOrderedList(enrichedInput);
+function serializeAsMultiRichTextBlock(node: ListNode): ProsemirrorNode {
+  switch (node.listType) {
+    case "Ordered":
+      return serializeAsOrderedList(node);
 
-    case "UL":
-      return serializeAsUnorderedList(enrichedInput);
+    case "Unordered":
+      return serializeAsUnorderedList(node);
   }
 }
 
-function serializeAsMultiParagraph(input: MultiRichTextInputWithValue): ProsemirrorNode {
-  return {
-    type: "bulletList",
-    attrs: {
-      ...serializeBlockNodeAttributes(input),
-    },
-    content: input.multiRichTextPropertyValue.value.map(serializeAsListItem),
-  };
-}
-
-function serializeAsOrderedList(input: MultiRichTextInputWithValue): ProsemirrorNode {
+function serializeAsOrderedList(tree: ListNode): ProsemirrorNode {
   return {
     type: "orderedList",
     attrs: {
-      ...serializeBlockNodeAttributes(input),
+      ...serializeBlockNodeAttributes(tree.block),
       start: "1",
     },
-    content: input.multiRichTextPropertyValue.value.map(serializeAsListItem),
+    content: serializeListContent(tree),
   };
 }
 
-function serializeAsUnorderedList(input: MultiRichTextInputWithValue): ProsemirrorNode {
+function serializeAsUnorderedList(tree: ListNode): ProsemirrorNode {
   return {
     type: "bulletList",
     attrs: {
-      ...serializeBlockNodeAttributes(input),
+      ...serializeBlockNodeAttributes(tree.block),
     },
-    content: input.multiRichTextPropertyValue.value.map(serializeAsListItem),
+    content: serializeListContent(tree),
   };
 }
 
-function serializeAsListItem(text: PageBlockText): ProsemirrorNode {
+function serializeListContent(tree: ListNode): ProsemirrorNode[] {
+  const result: ProsemirrorNode[] = tree.leadingChildren.map(i => serializeAsTextListItem(i.text));
+
+  for (const child of tree.children) {
+    if (child.type === "ListItem") {
+      // Text list item
+
+      result.push(serializeAsTextListItem(child.text));
+    } else if (child.type === "List") {
+      // List list item
+
+      const previousNode = result[result.length - 1];
+      if (!previousNode) {
+        throw SupernovaException.shouldNotHappen("List node without previous node");
+      }
+      if (!previousNode.content) {
+        throw SupernovaException.shouldNotHappen("List item node has no content");
+      }
+
+      const serializedList = serializeAsMultiRichTextBlock(child);
+      previousNode.content.push(serializedList);
+    } else {
+      // Should noit happen
+
+      throw SupernovaException.shouldNotHappen(`Unknown list node type: ${child}`);
+    }
+  }
+
+  return result;
+}
+
+function serializeAsTextListItem(text: PageBlockText): ProsemirrorNode {
   return {
     type: "listItem",
     content: [
       {
         type: "paragraph",
+        attrs: {
+          definitionId: "io.supernova.block.rich-text",
+          variantId: "default",
+        },
         content: serializeRichText(text),
       },
     ],
@@ -374,7 +394,7 @@ function serializeAsTable(input: InputWithProperty): ProsemirrorNode {
   return {
     type: "tableContainer",
     attrs: {
-      ...serializeBlockNodeAttributes(input),
+      ...serializeBlockNodeAttributes(input.block),
       hasBorder: table.showBorder ?? true,
     },
 
@@ -482,7 +502,7 @@ function serializeTableNode(node: PageBlockItemTableNode): ProsemirrorNode {
 function serializeAsDivider(input: BaseInput): ProsemirrorNode {
   return {
     type: "horizontalRule",
-    attrs: serializeBlockNodeAttributes(input),
+    attrs: serializeBlockNodeAttributes(input.block),
   };
 }
 
@@ -490,9 +510,7 @@ function serializeAsDivider(input: BaseInput): ProsemirrorNode {
 // Attributes
 //
 
-function serializeBlockNodeAttributes(input: BaseInput) {
-  const { block } = input;
-
+function serializeBlockNodeAttributes(block: PageBlockEditorModel) {
   return {
     id: block.id,
     definitionId: block.data.packageId,
@@ -552,6 +570,8 @@ function serializeRichText(richText: PageBlockText) {
 }
 
 function serializeTextSpan(span: PageBlockTextSpan): ProsemirrorNode[] {
+  const hardBreakType = "hardBreak";
+
   const marks = span.attributes.map(serializeTextSpanAttribute);
 
   const textParts = span.text.split("\n");
@@ -567,7 +587,7 @@ function serializeTextSpan(span: PageBlockTextSpan): ProsemirrorNode[] {
   for (let i = 1; i < textParts.length; i++) {
     interspersed.push(
       {
-        type: "hardBreak",
+        type: hardBreakType,
       },
       {
         type: "text",
@@ -578,7 +598,7 @@ function serializeTextSpan(span: PageBlockTextSpan): ProsemirrorNode[] {
     );
   }
 
-  return interspersed.filter(t => !!t.text);
+  return interspersed.filter(t => t.type === hardBreakType || !!t.text);
 }
 
 function serializeTextSpanAttribute(spanAttribute: PageBlockTextSpanAttribute): ProsemirrorMark {
@@ -588,7 +608,7 @@ function serializeTextSpanAttribute(spanAttribute: PageBlockTextSpanAttribute):
     case "Italic":
       return { type: "italic", attrs: {} };
     case "Strikethrough":
-      return { type: "strikethrough", attrs: {} };
+      return { type: "strike", attrs: {} };
     case "Code":
       return { type: "code", attrs: {} };
     case "Link":

package/src/yjs/docs-editor/list-tree-builder.ts

@@ -0,0 +1,194 @@
+import {
+  PageBlockDefinition,
+  PageBlockDefinitionMutiRichTextOptions,
+  PageBlockDefinitionProperty,
+  PageBlockText,
+} from "@supernova-studio/model";
+import { PageBlockEditorModel } from "./model";
+import { BlockParsingUtils } from "./utils";
+
+type Node = ListNode | ListItemNode;
+
+export type ListNode = {
+  type: "List";
+  listType: "Ordered" | "Unordered";
+  block: PageBlockEditorModel;
+  leadingChildren: ListItemNode[];
+  children: Node[];
+};
+
+export type ListItemNode = {
+  type: "ListItem";
+  text: PageBlockText;
+};
+
+export class ListTreeBuilder {
+  private rootNode: ListNode | undefined;
+
+  add(block: PageBlockEditorModel, multiRichTextProperty: PageBlockDefinitionProperty): ListNode | undefined {
+    const list = this.createList(block, multiRichTextProperty);
+
+    // No root
+    if (!this.rootNode) {
+      this.rootNode = list;
+      return undefined;
+    }
+
+    // Inserting at the root
+    if (block.data.indentLevel <= 0) {
+      // We are at the root
+      if (this.rootNode.listType === list.listType) {
+        // Merge items into the current list
+        this.rootNode.children.push(...list.leadingChildren);
+        return;
+      } else {
+        const flushed = this.flush();
+        this.rootNode = list;
+        return flushed;
+      }
+    }
+
+    // Inserting at a depth
+    const listParent = this.getParentOfDepth(block.data.indentLevel);
+
+    const lastChild = listParent.children[listParent.children.length - 1];
+    if (lastChild?.type === "List") {
+      // Merge items into the current list
+      lastChild.children.push(...list.leadingChildren);
+      return;
+    } else {
+      // We can add this list as a child of another list
+      listParent.children.push(list);
+    }
+  }
+
+  flush(): ListNode | undefined {
+    const node = this.rootNode;
+    this.rootNode = undefined;
+    return node;
+  }
+
+  private getParentOfDepth(depth: number): ListNode {
+    if (!this.rootNode || depth <= 0) throw new Error("Invalid state");
+
+    let currentNode = this.rootNode;
+    let currentDepth = depth - 1;
+
+    while (currentDepth > 0) {
+      // Check if we can go any lower
+      if (currentNode.children.length === 0) return currentNode;
+
+      const lastChild = currentNode.children[currentNode.children.length - 1];
+      if (lastChild.type !== "List") {
+        // Cannot go lower if last child is not a list
+        return currentNode;
+      }
+
+      currentNode = lastChild;
+      currentDepth--;
+    }
+
+    return currentNode;
+  }
+
+  // next(block: PageBlockEditorModel, multiRichTextProperty: PageBlockDefinitionProperty): ListNode | undefined {
+  //   console.log("Next");
+  //   const list = this.createList(block, multiRichTextProperty);
+
+  //   if (this.currentList) {
+  //     if (this.currentList.listType === list.listType) {
+  //       // Merge items into the current list
+  //       this.currentList.children.push(...list.leadingChildren);
+  //       return undefined;
+  //     } else {
+  //       // Close the current list and start a new one
+  //       if (!this.currentParentList) {
+  //         const flushed = this.flush();
+  //         this.currentList = list;
+  //         return flushed;
+  //       } else {
+  //         this.currentList = list;
+  //         this.currentParentList.children.push(list);
+  //         this.parentMap.set(list, this.currentParentList);
+
+  //         return undefined;
+  //       }
+  //     }
+  //   } else {
+  //     this.currentList = list;
+  //     return undefined;
+  //   }
+  // }
+
+  // stepIn(block: PageBlockEditorModel, multiRichTextProperty: PageBlockDefinitionProperty): void {
+  //   console.log("Step in");
+  //   if (!this.currentList) {
+  //     throw new Error("Cannot step in without a list");
+  //   }
+
+  //   const list = this.createList(block, multiRichTextProperty);
+
+  //   this.currentParentList = this.currentList;
+  //   this.currentList = list;
+  //   this.currentParentList.children.push(list);
+  //   this.parentMap.set(list, this.currentParentList);
+  // }
+
+  // stepOut(block: PageBlockEditorModel, multiRichTextProperty: PageBlockDefinitionProperty): ListNode | undefined {
+  //   console.log("Step out");
+
+  //   if (!this.currentList) {
+  //     throw new Error("Cannot step out without a list");
+  //   }
+
+  //   if (!this.currentParentList) {
+  //     throw new Error("Cannot step out without a parent list");
+  //   }
+
+  //   const newCurrentList = this.currentParentList;
+  //   const newParent = this.parentMap.get(newCurrentList);
+
+  //   this.currentList = newCurrentList;
+  //   this.currentParentList = newParent;
+
+  //   return this.next(block, multiRichTextProperty);
+  // }
+
+  // flush(): ListNode | undefined {
+  //   const result = this.currentList;
+
+  //   this.currentList = undefined;
+  //   this.currentParentList = undefined;
+  //   this.parentMap.clear();
+
+  //   return result;
+  // }
+
+  private createList(block: PageBlockEditorModel, multiRichTextProperty: PageBlockDefinitionProperty): ListNode {
+    const blockItem = BlockParsingUtils.singleBlockItem(block);
+    const multiRichTextValue = BlockParsingUtils.multiRichTextPropertyValue(blockItem, multiRichTextProperty.id);
+
+    const parsedOptions = PageBlockDefinitionMutiRichTextOptions.optional().parse(multiRichTextProperty.options);
+
+    const style = parsedOptions?.multiRichTextStyle ?? "Default";
+
+    const leadingChildren: ListNode["leadingChildren"] = multiRichTextValue.value.map(t => {
+      return {
+        type: "ListItem",
+        text: t,
+      };
+    });
+
+    if (!leadingChildren.length) {
+      leadingChildren.push({ type: "ListItem", text: { spans: [] } });
+    }
+
+    return {
+      type: "List",
+      listType: style === "OL" ? "Ordered" : "Unordered",
+      leadingChildren: leadingChildren,
+      block: block,
+      children: [],
+    };
+  }
+}

package/src/yjs/docs-editor/prosemirror/schema.ts

@@ -342,6 +342,9 @@ const newSchema = {
         id: {
           default: null,
         },
+        variantId: {
+          default: null,
+        },
       },
       parseDOM: [
         {

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

@@ -363,7 +363,7 @@ function parseRichTextAttribute(mark: ProsemirrorMark): PageBlockTextSpanAttribu
       return { type: "Bold" };
     case "italic":
       return { type: "Italic" };
-    case "strikethrough":
+    case "strike":
       return { type: "Strikethrough" };
     case "code":
       return { type: "Code" };