Merge branch 'dev' into 'master'

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"

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('')