@morphika/andami 0.2.4 → 0.2.6

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 />;
+}