102 lines
2.3 KiB
TypeScript
102 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import dynamic from 'next/dynamic';
|
|
import SimpleEditor from './simple-editor';
|
|
|
|
// Dynamic import untuk CKEditor dengan error handling
|
|
const CKEditorWrapper = dynamic(
|
|
() => import('./ckeditor-wrapper'),
|
|
{
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="flex items-center justify-center p-8 border border-gray-200 rounded-lg">
|
|
<div className="text-gray-500">Loading editor...</div>
|
|
</div>
|
|
)
|
|
}
|
|
);
|
|
|
|
interface EditorProps {
|
|
data?: string;
|
|
onChange?: (data: string) => void;
|
|
onReady?: (editor: any) => void;
|
|
onBlur?: (event: any, editor: any) => void;
|
|
onFocus?: (event: any, editor: any) => void;
|
|
config?: any;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
fallbackToSimple?: boolean;
|
|
}
|
|
|
|
export default function Editor({
|
|
data = '',
|
|
onChange,
|
|
onReady,
|
|
onBlur,
|
|
onFocus,
|
|
config = {},
|
|
disabled = false,
|
|
className = '',
|
|
fallbackToSimple = true
|
|
}: EditorProps) {
|
|
const [useSimpleEditor, setUseSimpleEditor] = useState(false);
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// Check if CKEditor is available
|
|
const checkCKEditor = async () => {
|
|
try {
|
|
await import('@ckeditor/ckeditor5-react');
|
|
await import('ckeditor5');
|
|
setUseSimpleEditor(false);
|
|
} catch (error) {
|
|
console.warn('CKEditor not available, falling back to simple editor:', error);
|
|
if (fallbackToSimple) {
|
|
setUseSimpleEditor(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
if (isMounted) {
|
|
checkCKEditor();
|
|
}
|
|
}, [isMounted, fallbackToSimple]);
|
|
|
|
if (!isMounted) {
|
|
return (
|
|
<div className={`flex items-center justify-center p-8 border border-gray-200 rounded-lg ${className}`}>
|
|
<div className="text-gray-500">Loading editor...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (useSimpleEditor) {
|
|
return (
|
|
<SimpleEditor
|
|
data={data}
|
|
onChange={onChange}
|
|
className={className}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<CKEditorWrapper
|
|
data={data}
|
|
onChange={onChange}
|
|
onReady={onReady}
|
|
onBlur={onBlur}
|
|
onFocus={onFocus}
|
|
config={config}
|
|
disabled={disabled}
|
|
className={className}
|
|
/>
|
|
);
|
|
}
|