I use Nextjs with Typescipt. This is my code of editor component
import {EditorState, ContentState, convertFromHTML} from 'draft-js'
import {EditorWrapper} from "src/@core/styles/libs/react-draft-wysiwyg";
import ReactDraftWysiwyg from 'src/@core/components/react-draft-wysiwyg'
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
interface MainProps {
handleFaq: any;
setHandleFaq: any;
}
const AnswerTextEditorControlled = (props: MainProps) =>{
const {handleFaq,setHandleFaq} = props
const [editorState, setEditorState] = useState(EditorState.createEmpty());
useEffect(() => {
if (handleFaq?.answer !== null && handleFaq?.answer !== undefined) {
const textToConvert = handleFaq?.answer;
const blocksFromHTML = convertFromHTML(textToConvert);
const contentState = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);
// const contentState = ContentState.createFromBlockArray(
// convertFromHTML(handleFaq?.answer)
// );
setEditorState(EditorState.createWithContent(contentState));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const refEditor = useRef<HTMLDivElement | null>(null);
const handleGetValue = () => {
const htmlContent = refEditor.current;
if(htmlContent){
setHandleFaq({...handleFaq, answer: htmlContent.innerHTML});
}
};
const handleEditorRef = (ref: any) => {
if (ref) {
// Store the editor instance reference in the refEditor
refEditor.current = ref;
}
};
return (
<EditorWrapper>
<ReactDraftWysiwyg editorState={editorState} onEditorStateChange={setEditorState} editorRef={handleEditorRef} onChange={handleGetValue}/>
</EditorWrapper>
);
}
export default AnswerTextEditorControlled
when I click backspace button to go the start of the editor and remove any text from the editor i recieve an error that says Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading •getln • )
I also try this method
const handleGetValue = () => {
const htmlContent = refEditor.current;
if (htmlContent) {
const answer = htmlContent.innerHTML.trim(); // Remove leading/trailing whitespace
if (answer === '') {
setHandleFaq({ ...handleFaq, answer: null });
} else {
setHandleFaq({ ...handleFaq, answer });
}
}
};
