@tinyweb_dev/oe-exam-sdk 0.2.2 → 0.2.3

package/dist/components/CueCardEditor.d.ts

@@ -1,7 +1 @@
-import React from 'react';
-export interface CueCardEditorProps {
-    value?: string;
-    onChange: (html: string) => void;
-    label?: React.ReactNode;
-}
-export declare function CueCardEditor({ value, onChange, label, }: CueCardEditorProps): React.JSX.Element;
+export * from './shared/CueCardEditor';

package/dist/components/CueCardEditor.js

@@ -1,58 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-const DEFAULT_CONTENT = `
-  <p><strong>Describe a topic you know well.</strong></p>
-  <p>You should say:</p>
-  <ul>
-    <li>What it is</li>
-    <li>When you first learned about it</li>
-    <li>Why you find it interesting</li>
-  </ul>
-  <p><em>and explain how it has impacted your life.</em></p>
-`;
-export function CueCardEditor({ value, onChange, label, }) {
-    const [mounted, setMounted] = useState(false);
-    const editor = useEditor({
-        immediatelyRender: false,
-        extensions: [StarterKit],
-        content: value || DEFAULT_CONTENT,
-        onUpdate: ({ editor }) => {
-            onChange(editor.getHTML());
-        },
-        editorProps: {
-            attributes: {
-                class: 'tiptap-editor focus:outline-none min-h-[250px] p-4 bg-white border border-gray-200 rounded-b-md',
-            },
-        },
-    });
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    // Sync value if changed from outside (e.g., initial load)
-    useEffect(() => {
-        if (editor && value !== undefined && value !== editor.getHTML()) {
-            // Small timeout to prevent update loops
-            setTimeout(() => editor.commands.setContent(value), 0);
-        }
-    }, [value, editor]);
-    if (!mounted)
-        return null;
-    return (_jsxs("div", { className: "w-full flex flex-col gap-4", children: [label && _jsx("div", { children: label }), _jsxs("div", { className: "flex flex-col border border-gray-300 rounded-md shadow-sm", children: [_jsxs("div", { className: "flex flex-wrap gap-2 p-2 relative bg-gray-50 border-b border-gray-300 rounded-t-md", children: [_jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleBold().run(), disabled: !editor?.can().chain().focus().toggleBold().run(), className: `px-3 py-1 rounded text-sm font-bold ${editor?.isActive('bold')
-                                    ? 'bg-blue-500 text-white'
-                                    : 'bg-white border text-gray-700 hover:bg-gray-100'}`, children: "B" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleItalic().run(), disabled: !editor?.can().chain().focus().toggleItalic().run(), className: `px-3 py-1 rounded text-sm italic ${editor?.isActive('italic')
-                                    ? 'bg-blue-500 text-white'
-                                    : 'bg-white border text-gray-700 hover:bg-gray-100'}`, children: "I" }), _jsx("div", { className: "w-px h-6 bg-gray-300 mx-1 self-center" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(), className: `px-3 py-1 rounded text-sm font-bold ${editor?.isActive('heading', { level: 1 })
-                                    ? 'bg-blue-500 text-white'
-                                    : 'bg-white border text-gray-700 hover:bg-gray-100'}`, children: "H1" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(), className: `px-3 py-1 rounded text-sm font-bold ${editor?.isActive('heading', { level: 2 })
-                                    ? 'bg-blue-500 text-white'
-                                    : 'bg-white border text-gray-700 hover:bg-gray-100'}`, children: "H2" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleHeading({ level: 3 }).run(), className: `px-3 py-1 rounded text-sm font-bold ${editor?.isActive('heading', { level: 3 })
-                                    ? 'bg-blue-500 text-white'
-                                    : 'bg-white border text-gray-700 hover:bg-gray-100'}`, children: "H3" }), _jsx("div", { className: "w-px h-6 bg-gray-300 mx-1 self-center" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleBulletList().run(), className: `px-3 py-1 rounded text-sm ${editor?.isActive('bulletList')
-                                    ? 'bg-blue-500 text-white'
-                                    : 'bg-white border text-gray-700 hover:bg-gray-100'}`, children: "\u2022 List" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleOrderedList().run(), className: `px-3 py-1 rounded text-sm ${editor?.isActive('orderedList')
-                                    ? 'bg-blue-500 text-white'
-                                    : 'bg-white border text-gray-700 hover:bg-gray-100'}`, children: "1. List" })] }), _jsx(EditorContent, { editor: editor })] })] }));
-}
+export * from './shared/CueCardEditor';

package/dist/components/questions/types/speaking-cue-card/SpeakingCueCardCreator.js

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Input } from '../../../../components/ui/input';
 import { Label } from '../../../../components/ui/label';
-import { CueCardEditor } from '../../../../components/CueCardEditor';
+import { CueCardEditor } from '../../../../components/shared/CueCardEditor';
 import { CreatorGuide } from '../../components/CreatorGuide';
 import { CreditCard } from 'lucide-react';
 export function SpeakingCueCardCreator({ initialData, onChange, onUnsavedChangesChange, externalErrors, validationRef, }) {

package/dist/components/shared/CueCardEditor.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface CueCardEditorProps {
+    value?: string;
+    onChange: (html: string) => void;
+    label?: React.ReactNode;
+}
+export declare function CueCardEditor({ value, onChange, label, }: CueCardEditorProps): React.JSX.Element;

package/dist/components/shared/CueCardEditor.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+const DEFAULT_CONTENT = `
+  <p><strong>Describe a topic you know well.</strong></p>
+  <p>You should say:</p>
+  <ul>
+    <li>What it is</li>
+    <li>When you first learned about it</li>
+    <li>Why you find it interesting</li>
+  </ul>
+  <p><em>and explain how it has impacted your life.</em></p>
+`;
+export function CueCardEditor({ value, onChange, label, }) {
+    const [mounted, setMounted] = useState(false);
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: [StarterKit],
+        content: value || DEFAULT_CONTENT,
+        onUpdate: ({ editor }) => {
+            onChange(editor.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                class: 'tiptap-editor focus:outline-none min-h-[250px] p-4 bg-white border border-gray-200 rounded-b-md',
+            },
+        },
+    });
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    // Sync value if changed from outside (e.g., initial load)
+    useEffect(() => {
+        if (editor && value !== undefined && value !== editor.getHTML()) {
+            // Small timeout to prevent update loops
+            setTimeout(() => editor.commands.setContent(value), 0);
+        }
+    }, [value, editor]);
+    if (!mounted)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [label && (_jsx("label", { className: "text-sm font-medium leading-none text-gray-700", children: label })), _jsxs("div", { className: "rounded-md border border-gray-200 shadow-sm overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500", children: [editor && (_jsxs("div", { className: "flex items-center gap-1 p-2 bg-gray-50 border-b border-gray-200 flex-wrap", children: [_jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleBold().run(), className: `p-1.5 rounded hover:bg-gray-200 text-xs font-semibold text-gray-700 ${editor.isActive('bold') ? 'bg-gray-200' : ''}`, title: "Bold", children: "B" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleItalic().run(), className: `p-1.5 rounded hover:bg-gray-200 text-xs italic text-gray-700 ${editor.isActive('italic') ? 'bg-gray-200' : ''}`, title: "Italic", children: "I" }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 mx-1" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), className: `p-1.5 rounded hover:bg-gray-200 text-xs font-semibold text-gray-700 ${editor.isActive('heading', { level: 3 }) ? 'bg-gray-200' : ''}`, title: "Heading", children: "H3" }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 mx-1" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleBulletList().run(), className: `p-1.5 rounded hover:bg-gray-200 text-xs text-gray-700 ${editor.isActive('bulletList') ? 'bg-gray-200' : ''}`, title: "Bullet List", children: "\u2022 List" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleOrderedList().run(), className: `p-1.5 rounded hover:bg-gray-200 text-xs text-gray-700 ${editor.isActive('orderedList') ? 'bg-gray-200' : ''}`, title: "Numbered List", children: "1. List" }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 mx-1" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().clearNodes().unsetAllMarks().run(), className: "p-1.5 rounded hover:bg-gray-200 text-xs text-gray-500", title: "Clear Formatting", children: "Clear" })] })), _jsx(EditorContent, { editor: editor })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyweb_dev/oe-exam-sdk",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Reusable OceanEdu question components.",
   "type": "module",
   "main": "./dist/index.js",