import { Editor, EditorState, DefaultDraftBlockRenderMap, SelectionState } from 'draft-js';

const MyEditor = () => {
  // 텍스트 에디터의 상태를 관리하는 EditorState 객체
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  // 드래그한 텍스트의 시작과 끝 오프셋을 저장하는 상태
  const [selection, setSelection] = useState({ startOffset: null, endOffset: null });

  // 에디터 클릭 시 SelectionState 초기화
  const handleClick = () => {
    setSelection({ startOffset: null, endOffset: null });
  };

  // 텍스트 드래그 시작 시 SelectionState 업데이트
  const handleMouseDown = (e) => {
    const selection = window.getSelection();
    const startOffset = selection.focusOffset;
    setSelection({ startOffset, endOffset: null });
  };

  // 텍스트 드래그 중 시 SelectionState 업데이트
  const handleMouseUp = (e) => {
    const selection = window.getSelection();
    const endOffset = selection.focusOffset;
    setSelection((prevSelection) => ({ ...prevSelection, endOffset }));
  };

  // 에디터 렌더링
  return (
    <div onClick={handleClick}>
      <Editor
        editorState={editorState}
        blockRenderMap={DefaultDraftBlockRenderMap}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onChange={(newEditorState) => setEditorState(newEditorState)}
      />
    </div>
  );
};