@hydralms/components 0.2.0 → 0.3.1

package/src/sections/ContentAuthoringStudio/ContentAuthoringStudio.tsx

@@ -0,0 +1,289 @@
+import { useState, useCallback, useMemo, useRef } from "react";
+import { Eye, Pencil, Save } from "lucide-react";
+import { Button } from "../../ui/button";
+import { Input } from "../../ui/input";
+import { Skeleton } from "../../ui/skeleton";
+import { ContentBlock } from "../../content";
+import { EmptyState } from "../../common/empty-state";
+import { SectionShell } from "../_shared/section-shell";
+import { useDragReorder } from "../../questions/use-drag-reorder";
+import { withProGate } from "../../license/withProGate";
+import type { LessonBlock } from "../../content/types";
+import type { ContentAuthoringStudioProps, AuthoringBlock } from "./types";
+import { BlockEditorItem } from "./block-editor-item";
+import { BlockTypePicker } from "./block-type-picker";
+
+let idCounter = 0;
+function genId() {
+  return `ab_${++idCounter}_${Date.now().toString(36)}`;
+}
+
+function toAuthoring(blocks: LessonBlock[]): AuthoringBlock[] {
+  return blocks.map((block) => ({ id: genId(), block }));
+}
+
+function createEmptyBlock(type: LessonBlock["type"]): LessonBlock {
+  switch (type) {
+    case "richtext":
+      return { type: "richtext", html: "" };
+    case "heading":
+      return { type: "heading", text: "", level: 2 };
+    case "image":
+      return { type: "image", src: "", alt: "" };
+    case "video":
+      return { type: "video", video: { src: "" } };
+    case "code":
+      return { type: "code", code: "", language: "javascript" };
+    case "callout":
+      return { type: "callout", content: "", variant: "info" };
+    case "audio":
+      return { type: "audio", src: "" };
+    case "embed":
+      return { type: "embed", src: "" };
+    case "table":
+      return { type: "table", headers: ["Column 1", "Column 2"], rows: [["", ""]] };
+    case "file":
+      return { type: "file", files: [] };
+    case "divider":
+      return { type: "divider" };
+    case "question":
+      return {
+        type: "question",
+        question: {
+          uid: genId(),
+          type: "multiple_choice",
+          content: "",
+          answers: [],
+        },
+      };
+    case "flashcards":
+      return { type: "flashcards", cards: [] };
+    case "custom":
+      return { type: "custom", render: null };
+    default:
+      return { type: "richtext", html: "" };
+  }
+}
+
+/**
+ * ContentAuthoringStudio — A premium block-based content editor for creating
+ * lessons. Produces `LessonBlock[]` compatible with `LessonPage`.
+ *
+ * Supports adding, editing, removing, reordering, and previewing content blocks
+ * including rich text, headings, images, videos, code, callouts, and more.
+ */
+function ContentAuthoringStudioBase({
+  title: titleProp = "",
+  blocks: blocksProp,
+  onBlocksChange,
+  onTitleChange,
+  onSave,
+  showPreviewToggle = true,
+  allowedBlockTypes,
+  readOnly = false,
+  isLoading,
+  error,
+  onRetry,
+  className,
+  style,
+}: ContentAuthoringStudioProps) {
+  const [title, setTitle] = useState(titleProp);
+  const [items, setItems] = useState<AuthoringBlock[]>(() =>
+    toAuthoring(blocksProp ?? []),
+  );
+  const [mode, setMode] = useState<"edit" | "preview">(readOnly ? "preview" : "edit");
+
+  const rawBlocks = useMemo(() => items.map((i) => i.block), [items]);
+
+  const emitChange = useCallback(
+    (nextItems: AuthoringBlock[]) => {
+      setItems(nextItems);
+      onBlocksChange?.(nextItems.map((i) => i.block));
+    },
+    [onBlocksChange],
+  );
+
+  /* ── Block operations ──────────────────────────── */
+
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+
+  function handleAddBlock(type: LessonBlock["type"], atIndex: number) {
+    const newItem: AuthoringBlock = { id: genId(), block: createEmptyBlock(type) };
+    const next = [...items];
+    next.splice(atIndex, 0, newItem);
+    emitChange(next);
+  }
+
+  const handleUpdateBlock = useCallback((id: string, block: LessonBlock) => {
+    emitChange(itemsRef.current.map((i) => (i.id === id ? { ...i, block } : i)));
+  }, [emitChange]);
+
+  const handleRemoveBlock = useCallback((id: string) => {
+    emitChange(itemsRef.current.filter((i) => i.id !== id));
+  }, [emitChange]);
+
+  const handleDuplicateBlock = useCallback((id: string) => {
+    const current = itemsRef.current;
+    const index = current.findIndex((i) => i.id === id);
+    if (index === -1) return;
+    const copy: AuthoringBlock = {
+      id: genId(),
+      block: structuredClone(current[index].block),
+    };
+    const next = [...current];
+    next.splice(index + 1, 0, copy);
+    emitChange(next);
+  }, [emitChange]);
+
+  const handleToggleCollapse = useCallback((id: string) => {
+    setItems((prev) =>
+      prev.map((i) =>
+        i.id === id ? { ...i, collapsed: !i.collapsed } : i,
+      ),
+    );
+  }, []);
+
+  function handleTitleChange(value: string) {
+    setTitle(value);
+    onTitleChange?.(value);
+  }
+
+  function handleSave() {
+    onSave?.({ title, blocks: rawBlocks });
+  }
+
+  /* ── Drag-and-drop ─────────────────────────────── */
+
+  const { getDragProps, dragIndex, dragOverIndex } = useDragReorder({
+    items,
+    onReorder: emitChange,
+    disabled: readOnly || mode === "preview",
+  });
+
+  /* ── Render ────────────────────────────────────── */
+
+  const isEditing = mode === "edit" && !readOnly;
+
+  return (
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
+      style={style}
+      skeleton={
+        <>
+          <Skeleton className="h-10 w-64" />
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-24 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </>
+      }
+    >
+      <div>
+        {/* Toolbar */}
+        <div className="flex items-center gap-2 mb-4">
+          {isEditing ? (
+            <Input
+              value={title}
+              onChange={(e) => handleTitleChange(e.target.value)}
+              placeholder="Lesson title..."
+              className="text-lg font-semibold flex-1 h-10"
+            />
+          ) : (
+            <h2 className="text-xl font-bold flex-1 text-foreground">{title || "Untitled Lesson"}</h2>
+          )}
+
+          {showPreviewToggle && !readOnly && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setMode(mode === "edit" ? "preview" : "edit")}
+              className="gap-1.5"
+            >
+              {mode === "edit" ? (
+                <>
+                  <Eye className="size-3.5" /> Preview
+                </>
+              ) : (
+                <>
+                  <Pencil className="size-3.5" /> Edit
+                </>
+              )}
+            </Button>
+          )}
+
+          {onSave && !readOnly && (
+            <Button size="sm" onClick={handleSave} className="gap-1.5">
+              <Save className="size-3.5" /> Save
+            </Button>
+          )}
+        </div>
+
+        {/* Content */}
+        {isEditing ? (
+          <div className="space-y-1">
+            {/* Top insertion point */}
+            <div className="flex justify-center py-1">
+              <BlockTypePicker
+                onSelect={(type) => handleAddBlock(type, 0)}
+                allowedTypes={allowedBlockTypes}
+              />
+            </div>
+
+            {items.length === 0 && (
+              <EmptyState
+                title="No content blocks"
+                description="Click 'Add block' above to start building your lesson."
+              />
+            )}
+
+            {items.map((item, index) => (
+              <div key={item.id}>
+                <BlockEditorItem
+                  item={item}
+                  onChange={handleUpdateBlock}
+                  onRemove={handleRemoveBlock}
+                  onDuplicate={handleDuplicateBlock}
+                  onToggleCollapse={handleToggleCollapse}
+                  dragProps={getDragProps(index)}
+                  isDragging={dragIndex === index}
+                  isDragOver={dragOverIndex === index}
+                />
+
+                {/* Insertion point after each block */}
+                <div className="flex justify-center py-1">
+                  <BlockTypePicker
+                    onSelect={(type) => handleAddBlock(type, index + 1)}
+                    allowedTypes={allowedBlockTypes}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          /* Preview mode */
+          <div className="flex flex-col gap-3">
+            {items.length > 0 ? (
+              items.map((item) => (
+                <ContentBlock key={item.id} block={item.block} readOnly />
+              ))
+            ) : (
+              <EmptyState
+                title="No content yet"
+                description="Switch to edit mode to add content blocks."
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </SectionShell>
+  );
+}
+
+export const ContentAuthoringStudio = withProGate(
+  ContentAuthoringStudioBase,
+  "ContentAuthoringStudio",
+);