File size: 3,560 Bytes
5eca108 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | import React, { useState, useEffect } from 'react';
import DOMPurify from 'dompurify';
import { Editor } from '@tinymce/tinymce-react';
const HelpSystem = ({ isAdmin = false }) => {
const [helpContent, setHelpContent] = useState('');
const [editMode, setEditMode] = useState(false);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// Load help content from API or file
useEffect(() => {
const loadHelpContent = async () => {
try {
const response = await fetch('/api/help');
if (!response.ok) throw new Error('Failed to load help content');
const data = await response.text();
setHelpContent(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
loadHelpContent();
}, []);
const handleSave = async (newContent) => {
try {
const response = await fetch('/api/help', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ content: newContent }),
});
if (!response.ok) throw new Error('Failed to save help content');
setHelpContent(newContent);
setEditMode(false);
} catch (err) {
setError(err.message);
}
};
if (loading) return <div className="p-4 text-center">Loading help content...</div>;
if (error) return <div className="p-4 text-red-500">Error: {error}</div>;
return (
<div className="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Help Center</h2>
{isAdmin && !editMode && (
<button
onClick={() => setEditMode(true)}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
>
Edit Content
</button>
)}
</div>
{editMode ? (
<div className="space-y-4">
<Editor
apiKey="your-tinymce-api-key"
value={helpContent}
init={{
height: 500,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}}
onEditorChange={(newContent) => setHelpContent(newContent)}
/>
<div className="flex space-x-3">
<button
onClick={() => handleSave(helpContent)}
className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600"
>
Save Changes
</button>
<button
onClick={() => setEditMode(false)}
className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
>
Cancel
</button>
</div>
</div>
) : (
<div
className="prose dark:prose-invert max-w-none"
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(helpContent) }}
/>
)}
</div>
);
};
export default HelpSystem; |