diff --git a/src/components/Editing/CustomEditor.tsx b/src/components/Editing/CustomEditor.tsx index 5cca8c77e727ab1eeb31868d77e68d48fb46a273..d30a02e1dec8680f0b0df02a99b35c0f9f70630c 100644 --- a/src/components/Editing/CustomEditor.tsx +++ b/src/components/Editing/CustomEditor.tsx @@ -1,6 +1,6 @@ // import { } from 'draft-js' import { stateToHTML } from 'draft-js-export-html' -import { useState } from 'react' +import { useCallback, useMemo, useState } from 'react' import { Editor, EditorState } from 'react-draft-wysiwyg' import CustomLink from './CustomLink' import './customEditor.scss' @@ -21,15 +21,39 @@ const CustomEditor: React.FC<CustomEditorProps> = ({ }: CustomEditorProps) => { const [editorState, setEditorState] = useState<EditorState>(baseState) - const handleStateChange = (state: EditorState) => { - setEditorState(state) - handleChange(stateToHTML(editorState.getCurrentContent()), editorType) - } + const entityStyleFn = useMemo( + () => (entity: any) => { + const entityType = entity.get('type').toLowerCase() + if (entityType === 'link') { + const data = entity.getData() + return { + element: 'a', + attributes: { + title: data.title, + href: data.href ? data.href : data.url, + }, + } + } + }, + [] + ) + + const handleStateChange = useCallback( + (state: EditorState) => { + setEditorState(state) + handleChange( + stateToHTML(state.getCurrentContent(), { entityStyleFn }), + editorType + ) + }, + [editorType, handleChange, entityStyleFn] + ) return ( <Editor editorState={editorState} onEditorStateChange={(state) => handleStateChange(state)} + handlePastedText={() => false} wrapperClassName="wrapper-class" editorClassName="editor-class" toolbarClassName="toolbar-class" diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx index f0ef6d39daf6af08842a3c7e0a512855c97c80b0..0522e5d744b71cf7b69cbfb78ad705fa44cc186f 100644 --- a/src/components/Editing/Editing.tsx +++ b/src/components/Editing/Editing.tsx @@ -124,30 +124,34 @@ const Editing: React.FC = () => { } else return true } - const handleEditorChange = ( - value: string, - type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image' - ): void => { - setIsTouched(true) - if (type === 'info') { - setInfo(value) - } - if (type === 'title') { - setTitle(value) - } - if (type === 'content') { - setContent(value) - } - if (type === 'question') { - setQuestion(value) - } - if (type === 'link') { - setLink(value) - } - if (type === 'image') { - setImageURL(value) - } - } + const handleEditorChange = useCallback( + ( + value: string, + type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image' + ): void => { + setIsTouched(true) + if (type === 'info') { + setInfo(value) + } + if (type === 'title') { + setTitle(value) + } + if (type === 'content') { + setContent(value) + } + if (type === 'question') { + setQuestion(value) + } + if (type === 'link') { + setLink(value) + } + if (type === 'image') { + setImageURL(value) + } + }, + [] + ) + const resetFields = useCallback(() => { setImageURL('') setInfo('')