Dev

src/components/Editing/CustomEditor.tsx

 // 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"