Add coverImage poster to player, fix TipTap v3 editor reset, quiz admin preview
- Add coverImage field to Lesson model (prisma) - Pass coverImage as poster prop to KinescopePlayer - Show quiz in read-only preview mode for admin on lesson page - Fix TipTap v3 editor reset on save: pass [lesson.id] as deps to useEditor to prevent setOptions() from reinitializing content on every re-render - Replace saveLesson Server Action call with fetch PATCH /api/admin/lessons/[id] to avoid Next.js 16 automatic RSC refresh after Server Actions - Simplify revalidatePath: only revalidate module page, not lesson editor page
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback, useTransition } from "react";
|
||||
import { useState, useCallback } from "react";
|
||||
import { useEditor, EditorContent } from "@tiptap/react";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import Image from "@tiptap/extension-image";
|
||||
@@ -9,7 +9,6 @@ import Underline from "@tiptap/extension-underline";
|
||||
import Placeholder from "@tiptap/extension-placeholder";
|
||||
import { Save, Eye, FileUp, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { saveLesson } from "@/lib/actions/lesson-actions";
|
||||
|
||||
interface LessonData {
|
||||
id: string;
|
||||
@@ -47,7 +46,8 @@ export function LessonEditor({
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [importError, setImportError] = useState<string | null>(null);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [pending, setPending] = useState(false);
|
||||
|
||||
const inputStyle = {
|
||||
border: "2px solid var(--border)",
|
||||
@@ -73,7 +73,7 @@ export function LessonEditor({
|
||||
class: "prose prose-slate max-w-none min-h-[300px] focus:outline-none p-4",
|
||||
},
|
||||
},
|
||||
});
|
||||
}, [lesson.id]);
|
||||
|
||||
const uploadImage = useCallback(async () => {
|
||||
const input = document.createElement("input");
|
||||
@@ -133,18 +133,27 @@ export function LessonEditor({
|
||||
}
|
||||
}, [editor]);
|
||||
|
||||
function handleSave() {
|
||||
async function handleSave() {
|
||||
if (!editor) return;
|
||||
startTransition(async () => {
|
||||
await saveLesson(lesson.id, courseId, moduleId, {
|
||||
title,
|
||||
kinescopeId,
|
||||
content: editor.getJSON(),
|
||||
published,
|
||||
setPending(true);
|
||||
setSaveError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/lessons/${lesson.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ title, kinescopeId, content: editor.getJSON(), published }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error((data as { error?: string }).error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
});
|
||||
} catch (err) {
|
||||
setSaveError(err instanceof Error ? err.message : "Ошибка сохранения");
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
function navigateTo(lessonId: string) {
|
||||
@@ -266,6 +275,12 @@ export function LessonEditor({
|
||||
</p>
|
||||
)}
|
||||
|
||||
{saveError && (
|
||||
<p className="text-xs px-3 py-2" style={{ background: "oklch(0.577 0.245 27.325 / 0.1)", color: "oklch(0.577 0.245 27.325)", border: "1px solid oklch(0.577 0.245 27.325 / 0.3)" }}>
|
||||
Ошибка сохранения: {saveError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
|
||||
|
||||
Reference in New Issue
Block a user