@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/editor/blocks/waka-embed-block.tsx

@@ -0,0 +1,416 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../utils/cn"
+import { sanitizeUrl } from "../../../utils/security"
+import type { PlateElementProps } from "../waka-editor-elements"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export const EMBED_BLOCK_TYPE = "embed" as const
+
+/** Supported embed provider types */
+export type EmbedProvider =
+  | "figma"
+  | "youtube"
+  | "vimeo"
+  | "codesandbox"
+  | "codepen"
+  | "stackblitz"
+  | "loom"
+  | "miro"
+  | "notion"
+  | "github-gist"
+  | "generic"
+
+/** Slate node for embed blocks */
+export interface EmbedElement {
+  type: typeof EMBED_BLOCK_TYPE
+  /** Original URL pasted by the user */
+  url: string
+  /** Detected embed provider */
+  provider: EmbedProvider
+  /** Resolved embed/iframe URL */
+  embedUrl: string
+  /** Title/caption */
+  title?: string
+  /** Aspect ratio (e.g. "16/9", "4/3", "1/1") */
+  aspectRatio?: string
+  /** Optional maximum height in pixels */
+  maxHeight?: number
+  children: Array<{ text: string }>
+}
+
+export interface WakaEmbedBlockProps extends PlateElementProps {
+  element?: EmbedElement & Record<string, unknown>
+}
+
+// ============================================================================
+// Provider Configuration
+// ============================================================================
+
+interface ProviderConfig {
+  label: string
+  icon: string
+  color: string
+  bgColor: string
+  /** Transform original URL to embed URL */
+  transform: (url: string) => string | null
+  /** Default aspect ratio */
+  defaultAspect: string
+  /** Allow list for CSP (informational) */
+  domain: string
+}
+
+const PROVIDERS: Record<EmbedProvider, ProviderConfig> = {
+  figma: {
+    label: "Figma",
+    icon: "M12 2a4 4 0 00-4 4v4a4 4 0 004-4V2zm0 12a4 4 0 01-4 4v2h4v-6zm8-4a4 4 0 01-4 4H12v-8h4a4 4 0 014 4z",
+    color: "text-purple-600 dark:text-purple-400",
+    bgColor: "bg-purple-50 dark:bg-purple-500/10",
+    transform: (url: string) => {
+      if (url.includes("figma.com")) {
+        return `https://www.figma.com/embed?embed_host=wakastart&url=${encodeURIComponent(url)}`
+      }
+      return null
+    },
+    defaultAspect: "16/9",
+    domain: "figma.com",
+  },
+  youtube: {
+    label: "YouTube",
+    icon: "M19.615 3.184c-3.604-.246-11.631-.245-15.23 0C.488 3.45.029 5.804 0 12c.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0C23.512 20.55 23.971 18.196 24 12c-.029-6.185-.484-8.549-4.385-8.816zM9 16V8l8 4-8 4z",
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-50 dark:bg-red-500/10",
+    transform: (url: string) => {
+      const match = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/)
+      if (match) return `https://www.youtube.com/embed/${match[1]}`
+      return null
+    },
+    defaultAspect: "16/9",
+    domain: "youtube.com",
+  },
+  vimeo: {
+    label: "Vimeo",
+    icon: "M22.875 10.063c-.098 2.141-1.592 5.075-4.483 8.8-2.988 3.891-5.517 5.836-7.588 5.836-1.282 0-2.367-1.184-3.258-3.553L6.14 15.15c-.589-2.369-1.221-3.553-1.896-3.553-.147 0-.663.31-1.546.928l-.925-1.19c.973-.855 1.932-1.71 2.877-2.565 1.297-1.12 2.27-1.71 2.921-1.77 1.534-.147 2.479.903 2.834 3.148.384 2.422.65 3.928.801 4.519.445 2.022.934 3.033 1.468 3.033.414 0 1.037-.656 1.868-1.967.831-1.311 1.276-2.31 1.336-2.998.119-1.14-.328-1.71-1.342-1.71-.478 0-.97.109-1.477.327.981-3.212 2.855-4.773 5.625-4.684 2.054.059 3.024 1.394 2.908 4.003z",
+    color: "text-sky-600 dark:text-sky-400",
+    bgColor: "bg-sky-50 dark:bg-sky-500/10",
+    transform: (url: string) => {
+      const match = url.match(/vimeo\.com\/(\d+)/)
+      if (match) return `https://player.vimeo.com/video/${match[1]}`
+      return null
+    },
+    defaultAspect: "16/9",
+    domain: "vimeo.com",
+  },
+  codesandbox: {
+    label: "CodeSandbox",
+    icon: "M2 6l10-4 10 4v12l-10 4L2 18V6zm10 2L4 4v8l8 4V8zm8-4l-8 4v8l8-4V4z",
+    color: "text-gray-700 dark:text-gray-300",
+    bgColor: "bg-gray-50 dark:bg-gray-500/10",
+    transform: (url: string) => {
+      const match = url.match(/codesandbox\.io\/(?:s|p)\/([a-zA-Z0-9-]+)/)
+      if (match) return `https://codesandbox.io/embed/${match[1]}?fontsize=14&hidenavigation=1&theme=dark`
+      return null
+    },
+    defaultAspect: "16/9",
+    domain: "codesandbox.io",
+  },
+  codepen: {
+    label: "CodePen",
+    icon: "M12 2L2 8.5v7L12 22l10-6.5v-7L12 2zm0 3.311L18.26 9 12 12.689 5.74 9 12 5.311zM4 10.289l6 3.9v5.522l-6-3.9v-5.522zm8 9.422v-5.522l6-3.9v5.522l-6 3.9z",
+    color: "text-gray-700 dark:text-gray-300",
+    bgColor: "bg-gray-50 dark:bg-gray-500/10",
+    transform: (url: string) => {
+      const match = url.match(/codepen\.io\/([^/]+)\/pen\/([a-zA-Z0-9]+)/)
+      if (match) return `https://codepen.io/${match[1]}/embed/${match[2]}?default-tab=result&theme-id=dark`
+      return null
+    },
+    defaultAspect: "16/9",
+    domain: "codepen.io",
+  },
+  stackblitz: {
+    label: "StackBlitz",
+    icon: "M13 10V3L4 14h7v7l9-11h-7z",
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-50 dark:bg-blue-500/10",
+    transform: (url: string) => {
+      if (url.includes("stackblitz.com")) {
+        return url.replace("stackblitz.com/edit", "stackblitz.com/embed")
+      }
+      return null
+    },
+    defaultAspect: "16/9",
+    domain: "stackblitz.com",
+  },
+  loom: {
+    label: "Loom",
+    icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z",
+    color: "text-purple-600 dark:text-purple-400",
+    bgColor: "bg-purple-50 dark:bg-purple-500/10",
+    transform: (url: string) => {
+      const match = url.match(/loom\.com\/share\/([a-zA-Z0-9]+)/)
+      if (match) return `https://www.loom.com/embed/${match[1]}`
+      return null
+    },
+    defaultAspect: "16/9",
+    domain: "loom.com",
+  },
+  miro: {
+    label: "Miro",
+    icon: "M4 3h16a1 1 0 011 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1z",
+    color: "text-yellow-600 dark:text-yellow-400",
+    bgColor: "bg-yellow-50 dark:bg-yellow-500/10",
+    transform: (url: string) => {
+      const match = url.match(/miro\.com\/app\/board\/([^/?]+)/)
+      if (match) return `https://miro.com/app/live-embed/${match[1]}/`
+      return null
+    },
+    defaultAspect: "16/9",
+    domain: "miro.com",
+  },
+  notion: {
+    label: "Notion",
+    icon: "M4 4a2 2 0 012-2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm4 2v4h8V6H8zm0 6v2h8v-2H8zm0 4v2h5v-2H8z",
+    color: "text-gray-800 dark:text-gray-200",
+    bgColor: "bg-gray-50 dark:bg-gray-500/10",
+    transform: () => null,
+    defaultAspect: "16/9",
+    domain: "notion.so",
+  },
+  "github-gist": {
+    label: "GitHub Gist",
+    icon: "M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z",
+    color: "text-gray-800 dark:text-gray-200",
+    bgColor: "bg-gray-50 dark:bg-gray-500/10",
+    transform: () => null,
+    defaultAspect: "4/3",
+    domain: "gist.github.com",
+  },
+  generic: {
+    label: "Embed",
+    icon: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14",
+    color: "text-muted-foreground",
+    bgColor: "bg-muted",
+    transform: () => null,
+    defaultAspect: "16/9",
+    domain: "",
+  },
+}
+
+/**
+ * Detect provider from a URL.
+ */
+export function detectEmbedProvider(url: string): EmbedProvider {
+  const lower = url.toLowerCase()
+  if (lower.includes("figma.com")) return "figma"
+  if (lower.includes("youtube.com") || lower.includes("youtu.be")) return "youtube"
+  if (lower.includes("vimeo.com")) return "vimeo"
+  if (lower.includes("codesandbox.io")) return "codesandbox"
+  if (lower.includes("codepen.io")) return "codepen"
+  if (lower.includes("stackblitz.com")) return "stackblitz"
+  if (lower.includes("loom.com")) return "loom"
+  if (lower.includes("miro.com")) return "miro"
+  if (lower.includes("notion.so")) return "notion"
+  if (lower.includes("gist.github.com")) return "github-gist"
+  return "generic"
+}
+
+/**
+ * Transform a URL into an embeddable iframe URL.
+ */
+export function resolveEmbedUrl(url: string, provider: EmbedProvider): string {
+  const config = PROVIDERS[provider]
+  const transformed = config.transform(url)
+  return transformed || url
+}
+
+// ============================================================================
+// Element Component
+// ============================================================================
+
+/**
+ * WakaEmbedBlock - A Plate.js block for embedding external content (Figma, YouTube,
+ * CodeSandbox, Loom, etc.) inline in a document. The user pastes a URL and the
+ * block auto-detects the provider and renders the appropriate embed.
+ *
+ * Uses `@platejs/media` patterns. All URLs are sanitized before embedding.
+ *
+ * Register in Plate editor:
+ * ```ts
+ * components: {
+ *   [EMBED_BLOCK_TYPE]: WakaEmbedBlock,
+ * }
+ * ```
+ */
+export function WakaEmbedBlock({
+  attributes,
+  children,
+  element,
+  className,
+}: WakaEmbedBlockProps) {
+  const el = element as EmbedElement | undefined
+  const provider = el?.provider || "generic"
+  const config = PROVIDERS[provider]
+  const embedUrl = el?.embedUrl || ""
+  const aspectRatio = el?.aspectRatio || config.defaultAspect
+
+  // Sanitize the embed URL
+  const safeUrl = React.useMemo(() => {
+    if (!embedUrl) return ""
+    return sanitizeUrl(embedUrl)
+  }, [embedUrl])
+
+  const [isLoaded, setIsLoaded] = React.useState(false)
+  const [hasError, setHasError] = React.useState(false)
+
+  return (
+    <div
+      {...attributes}
+      contentEditable={false}
+      className={cn(
+        "my-4 rounded-lg overflow-hidden border border-border shadow-sm",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 bg-muted/30 border-b border-border">
+        <div className="flex items-center gap-2">
+          <svg
+            className={cn("h-4 w-4", config.color)}
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d={config.icon} />
+          </svg>
+          <span className={cn("text-[10px] font-bold uppercase tracking-wider", config.color)}>
+            {config.label}
+          </span>
+          {el?.title && (
+            <span className="text-xs text-muted-foreground ml-1 truncate max-w-[300px]">
+              {el.title}
+            </span>
+          )}
+        </div>
+
+        {el?.url && (
+          <a
+            href={sanitizeUrl(el.url)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[10px] text-primary hover:underline flex items-center gap-1"
+          >
+            Open
+            <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+          </a>
+        )}
+      </div>
+
+      {/* Embed iframe */}
+      <div
+        className="relative bg-muted/10"
+        style={{ aspectRatio, maxHeight: el?.maxHeight ? `${el.maxHeight}px` : undefined }}
+      >
+        {/* Loading skeleton */}
+        {!isLoaded && !hasError && safeUrl && (
+          <div className="absolute inset-0 flex items-center justify-center bg-muted/20">
+            <svg className="h-8 w-8 animate-spin text-muted-foreground/30" viewBox="0 0 24 24" fill="none">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          </div>
+        )}
+
+        {/* Error state */}
+        {hasError && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted/10 text-muted-foreground">
+            <svg className="h-8 w-8 mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
+            </svg>
+            <span className="text-xs">Failed to load embed</span>
+          </div>
+        )}
+
+        {/* No URL state */}
+        {!safeUrl && (
+          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+            <svg className="h-10 w-10 mb-3 text-muted-foreground/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+            </svg>
+            <span className="text-sm">Paste a URL to embed content</span>
+            <span className="text-[10px] mt-1 text-muted-foreground/60">
+              Supports Figma, YouTube, CodeSandbox, Loom, and more
+            </span>
+          </div>
+        )}
+
+        {/* Iframe */}
+        {safeUrl && (
+          <iframe
+            src={safeUrl}
+            title={el?.title || `${config.label} embed`}
+            className={cn(
+              "w-full h-full border-0",
+              !isLoaded && "opacity-0"
+            )}
+            loading="lazy"
+            allowFullScreen
+            sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+            onLoad={() => setIsLoaded(true)}
+            onError={() => setHasError(true)}
+          />
+        )}
+      </div>
+
+      {/* Hidden Slate children */}
+      <div className="hidden">{children}</div>
+    </div>
+  )
+}
+
+WakaEmbedBlock.displayName = "WakaEmbedBlock"
+
+// ============================================================================
+// Node Factory
+// ============================================================================
+
+export function createEmbedNodes(url: string, options?: { title?: string; aspectRatio?: string; maxHeight?: number }): EmbedElement[] {
+  const provider = detectEmbedProvider(url)
+  const embedUrl = resolveEmbedUrl(url, provider)
+
+  return [
+    {
+      type: EMBED_BLOCK_TYPE,
+      url,
+      provider,
+      embedUrl,
+      title: options?.title,
+      aspectRatio: options?.aspectRatio,
+      maxHeight: options?.maxHeight,
+      children: [{ text: "" }],
+    },
+  ]
+}
+
+export async function createEmbedPlugin() {
+  try {
+    const { createPlatePlugin } = await import("platejs/react")
+    return createPlatePlugin({
+      key: EMBED_BLOCK_TYPE,
+      node: {
+        isElement: true,
+        isVoid: true,
+        type: EMBED_BLOCK_TYPE,
+        component: WakaEmbedBlock,
+      },
+    })
+  } catch {
+    console.warn("[WakaEmbedBlock] platejs not installed")
+    return null
+  }
+}