@supernova-studio/client 0.27.0 → 0.28.1

package/package.json

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

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

@@ -592,19 +592,28 @@ function serializeTextSpanAttribute(spanAttribute: PageBlockTextSpanAttribute):
     case "Code":
       return { type: "code", attrs: {} };
     case "Link":
-      return {
-        type: "link",
-        attrs: {
-          itemId: spanAttribute.documentationItemId,
-          href: spanAttribute.link,
-          target: spanAttribute.openInNewWindow ? "_blank" : "_self",
-          rel: "noopener noreferrer nofollow",
-          class: null,
-        },
-      };
+      if (spanAttribute.link) {
+        return serializeLinkMark(spanAttribute.link, spanAttribute.openInNewWindow ?? false);
+      } else if (spanAttribute.documentationItemId) {
+        return serializeLinkMark(`@page:${spanAttribute.documentationItemId}`, spanAttribute.openInNewWindow ?? false);
+      } else {
+        return serializeLinkMark("about:blank", spanAttribute.openInNewWindow ?? false);
+      }
   }
 }
 
+function serializeLinkMark(href: string, openInNewWindow: boolean): ProsemirrorMark {
+  return {
+    type: "link",
+    attrs: {
+      href: href,
+      target: openInNewWindow ? "_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 {

package/src/yjs/docs-editor/mock.ts

@@ -11,6 +11,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Text",
     description: "Plain text",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/text.svg",
     searchKeywords: ["paragraph", "rich text"],
     item: {
       properties: [
@@ -72,6 +73,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 1",
     description: "Main sections within the page",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-1.svg",
     searchKeywords: ["heading", "h1"],
     item: {
       properties: [
@@ -134,6 +136,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 2",
     description: "Section subheadings",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-2.svg",
     searchKeywords: ["heading", "h2"],
     item: {
       properties: [
@@ -196,6 +199,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 3",
     description: "Further subsections",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-3.svg",
     searchKeywords: ["heading", "h3"],
     item: {
       properties: [
@@ -258,6 +262,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 4",
     description: "Details in subsections",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-4.svg",
     searchKeywords: ["heading", "h4"],
     item: {
       properties: [
@@ -320,6 +325,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Title 5",
     description: "Nuanced details or sub-points",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/title-5.svg",
     searchKeywords: ["heading", "h5"],
     item: {
       properties: [
@@ -382,6 +388,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Ordered list",
     description: "A list with numbers",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/list-ordered.svg",
     searchKeywords: ["ol"],
     item: {
       properties: [
@@ -443,6 +450,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Unordered list",
     description: "A list with bullet points",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/list-unordered.svg",
     searchKeywords: ["ul", "bullet points"],
     item: {
       properties: [
@@ -504,6 +512,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Divider",
     description: "A section divider",
     category: "Layout",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/divider.svg",
     searchKeywords: ["hr", "line", "rule", "separator"],
     item: {
       properties: [
@@ -563,6 +572,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Blockquote",
     description: "Display a quotation",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/blockquote.svg",
     searchKeywords: ["cite"],
     item: {
       properties: [
@@ -625,6 +635,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Callout",
     description: "Highlight a section of text",
     category: "Text",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/callout.svg",
     searchKeywords: ["banner", "alert", "note", "tip", "warning"],
     item: {
       properties: [
@@ -687,6 +698,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Image",
     description: "Display an image or Figma frame",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/image.svg",
     searchKeywords: ["image", "figma", "frame", "picture", "photo"],
     item: {
       properties: [
@@ -749,6 +761,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Shortcut links",
     description: "Link to a page or external URL",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/shortcuts.svg",
     searchKeywords: [],
     item: {
       properties: [
@@ -765,6 +778,9 @@ const blocks: PageBlockDefinition[] = [
               width: "Icon",
               aspectRatio: "Square",
             },
+            imageOnLeft: {
+              width: "Medium",
+            },
             iconOnLeft: {
               width: "Icon",
               aspectRatio: "Square",
@@ -929,6 +945,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Accessibility Color Grid",
     description: "Visualize accessibility of your color tokens.",
     category: "Tokens",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/token-a11y-contrast-grid.svg",
     searchKeywords: ["color", "accessibility", "grid", "contrast", "blind", "impairment"],
     item: {
       properties: [
@@ -992,6 +1009,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Embed",
     description: "Embed a generic URL",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/embed.svg",
     searchKeywords: ["embed", "url", "iframe", "site", "import"],
     item: {
       properties: [
@@ -1057,6 +1075,7 @@ const blocks: PageBlockDefinition[] = [
     name: "YouTube",
     description: "Embed a Youtube video",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/embed-youtube.svg",
     searchKeywords: ["embed", "video", "player", "upload"],
     item: {
       properties: [
@@ -1122,6 +1141,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Lottie animation",
     description: "Preview a Lottie animation",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/lottie.svg",
     searchKeywords: ["embed", "lottie", "animation", "rive", "json"],
     item: {
       properties: [
@@ -1225,6 +1245,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Storybook",
     description: "Embed Storybook canvas",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/storybook.svg",
     searchKeywords: ["storybook", "story", "stories", "example", "preview", "code", "react"],
     item: {
       properties: [
@@ -1288,6 +1309,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Figma embed",
     description: "Embed a Figma canvas or prototype",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/embed-figma.svg",
     searchKeywords: ["embed", "figma", "design", "prototype", "canvas"],
     item: {
       properties: [
@@ -1352,6 +1374,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Markdown",
     description: "Render Markdown URL",
     category: "Other",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/markdown.svg",
     searchKeywords: ["md", "embed", "api", "table", "mdx"],
     item: {
       properties: [
@@ -1453,6 +1476,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Table",
     description: "Display a simple table",
     category: "Layout",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/table.svg",
     searchKeywords: ["grid", "data", "spreadsheet", "api"],
     item: {
       properties: [
@@ -1512,6 +1536,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Token detail",
     description: "Show a single design tokens",
     category: "Tokens",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/token-detail.svg",
     searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme"],
     item: {
       properties: [
@@ -1615,6 +1640,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Token list",
     description: "Show a list of design tokens",
     category: "Tokens",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/token-list.svg",
     searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme"],
     item: {
       properties: [
@@ -1724,6 +1750,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Token group",
     description: "Show a group of design tokens",
     category: "Tokens",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/token-list.svg",
     searchKeywords: ["color", "typography", "spacing", "grid", "material", "theme"],
     item: {
       properties: [
@@ -1832,6 +1859,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Code",
     description: "Code description",
     category: "Code",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/code.svg",
     searchKeywords: ["code"],
     item: {
       properties: [
@@ -1890,6 +1918,7 @@ const blocks: PageBlockDefinition[] = [
     name: "React code",
     description: "Render React code",
     category: "Code",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/code-react.svg",
     searchKeywords: ["code", "react", "snippet", "storybook", "editor", "example"],
     item: {
       properties: [
@@ -2025,6 +2054,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Link",
     description: "Preview of a link",
     category: "Media",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/shortcut-link.svg",
     searchKeywords: [],
     item: {
       properties: [
@@ -2082,6 +2112,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Assets",
     description: "Display icons or illustrations",
     category: "Assets",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/assets.svg",
     searchKeywords: ["icons", "illustrations", "grid", "svg", "logos", "theme"],
     item: {
       properties: [
@@ -2184,6 +2215,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Figma frames",
     description: "Display Figma frames as images",
     category: "Figma",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/figma-frames.svg",
     searchKeywords: ["figma", "frames", "image"],
     item: {
       properties: [
@@ -2266,6 +2298,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Release notes",
     description: "Show version release notes",
     category: "Other",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/release-notes.svg",
     searchKeywords: ["version", "changelog", "history"],
     item: {
       properties: [],
@@ -2318,6 +2351,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Component checklist",
     description: "Highlight specific features of your components",
     category: "Components",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/component-checklist.svg",
     searchKeywords: ["components", "health", "properties", "overview", "status"],
     item: {
       properties: [
@@ -2397,6 +2431,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Component overview table",
     description: "Show the overview of all your components",
     category: "Components",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/component-overview-table.svg",
     searchKeywords: ["components", "health", "properties", "overview", "status"],
     item: {
       properties: [
@@ -2468,6 +2503,7 @@ const blocks: PageBlockDefinition[] = [
     name: "Component health",
     description: "Show component health and additional attributes",
     category: "Components",
+    icon: "https://cdn-assets.supernova.io/blocks/icons/component-health.svg",
     searchKeywords: ["components", "health", "properties", "overview", "status"],
     item: {
       properties: [

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

@@ -363,20 +363,34 @@ function parseRichTextAttribute(mark: ProsemirrorMark): PageBlockTextSpanAttribu
     case "code":
       return { type: "Code" };
     case "link":
-      const itemId = getProsemirrorAttribute(mark, "itemId", z.string().optional());
-      const href = getProsemirrorAttribute(mark, "href", z.string().optional());
-
-      return {
-        type: "Link",
-        openInNewWindow: mark.attrs?.target !== "_self",
-        documentationItemId: itemId,
-        link: href,
-      };
+      return parseProsemirrorLink(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 openInNewWindow = target === "_blank";
+
+  if (href.startsWith("@")) {
+    return {
+      type: "Link",
+      openInNewWindow: openInNewWindow,
+      documentationItemId: href.split(":")[1],
+    };
+  } else {
+    return {
+      type: "Link",
+      openInNewWindow: openInNewWindow,
+      link: href,
+    };
+  }
+}
+
 //
 // Embed
 //