bitforum-frontend/app/component/Editor.tsx

'use client';

/**
 * @author: Kim Jino
 * @since: 2025.03.31
 * @description: CKEditor component for Next.js using Script component for loading CKEditor script
 */

// @/app/component/editor.tsx

import '@/styles/editor.scss';
import Script from 'next/script';
import React, { useRef, useState, useEffect } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Loading from '@/app/component/Loading';

interface EditorProps {
	data?: string;
	onChange?: (data: string) => void;
}

export default function Editor({ data = '', onChange }: EditorProps)
{
	const editorRef = useRef<typeof window.Editor|null>(null);
	const [ready, setReady] = useState(false);

	useEffect(() => {
		if (typeof window !== 'undefined' && window.Editor) {
			editorRef.current = window.Editor;
			setReady(true);
		}
	}, []);

	const handleScriptLoad = () => {
		if (typeof window !== 'undefined' && window.Editor) {
			editorRef.current = window.Editor;
			setReady(true);
		} else {
			console.error('CKEditor script not loaded properly.');
		}
	};

	return (
		<>
			<Script src="/editor/editor.min.js" strategy="afterInteractive" onLoad={handleScriptLoad}/>

			{ready && editorRef.current ? (
				<CKEditor
					editor={editorRef.current}
					data={data}
					config={{
						placeholder: '내용을 입력하세요.',
						maxWordCount: 3000,

						// 이미지 설정
						allowImage: true,
						imageUploadLimit: 1,
						imageUploadMaxSize: 5120,

						// 미디어어 설정
						allowMedia: true,
						mediaUploadLimit: 1
					}}
					onReady={(editor) => {
						console.log('Editor was initialized');

						// 최소 높이 설정
						editor.editing.view.change(writer => {
							const root = editor.editing.view.document.getRoot();
							if (root) {
								writer.setStyle('min-height', '300px', root);
							}
						});
					}}
					onChange={(_, editor) => {
						onChange?.(editor.getData());
					}}
				/>
			) : (
				<Loading/>
			)}
		</>
	);
}