@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/editor/blocks/waka-code-playground-block.tsx

@@ -0,0 +1,331 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../utils/cn"
+import type { PlateElementProps } from "../waka-editor-elements"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export const CODE_PLAYGROUND_BLOCK_TYPE = "code_playground" as const
+
+/** Supported programming languages */
+export type PlaygroundLanguage = "javascript" | "typescript" | "python" | "html" | "css" | "json" | "sql" | "bash" | "go" | "rust"
+
+/** Execution status */
+export type ExecutionStatus = "idle" | "running" | "success" | "error"
+
+/** Slate node for code playground blocks */
+export interface CodePlaygroundElement {
+  type: typeof CODE_PLAYGROUND_BLOCK_TYPE
+  /** Source code */
+  code: string
+  /** Programming language */
+  language: PlaygroundLanguage
+  /** Title / filename */
+  title?: string
+  /** Last execution output */
+  output?: string
+  /** Last execution error */
+  errorOutput?: string
+  /** Execution status */
+  executionStatus: ExecutionStatus
+  /** Whether to show line numbers */
+  showLineNumbers: boolean
+  /** Whether the code is read-only */
+  readOnly: boolean
+  children: Array<{ text: string }>
+}
+
+export interface WakaCodePlaygroundBlockProps extends PlateElementProps {
+  element?: CodePlaygroundElement & Record<string, unknown>
+  /** Callback to execute code. Returns stdout output or throws with stderr. */
+  onExecute?: (code: string, language: PlaygroundLanguage) => Promise<string>
+}
+
+// ============================================================================
+// Language Config
+// ============================================================================
+
+const LANGUAGE_CONFIG: Record<PlaygroundLanguage, { label: string; color: string; extension: string }> = {
+  javascript: { label: "JavaScript", color: "text-yellow-500", extension: ".js" },
+  typescript: { label: "TypeScript", color: "text-blue-500", extension: ".ts" },
+  python: { label: "Python", color: "text-green-500", extension: ".py" },
+  html: { label: "HTML", color: "text-orange-500", extension: ".html" },
+  css: { label: "CSS", color: "text-pink-500", extension: ".css" },
+  json: { label: "JSON", color: "text-gray-400", extension: ".json" },
+  sql: { label: "SQL", color: "text-cyan-500", extension: ".sql" },
+  bash: { label: "Bash", color: "text-emerald-500", extension: ".sh" },
+  go: { label: "Go", color: "text-cyan-600", extension: ".go" },
+  rust: { label: "Rust", color: "text-orange-600", extension: ".rs" },
+}
+
+// ============================================================================
+// Simple syntax highlighting (keyword-based)
+// ============================================================================
+
+const KEYWORD_PATTERNS: Record<string, RegExp> = {
+  keyword: /\b(const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|import|export|from|default|class|extends|new|this|typeof|instanceof|try|catch|finally|throw|async|await|yield|in|of|with|as|is|type|interface|enum|namespace|module|declare|readonly|abstract|implements|package|private|protected|public|static|super|void|null|undefined|true|false|NaN|Infinity|def|print|range|len|self|None|True|False|SELECT|FROM|WHERE|INSERT|UPDATE|DELETE|CREATE|TABLE|INDEX|JOIN|ON|AND|OR|NOT|ORDER|BY|GROUP|HAVING|LIMIT|OFFSET|fn|pub|mod|use|struct|impl|trait|mut|ref|match|loop|break|continue|move|dyn|Box|Vec|String|Option|Result|Some|None|Ok|Err|func|go|chan|defer|fallthrough|select|map|make|append|package|import)\b/g,
+  string: /(["'`])(?:(?!\1|\\).|\\.)*?\1/g,
+  comment: /\/\/.*$|\/\*[\s\S]*?\*\/|#.*$/gm,
+  number: /\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/gi,
+}
+
+function highlightCode(code: string): React.ReactNode[] {
+  // Simple token-based highlighting (not a full parser)
+  // For production, integrate with Prism.js or Shiki
+  const lines = code.split("\n")
+  return lines.map((line, i) => (
+    <div key={i} className="table-row">
+      <span className="table-cell w-8 text-right pr-3 text-muted-foreground/40 select-none text-[11px]">
+        {i + 1}
+      </span>
+      <span className="table-cell">
+        {line || " "}
+      </span>
+    </div>
+  ))
+}
+
+// ============================================================================
+// Element Component
+// ============================================================================
+
+/**
+ * WakaCodePlaygroundBlock - A Plate.js block with an inline code editor and
+ * sandboxed execution. Users write code and can run it, seeing output in
+ * an integrated console panel.
+ *
+ * Execution is sandboxed via the `onExecute` callback provided by the
+ * consuming application (e.g. using Web Workers, iframes, or server-side eval).
+ *
+ * Register in Plate editor:
+ * ```ts
+ * components: {
+ *   [CODE_PLAYGROUND_BLOCK_TYPE]: (props) => (
+ *     <WakaCodePlaygroundBlock {...props} onExecute={myExecutor} />
+ *   ),
+ * }
+ * ```
+ */
+export function WakaCodePlaygroundBlock({
+  attributes,
+  children,
+  element,
+  className,
+  onExecute,
+}: WakaCodePlaygroundBlockProps) {
+  const el = element as CodePlaygroundElement | undefined
+  const code = el?.code || ""
+  const language = el?.language || "javascript"
+  const langConfig = LANGUAGE_CONFIG[language]
+  const output = el?.output || ""
+  const errorOutput = el?.errorOutput || ""
+  const executionStatus = el?.executionStatus || "idle"
+  const title = el?.title || `main${langConfig.extension}`
+
+  const [showOutput, setShowOutput] = React.useState(!!output || !!errorOutput)
+  const [localStatus, setLocalStatus] = React.useState(executionStatus)
+
+  const handleRun = React.useCallback(async () => {
+    if (!onExecute) return
+    setLocalStatus("running")
+    setShowOutput(true)
+    try {
+      await onExecute(code, language)
+      setLocalStatus("success")
+    } catch {
+      setLocalStatus("error")
+    }
+  }, [code, language, onExecute])
+
+  const displayStatus = localStatus !== executionStatus ? localStatus : executionStatus
+
+  return (
+    <div
+      {...attributes}
+      contentEditable={false}
+      className={cn(
+        "my-4 rounded-lg overflow-hidden border border-gray-800 dark:border-gray-700 shadow-lg",
+        className
+      )}
+    >
+      {/* Title bar (VS Code-like) */}
+      <div className="flex items-center justify-between px-3 py-1.5 bg-gray-900 dark:bg-gray-800 border-b border-gray-800 dark:border-gray-700">
+        <div className="flex items-center gap-3">
+          {/* Traffic lights */}
+          <div className="flex items-center gap-1.5" aria-hidden="true">
+            <div className="h-3 w-3 rounded-full bg-red-500/80" />
+            <div className="h-3 w-3 rounded-full bg-yellow-500/80" />
+            <div className="h-3 w-3 rounded-full bg-green-500/80" />
+          </div>
+
+          {/* File name tab */}
+          <div className="flex items-center gap-1.5 px-2 py-0.5 rounded bg-gray-800 dark:bg-gray-700">
+            <span className={cn("text-[10px] font-bold", langConfig.color)}>
+              {langConfig.label}
+            </span>
+            <span className="text-xs font-mono text-gray-300">{title}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Status indicator */}
+          {displayStatus !== "idle" && (
+            <div className="flex items-center gap-1">
+              {displayStatus === "running" && (
+                <svg className="h-3 w-3 animate-spin text-amber-400" 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>
+              )}
+              {displayStatus === "success" && (
+                <svg className="h-3 w-3 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              )}
+              {displayStatus === "error" && (
+                <svg className="h-3 w-3 text-red-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              )}
+            </div>
+          )}
+
+          {/* Run button */}
+          {onExecute && (
+            <button
+              type="button"
+              onClick={handleRun}
+              disabled={displayStatus === "running" || !code.trim()}
+              className={cn(
+                "flex items-center gap-1 px-2.5 py-1 rounded text-[10px] font-semibold transition-all",
+                displayStatus === "running"
+                  ? "bg-amber-500/20 text-amber-300 cursor-wait"
+                  : "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30",
+                !code.trim() && "opacity-40 cursor-not-allowed"
+              )}
+              aria-label="Run code"
+            >
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M8 5v14l11-7z" />
+              </svg>
+              {displayStatus === "running" ? "Running..." : "Run"}
+            </button>
+          )}
+
+          {/* Toggle output */}
+          <button
+            type="button"
+            onClick={() => setShowOutput(!showOutput)}
+            className={cn(
+              "px-2 py-1 rounded text-[10px] font-medium transition-colors",
+              showOutput
+                ? "bg-gray-700 text-gray-200"
+                : "text-gray-400 hover:text-gray-200"
+            )}
+          >
+            Console
+          </button>
+        </div>
+      </div>
+
+      {/* Code area */}
+      <div className="bg-gray-950 dark:bg-[#0d1117] overflow-x-auto">
+        <pre className="p-4 text-[12px] font-mono leading-relaxed text-gray-100 min-h-[80px]">
+          <code className="table w-full">
+            {highlightCode(code)}
+          </code>
+        </pre>
+      </div>
+
+      {/* Output console */}
+      {showOutput && (output || errorOutput || displayStatus === "running") && (
+        <div className="border-t border-gray-800 dark:border-gray-700">
+          <div className="flex items-center justify-between px-3 py-1 bg-gray-900 dark:bg-gray-800">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+              Output
+            </span>
+            {(output || errorOutput) && (
+              <button
+                type="button"
+                className="text-[10px] text-gray-500 hover:text-gray-300 transition-colors"
+                aria-label="Clear output"
+              >
+                Clear
+              </button>
+            )}
+          </div>
+          <div className="bg-gray-950 dark:bg-[#0d1117] p-3 max-h-[200px] overflow-y-auto">
+            {displayStatus === "running" ? (
+              <div className="flex items-center gap-2 text-amber-400 text-xs font-mono">
+                <svg className="h-3 w-3 animate-spin" 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>
+                Executing...
+              </div>
+            ) : errorOutput ? (
+              <pre className="text-[12px] font-mono text-red-400 whitespace-pre-wrap">{errorOutput}</pre>
+            ) : output ? (
+              <pre className="text-[12px] font-mono text-gray-200 whitespace-pre-wrap">{output}</pre>
+            ) : null}
+          </div>
+        </div>
+      )}
+
+      {/* Hidden Slate children */}
+      <div className="hidden">{children}</div>
+    </div>
+  )
+}
+
+WakaCodePlaygroundBlock.displayName = "WakaCodePlaygroundBlock"
+
+// ============================================================================
+// Node Factory
+// ============================================================================
+
+export function createCodePlaygroundNodes(options?: {
+  code?: string
+  language?: PlaygroundLanguage
+  title?: string
+}): CodePlaygroundElement[] {
+  return [
+    {
+      type: CODE_PLAYGROUND_BLOCK_TYPE,
+      code: options?.code || '// Write your code here\nconsole.log("Hello, WakaStart!");',
+      language: options?.language || "javascript",
+      title: options?.title,
+      output: "",
+      errorOutput: "",
+      executionStatus: "idle",
+      showLineNumbers: true,
+      readOnly: false,
+      children: [{ text: "" }],
+    },
+  ]
+}
+
+export async function createCodePlaygroundPlugin(
+  onExecute?: (code: string, language: PlaygroundLanguage) => Promise<string>
+) {
+  try {
+    const { createPlatePlugin } = await import("platejs/react")
+    return createPlatePlugin({
+      key: CODE_PLAYGROUND_BLOCK_TYPE,
+      node: {
+        isElement: true,
+        isVoid: true,
+        type: CODE_PLAYGROUND_BLOCK_TYPE,
+        component: (props: WakaCodePlaygroundBlockProps) => (
+          <WakaCodePlaygroundBlock {...props} onExecute={onExecute} />
+        ),
+      },
+    })
+  } catch {
+    console.warn("[WakaCodePlaygroundBlock] platejs not installed")
+    return null
+  }
+}