useEditable.jsx

import React, { useState } from 'react';

const useEditable = (initialText) => {
  const [text, setText] = useState(initialText);
  const [isEditingDraft, setIsEditingDraft] = useState(false);
  const [draftText, setDraftText] = useState(text);

  const enableEditingDraft = () => {
    setDraftText(text);
    setIsEditingDraft(true);
  };

  const saveDraftText = () => {
    setText(draftText);
    setIsEditingDraft(false);
  };

  const discardDraftText = () => {
    setIsEditingDraft(false);
  };

  return {
    text,
    isEditingDraft,
    draftText,
    enableEditingDraft,
    saveDraftText,
    discardDraftText,
    setDraftText
  };
};

export default useEditable;