@morphika/andami 0.2.5 → 0.2.7

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

@@ -0,0 +1,451 @@
+"use client";
+
+/**
+ * RichTextBubbleMenu.tsx
+ *
+ * Floating toolbar that appears when text is selected in the RichTextEditor.
+ * Provides toggle buttons for bold, italic, underline, and a link popover.
+ * Styled to match the builder's dark UI theme.
+ */
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { BubbleMenu, type Editor } from "@tiptap/react";
+import { UnifiedColorPicker } from "../color-picker";
+import { usePaletteSwatches } from "../ColorSwatchPicker";
+import type { ColorField } from "../../../lib/sanity/types";
+
+// ── Icon components (inline SVGs to avoid external deps) ────────────
+
+function BoldIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+      <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+    </svg>
+  );
+}
+
+function ItalicIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="19" y1="4" x2="10" y2="4" />
+      <line x1="14" y1="20" x2="5" y2="20" />
+      <line x1="15" y1="4" x2="9" y2="20" />
+    </svg>
+  );
+}
+
+function UnderlineIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" />
+      <line x1="4" y1="21" x2="20" y2="21" />
+    </svg>
+  );
+}
+
+function LinkIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  );
+}
+
+function UnlinkIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18.84 12.25l1.72-1.71a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M5.16 11.75l-1.72 1.71a5 5 0 0 0 7.07 7.07l1.72-1.71" />
+      <line x1="2" y1="2" x2="22" y2="22" />
+    </svg>
+  );
+}
+
+// ── Toggle button ───────────────────────────────────────────────────
+
+function ToolbarButton({
+  onClick,
+  isActive,
+  title,
+  children,
+}: {
+  onClick: () => void;
+  isActive: boolean;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={onClick}
+      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onClick(); }}
+      title={title}
+      className={`
+        flex items-center justify-center w-7 h-7 rounded cursor-pointer select-none
+        transition-colors duration-100
+        ${isActive
+          ? "bg-white/20 text-white"
+          : "text-neutral-300 hover:bg-white/10 hover:text-white"
+        }
+      `}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ── Link popover ────────────────────────────────────────────────────
+
+function LinkPopover({
+  editor,
+  onClose,
+}: {
+  editor: Editor;
+  onClose: () => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const existingHref = editor.getAttributes("link").href || "";
+  const existingBlank = editor.getAttributes("link").target === "_blank";
+
+  const [href, setHref] = useState(existingHref);
+  const [blank, setBlank] = useState(existingBlank);
+
+  useEffect(() => {
+    // Auto-focus the URL input on mount
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+
+  const handleSave = useCallback(() => {
+    if (!href.trim()) {
+      // Empty URL = remove link
+      editor.chain().focus().unsetLink().run();
+    } else {
+      editor
+        .chain()
+        .focus()
+        .setLink({
+          href: href.trim(),
+          target: blank ? "_blank" : null,
+        })
+        .run();
+    }
+    onClose();
+  }, [editor, href, blank, onClose]);
+
+  const handleRemove = useCallback(() => {
+    editor.chain().focus().unsetLink().run();
+    onClose();
+  }, [editor, onClose]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSave();
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        editor.commands.focus();
+      }
+    },
+    [handleSave, onClose, editor]
+  );
+
+  return (
+    <div
+      className="flex flex-col gap-2 p-2 min-w-[280px]"
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <div className="flex items-center gap-1.5">
+        <input
+          ref={inputRef}
+          type="url"
+          value={href}
+          onChange={(e) => setHref(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="https://example.com"
+          className="flex-1 bg-neutral-700 text-white text-xs rounded px-2 py-1.5
+                     border border-neutral-600 placeholder-neutral-400
+                     focus:outline-none focus:border-blue-500"
+        />
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={handleSave}
+          onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }}
+          className="px-2 py-1.5 text-xs bg-blue-600 text-white rounded
+                     hover:bg-blue-500 transition-colors cursor-pointer select-none"
+        >
+          OK
+        </div>
+        {existingHref && (
+          <div
+            role="button"
+            tabIndex={0}
+            onClick={handleRemove}
+            onKeyDown={(e) => { if (e.key === "Enter") handleRemove(); }}
+            title="Remove link"
+            className="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-400/10
+                       rounded transition-colors cursor-pointer select-none"
+          >
+            <UnlinkIcon />
+          </div>
+        )}
+      </div>
+      <label className="flex items-center gap-1.5 text-xs text-neutral-300 cursor-pointer select-none">
+        <input
+          type="checkbox"
+          checked={blank}
+          onChange={(e) => setBlank(e.target.checked)}
+          className="rounded border-neutral-500 bg-neutral-700 text-blue-500
+                     focus:ring-blue-500 focus:ring-offset-0 w-3.5 h-3.5"
+        />
+        Open in new tab
+      </label>
+    </div>
+  );
+}
+
+// ── Color icon — "A" with colored underline bar (standard text color icon) ──
+
+function ColorIcon({ activeColor }: { activeColor?: string }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+      {/* Letter A */}
+      <path
+        d="M5 18L9.5 6h5L19 18"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.5 14h9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      {/* Color indicator bar */}
+      <rect
+        x="2"
+        y="20"
+        width="20"
+        height="3"
+        rx="1"
+        fill={activeColor || "currentColor"}
+      />
+    </svg>
+  );
+}
+
+// ── Main BubbleMenu ─────────────────────────────────────────────────
+
+export default function RichTextBubbleMenu({ editor }: { editor: Editor }) {
+  const [showLinkPopover, setShowLinkPopover] = useState(false);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const swatches = usePaletteSwatches();
+
+  // Store the editor selection before opening the color picker modal,
+  // so we can restore it when the user confirms a color (the modal steals focus).
+  const savedSelectionRef = useRef<{ from: number; to: number } | null>(null);
+
+  // Close link popover when selection changes away
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      // Don't close if color picker modal is open (selection is saved)
+      if (showColorPicker) return;
+      if (editor.view.state.selection.empty) {
+        if (showLinkPopover) setShowLinkPopover(false);
+      }
+    };
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => document.removeEventListener("selectionchange", handleSelectionChange);
+  }, [showLinkPopover, showColorPicker, editor]);
+
+  // Register Cmd+K / Ctrl+K for link dialog
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!editor.state.selection.empty) {
+          setShowLinkPopover((prev) => !prev);
+        }
+      }
+    };
+    const editorEl = editor.view.dom;
+    editorEl.addEventListener("keydown", handleKeyDown);
+    return () => editorEl.removeEventListener("keydown", handleKeyDown);
+  }, [editor]);
+
+  // Get current inline color for the icon indicator.
+  // For mixed-color selections, this returns the color at the anchor point.
+  const activeColor = editor.getAttributes("textStyle").color || "";
+
+  // Check if ANY part of the selection has color (for the remove button)
+  const selectionHasColor = editor.isActive("textStyle");
+
+  // Handlers for the UnifiedColorPicker modal
+  const handleColorChange = useCallback(
+    (value: ColorField) => {
+      const hex = typeof value === "string" ? value : "";
+      if (!hex) return;
+
+      // Restore saved selection, then apply color
+      const sel = savedSelectionRef.current;
+      if (sel) {
+        editor
+          .chain()
+          .focus()
+          .setTextSelection({ from: sel.from, to: sel.to })
+          .setColor(hex)
+          .run();
+      } else {
+        editor.chain().focus().setColor(hex).run();
+      }
+      setShowColorPicker(false);
+      savedSelectionRef.current = null;
+    },
+    [editor]
+  );
+
+  const handleColorClose = useCallback(() => {
+    setShowColorPicker(false);
+    // Restore selection on cancel too
+    const sel = savedSelectionRef.current;
+    if (sel) {
+      editor
+        .chain()
+        .focus()
+        .setTextSelection({ from: sel.from, to: sel.to })
+        .run();
+    } else {
+      editor.commands.focus();
+    }
+    savedSelectionRef.current = null;
+  }, [editor]);
+
+  const handleRemoveColor = useCallback(() => {
+    editor.chain().focus().unsetColor().run();
+  }, [editor]);
+
+  return (
+    <>
+      <BubbleMenu
+        editor={editor}
+        tippyOptions={{
+          duration: 150,
+          placement: "top",
+          zIndex: 9999,
+          appendTo: () => document.body,
+          // Tippy cleanup is handled gracefully — the removeChild error
+          // in dev mode (HMR) is cosmetic and doesn't affect functionality.
+        }}
+        className="flex items-center gap-0.5 p-1 bg-neutral-800 rounded-lg shadow-xl
+                   border border-neutral-700/50"
+      >
+        {/* Formatting toggles */}
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          isActive={editor.isActive("bold")}
+          title="Bold (Ctrl+B)"
+        >
+          <BoldIcon />
+        </ToolbarButton>
+
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          isActive={editor.isActive("italic")}
+          title="Italic (Ctrl+I)"
+        >
+          <ItalicIcon />
+        </ToolbarButton>
+
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          isActive={editor.isActive("underline")}
+          title="Underline (Ctrl+U)"
+        >
+          <UnderlineIcon />
+        </ToolbarButton>
+
+        {/* Separator */}
+        <div className="w-px h-4 bg-neutral-600 mx-0.5" />
+
+        {/* Color button — saves selection, then opens UnifiedColorPicker modal */}
+        <ToolbarButton
+          onClick={() => {
+            // Save current selection before modal steals focus
+            const { from, to } = editor.state.selection;
+            savedSelectionRef.current = { from, to };
+            setShowColorPicker(true);
+            setShowLinkPopover(false);
+          }}
+          isActive={!!activeColor}
+          title="Text Color"
+        >
+          <ColorIcon activeColor={activeColor} />
+        </ToolbarButton>
+
+        {/* Remove color button — shows when any part of selection has color */}
+        {selectionHasColor && (
+          <div
+            role="button"
+            tabIndex={0}
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={handleRemoveColor}
+            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleRemoveColor(); }}
+            title="Remove color"
+            className="flex items-center justify-center w-5 h-5 rounded cursor-pointer select-none
+                       text-neutral-400 hover:text-red-400 hover:bg-red-400/10
+                       transition-colors duration-100 text-[10px]"
+          >
+            ✕
+          </div>
+        )}
+
+        {/* Separator */}
+        <div className="w-px h-4 bg-neutral-600 mx-0.5" />
+
+        {/* Link button */}
+        <ToolbarButton
+          onClick={() => {
+            setShowLinkPopover((prev) => !prev);
+          }}
+          isActive={editor.isActive("link")}
+          title="Link (Ctrl+K)"
+        >
+          <LinkIcon />
+        </ToolbarButton>
+
+        {/* Link popover — renders below the toolbar buttons */}
+        {showLinkPopover && (
+          <div className="absolute top-full left-0 mt-1 bg-neutral-800 rounded-lg shadow-xl
+                          border border-neutral-700/50 z-10">
+            <LinkPopover
+              editor={editor}
+              onClose={() => setShowLinkPopover(false)}
+            />
+          </div>
+        )}
+      </BubbleMenu>
+
+      {/* Color picker modal — uses the app's full UnifiedColorPicker */}
+      {showColorPicker && (
+        <UnifiedColorPicker
+          value={activeColor || "#ffffff"}
+          onChange={handleColorChange}
+          onClose={handleColorClose}
+          swatches={swatches}
+          confirmLabel="Apply Color"
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,223 @@
+"use client";
+
+/**
+ * RichTextEditor.tsx
+ *
+ * Tiptap-based rich text editor for the visual page builder.
+ * Replaces the plain contentEditable in LiveTextEditor with full
+ * inline formatting support: bold, italic, underline, and links.
+ *
+ * Integrates with the builder's Zustand store using the same
+ * debounce + snapshot pattern as the original LiveTextEditor.
+ */
+
+import { useRef, useCallback, useEffect, useMemo } from "react";
+import { useEditor, EditorContent, type Editor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import TextStyle from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import { useBuilderStore } from "../../../lib/builder/store";
+import { portableTextToTiptap } from "../../../lib/editor/portableToTiptap";
+import { tiptapToPortableText } from "../../../lib/editor/tiptapToPortable";
+import RichTextBubbleMenu from "./RichTextBubbleMenu";
+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`;
+  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;
+}
+
+interface RichTextEditorProps {
+  block: TextBlock;
+  editable?: boolean;
+}
+
+export default function RichTextEditor({ block, editable = false }: RichTextEditorProps) {
+  const pageTextColor = usePageTextColor();
+  // Select only the stable function references we need — avoids re-renders on every store change
+  const updateBlockDebounced = useBuilderStore((s) => s.updateBlockDebounced);
+  const pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const snapshotPushedRef = useRef(false);
+  // Track block key to detect when we switch to a different block
+  const blockKeyRef = useRef(block._key);
+
+  const style = block.style || {};
+  const cols = block.columns && block.columns > 1 ? block.columns : undefined;
+
+  // Memoize initial content from Portable Text
+  const initialContent = useMemo(
+    () => portableTextToTiptap(block.text),
+    // Only recompute when block identity changes, not on every text edit
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [block._key]
+  );
+
+  // Commit Tiptap content to builder store as Portable Text
+  const commitContent = useCallback(
+    (ed: Editor | null) => {
+      if (!ed) return;
+      const doc = ed.getJSON();
+      const portableText = tiptapToPortableText(doc);
+      updateBlockDebounced(block._key, {
+        text: portableText,
+      } as Partial<ContentBlock>);
+    },
+    [block._key, updateBlockDebounced]
+  );
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        // We keep bold, italic, strike, heading, blockquote from StarterKit
+        // Disable features we don't need in the builder
+        code: false,
+        codeBlock: false,
+        bulletList: false,
+        orderedList: false,
+        listItem: false,
+        horizontalRule: false,
+        dropcursor: false,
+        gapcursor: false,
+      }),
+      Underline,
+      TextStyle,
+      Color,
+      Link.configure({
+        openOnClick: false,    // Don't navigate when clicking links in editor
+        autolink: false,       // Don't auto-detect URLs while typing
+        HTMLAttributes: {
+          class: "underline cursor-pointer",  // Inherits text color (inline or block-level)
+        },
+      }),
+    ],
+    content: initialContent,
+    editable,
+    // Debounced update on every content change
+    onUpdate: ({ editor }) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        commitContent(editor);
+        debounceRef.current = null;
+      }, 500);
+    },
+    onFocus: () => {
+      if (!snapshotPushedRef.current) {
+        pushSnapshot();
+        snapshotPushedRef.current = true;
+      }
+    },
+    onBlur: () => {
+      // Flush pending debounce immediately on blur
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = null;
+      }
+      snapshotPushedRef.current = false;
+      commitContent(editor);
+    },
+    // Prevent Tiptap from adding its own classes to the editor root
+    editorProps: {
+      attributes: {
+        style: "outline: none;",
+      },
+      handleKeyDown: (_view, event) => {
+        // Stop propagation for normal typing so builder shortcuts don't fire
+        if (!event.metaKey && !event.ctrlKey) {
+          event.stopPropagation();
+          return false; // Let Tiptap handle the key
+        }
+        // Allow Ctrl+S, Ctrl+Z, Ctrl+Y to bubble to builder
+        if (event.key === "s" || event.key === "z" || event.key === "Z" || event.key === "y") {
+          return false;
+        }
+        // Stop propagation for other Ctrl combos (Ctrl+B, Ctrl+I, etc.)
+        // so they stay within Tiptap
+        event.stopPropagation();
+        return false;
+      },
+    },
+  });
+
+  // Sync content when block changes externally (undo/redo, different block selected)
+  useEffect(() => {
+    if (!editor || editor.isFocused) return;
+
+    // If block key changed, we're editing a different block
+    if (blockKeyRef.current !== block._key) {
+      blockKeyRef.current = block._key;
+      const newContent = portableTextToTiptap(block.text);
+      editor.commands.setContent(newContent);
+      return;
+    }
+
+    // External content change (e.g. undo/redo) — update without focus
+    const newContent = portableTextToTiptap(block.text);
+    const currentJSON = JSON.stringify(editor.getJSON());
+    const newJSON = JSON.stringify(newContent);
+    if (currentJSON !== newJSON) {
+      editor.commands.setContent(newContent);
+    }
+  }, [editor, block._key, block.text]);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  // Compute inline styles matching the block's style settings
+  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)",
+        }
+      : {}),
+  };
+
+  if (!editor) return null;
+
+  return (
+    <div style={computedStyle} className="rich-text-editor-root">
+      {editable && <RichTextBubbleMenu editor={editor} />}
+      <EditorContent editor={editor} />
+    </div>
+  );
+}

package/components/builder/live-preview/index.ts

@@ -1,5 +1,7 @@
 export { default as LiveTextEditor } from "./LiveTextEditor";
 export { usePageTextColor } from "./LiveTextEditor";
+export { default as RichTextEditor } from "./RichTextEditor";
+export { default as RichTextBubbleMenu } from "./RichTextBubbleMenu";
 export { default as LiveImagePreview } from "./LiveImagePreview";
 export { default as LiveImageGridPreview } from "./LiveImageGridPreview";
 export { default as LiveVideoPreview } from "./LiveVideoPreview";

package/lib/editor/index.ts

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