@morphika/andami 0.2.4 → 0.2.6

package/lib/builder/types.ts

@@ -80,6 +80,16 @@ export function isSectionBlockType(type: string): boolean {
   return SECTION_BLOCK_TYPES.has(type);
 }
 
+/** Check if a V2 section contains a single section-level block (e.g. projectGridBlock).
+ *  These sections behave like top-level content items: no column management,
+ *  selecting the section auto-selects the block. */
+export function isSectionBlockSection(section: { columns?: Array<{ blocks?: Array<{ _type: string }> }> }): boolean {
+  const cols = section.columns || [];
+  if (cols.length !== 1) return false;
+  const blocks = cols[0].blocks || [];
+  return blocks.length === 1 && SECTION_BLOCK_TYPES.has(blocks[0]._type);
+}
+
 export type SectionType = "empty-v2" | "parallaxGroup" | SectionBlockType;
 
 export interface SectionTypeInfo {

package/lib/editor/index.ts

@@ -0,0 +1,2 @@
+export { portableTextToTiptap } from "./portableToTiptap";
+export { tiptapToPortableText } from "./tiptapToPortable";

package/lib/editor/portableToTiptap.ts

@@ -0,0 +1,156 @@
+/**
+ * portableToTiptap.ts
+ *
+ * Converts Sanity Portable Text blocks → Tiptap JSON document.
+ * Used when loading existing content into the RichTextEditor.
+ *
+ * Supported mappings:
+ *   Block styles:  normal → paragraph, h1–h4 → heading, blockquote → blockquote
+ *   Decorators:    strong → bold, em → italic, underline → underline, strike-through → strike
+ *   Annotations:   link (href, blank) → link mark with href + target
+ */
+
+import type { PortableTextContent, PortableTextBlock } from "../sanity/types";
+
+// ── Tiptap JSON node types ──────────────────────────────────────────
+
+interface TiptapMark {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+interface TiptapNode {
+  type: string;
+  attrs?: Record<string, unknown>;
+  content?: TiptapNode[];
+  text?: string;
+  marks?: TiptapMark[];
+}
+
+interface TiptapDoc {
+  type: "doc";
+  content: TiptapNode[];
+}
+
+// ── Mark mapping ────────────────────────────────────────────────────
+
+const DECORATOR_MAP: Record<string, string> = {
+  strong: "bold",
+  em: "italic",
+  underline: "underline",
+  "strike-through": "strike",
+};
+
+// ── Block style → Tiptap node ───────────────────────────────────────
+
+function blockStyleToNode(style: string | undefined): { type: string; attrs?: Record<string, unknown> } {
+  switch (style) {
+    case "h1": return { type: "heading", attrs: { level: 1 } };
+    case "h2": return { type: "heading", attrs: { level: 2 } };
+    case "h3": return { type: "heading", attrs: { level: 3 } };
+    case "h4": return { type: "heading", attrs: { level: 4 } };
+    case "blockquote": return { type: "blockquote" };
+    default: return { type: "paragraph" };
+  }
+}
+
+// ── Span → Tiptap text nodes ────────────────────────────────────────
+
+function convertSpan(
+  span: { text?: string; marks?: string[] },
+  markDefs: PortableTextBlock["markDefs"]
+): TiptapNode | null {
+  const text = span.text ?? "";
+  // Tiptap doesn't support empty text nodes well — skip them
+  if (!text) return null;
+
+  const marks: TiptapMark[] = [];
+
+  for (const mark of span.marks ?? []) {
+    // Check decorators first
+    if (DECORATOR_MAP[mark]) {
+      marks.push({ type: DECORATOR_MAP[mark] });
+      continue;
+    }
+    // Check if it's a markDef reference (e.g. link annotation)
+    const def = markDefs?.find((d) => d._key === mark);
+    if (def && def._type === "link") {
+      marks.push({
+        type: "link",
+        attrs: {
+          href: (def.href as string) || "",
+          target: (def.blank as boolean) ? "_blank" : null,
+          rel: (def.blank as boolean) ? "noopener noreferrer" : null,
+          class: null,
+        },
+      });
+    }
+    // Color annotation → Tiptap textStyle mark
+    if (def && def._type === "color") {
+      marks.push({
+        type: "textStyle",
+        attrs: { color: (def.hex as string) || null },
+      });
+    }
+  }
+
+  return {
+    type: "text",
+    text,
+    ...(marks.length > 0 ? { marks } : {}),
+  };
+}
+
+// ── Block → Tiptap node ─────────────────────────────────────────────
+
+function convertBlock(block: PortableTextBlock): TiptapNode {
+  const { type, attrs } = blockStyleToNode(block.style);
+  const children = block.children ?? [];
+
+  const textNodes = children
+    .map((child) => convertSpan(child, block.markDefs))
+    .filter((n): n is TiptapNode => n !== null);
+
+  // Blockquote wraps a paragraph in Tiptap
+  if (type === "blockquote") {
+    return {
+      type: "blockquote",
+      content: [
+        {
+          type: "paragraph",
+          content: textNodes.length > 0 ? textNodes : undefined,
+        },
+      ],
+    };
+  }
+
+  return {
+    type,
+    ...(attrs ? { attrs } : {}),
+    ...(textNodes.length > 0 ? { content: textNodes } : {}),
+  };
+}
+
+// ── Main export ─────────────────────────────────────────────────────
+
+/**
+ * Convert Sanity Portable Text content to a Tiptap JSON document.
+ * Returns a valid Tiptap `doc` node ready for `editor.commands.setContent()`.
+ */
+export function portableTextToTiptap(content: PortableTextContent | undefined | null): TiptapDoc {
+  if (!content || content.length === 0) {
+    return {
+      type: "doc",
+      content: [{ type: "paragraph" }],
+    };
+  }
+
+  const nodes = content
+    .filter((block) => block._type === "block")
+    .map(convertBlock);
+
+  return {
+    type: "doc",
+    content: nodes.length > 0 ? nodes : [{ type: "paragraph" }],
+  };
+}

package/lib/editor/tiptapToPortable.ts

@@ -0,0 +1,238 @@
+/**
+ * tiptapToPortable.ts
+ *
+ * Converts Tiptap JSON document → Sanity Portable Text blocks.
+ * Used when saving edits from the RichTextEditor back to the builder store.
+ *
+ * Supported mappings:
+ *   paragraph → style "normal"
+ *   heading (level 1–4) → style "h1"–"h4"
+ *   blockquote → style "blockquote"
+ *   bold → decorator "strong"
+ *   italic → decorator "em"
+ *   underline → decorator "underline"
+ *   strike → decorator "strike-through"
+ *   link (href, target) → link annotation with href + blank
+ */
+
+import type { PortableTextBlock, PortableTextContent } from "../sanity/types";
+
+// ── Tiptap JSON types (minimal) ─────────────────────────────────────
+
+interface TiptapMark {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+interface TiptapNode {
+  type: string;
+  attrs?: Record<string, unknown>;
+  content?: TiptapNode[];
+  text?: string;
+  marks?: TiptapMark[];
+}
+
+// ── Key generation ──────────────────────────────────────────────────
+
+let _counter = 0;
+
+function genKey(prefix: string): string {
+  _counter += 1;
+  return `${prefix}_${Date.now().toString(36)}_${_counter.toString(36)}`;
+}
+
+/** Reset counter — useful for deterministic test output. */
+export function _resetKeyCounter(): void {
+  _counter = 0;
+}
+
+// ── Mark mapping (Tiptap → Sanity) ──────────────────────────────────
+
+const MARK_MAP: Record<string, string> = {
+  bold: "strong",
+  italic: "em",
+  underline: "underline",
+  strike: "strike-through",
+};
+
+// ── Convert text node marks ─────────────────────────────────────────
+
+interface MarkResult {
+  /** Decorator mark names to add to the span's `marks` array */
+  decorators: string[];
+  /** Link markDef to collect (if any) */
+  linkDef: { _key: string; _type: "link"; href: string; blank?: boolean } | null;
+  /** The _key of the link markDef to add to the span's marks array */
+  linkKey: string | null;
+  /** Color markDef to collect (if any) */
+  colorDef: { _key: string; _type: "color"; hex: string } | null;
+  /** The _key of the color markDef to add to the span's marks array */
+  colorKey: string | null;
+}
+
+function processMarks(
+  marks: TiptapMark[] | undefined,
+  existingLinkDefs: Map<string, string>,
+  existingColorDefs: Map<string, string>
+): MarkResult {
+  const decorators: string[] = [];
+  let linkDef: MarkResult["linkDef"] = null;
+  let linkKey: string | null = null;
+  let colorDef: MarkResult["colorDef"] = null;
+  let colorKey: string | null = null;
+
+  if (!marks) return { decorators, linkDef, linkKey, colorDef, colorKey };
+
+  for (const mark of marks) {
+    // Decorator marks
+    if (MARK_MAP[mark.type]) {
+      decorators.push(MARK_MAP[mark.type]);
+      continue;
+    }
+
+    // Link annotation
+    if (mark.type === "link" && mark.attrs) {
+      const href = (mark.attrs.href as string) || "";
+      const blank = mark.attrs.target === "_blank";
+
+      // Reuse existing markDef key for identical links to reduce duplication
+      const cacheKey = `${href}|${blank}`;
+      if (existingLinkDefs.has(cacheKey)) {
+        linkKey = existingLinkDefs.get(cacheKey)!;
+      } else {
+        const key = genKey("lnk");
+        linkDef = { _key: key, _type: "link", href, ...(blank ? { blank: true } : {}) };
+        linkKey = key;
+        existingLinkDefs.set(cacheKey, key);
+      }
+    }
+
+    // Color annotation (from Tiptap textStyle mark)
+    if (mark.type === "textStyle" && mark.attrs?.color) {
+      const hex = mark.attrs.color as string;
+
+      // Reuse existing markDef key for identical colors
+      if (existingColorDefs.has(hex)) {
+        colorKey = existingColorDefs.get(hex)!;
+      } else {
+        const key = genKey("clr");
+        colorDef = { _key: key, _type: "color", hex };
+        colorKey = key;
+        existingColorDefs.set(hex, key);
+      }
+    }
+  }
+
+  return { decorators, linkDef, linkKey, colorDef, colorKey };
+}
+
+// ── Block style from Tiptap node type ───────────────────────────────
+
+function nodeToBlockStyle(node: TiptapNode): string {
+  if (node.type === "heading" && node.attrs?.level) {
+    return `h${node.attrs.level}`;
+  }
+  if (node.type === "blockquote") return "blockquote";
+  return "normal";
+}
+
+// ── Flatten blockquote content ──────────────────────────────────────
+
+/**
+ * Tiptap blockquotes wrap paragraph nodes. We need to extract the
+ * text nodes from the inner paragraph.
+ */
+function flattenBlockquoteContent(node: TiptapNode): TiptapNode[] {
+  if (!node.content) return [];
+  // Collect text nodes from all inner paragraphs
+  const textNodes: TiptapNode[] = [];
+  for (const child of node.content) {
+    if (child.type === "paragraph" && child.content) {
+      textNodes.push(...child.content);
+    } else if (child.text) {
+      textNodes.push(child);
+    }
+  }
+  return textNodes;
+}
+
+// ── Convert a single block node ─────────────────────────────────────
+
+function convertBlockNode(node: TiptapNode): PortableTextBlock {
+  const style = nodeToBlockStyle(node);
+  const blockKey = genKey("blk");
+  const linkDefsMap = new Map<string, string>();
+  const colorDefsMap = new Map<string, string>();
+
+  // Get text nodes — flatten if blockquote
+  const textNodes = node.type === "blockquote"
+    ? flattenBlockquoteContent(node)
+    : (node.content ?? []).filter((n) => n.type === "text");
+
+  const children: PortableTextBlock["children"] = [];
+  const markDefs: PortableTextBlock["markDefs"] = [];
+
+  for (const textNode of textNodes) {
+    if (textNode.type !== "text" || !textNode.text) continue;
+
+    const { decorators, linkDef, linkKey, colorDef, colorKey } = processMarks(textNode.marks, linkDefsMap, colorDefsMap);
+
+    if (linkDef) {
+      markDefs!.push(linkDef as PortableTextBlock["markDefs"] extends (infer U)[] | undefined ? U : never);
+    }
+    if (colorDef) {
+      markDefs!.push(colorDef as PortableTextBlock["markDefs"] extends (infer U)[] | undefined ? U : never);
+    }
+
+    const spanMarks = [...decorators];
+    if (linkKey) spanMarks.push(linkKey);
+    if (colorKey) spanMarks.push(colorKey);
+
+    children!.push({
+      _type: "span",
+      _key: genKey("sp"),
+      text: textNode.text,
+      marks: spanMarks,
+    });
+  }
+
+  // Ensure at least one empty child so Sanity doesn't reject the block
+  if (children!.length === 0) {
+    children!.push({
+      _type: "span",
+      _key: genKey("sp"),
+      text: "",
+      marks: [],
+    });
+  }
+
+  return {
+    _type: "block",
+    _key: blockKey,
+    style,
+    markDefs: markDefs as PortableTextBlock["markDefs"],
+    children,
+  };
+}
+
+// ── Main export ─────────────────────────────────────────────────────
+
+/**
+ * Convert a Tiptap JSON document to Sanity Portable Text content.
+ * Accepts the Tiptap editor's `getJSON()` output.
+ */
+export function tiptapToPortableText(doc: { type: string; content?: TiptapNode[] }): PortableTextContent {
+  if (!doc.content || doc.content.length === 0) {
+    return [
+      {
+        _type: "block",
+        _key: genKey("blk"),
+        style: "normal",
+        markDefs: [],
+        children: [{ _type: "span", _key: genKey("sp"), text: "", marks: [] }],
+      },
+    ];
+  }
+
+  return doc.content.map(convertBlockNode);
+}