- {t("exam.editor.loading")}
-
- )
- }
-
- return (
-
- {!readOnly && (
- <>
-
- )
- }
+const LazyInner = dynamic(
+ () =>
+ import("./exam-rich-editor-inner").then((m) => m.ExamRichEditorInner),
+ {
+ ssr: false,
+ loading: () =>
-
-
-
-
-
-
- onUpdate({ ...data, knowledgePointIds: ids })}
- onClose={() => setShowKpPicker(false)}
- />
-
- )}
- {/* V5-5：素材库 picker */}
- {showAttachmentPicker && planId && (
-
- a.attachmentId)}
- onSelect={handleSelectAttachment}
- onClose={() => setShowAttachmentPicker(false)}
- />
-
- )}
-
- );
+import dynamic from "next/dynamic"
+import { Skeleton } from "@/shared/components/ui/skeleton"
+
+export type { RichTextBlockProps } from "./rich-text-block-inner"
+
+const LazyInner = dynamic(
+ () => import("./rich-text-block-inner").then((m) => m.RichTextBlockInner),
+ {
+ ssr: false,
+ loading: () =>
- {data.knowledgePointIds.length > 0 && (
-
- {t("knowledgePoint.linked", { count: data.knowledgePointIds.length })}
-
- )}
-
- {/* V5-5：素材库入口 */}
- {planId && (
-
- )}
-
-
- {/* V5-5：已嵌入附件列表（非图片附件在此展示，图片已在富文本中渲染） */}
- {attachments.length > 0 && (
-
-
- )}
-
- {showKpPicker && (
-
- {t("attachment.embeddedCount", { count: attachments.length })}
-
- {attachments
- .filter((a) => a.kind !== "image")
- .map((a) => (
-
-
- {a.displayName}
-
- {a.kind}
-
-
- ))}
- {/* V5-5：图片附件单独展示缩略图（即使已在富文本中内联，此处也展示便于管理） */}
- {attachments.some((a) => a.kind === "image") && (
-
- {attachments
- .filter((a) => a.kind === "image")
- .map((a) => (
-
- )}
-
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
-
-
- ))}
-
+
+ ),
+ },
+)
-export function KnowledgeGraph(props: KnowledgeGraphProps): ReactNode {
+export type { KnowledgeGraphProps } from "./knowledge-graph-inner"
+
+export function KnowledgeGraph(props: KnowledgeGraphProps): React.ReactElement {
return (
@@ -142,14 +147,14 @@ const EditorToolbar = ({ editor }: { editor: Editor }) => {
/>
- );
-};
+ )
+}
-interface RichTextEditorInnerProps {
- value: string;
- onChange: (value: string) => void;
- placeholder?: string;
- className?: string;
+export interface RichTextEditorProps {
+ value: string
+ onChange: (value: string) => void
+ placeholder?: string
+ className?: string
}
export function RichTextEditorInner({
@@ -157,7 +162,7 @@ export function RichTextEditorInner({
onChange,
placeholder = "Start writing...",
className,
-}: RichTextEditorInnerProps): React.ReactElement {
+}: RichTextEditorProps) {
const editor = useEditor({
immediatelyRender: false,
extensions: [
@@ -169,8 +174,7 @@ export function RichTextEditorInner({
Markdown,
Placeholder.configure({
placeholder,
- emptyEditorClass:
- "is-editor-empty before:content-[attr(data-placeholder)] before:text-muted-foreground before:float-left before:pointer-events-none before:h-0",
+ emptyEditorClass: "is-editor-empty before:content-[attr(data-placeholder)] before:text-muted-foreground before:float-left before:pointer-events-none before:h-0",
}),
],
editorProps: {
@@ -181,27 +185,22 @@ export function RichTextEditorInner({
content: value,
onUpdate: ({ editor }) => {
// Get markdown content
- const markdown = (editor.storage as any).markdown.getMarkdown();
- onChange(markdown);
+ const markdown = (editor.storage as any).markdown.getMarkdown()
+ onChange(markdown)
},
- });
+ })
// Sync value changes from outside (e.g. when switching chapters)
React.useEffect(() => {
if (editor && value !== (editor.storage as any).markdown.getMarkdown()) {
- editor.commands.setContent(value);
+ editor.commands.setContent(value)
}
- }, [value, editor]);
+ }, [value, editor])
return (
-
+
,
+): React.ReactElement {
+ return
- editor.chain().focus().toggleBold().run()}
- isActive={editor.isActive("bold")}
- icon={Bold}
- title="Bold"
- />
- editor.chain().focus().toggleItalic().run()}
- isActive={editor.isActive("italic")}
- icon={Italic}
- title="Italic"
- />
- editor.chain().focus().toggleStrike().run()}
- isActive={editor.isActive("strike")}
- icon={Strikethrough}
- title="Strikethrough"
- />
- editor.chain().focus().toggleCode().run()}
- isActive={editor.isActive("code")}
- icon={Code}
- title="Code"
- />
-
- editor.chain().focus().toggleHeading({ level: 1 }).run()}
- isActive={editor.isActive("heading", { level: 1 })}
- icon={Heading1}
- title="Heading 1"
- />
- editor.chain().focus().toggleHeading({ level: 2 }).run()}
- isActive={editor.isActive("heading", { level: 2 })}
- icon={Heading2}
- title="Heading 2"
- />
- editor.chain().focus().toggleHeading({ level: 3 }).run()}
- isActive={editor.isActive("heading", { level: 3 })}
- icon={Heading3}
- title="Heading 3"
- />
-
- editor.chain().focus().toggleBulletList().run()}
- isActive={editor.isActive("bulletList")}
- icon={List}
- title="Bullet List"
- />
- editor.chain().focus().toggleOrderedList().run()}
- isActive={editor.isActive("orderedList")}
- icon={ListOrdered}
- title="Ordered List"
- />
- editor.chain().focus().toggleBlockquote().run()}
- isActive={editor.isActive("blockquote")}
- icon={Quote}
- title="Blockquote"
- />
-
-
- )
-}
-
-interface RichTextEditorProps {
- value: string
- onChange: (value: string) => void
- placeholder?: string
- className?: string
-}
-
-export function RichTextEditor({
- value,
- onChange,
- placeholder = "Start writing...",
- className,
-}: RichTextEditorProps) {
- const editor = useEditor({
- immediatelyRender: false,
- extensions: [
- StarterKit.configure({
- heading: {
- levels: [1, 2, 3],
- },
- }),
- Markdown,
- Placeholder.configure({
- placeholder,
- emptyEditorClass: "is-editor-empty before:content-[attr(data-placeholder)] before:text-muted-foreground before:float-left before:pointer-events-none before:h-0",
- }),
- ],
- editorProps: {
- attributes: {
- class: "prose prose-sm dark:prose-invert max-w-none min-h-[150px] p-4 focus:outline-none",
- },
- },
- content: value,
- onUpdate: ({ editor }) => {
- // Get markdown content
- const markdown = (editor.storage as any).markdown.getMarkdown()
- onChange(markdown)
- },
- })
-
- // Sync value changes from outside (e.g. when switching chapters)
- React.useEffect(() => {
- if (editor && value !== (editor.storage as any).markdown.getMarkdown()) {
- editor.commands.setContent(value)
- }
- }, [value, editor])
-
- return (
-
- editor.chain().focus().undo().run()}
- isActive={false}
- icon={Undo}
- title="Undo"
- />
- editor.chain().focus().redo().run()}
- isActive={false}
- icon={Redo}
- title="Redo"
- />
-
-
-
- )
+export function RichTextEditor(
+ props: React.ComponentProps