@supernova-studio/client 0.58.19 → 1.0.0-alpha.3

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

@@ -1,975 +0,0 @@
-import {
-  PageBlockAppearanceV2,
-  PageBlockCalloutType,
-  PageBlockColorV2,
-  PageBlockDefinition,
-  PageBlockDefinitionProperty,
-  PageBlockDefinitionPropertyType,
-  PageBlockItemAssetPropertyValue,
-  PageBlockItemAssetValue,
-  PageBlockItemBooleanValue,
-  PageBlockItemCodeValue,
-  PageBlockItemColorValue,
-  PageBlockItemComponentPropertyValue,
-  PageBlockItemComponentValue,
-  PageBlockItemDividerValue,
-  PageBlockItemEmbedValue,
-  PageBlockItemFigmaComponentValue,
-  PageBlockItemFigmaNodeValue,
-  PageBlockItemImageValue,
-  PageBlockItemMarkdownValue,
-  PageBlockItemMultiRichTextValue,
-  PageBlockItemMultiSelectValue,
-  PageBlockItemNumberValue,
-  PageBlockItemRichTextEditorListNode,
-  PageBlockItemRichTextEditorNode,
-  PageBlockItemRichTextEditorParagraphNode,
-  PageBlockItemRichTextEditorValue,
-  PageBlockItemRichTextValue,
-  PageBlockItemSandboxValue,
-  PageBlockItemSingleSelectValue,
-  PageBlockItemStorybookValue,
-  PageBlockItemTableCell,
-  PageBlockItemTableNode,
-  PageBlockItemTableValue,
-  PageBlockItemTextValue,
-  PageBlockItemTokenPropertyValue,
-  PageBlockItemTokenTypeValue,
-  PageBlockItemTokenValue,
-  PageBlockItemUntypedValue,
-  PageBlockItemUrlValue,
-  PageBlockItemV2,
-  PageBlockTableCellAlignment,
-  PageBlockText,
-  PageBlockTextSpan,
-  PageBlockTextSpanAttribute,
-  PageSectionColumnV2,
-  PageSectionItemV2,
-  nullishToOptional,
-} from "@supernova-studio/model";
-import { yXmlFragmentToProsemirrorJSON } from "y-prosemirror";
-import * as Y from "yjs";
-import { ZodSchema, ZodTypeDef, z } from "zod";
-import { PageBlockEditorModel, PageSectionEditorModel } from "./model/block";
-import { DocumentationPageEditorModel } from "./model/page";
-import { ProsemirrorMark, ProsemirrorNode } from "./prosemirror/types";
-import { BlockDefinitionUtils } from "./utils";
-
-export function yDocToPage(yDoc: Y.Doc, definitions: PageBlockDefinition[]): DocumentationPageEditorModel {
-  return yXmlFragmentToPage(yDoc.getXmlFragment("default"), definitions);
-}
-
-export function yXmlFragmentToPage(
-  fragment: Y.XmlFragment,
-  definitions: PageBlockDefinition[]
-): DocumentationPageEditorModel {
-  const prosemirrorJson = yXmlFragmentToProsemirrorJSON(fragment) as ProsemirrorNode;
-  return prosemirrorDocToPage(prosemirrorJson, definitions);
-}
-
-export function prosemirrorDocToPage(
-  prosemirrorDoc: ProsemirrorNode,
-  definitions: PageBlockDefinition[]
-): DocumentationPageEditorModel {
-  const definitionsById = mapByUnique(definitions, d => d.id);
-
-  return {
-    blocks: internalProsemirrorNodesToPageItems(prosemirrorDoc.content ?? [], definitionsById),
-  };
-}
-
-export function shallowProsemirrorNodeToBlock(
-  prosemirrorNode: ProsemirrorNode,
-  definition: PageBlockDefinition
-): PageBlockEditorModel | null {
-  return (
-    prosemirrorNodeAndDefinitionToBlock(prosemirrorNode, definition, new Map([[definition.id, definition]]), 0)[0] ??
-    null
-  );
-}
-
-export function prosemirrorDocToRichTextPropertyValue(
-  prosemirrorNode: ProsemirrorNode
-): PageBlockItemRichTextEditorValue {
-  return {
-    value: (prosemirrorNode.content ?? [])
-      .map(n => prosemirrorNodeToRichTextEditorPropertyNode(n))
-      .filter(nonNullFilter),
-  };
-}
-
-function prosemirrorNodeToRichTextEditorPropertyNode(
-  prosemirrorNode: ProsemirrorNode
-): PageBlockItemRichTextEditorNode | null {
-  switch (prosemirrorNode.type) {
-    case "paragraph":
-      return parseAsParagraphNode(prosemirrorNode);
-
-    case "orderedList":
-    case "bulletList":
-      return parseAsListNode(prosemirrorNode);
-
-    default:
-      return null;
-  }
-}
-
-function parseAsParagraphNode(prosemirrorNode: ProsemirrorNode): PageBlockItemRichTextEditorParagraphNode {
-  return {
-    type: "Paragraph",
-    value: parseRichText(prosemirrorNode.content ?? []),
-  };
-}
-
-function parseAsListNode(prosemirrorNode: ProsemirrorNode): PageBlockItemRichTextEditorListNode {
-  return {
-    type: "List",
-    listType: prosemirrorNode.type === "orderedList" ? "OL" : "UL",
-    value: (prosemirrorNode.content ?? []).map(parseAsListNodeItem).filter(nonNullFilter),
-  };
-}
-
-function parseAsListNodeItem(prosemirrorNode: ProsemirrorNode): PageBlockText | null {
-  if (prosemirrorNode.type !== "listItem") return null;
-
-  const firstChild = prosemirrorNode.content?.[0];
-  if (!firstChild || firstChild.type !== "paragraph") return null;
-
-  return parseRichText(firstChild.content ?? []);
-}
-
-//
-// 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, 0),
-  };
-}
-
-//
-// Blocks
-//
-
-export function prosemirrorNodesToBlocks(prosemirrorNodes: ProsemirrorNode[], definitions: PageBlockDefinition[]) {
-  const definitionsById = mapByUnique(definitions, d => d.id);
-  return internalProsemirrorNodesToBlocks(prosemirrorNodes, definitionsById, 0);
-}
-
-function internalProsemirrorNodesToPageItems(
-  prosemirrorNodes: ProsemirrorNode[],
-  definitionsMap: Map<string, PageBlockDefinition>
-): (PageBlockEditorModel | PageSectionEditorModel)[] {
-  const result: (PageBlockEditorModel | PageSectionEditorModel)[] = [];
-
-  for (const prosemirrorNode of prosemirrorNodes) {
-    if (prosemirrorNode.type === "tabsSection") {
-      // Section
-      const section = prosemirrorNodeToSection(prosemirrorNode, Array.from(definitionsMap.values()));
-      section && result.push(section);
-    } else {
-      // Block
-      result.push(...internalProsemirrorNodeToBlock(prosemirrorNode, definitionsMap, 0));
-    }
-  }
-
-  return result;
-}
-
-function internalProsemirrorNodesToBlocks(
-  prosemirrorNodes: ProsemirrorNode[],
-  definitionsMap: Map<string, PageBlockDefinition>,
-  depth: number
-): PageBlockEditorModel[] {
-  return prosemirrorNodes.flatMap(prosemirrorNode => {
-    return internalProsemirrorNodeToBlock(prosemirrorNode, definitionsMap, depth);
-  });
-}
-
-function internalProsemirrorNodeToBlock(
-  prosemirrorNode: ProsemirrorNode,
-  definitionsMap: Map<string, PageBlockDefinition>,
-  depth: number
-): PageBlockEditorModel[] {
-  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 [];
-  }
-
-  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 [];
-  }
-
-  return prosemirrorNodeAndDefinitionToBlock(prosemirrorNode, definition, definitionsMap, depth);
-}
-
-function prosemirrorNodeAndDefinitionToBlock(
-  prosemirrorNode: ProsemirrorNode,
-  definition: PageBlockDefinition,
-  definitionsMap: Map<string, PageBlockDefinition>,
-  depth: number
-): PageBlockEditorModel[] {
-  const multiRichTextProperty = BlockDefinitionUtils.firstMultiRichTextProperty(definition);
-  if (multiRichTextProperty) {
-    return parseAsMultiRichText(prosemirrorNode, definition, multiRichTextProperty, definitionsMap, depth);
-  }
-
-  const block = shallowProsemirrorNodeAndDefinitionToBlock(prosemirrorNode, definition);
-  return block ? [block] : [];
-}
-
-function shallowProsemirrorNodeAndDefinitionToBlock(
-  prosemirrorNode: ProsemirrorNode,
-  definition: PageBlockDefinition
-): PageBlockEditorModel | null {
-  const richTextProperty = BlockDefinitionUtils.firstRichTextProperty(definition);
-  if (richTextProperty) {
-    return parseAsRichText(prosemirrorNode, definition, richTextProperty);
-  }
-
-  const tableProperty = BlockDefinitionUtils.firstTableProperty(definition);
-  if (tableProperty) {
-    return parseAsTable(prosemirrorNode, definition, tableProperty);
-  }
-
-  if (definition.id === "io.supernova.block.divider") {
-    return parseAsDivider(prosemirrorNode, definition);
-  }
-
-  return parseAsCustomBlock(prosemirrorNode, definition);
-}
-
-//
-// Single rich text
-//
-
-function parseAsRichText(
-  prosemirrorNode: ProsemirrorNode,
-  definition: PageBlockDefinition,
-  property: PageBlockDefinitionProperty
-): PageBlockEditorModel | null {
-  const id = getProsemirrorBlockId(prosemirrorNode);
-  if (!id) return null;
-
-  const variantId = getProsemirrorBlockVariantId(prosemirrorNode);
-  const calloutType = parseCalloutType(getProsemirrorAttribute(prosemirrorNode, "type", z.string().optional()));
-
-  return {
-    id: id,
-    type: "Block",
-
-    data: {
-      packageId: definition.id,
-      indentLevel: 0,
-      ...(variantId && { variantId: variantId }),
-      items: [
-        {
-          id: id,
-          props: {
-            [property.id]: {
-              // Required
-              value: parseRichText(prosemirrorNode.content ?? []),
-
-              // Optional
-              ...(calloutType && { calloutType: calloutType }),
-            } satisfies PageBlockItemRichTextValue,
-          },
-        },
-      ],
-    },
-  };
-}
-
-function parseCalloutType(prosemirrorCalloutType: unknown): PageBlockCalloutType | undefined {
-  if (!prosemirrorCalloutType) return undefined;
-
-  switch (prosemirrorCalloutType) {
-    case "critical":
-      return "Error";
-    case "neutral":
-      return "Info";
-    case "positive":
-      return "Success";
-    case "warning":
-      return "Warning";
-    case "primary":
-      return "Primary";
-  }
-}
-
-//
-// Multi rich text
-//
-
-function parseAsMultiRichText(
-  prosemirrorNode: ProsemirrorNode,
-  definition: PageBlockDefinition,
-  property: PageBlockDefinitionProperty,
-  definitionsMap: Map<string, PageBlockDefinition>,
-  depth: number
-): PageBlockEditorModel[] {
-  const id = getProsemirrorBlockId(prosemirrorNode);
-  if (!id) return [];
-
-  const variantId = getProsemirrorBlockVariantId(prosemirrorNode);
-  const result: PageBlockEditorModel[] = [];
-
-  // Flatten items
-  const listItems: ProsemirrorNode[] = [];
-  prosemirrorNode.content?.forEach(c => {
-    // Illegal child of a list
-    if (c.type !== "listItem") return;
-
-    c.content?.forEach(cc => {
-      listItems.push(cc);
-    });
-  });
-
-  // Text list items buffering
-  let bufferedTextItems: ProsemirrorNode[] = [];
-  function flushBufferedTextItems() {
-    if (!bufferedTextItems.length) return;
-
-    const idSuffix = result.length ? `-${result.length}` : "";
-
-    result.push({
-      id: id + idSuffix,
-      type: "Block",
-      data: {
-        packageId: definition.id,
-        indentLevel: depth,
-        ...(variantId && { variantId: variantId }),
-        items: [
-          {
-            id: id + idSuffix,
-            props: {
-              [property.id]: {
-                value: bufferedTextItems.map(paragraph => {
-                  return parseRichText(paragraph.content ?? []);
-                }),
-              } satisfies PageBlockItemMultiRichTextValue,
-            },
-          },
-        ],
-      },
-    });
-
-    bufferedTextItems = [];
-  }
-
-  listItems.forEach(item => {
-    if (item.type === "paragraph") {
-      bufferedTextItems.push(item);
-      return;
-    }
-
-    // This is not a paragraph, flush text items first
-    flushBufferedTextItems();
-
-    result.push(...internalProsemirrorNodeToBlock(item, definitionsMap, depth + 1));
-  });
-
-  // Flush text items at the end
-  flushBufferedTextItems();
-
-  return result;
-}
-
-//
-// Rich text
-//
-
-function parseRichText(spans: ProsemirrorNode[]): PageBlockText {
-  return {
-    spans: spans.map(parseRichTextSpan).filter(nonNullFilter),
-  };
-}
-
-function parseRichTextSpan(span: ProsemirrorNode): PageBlockTextSpan | null {
-  if (span.type === "hardBreak") {
-    return { text: "\n", attributes: [] };
-  }
-
-  if (span.type !== "text" || !span.text) return null;
-
-  const marks = span.marks ?? [];
-
-  return {
-    text: span.text,
-    attributes: marks.map(parseRichTextAttribute).filter(nonNullFilter),
-  };
-}
-
-function parseRichTextAttribute(mark: ProsemirrorMark): PageBlockTextSpanAttribute | null {
-  switch (mark.type) {
-    case "bold":
-      return { type: "Bold" };
-    case "italic":
-      return { type: "Italic" };
-    case "strike":
-      return { type: "Strikethrough" };
-    case "code":
-      return { type: "Code" };
-    case "link":
-      return parseProsemirrorLink(mark);
-    case "commentHighlight":
-      return parseProsemirrorCommentHighlight(mark);
-  }
-
-  return null;
-}
-
-function parseProsemirrorLink(mark: ProsemirrorMark): PageBlockTextSpanAttribute | null {
-  const href = getProsemirrorAttribute(mark, "href", z.string().optional());
-  if (!href) return null;
-
-  const target = getProsemirrorAttribute(mark, "target", z.string().optional());
-  const openInNewTab = target === "_blank";
-
-  if (href.startsWith("@")) {
-    return {
-      type: "Link",
-      openInNewWindow: openInNewTab,
-      openInNewTab: openInNewTab,
-      documentationItemId: href.split(":")[1],
-    };
-  } else {
-    return {
-      type: "Link",
-      openInNewWindow: openInNewTab,
-      openInNewTab: openInNewTab,
-      link: href,
-    };
-  }
-}
-
-function parseProsemirrorCommentHighlight(mark: ProsemirrorMark): PageBlockTextSpanAttribute | null {
-  const highlightId = getProsemirrorAttribute(mark, "highlightId", z.string().optional());
-  if (!highlightId) return null;
-
-  const isResolved = getProsemirrorAttribute(mark, "resolved", z.boolean().optional()) ?? false;
-
-  return {
-    type: "Comment",
-    commentHighlightId: highlightId,
-    commentIsResolved: isResolved,
-  };
-}
-
-//
-// Embed
-//
-
-function parseAsTable(
-  prosemirrorNode: ProsemirrorNode,
-  definition: PageBlockDefinition,
-  property: PageBlockDefinitionProperty
-): PageBlockEditorModel | null {
-  const id = getProsemirrorBlockId(prosemirrorNode);
-  if (!id) return null;
-
-  const variantId = getProsemirrorBlockVariantId(prosemirrorNode);
-  const hasBorder = getProsemirrorAttribute(prosemirrorNode, "hasBorder", z.boolean().optional()) !== false;
-
-  const tableChild = prosemirrorNode.content?.find(c => c.type === "table");
-  if (!tableChild) {
-    return emptyTable(id, variantId, 0);
-  }
-
-  // Nodes can are considered rows if they have correct node type + their content is non-empty
-  const rows = tableChild.content?.filter(c => c.type === "tableRow" && !!c.content?.length) ?? [];
-  if (!rows.length) {
-    return emptyTable(id, variantId, 0);
-  }
-
-  const rowHeaderCells = rows[0].content?.filter(c => c.type === "tableHeader").length ?? 0;
-  const columnHeaderCells = rows.filter(r => r.content?.[0]?.type === "tableHeader").length;
-
-  const hasHeaderRow = rows[0].content?.length === rowHeaderCells;
-  const hasHeaderColumn = rows.length === columnHeaderCells;
-
-  const tableValue: PageBlockItemTableValue = {
-    showBorder: hasBorder,
-    highlightHeaderRow: hasHeaderRow,
-    highlightHeaderColumn: hasHeaderColumn,
-    value: [],
-  };
-
-  tableValue.value = rows.map(row => {
-    return {
-      cells: (row.content ?? []).map(parseAsTableCell).filter(nonNullFilter),
-    };
-  });
-
-  return {
-    id: id,
-    type: "Block",
-    data: {
-      packageId: "io.supernova.block.table",
-      indentLevel: 0,
-      variantId: "default",
-
-      ...(variantId && { variantId: variantId }),
-
-      items: [
-        {
-          id: id,
-          props: {
-            table: tableValue,
-          },
-        },
-      ],
-    },
-  };
-}
-
-function parseAsTableCell(prosemirrorNode: ProsemirrorNode): PageBlockItemTableCell | null {
-  const id = getProsemirrorBlockId(prosemirrorNode);
-  if (!id) return null;
-
-  const textAlign = getProsemirrorAttribute(prosemirrorNode, "textAlign", z.string().optional());
-
-  let columnWidth: number | undefined;
-  const columnWidthArray = getProsemirrorAttribute(prosemirrorNode, "colwidth", z.array(z.number()).nullish());
-  if (columnWidthArray) {
-    columnWidth = roundDimension(columnWidthArray[0]);
-  }
-
-  const tableNodes = (prosemirrorNode.content ?? []).map(parseAsTableNode).filter(nonNullFilter);
-
-  return {
-    id: id,
-    alignment: parseTableCellAlignment(textAlign),
-    ...(columnWidth && { columnWidth }),
-    nodes: tableNodes.length ? tableNodes : emptyTableCellContent(),
-  };
-}
-
-function parseTableCellAlignment(alignment: unknown): PageBlockTableCellAlignment {
-  if (!alignment) return "Left";
-
-  switch (alignment) {
-    case "left":
-      return "Left";
-    case "center":
-      return "Center";
-    case "right":
-      return "Right";
-
-    default:
-      return "Left";
-  }
-}
-
-function parseAsTableNode(prosemirrorNode: ProsemirrorNode): PageBlockItemTableNode | null {
-  const id = getProsemirrorBlockId(prosemirrorNode);
-  if (!id) return null;
-
-  switch (prosemirrorNode.type) {
-    case "paragraph":
-      return {
-        type: "RichText",
-        id: id,
-        value: parseRichText(prosemirrorNode.content ?? []),
-      };
-
-    case "image":
-      const items = getProsemirrorAttribute(prosemirrorNode, "items", z.string());
-      if (!items) return null;
-
-      const parsedItems = PageBlockItemV2.array().safeParse(JSON.parse(items));
-      if (!parsedItems.success) return null;
-
-      const rawImagePropertyValue = parsedItems.data[0]?.props.image;
-      if (!rawImagePropertyValue) return null;
-
-      const imagePropertyValueParseResult = PageBlockItemImageValue.safeParse(rawImagePropertyValue);
-      if (!imagePropertyValueParseResult.success) return null;
-
-      const { value, caption, alt, alignment } = imagePropertyValueParseResult.data;
-
-      return {
-        type: "Image",
-        id,
-        value,
-        ...(alt && { alt }),
-        ...(caption && { caption }),
-        ...(alignment && { alignment }),
-      };
-
-    default:
-      return null;
-  }
-}
-
-function emptyTable(id: string, variantId?: string, indentLevel?: number): PageBlockEditorModel {
-  const tableValue: PageBlockItemTableValue = {
-    showBorder: true,
-    highlightHeaderColumn: false,
-    highlightHeaderRow: false,
-    value: [],
-  };
-
-  for (let i = 0; i < 2; i++) {
-    tableValue.value.push({
-      cells: [],
-    });
-
-    for (let j = 0; j < 3; j++) {
-      tableValue.value[i].cells.push({
-        id: "",
-        alignment: "Left",
-        nodes: emptyTableCellContent(),
-      });
-    }
-  }
-
-  return {
-    id: id,
-    type: "Block",
-    data: {
-      packageId: "io.supernova.block.table",
-      indentLevel: indentLevel ?? 0,
-      variantId: variantId,
-      items: [
-        {
-          id: id,
-          props: {
-            table: tableValue,
-          },
-        },
-      ],
-    },
-  };
-}
-
-function emptyTableCellContent(): PageBlockItemTableNode[] {
-  return [
-    {
-      type: "RichText",
-      id: "",
-      value: { spans: [] },
-    },
-  ];
-}
-
-//
-// Divider
-//
-
-function parseAsDivider(
-  prosemirrorNode: ProsemirrorNode,
-  definition: PageBlockDefinition
-): PageBlockEditorModel | null {
-  const id = getProsemirrorBlockId(prosemirrorNode);
-  if (!id) return null;
-
-  const variantId = getProsemirrorBlockVariantId(prosemirrorNode);
-
-  return {
-    id: id,
-    type: "Block",
-    data: {
-      packageId: definition.id,
-      indentLevel: 0,
-
-      ...(variantId && { variantId: variantId }),
-
-      items: [{ id: id, props: {} }],
-    },
-  };
-}
-
-//
-// Custom block
-//
-
-function parseAsCustomBlock(
-  prosemirrorNode: ProsemirrorNode,
-  definition: PageBlockDefinition
-): PageBlockEditorModel | null {
-  const id = getProsemirrorBlockId(prosemirrorNode);
-  if (!id) return null;
-
-  const variantId = getProsemirrorBlockVariantId(prosemirrorNode);
-
-  const appearance = parseAppearance(prosemirrorNode);
-
-  const parsedItems = parseBlockItems(prosemirrorNode, definition) ?? [];
-
-  // Some blocks can expect at least one item to be always present. In such case we fallback to an item
-  // without any properties defined which should be a valid item for any combination of block settings.
-  if (!parsedItems.length && definitionExpectsPlaceholderItem(definition)) {
-    parsedItems.push({
-      id: id,
-      props: {},
-    });
-  }
-
-  return {
-    id: id,
-    type: "Block",
-    data: {
-      packageId: definition.id,
-      indentLevel: 0,
-
-      ...(variantId && { variantId: variantId }),
-      ...(appearance && { appearance: appearance }),
-
-      items: parsedItems,
-    },
-  };
-}
-
-function definitionExpectsPlaceholderItem(definition: PageBlockDefinition): boolean {
-  return (
-    // Block needs an item when it's a data block (tokens, components, etc)
-    !definition.behavior.items ||
-    // Block needs an item when number of items is expected to be 1
-    definition.behavior.items.numberOfItems === 1
-  );
-}
-
-function parseBlockItems(prosemirrorNode: ProsemirrorNode, definition: PageBlockDefinition): PageBlockItemV2[] | null {
-  const itemsString = getProsemirrorAttribute(prosemirrorNode, "items", z.string());
-  if (!itemsString) return null;
-
-  const itemsJson: unknown = JSON.parse(itemsString);
-  if (!Array.isArray(itemsJson)) {
-    console.error("Block `items` property must be a json array");
-    return null;
-  }
-
-  return itemsJson.map(i => parseItem(i, definition)).filter(nonNullFilter);
-}
-
-function parseAppearance(prosemirrorNode: ProsemirrorNode): PageBlockAppearanceV2 | undefined {
-  let appearance: PageBlockAppearanceV2 = {};
-
-  const rawAppearanceString = getProsemirrorAttribute(prosemirrorNode, "appearance", z.string().optional());
-  if (rawAppearanceString) {
-    const parsedAppearance = PageBlockAppearanceV2.safeParse(JSON.parse(rawAppearanceString));
-    if (parsedAppearance.success) {
-      appearance = parsedAppearance.data;
-    }
-  }
-
-  const columns = getProsemirrorAttribute(prosemirrorNode, "columns", z.number().optional());
-  if (columns) {
-    appearance.numberOfColumns = columns;
-  }
-
-  const backgroundColor = getProsemirrorAttribute(prosemirrorNode, "backgroundColor", z.string().optional());
-  if (backgroundColor) {
-    const parsedColor = PageBlockColorV2.safeParse(JSON.parse(backgroundColor));
-    if (parsedColor.success) {
-      appearance.itemBackgroundColor = parsedColor.data;
-    }
-  }
-
-  if (!Object.keys(appearance).length) return undefined;
-
-  return appearance;
-}
-
-function parseItem(rawItem: unknown, definition: PageBlockDefinition): PageBlockItemV2 | null {
-  const parsedItem = PageBlockItemV2.safeParse(rawItem);
-  if (!parsedItem.success) {
-    return null;
-  }
-
-  const sanitizedProps: Record<string, PageBlockItemUntypedValue> = {};
-
-  for (const property of definition.item.properties) {
-    const value = parsedItem.data.props[property.id];
-    if (!value) {
-      continue;
-    }
-
-    const valueSchema = valueSchemaForPropertyType(property.type);
-    const validationResult = valueSchema.safeParse(value);
-
-    if (validationResult.success) {
-      sanitizedProps[property.id] = validationResult.data;
-    } else {
-      console.log(validationResult.error.toString());
-    }
-  }
-
-  return {
-    id: parsedItem.data.id,
-    ...(parsedItem.data.linksTo && { linksTo: parsedItem.data.linksTo }),
-    props: sanitizedProps,
-  };
-}
-
-function valueSchemaForPropertyType(type: PageBlockDefinitionPropertyType) {
-  switch (type) {
-    case "RichText":
-      return PageBlockItemRichTextValue;
-    case "MultiRichText":
-      return PageBlockItemMultiRichTextValue;
-    case "Text":
-      return PageBlockItemTextValue;
-    case "Boolean":
-      return PageBlockItemBooleanValue;
-    case "Number":
-      return PageBlockItemNumberValue;
-    case "SingleSelect":
-      return PageBlockItemSingleSelectValue;
-    case "MultiSelect":
-      return PageBlockItemMultiSelectValue;
-    case "Image":
-      return PageBlockItemImageValue;
-    case "Token":
-      return PageBlockItemTokenValue;
-    case "TokenType":
-      return PageBlockItemTokenTypeValue;
-    case "TokenProperty":
-      return PageBlockItemTokenPropertyValue;
-    case "Component":
-      return PageBlockItemComponentValue;
-    case "ComponentProperty":
-      return PageBlockItemComponentPropertyValue;
-    case "Asset":
-      return PageBlockItemAssetValue;
-    case "AssetProperty":
-      return PageBlockItemAssetPropertyValue;
-    case "FigmaNode":
-      return PageBlockItemFigmaNodeValue;
-    case "EmbedURL":
-      return PageBlockItemEmbedValue;
-    case "URL":
-      return PageBlockItemUrlValue;
-    case "Markdown":
-      return PageBlockItemMarkdownValue;
-    case "Code":
-      return PageBlockItemCodeValue;
-    case "CodeSandbox":
-      return PageBlockItemSandboxValue;
-    case "Table":
-      return PageBlockItemTableValue;
-    case "Divider":
-      return PageBlockItemDividerValue;
-    case "Storybook":
-      return PageBlockItemStorybookValue;
-    case "Color":
-      return PageBlockItemColorValue;
-    case "FigmaComponent":
-      return PageBlockItemFigmaComponentValue;
-    case "RichTextEditor":
-      return PageBlockItemRichTextEditorValue;
-  }
-}
-
-//
-// Attributes
-//
-
-function getProsemirrorBlockId(prosemirrorNode: ProsemirrorNode): string | undefined {
-  const id = getProsemirrorAttribute(prosemirrorNode, "id", z.string());
-  if (!id) console.warn(`Prosemirror attribute "id" on ${prosemirrorNode.type} is required`);
-  return id;
-}
-
-function getProsemirrorBlockVariantId(prosemirrorNode: ProsemirrorNode): string | undefined {
-  return getProsemirrorAttribute(prosemirrorNode, "variantId", nullishToOptional(z.string()));
-}
-
-function getProsemirrorAttribute<I, O>(
-  prosemirrorNode: ProsemirrorNode,
-  attributeName: string,
-  validationSchema: ZodSchema<O, ZodTypeDef, I>
-): O | undefined {
-  const parsedAttr = validationSchema.safeParse(prosemirrorNode.attrs?.[attributeName]);
-  if (parsedAttr.success) {
-    return parsedAttr.data;
-  } else {
-    console.warn(`Prosemirror attribute ${attributeName} on ${prosemirrorNode.type} is invalid`);
-    console.warn(parsedAttr.error.flatten());
-    return undefined;
-  }
-}
-
-//
-// Utils
-//
-
-function nonNullFilter<T>(item: T | null): item is T {
-  return item !== null;
-}
-
-function mapByUnique<V, K>(items: V[], keyFn: (item: V) => K): Map<K, V> {
-  const result = new Map<K, V>();
-  for (const item of items) {
-    result.set(keyFn(item), item);
-  }
-  return result;
-}
-
-function roundDimension(dimension: number) {
-  return Math.round(dimension * 100) / 100;
-}