@morphika/andami 0.2.5 → 0.2.7

package/components/blocks/TextBlockRenderer.tsx

@@ -1,5 +1,5 @@
 import type { TextBlock } from "../../lib/sanity/types";
-import { PortableText } from "next-sanity";
+import { PortableText, type PortableTextComponents } from "next-sanity";
 
 /** Resolve fontSize: supports numeric px and legacy string enum */
 function resolvePublicFontSize(fontSize?: number | string): string | undefined {
@@ -79,6 +79,31 @@ export function getTextBlockStyles(block: TextBlock): { className: string; style
   return { className: classes, style: inlineStyle };
 }
 
+/** Custom Portable Text components for rich text rendering. */
+const richTextComponents: PortableTextComponents = {
+  marks: {
+    link: ({ value, children }) => {
+      const href = value?.href || "#";
+      const blank = value?.blank;
+      return (
+        <a
+          href={href}
+          target={blank ? "_blank" : undefined}
+          rel={blank ? "noopener noreferrer" : undefined}
+          className="underline decoration-current underline-offset-2 hover:opacity-75 transition-opacity"
+        >
+          {children}
+        </a>
+      );
+    },
+    color: ({ value, children }) => {
+      const hex = value?.hex;
+      if (!hex) return <>{children}</>;
+      return <span style={{ color: hex }}>{children}</span>;
+    },
+  },
+};
+
 export default function TextBlockRenderer({ block }: { block: TextBlock }) {
   if (!block.text?.length) return null;
 
@@ -89,7 +114,7 @@ export default function TextBlockRenderer({ block }: { block: TextBlock }) {
       className={`${className} space-y-[0.75em]`}
       style={style}
     >
-      <PortableText value={block.text} />
+      <PortableText value={block.text} components={richTextComponents} />
     </div>
   );
 }

package/components/blocks/TypewriterRichText.tsx

@@ -80,7 +80,7 @@ function wrapInMarks(
         result = <code>{result}</code>;
         break;
       default: {
-        // Check if it's a link (markDef reference)
+        // Check if it's a markDef reference (link or color annotation)
         const def = getMarkDef(block, mark);
         if (def && def._type === "link" && def.href) {
           result = (
@@ -92,6 +92,12 @@ function wrapInMarks(
               {result}
             </a>
           );
+        } else if (def && def._type === "color" && def.hex) {
+          result = (
+            <span style={{ color: def.hex as string }}>
+              {result}
+            </span>
+          );
         }
         break;
       }

package/components/builder/CanvasToolbar.tsx

@@ -75,10 +75,10 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
     <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-px rounded-full bg-[#1a1a1a] shadow-xl px-1 py-1"
       style={{ userSelect: "none" }}
     >
-      {/* Select tool */}
+      {/* Select tool — Figma-style filled cursor */}
       <button
         onClick={() => setCanvasTool("select")}
-        className={`flex items-center justify-center w-8 h-8 rounded-full text-xs transition-colors ${
+        className={`flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
           tool === "select"
             ? "bg-white/15 text-white"
             : "text-neutral-400 hover:text-white hover:bg-white/10"
@@ -86,20 +86,15 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
         title="Select tool (V)"
         aria-label="Select tool"
       >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-          <path
-            d="M2 1L12 7L7 8L5 13L2 1Z"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinejoin="round"
-          />
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round">
+          <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
         </svg>
       </button>
 
-      {/* Hand tool */}
+      {/* Hand tool — Figma-style */}
       <button
         onClick={() => setCanvasTool("hand")}
-        className={`flex items-center justify-center w-8 h-8 rounded-full text-xs transition-colors ${
+        className={`flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
           tool === "hand"
             ? "bg-white/15 text-white"
             : "text-neutral-400 hover:text-white hover:bg-white/10"
@@ -107,12 +102,11 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
         title="Hand tool (H)"
         aria-label="Hand tool"
       >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-          {/* Five-finger open hand — cleaner icon */}
-          <path d="M18 11V6.5a1.5 1.5 0 0 0-3 0V11" />
-          <path d="M15 9.5V4a1.5 1.5 0 0 0-3 0v7" />
-          <path d="M12 11V5.5a1.5 1.5 0 0 0-3 0v6.5" />
-          <path d="M9 11V9a1.5 1.5 0 0 0-3 0v3c0 4.42 2.69 8 6 8h1c3.31 0 6-3.58 6-8V11" />
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+          <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
+          <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" />
+          <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
         </svg>
       </button>
 

package/components/builder/live-preview/LiveTextEditor.tsx

@@ -1,198 +1,117 @@
-"use client";
-
-import { useState, useRef, useCallback, useEffect } from "react";
-import { useBuilderStore } from "../../../lib/builder/store";
-import type { TextBlock, ContentBlock } from "../../../lib/sanity/types";
-
-/** Hook to get page-level text color for default block text rendering */
-export function usePageTextColor(): string {
-  return useBuilderStore((s) => s.pageSettings.text_color) || "#0a0a0a";
-}
-
-/** Resolve fontSize: supports new numeric px and legacy string enum */
-function resolveTextFontSize(fontSize?: number | string): string {
-  if (typeof fontSize === "number") return `${fontSize}px`;
-  // Legacy string enum fallback
-  const legacyMap: Record<string, string> = {
-    small: "12px", base: "14px", large: "20px",
-    xl: "24px", "2xl": "32px", "3xl": "48px",
-  };
-  return legacyMap[fontSize || "base"] || "14px";
-}
-
-/** Resolve fontWeight: supports new string numbers and legacy names */
-function resolveTextFontWeight(fw?: string): number {
-  if (!fw) return 400;
-  const num = parseInt(fw, 10);
-  if (!isNaN(num)) return num;
-  // Legacy name fallback
-  if (fw === "bold") return 700;
-  if (fw === "medium") return 500;
-  return 400;
-}
-
-export default function LiveTextEditor({ block, editable = false }: { block: TextBlock; editable?: boolean }) {
-  const pageTextColor = usePageTextColor();
-  const store = useBuilderStore();
-  const previewMode = useBuilderStore((s) => s.previewMode);
-  const isSelected = useBuilderStore((s) => s.selectedBlockKey) === block._key;
-  const editableRef = useRef<HTMLDivElement>(null);
-  const isComposingRef = useRef(false);
-  const snapshotPushedRef = useRef(false);
-
-  const plainText = Array.isArray(block.text)
-    ? block.text
-        .map(
-          (blk) =>
-            blk?.children
-              ?.map((c: { text?: string }) => c.text || "")
-              .join("") || ""
-        )
-        .join("\n")
-    : "";
-
-  const style = block.style || {};
-
-  // Debounce timer ref — commits text 500ms after last keystroke (not on every input)
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Cleanup debounce timer on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-  }, []);
-
-  // Sync content when block text changes externally (undo/redo)
-  useEffect(() => {
-    if (!editableRef.current || document.activeElement === editableRef.current) return;
-    const currentHtml = editableRef.current.innerText || "";
-    if (currentHtml !== plainText) {
-      editableRef.current.innerText = plainText || "";
-    }
-  }, [plainText]);
-
-  const commitText = useCallback(() => {
-    if (!editableRef.current) return;
-    const raw = editableRef.current.innerText || "";
-    const lines = raw.split("\n");
-    const portableText = lines.map((line, i) => ({
-      _type: "block" as const,
-      _key: `pt_${i}`,
-      style: "normal" as const,
-      markDefs: [],
-      children: [
-        {
-          _type: "span" as const,
-          _key: `sp_${i}`,
-          text: line,
-          marks: [],
-        },
-      ],
-    }));
-    store.updateBlockDebounced(block._key, {
-      text: portableText,
-    } as Partial<ContentBlock>);
-  }, [block._key, store]);
-
-  const handleFocus = useCallback(() => {
-    if (!snapshotPushedRef.current) {
-      store._pushSnapshot();
-      snapshotPushedRef.current = true;
-    }
-  }, [store]);
-
-  const handleBlur = useCallback(() => {
-    // Flush any pending debounced commit immediately on blur
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-      debounceRef.current = null;
-    }
-    snapshotPushedRef.current = false;
-    commitText();
-  }, [commitText]);
-
-  const handleInput = useCallback(() => {
-    if (isComposingRef.current) return;
-    // Clear any pending debounce and schedule a new one
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => {
-      commitText();
-      debounceRef.current = null;
-    }, 500);
-  }, [commitText]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    // Stop propagation so builder shortcuts don't fire while typing
-    if (!e.metaKey && !e.ctrlKey) {
-      e.stopPropagation();
-    }
-    // Allow Ctrl+S, Ctrl+Z, Ctrl+Shift+Z to pass through
-    if ((e.metaKey || e.ctrlKey) && (e.key === "s" || e.key === "z" || e.key === "Z" || e.key === "y")) {
-      // Don't stop propagation for these
-      return;
-    }
-  }, []);
-
-  const cols = block.columns && block.columns > 1 ? block.columns : undefined;
-
-  const computedStyle: React.CSSProperties = {
-    fontSize: resolveTextFontSize(style.fontSize),
-    fontWeight: resolveTextFontWeight(style.fontWeight),
-    textAlign: style.alignment || "left",
-    color: style.color || pageTextColor,
-    opacity: style.opacity ?? 1,
-    lineHeight: style.lineHeight || "1.6",
-    letterSpacing: style.letterSpacing || "normal",
-    maxWidth: style.maxWidth || "none",
-    textTransform: style.textTransform || "none",
-    fontFamily: "inherit",
-    outline: "none",
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word",
-    minHeight: "1em",
-    // Multi-column layout: gap inherits global grid gutter
-    ...(cols ? {
-      columnCount: cols,
-      columnGap: "var(--grid-gutter, 24px)",
-    } : {}),
-  };
-
-  // Preview mode or read-only frame: static render
-  if (previewMode || !editable) {
-    if (!plainText) {
-      return (
-        <p className="text-neutral-400 italic text-sm py-4 text-center">
-          Empty text block
-        </p>
-      );
-    }
-    return (
-      <div style={computedStyle}>
-        {plainText.split("\n").map((line, i) => (
-          <p key={i} className={i > 0 ? "mt-3" : ""}>
-            {line || "\u00A0"}
-          </p>
-        ))}
-      </div>
-    );
-  }
-
-  // Design mode: contentEditable inline editing
-  return (
-    <div
-      ref={editableRef}
-      contentEditable
-      suppressContentEditableWarning
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      onInput={handleInput}
-      onKeyDown={handleKeyDown}
-      onCompositionStart={() => { isComposingRef.current = true; }}
-      onCompositionEnd={() => { isComposingRef.current = false; commitText(); }}
-      style={computedStyle}
-      data-placeholder="Type something..."
-      className={`${!plainText && !isSelected ? "before:content-[attr(data-placeholder)] before:text-neutral-400 before:italic before:pointer-events-none" : ""}`}
-    />
-  );
-}
+"use client";
+
+/**
+ * LiveTextEditor.tsx
+ *
+ * Entry point for text block editing in the visual builder.
+ * Delegates to RichTextEditor (Tiptap-based) for editable mode,
+ * and renders a static rich text preview for read-only / preview modes
+ * using Sanity's PortableText renderer (preserves bold, italic, links, etc.).
+ *
+ * Preserves the original API surface (default export + usePageTextColor hook)
+ * so existing imports continue to work.
+ */
+
+import { PortableText, type PortableTextComponents } from "next-sanity";
+import { useBuilderStore } from "../../../lib/builder/store";
+import RichTextEditor, { usePageTextColor } from "./RichTextEditor";
+import type { TextBlock } from "../../../lib/sanity/types";
+
+// Re-export the hook so barrel imports don't break
+export { usePageTextColor };
+
+/** Resolve fontSize: supports new numeric px and legacy string enum */
+function resolveTextFontSize(fontSize?: number | string): string {
+  if (typeof fontSize === "number") return `${fontSize}px`;
+  const legacyMap: Record<string, string> = {
+    small: "12px", base: "14px", large: "20px",
+    xl: "24px", "2xl": "32px", "3xl": "48px",
+  };
+  return legacyMap[fontSize || "base"] || "14px";
+}
+
+/** Resolve fontWeight: supports new string numbers and legacy names */
+function resolveTextFontWeight(fw?: string): number {
+  if (!fw) return 400;
+  const num = parseInt(fw, 10);
+  if (!isNaN(num)) return num;
+  if (fw === "bold") return 700;
+  if (fw === "medium") return 500;
+  return 400;
+}
+
+/** Portable Text components for builder preview — links non-navigable */
+const previewRichTextComponents: PortableTextComponents = {
+  marks: {
+    link: ({ value, children }) => {
+      const href = value?.href || "#";
+      const blank = value?.blank;
+      return (
+        <a
+          href={href}
+          target={blank ? "_blank" : undefined}
+          rel={blank ? "noopener noreferrer" : undefined}
+          onClick={(e) => e.preventDefault()}
+          className="underline decoration-current underline-offset-2 cursor-default"
+        >
+          {children}
+        </a>
+      );
+    },
+    color: ({ value, children }) => {
+      const hex = value?.hex;
+      if (!hex) return <>{children}</>;
+      return <span style={{ color: hex }}>{children}</span>;
+    },
+  },
+};
+
+export default function LiveTextEditor({ block, editable = false }: { block: TextBlock; editable?: boolean }) {
+  const pageTextColor = usePageTextColor();
+  const previewMode = useBuilderStore((s) => s.previewMode);
+
+  const style = block.style || {};
+  const cols = block.columns && block.columns > 1 ? block.columns : undefined;
+
+  const hasText = Array.isArray(block.text) && block.text.length > 0 &&
+    block.text.some((blk) => blk?.children?.some((c: { text?: string }) => (c.text || "").length > 0));
+
+  const computedStyle: React.CSSProperties = {
+    fontSize: resolveTextFontSize(style.fontSize),
+    fontWeight: resolveTextFontWeight(style.fontWeight),
+    textAlign: style.alignment || "left",
+    color: style.color || pageTextColor,
+    opacity: style.opacity ?? 1,
+    lineHeight: style.lineHeight || "1.6",
+    letterSpacing: style.letterSpacing || "normal",
+    maxWidth: style.maxWidth || "none",
+    textTransform: style.textTransform || "none",
+    fontFamily: "inherit",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    minHeight: "1em",
+    ...(cols ? {
+      columnCount: cols,
+      columnGap: "var(--grid-gutter, 24px)",
+    } : {}),
+  };
+
+  // Preview mode or read-only frame: static rich text render via PortableText
+  if (previewMode || !editable) {
+    if (!hasText) {
+      return (
+        <p className="text-neutral-400 italic text-sm py-4 text-center">
+          Empty text block
+        </p>
+      );
+    }
+    return (
+      <div style={computedStyle} className="space-y-[0.75em]">
+        <PortableText value={block.text!} components={previewRichTextComponents} />
+      </div>
+    );
+  }
+
+  // Design mode: Tiptap rich text editor
+  return <RichTextEditor block={block} editable />;
+}