From d47576c48f3ecee75073feaba3e508b63b470c4f Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Tue, 1 Mar 2022 14:09:31 +0000
Subject: [PATCH] fix(newsletter): correction on internal links

---
 src/components/Editing/CustomEditor.tsx | 47 +++++++++++++---------
 src/components/Editing/Editing.tsx      | 52 +++++++++++++------------
 2 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/src/components/Editing/CustomEditor.tsx b/src/components/Editing/CustomEditor.tsx
index fa27851c..d30a02e1 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,30 +21,39 @@ const CustomEditor: React.FC<CustomEditorProps> = ({
 }: CustomEditorProps) => {
   const [editorState, setEditorState] = useState<EditorState>(baseState)
 
-  const handleStateChange = (state: EditorState) => {
-    let options = {
-      entityStyleFn: (entity: any) => {
-        const entityType = entity.get('type').toLowerCase()
-        if (entityType === 'link') {
-          const data = entity.getData()
-          return {
-            element: 'a',
-            attributes: {
-              target: data.targetOption,
-              href: data.href,
-            },
-          }
+  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,
+          },
         }
-      },
-    }
-    setEditorState(state)
-    handleChange(stateToHTML(state.getCurrentContent(), options), editorType)
-  }
+      }
+    },
+    []
+  )
+
+  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 f0ef6d39..0522e5d7 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('')
-- 
GitLab