@supernova-studio/client 0.58.18 → 1.0.0-alpha.2

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

@@ -1,764 +0,0 @@
-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;
-}