@supernova-studio/client 0.52.17 → 0.52.19

package/package.json

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

package/src/api/dto/elements/components/figma-component.ts

@@ -36,6 +36,7 @@ export const DTOFigmaComponent = z.object({
 
   parentComponentPersistentId: z.string().optional(),
   componentPropertyDefinitions: DTOFigmaComponentPropertyMap.optional(),
+  childrenPersistentIds: z.string().array().optional(),
 });
 
 export const DTOFigmaComponentListResponse = z.object({

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

@@ -4,6 +4,10 @@ import {
   PageBlockDefinitionProperty,
   PageBlockDefinitionRichTextOptions,
   PageBlockItemImageValue,
+  PageBlockItemRichTextEditorListNode,
+  PageBlockItemRichTextEditorNode,
+  PageBlockItemRichTextEditorParagraphNode,
+  PageBlockItemRichTextEditorValue,
   PageBlockItemRichTextValue,
   PageBlockItemTableCell,
   PageBlockItemTableNode,
@@ -23,7 +27,7 @@ import * as Y from "yjs";
 import { ListNode, ListTreeBuilder } from "./list-tree-builder";
 import { DocumentationPageEditorModel } from "./model";
 import { PageBlockEditorModel, PageSectionEditorModel } from "./model/block";
-import { pmSchema } from "./prosemirror";
+import { mainEditorProsemirrorSchema } from "./prosemirror";
 import { ProsemirrorMark, ProsemirrorNode } from "./prosemirror/types";
 import { BlockDefinitionUtils, BlockParsingUtils } from "./utils";
 
@@ -59,7 +63,7 @@ export function pageToYXmlFragment(
 ): Y.XmlFragment {
   const doc = pageToProsemirrorDoc(page, definitions);
   // console.log(JSON.stringify(doc, null, 2));
-  return prosemirrorJSONToYXmlFragment(pmSchema, doc, fragment);
+  return prosemirrorJSONToYXmlFragment(mainEditorProsemirrorSchema, doc, fragment);
 }
 
 export function pageToProsemirrorDoc(
@@ -103,6 +107,59 @@ export function blockToProsemirrorNode(
   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
 //

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

@@ -1,2 +1,3 @@
-export * from "./schema";
+export * from "./inner-editor-schema";
+export * from "./main-editor-schema";
 export * from "./types";

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

@@ -0,0 +1,145 @@
+import { Schema } from "prosemirror-model";
+
+const pmSchemaJson = {
+  topNode: "doc",
+  nodes: {
+    paragraph: {
+      content: "inline*",
+      group: "block",
+      parseDOM: [
+        {
+          tag: "p",
+        },
+      ],
+    },
+    listItem: {
+      content: "paragraph",
+      defining: true,
+      parseDOM: [
+        {
+          tag: "li",
+        },
+      ],
+    },
+    doc: {
+      content: "block+",
+    },
+    hardBreak: {
+      group: "inline",
+      inline: true,
+      selectable: false,
+      parseDOM: [
+        {
+          tag: "br",
+        },
+      ],
+    },
+    text: {
+      group: "inline",
+    },
+    bulletList: {
+      content: "listItem+",
+      group: "block list",
+      parseDOM: [
+        {
+          tag: "ul",
+        },
+      ],
+    },
+    orderedList: {
+      content: "listItem+",
+      group: "block list",
+      attrs: {
+        start: {
+          default: 1,
+        },
+        type: {
+          default: null,
+        },
+      },
+      parseDOM: [
+        {
+          tag: "ol",
+        },
+      ],
+    },
+  },
+  marks: {
+    link: {
+      inclusive: false,
+      attrs: {
+        href: {
+          default: null,
+        },
+        target: {
+          default: "_blank",
+        },
+        rel: {
+          default: "noopener noreferrer nofollow",
+        },
+        class: {
+          default: "tiptap-link",
+        },
+      },
+      parseDOM: [
+        {
+          tag: "a[href]",
+        },
+      ],
+    },
+    bold: {
+      parseDOM: [
+        {
+          tag: "strong",
+        },
+        {
+          tag: "b",
+        },
+        {
+          style: "font-weight",
+        },
+      ],
+    },
+    italic: {
+      parseDOM: [
+        {
+          tag: "em",
+        },
+        {
+          tag: "i",
+        },
+        {
+          style: "font-style=italic",
+        },
+      ],
+    },
+    strike: {
+      parseDOM: [
+        {
+          tag: "s",
+        },
+        {
+          tag: "del",
+        },
+        {
+          tag: "strike",
+        },
+        {
+          style: "text-decoration",
+          consuming: false,
+        },
+      ],
+    },
+    code: {
+      excludes: "bold code italic strike link",
+      code: true,
+      parseDOM: [
+        {
+          tag: "code",
+        },
+      ],
+    },
+  },
+} as const;
+
+export const innerEditorProsemirrorSchema = new Schema(pmSchemaJson);

package/src/yjs/docs-editor/prosemirror/{schema.ts → main-editor-schema.ts}

@@ -1,6 +1,6 @@
 import { Schema } from "prosemirror-model";
 
-const newSchema = {
+const pmSchemaJson = {
   topNode: "doc",
   nodes: {
     paragraph: {
@@ -574,4 +574,4 @@ const newSchema = {
   },
 } as const;
 
-export const pmSchema = new Schema(newSchema);
+export const mainEditorProsemirrorSchema = new Schema(pmSchemaJson);

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

@@ -10,7 +10,7 @@ export type ProsemirrorNode = {
 
 export type ProsemirrorMark = {
   type: string;
-  attrs: Record<string, any>;
+  attrs?: Record<string, any>;
 };
 
 export type ProsemirrorBlockItem = {

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

@@ -21,6 +21,9 @@ import {
   PageBlockItemMultiRichTextValue,
   PageBlockItemMultiSelectValue,
   PageBlockItemNumberValue,
+  PageBlockItemRichTextEditorListNode,
+  PageBlockItemRichTextEditorNode,
+  PageBlockItemRichTextEditorParagraphNode,
   PageBlockItemRichTextEditorValue,
   PageBlockItemRichTextValue,
   PageBlockItemSandboxValue,
@@ -85,6 +88,56 @@ export function shallowProsemirrorNodeToBlock(
   );
 }
 
+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
 //