@supernova-studio/client 1.96.5 → 1.96.7

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

@@ -0,0 +1,764 @@
+import {
+  PageBlockCalloutType,
+  PageBlockDefinition,
+  PageBlockDefinitionProperty,
+  PageBlockDefinitionRichTextOptions,
+  PageBlockItemImageValue,
+  PageBlockItemRichTextEditorListNode,
+  PageBlockItemRichTextEditorNode,
+  PageBlockItemRichTextEditorParagraphNode,
+  PageBlockItemRichTextEditorValue,
+  PageBlockItemRichTextValue,
+  PageBlockItemTableCell,
+  PageBlockItemTableNode,
+  PageBlockItemTableRow,
+  PageBlockItemTableValue,
+  PageBlockTableCellAlignment,
+  PageBlockText,
+  PageBlockTextSpan,
+  PageBlockTextSpanAttribute,
+  PageSectionColumnV2,
+  PageSectionItemV2,
+  SupernovaException,
+  mapByUnique,
+} from "@supernova-studio/model";
+import { prosemirrorJSONToYXmlFragment } from "y-prosemirror";
+import * as Y from "yjs";
+import { ListNode, ListTreeBuilder } from "./list-tree-builder";
+import { DocumentationPageEditorModel } from "./model";
+import { PageBlockEditorModel, PageSectionEditorModel } from "./model/block";
+import { mainEditorProsemirrorSchema } from "./prosemirror";
+import { ProsemirrorMark, ProsemirrorNode } from "./prosemirror/types";
+import { BlockDefinitionUtils, BlockParsingUtils } from "./utils";
+
+//
+// Types
+//
+
+type BaseInput = {
+  block: PageBlockEditorModel;
+  definition: PageBlockDefinition;
+};
+
+type InputWithProperty = BaseInput & {
+  property: PageBlockDefinitionProperty;
+};
+
+type RichTextInputWithValue = InputWithProperty & {
+  richTextPropertyValue: PageBlockItemRichTextValue;
+};
+
+//
+// Implementation
+//
+
+export function pageToYDoc(doc: Y.Doc, page: DocumentationPageEditorModel, definitions: PageBlockDefinition[]) {
+  pageToYXmlFragment(page, definitions, doc.getXmlFragment("default"));
+}
+
+export function pageToYXmlFragment(
+  page: DocumentationPageEditorModel,
+  definitions: PageBlockDefinition[],
+  fragment: Y.XmlFragment
+): Y.XmlFragment {
+  const doc = pageToProsemirrorDoc(page, definitions);
+  // console.log(JSON.stringify(doc, null, 2));
+  return prosemirrorJSONToYXmlFragment(mainEditorProsemirrorSchema, doc, fragment);
+}
+
+export function pageToProsemirrorDoc(
+  page: DocumentationPageEditorModel,
+  definitions: PageBlockDefinition[]
+): ProsemirrorNode {
+  const definitionsMap = mapByUnique(definitions, d => d.id);
+
+  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(...internalBlocksToProsemirrorNodes(blockBuffer, definitionsMap));
+        blockBuffer = [];
+      }
+
+      children.push(internalSectionToProsemirrorNode(b, definitionsMap));
+    }
+  });
+
+  if (blockBuffer.length) {
+    children.push(...internalBlocksToProsemirrorNodes(blockBuffer, definitionsMap));
+  }
+
+  return {
+    type: "doc",
+    content: children,
+  };
+}
+
+export function blockToProsemirrorNode(
+  block: PageBlockEditorModel,
+  definition: PageBlockDefinition
+): ProsemirrorNode | null {
+  const definitionsMap = new Map<string, PageBlockDefinition>([[definition.id, definition]]);
+  const nodes = internalBlocksToProsemirrorNodes([block], definitionsMap);
+  return nodes[0] ?? null;
+}
+
+export function richTextPropertyValueToProsemirror(
+  richTextEditorValue: PageBlockItemRichTextEditorValue
+): ProsemirrorNode {
+  return {
+    type: "doc",
+    content: richTextEditorValue.value.map(node => {
+      return serializeRichTextEditorNode(node);
+    }),
+  };
+}
+
+function serializeRichTextEditorNode(node: PageBlockItemRichTextEditorNode): ProsemirrorNode {
+  switch (node.type) {
+    case "Paragraph":
+      return serializeRichTextEditorParagraphNode(node);
+
+    case "List":
+      return serializeRichTextEditorListNode(node);
+  }
+}
+
+function serializeRichTextEditorParagraphNode(node: PageBlockItemRichTextEditorParagraphNode): ProsemirrorNode {
+  const content = serializeRichText(node.value);
+  return {
+    type: "paragraph",
+    ...(content.length && { content }),
+  };
+}
+
+function serializeRichTextEditorListNode(node: PageBlockItemRichTextEditorListNode): ProsemirrorNode {
+  const type = node.listType === "OL" ? "orderedList" : "bulletList";
+  const attrs = node.listType === "OL" ? { start: 1 } : undefined;
+  const richTexts = node.value.length ? node.value : [{ spans: [] }];
+
+  return {
+    type,
+    ...(attrs && { attrs }),
+    content: richTexts.map(n => {
+      const content = serializeRichText(n);
+
+      return {
+        type: "listItem",
+        content: [
+          {
+            type: "paragraph",
+            ...(content.length && { content }),
+          },
+        ],
+      };
+    }),
+  };
+}
+
+//
+// Sections
+//
+
+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 = internalBlocksToProsemirrorNodes(sectionColumn.blocks, definitionsMap);
+
+  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 internalBlocksToProsemirrorNodes(
+  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.addWithProperty(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 = internalBlockToProsemirrorNode(b, definition);
+      node && result.push(node);
+    }
+  });
+
+  const tree = listTreeBuilder.flush();
+  if (tree) {
+    result.push(serializeAsMultiRichTextBlock(tree));
+  }
+
+  return result;
+}
+
+function internalBlockToProsemirrorNode(
+  block: PageBlockEditorModel,
+  definition: PageBlockDefinition
+): ProsemirrorNode | null {
+  // Single rich text
+  const richTextProperty = BlockDefinitionUtils.firstRichTextProperty(definition);
+  if (richTextProperty) {
+    return serializeAsRichTextBlock({
+      block: block,
+      definition: definition,
+      property: richTextProperty,
+    });
+  }
+
+  const tableProperty = BlockDefinitionUtils.firstTableProperty(definition);
+  if (tableProperty) {
+    return serializeAsTable({
+      block: block,
+      definition: definition,
+      property: tableProperty,
+    });
+  }
+
+  // Divider
+  if (block.data.packageId === "io.supernova.block.divider") {
+    return serializeAsDivider({
+      block: block,
+      definition: definition,
+    });
+  }
+
+  return serializeAsCustomBlock(block, definition);
+}
+
+//
+// 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: RichTextInputWithValue = { ...input, richTextPropertyValue: textPropertyValue };
+
+  const parsedOptions = PageBlockDefinitionRichTextOptions.optional().parse(richTextProperty.options);
+  const style = parsedOptions?.richTextStyle ?? "Default";
+
+  switch (style) {
+    case "Callout":
+      return serializeAsCallout(enrichedInput);
+    case "Default":
+      return serializeAsParagraph(enrichedInput);
+
+    case "Quote":
+      return serializeAsBlockquote(enrichedInput);
+
+    case "Title1":
+    case "Title2":
+    case "Title3":
+    case "Title4":
+    case "Title5":
+      return serializeAsHeading(enrichedInput);
+  }
+}
+
+function serializeAsParagraph(input: RichTextInputWithValue): ProsemirrorNode {
+  return {
+    type: "paragraph",
+    attrs: serializeBlockNodeAttributes(input.block),
+    ...serializeRichTextNodePart(input.richTextPropertyValue.value),
+  };
+}
+
+function serializeAsHeading(input: RichTextInputWithValue): ProsemirrorNode {
+  return {
+    type: "heading",
+    attrs: {
+      ...serializeBlockNodeAttributes(input.block),
+      level: richTextHeadingLevel(input.property),
+    },
+    ...serializeRichTextNodePart(input.richTextPropertyValue.value),
+  };
+}
+
+function serializeAsBlockquote(input: RichTextInputWithValue): ProsemirrorNode {
+  return {
+    type: "blockquote",
+    attrs: serializeBlockNodeAttributes(input.block),
+    ...serializeRichTextNodePart(input.richTextPropertyValue.value),
+  };
+}
+
+function serializeAsCallout(input: RichTextInputWithValue): ProsemirrorNode {
+  const calloutType = input.richTextPropertyValue.calloutType ?? "Info";
+
+  return {
+    type: "callout",
+    attrs: {
+      ...serializeBlockNodeAttributes(input.block),
+      type: serializeCalloutType(calloutType),
+    },
+    ...serializeRichTextNodePart(input.richTextPropertyValue.value),
+  };
+}
+
+//
+// Multi rich text blocks
+//
+
+function serializeAsMultiRichTextBlock(node: ListNode): ProsemirrorNode {
+  switch (node.listType) {
+    case "Ordered":
+      return serializeAsOrderedList(node);
+
+    case "Unordered":
+      return serializeAsUnorderedList(node);
+  }
+}
+
+function serializeAsOrderedList(tree: ListNode): ProsemirrorNode {
+  return {
+    type: "orderedList",
+    attrs: {
+      ...serializeBlockNodeAttributes(tree.block),
+      start: "1",
+    },
+    content: serializeListContent(tree),
+  };
+}
+
+function serializeAsUnorderedList(tree: ListNode): ProsemirrorNode {
+  return {
+    type: "bulletList",
+    attrs: {
+      ...serializeBlockNodeAttributes(tree.block),
+    },
+    content: serializeListContent(tree),
+  };
+}
+
+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),
+      },
+    ],
+  };
+}
+
+//
+// Tables
+//
+
+function serializeAsTable(input: InputWithProperty): ProsemirrorNode {
+  const { block, definition, property: tableProperty } = input;
+
+  const blockItem = BlockParsingUtils.singleBlockItem(block);
+  const table = BlockParsingUtils.tablePropertyValue(blockItem, tableProperty.id);
+
+  return {
+    type: "tableContainer",
+    attrs: {
+      ...serializeBlockNodeAttributes(input.block),
+      hasBorder: table.showBorder ?? true,
+    },
+
+    content: [
+      {
+        type: "table",
+        content: serializeTableRows(table),
+      },
+    ],
+  };
+}
+
+function serializeTableRows(table: PageBlockItemTableValue): ProsemirrorNode[] {
+  // If no rows are present, we have to generate a least one empty row
+  const rows: PageBlockItemTableRow[] = table.value.length ? table.value : [{ cells: [] }];
+
+  return rows.map<ProsemirrorNode>((row, rowIndex) => {
+    const isHeaderRow = rowIndex === 0 && table.highlightHeaderRow === true;
+
+    // If no cells are present, we have to generate at least one cell
+    const cells: PageBlockItemTableCell[] = row.cells.length ? row.cells : [{ id: "", alignment: "Left", nodes: [] }];
+
+    return {
+      type: "tableRow",
+      content: cells.map<ProsemirrorNode>((cell, cellIndex) => {
+        const isHeaderColumn = cellIndex === 0 && table.highlightHeaderColumn === true;
+
+        return {
+          type: isHeaderRow || isHeaderColumn ? "tableHeader" : "tableCell",
+          attrs: {
+            ...(cell.id && { id: cell.id }),
+            textAlign: serializeTableCellAlignment(cell.alignment),
+            colspan: 1,
+            rowspan: 1,
+            ...(cell.columnWidth && { colwidth: [cell.columnWidth] }),
+          },
+          content: serializeTableCellNodes(cell),
+        };
+      }),
+    };
+  });
+}
+
+function serializeTableCellAlignment(alignment: PageBlockTableCellAlignment) {
+  switch (alignment) {
+    case "Left":
+      return "left";
+    case "Center":
+      return "center";
+    case "Right":
+      return "right";
+
+    default:
+      return "left";
+  }
+}
+
+function serializeTableCellNodes(cell: PageBlockItemTableCell): ProsemirrorNode[] {
+  const result = cell.nodes.map(serializeTableNode);
+
+  if (result.length) {
+    return result;
+  } else {
+    return [{ type: "paragraph" }];
+  }
+}
+
+function serializeTableNode(node: PageBlockItemTableNode): ProsemirrorNode {
+  switch (node.type) {
+    case "RichText":
+      return {
+        type: "paragraph",
+        attrs: {
+          id: node.id,
+          definitionId: "io.supernova.block.rich-text",
+        },
+        ...serializeRichTextNodePart(node.value),
+      };
+
+    case "Image":
+      return {
+        type: "image",
+        attrs: {
+          id: node.id,
+          definitionId: "io.supernova.block.image",
+          items: JSON.stringify([
+            {
+              id: node.id,
+              props: {
+                image: {
+                  ...(node.alt && { alt: node.alt }),
+                  ...(node.caption && { caption: node.caption }),
+                  ...(node.alignment && { alignment: node.alignment }),
+                  value: node.value,
+                } satisfies PageBlockItemImageValue,
+              },
+            },
+          ]),
+        },
+      };
+  }
+}
+
+//
+// Divider
+//
+
+function serializeAsDivider(input: BaseInput): ProsemirrorNode {
+  return {
+    type: "horizontalRule",
+    attrs: serializeBlockNodeAttributes(input.block),
+  };
+}
+
+//
+// Attributes
+//
+
+function serializeBlockNodeAttributes(block: PageBlockEditorModel) {
+  return {
+    id: block.id,
+    definitionId: block.data.packageId,
+    ...(block.data.variantId && { variantId: block.data.variantId }),
+  };
+}
+
+function richTextHeadingLevel(property: PageBlockDefinitionProperty): number | undefined {
+  const style = property.options?.richTextStyle;
+  if (!style) return undefined;
+
+  switch (style) {
+    case "Title1":
+      return 1;
+    case "Title2":
+      return 2;
+    case "Title3":
+      return 3;
+    case "Title4":
+      return 4;
+    case "Title5":
+      return 5;
+    case "Callout":
+    case "Default":
+    case "Quote":
+      return undefined;
+  }
+}
+
+function serializeCalloutType(calloutType: PageBlockCalloutType) {
+  switch (calloutType) {
+    case "Error":
+      return "critical";
+    case "Info":
+      return "neutral";
+    case "Success":
+      return "positive";
+    case "Warning":
+      return "warning";
+    case "Primary":
+      return "primary";
+  }
+}
+
+//
+// Rich text
+//
+
+function serializeRichTextNodePart(richText: PageBlockText): Pick<ProsemirrorNode, "content"> {
+  const spans = serializeRichText(richText);
+  if (spans.length) return { content: spans };
+  return {};
+}
+
+function serializeRichText(richText: PageBlockText) {
+  return richText.spans.map(serializeTextSpan).flat();
+}
+
+function serializeTextSpan(span: PageBlockTextSpan): ProsemirrorNode[] {
+  const hardBreakType = "hardBreak";
+
+  const marks = span.attributes.map(serializeTextSpanAttribute);
+
+  const textParts = span.text.split("\n");
+  const interspersed: ProsemirrorNode[] = [
+    {
+      type: "text",
+      text: textParts[0],
+
+      ...(marks.length && { marks: marks }),
+    },
+  ];
+
+  for (let i = 1; i < textParts.length; i++) {
+    interspersed.push(
+      {
+        type: hardBreakType,
+      },
+      {
+        type: "text",
+        text: textParts[i],
+
+        ...(marks.length && { marks: marks }),
+      }
+    );
+  }
+
+  return interspersed.filter(t => t.type === hardBreakType || !!t.text);
+}
+
+function serializeTextSpanAttribute(spanAttribute: PageBlockTextSpanAttribute): ProsemirrorMark {
+  switch (spanAttribute.type) {
+    case "Bold":
+      return { type: "bold", attrs: {} };
+    case "Italic":
+      return { type: "italic", attrs: {} };
+    case "Strikethrough":
+      return { type: "strike", attrs: {} };
+    case "Code":
+      return { type: "code", attrs: {} };
+    case "Comment":
+      return {
+        type: "commentHighlight",
+        attrs: {
+          highlightId: spanAttribute.commentHighlightId,
+          resolved: spanAttribute.commentIsResolved,
+        },
+      };
+    case "Link":
+      if (spanAttribute.link) {
+        return serializeLinkMark(
+          spanAttribute.link,
+          spanAttribute.openInNewTab ?? spanAttribute.openInNewWindow ?? false
+        );
+      } else if (spanAttribute.documentationItemId) {
+        return serializeLinkMark(
+          `@page:${spanAttribute.documentationItemId}`,
+          spanAttribute.openInNewTab ?? spanAttribute.openInNewWindow ?? false
+        );
+      } else {
+        return serializeLinkMark("about:blank", spanAttribute.openInNewTab ?? spanAttribute.openInNewWindow ?? false);
+      }
+  }
+}
+
+function serializeLinkMark(href: string, openInNewTab: boolean): ProsemirrorMark {
+  return {
+    type: "link",
+    attrs: {
+      href: href,
+      target: openInNewTab ? "_blank" : "_self",
+      rel: "noopener noreferrer nofollow",
+      class: "tiptap-link",
+    },
+  };
+}
+
+export function serializeAsCustomBlock(block: PageBlockEditorModel, definition: PageBlockDefinition): ProsemirrorNode {
+  const items = block.data.items.map(i => {
+    return {
+      id: i.id,
+      props: i.props,
+      linksTo: i.linksTo,
+    };
+  });
+
+  const columns = block.data.appearance?.numberOfColumns;
+
+  return {
+    type: serializeCustomBlockNodeType(block, definition),
+    attrs: {
+      id: block.id,
+      definitionId: block.data.packageId,
+      ...(block.data.variantId && { variantId: block.data.variantId }),
+      items: JSON.stringify(items),
+
+      ...(block.data.appearance && { appearance: JSON.stringify(block.data.appearance) }),
+      ...(columns && { columns: columns }),
+    },
+  };
+}
+
+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;
+}