Skip to content
Snippets Groups Projects
Commit d47576c4 authored by Yoan VALLET's avatar Yoan VALLET
Browse files

fix(newsletter): correction on internal links

parent 3d8ffce2
No related branches found
No related tags found
3 merge requests!30Dev,!29Dev,!28Fix/internal link
// import { } from 'draft-js' // import { } from 'draft-js'
import { stateToHTML } from 'draft-js-export-html' 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 { Editor, EditorState } from 'react-draft-wysiwyg'
import CustomLink from './CustomLink' import CustomLink from './CustomLink'
import './customEditor.scss' import './customEditor.scss'
...@@ -21,30 +21,39 @@ const CustomEditor: React.FC<CustomEditorProps> = ({ ...@@ -21,30 +21,39 @@ const CustomEditor: React.FC<CustomEditorProps> = ({
}: CustomEditorProps) => { }: CustomEditorProps) => {
const [editorState, setEditorState] = useState<EditorState>(baseState) const [editorState, setEditorState] = useState<EditorState>(baseState)
const handleStateChange = (state: EditorState) => { const entityStyleFn = useMemo(
let options = { () => (entity: any) => {
entityStyleFn: (entity: any) => { const entityType = entity.get('type').toLowerCase()
const entityType = entity.get('type').toLowerCase() if (entityType === 'link') {
if (entityType === 'link') { const data = entity.getData()
const data = entity.getData() return {
return { element: 'a',
element: 'a', attributes: {
attributes: { title: data.title,
target: data.targetOption, href: data.href ? data.href : data.url,
href: data.href, },
},
}
} }
}, }
} },
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 ( return (
<Editor <Editor
editorState={editorState} editorState={editorState}
onEditorStateChange={(state) => handleStateChange(state)} onEditorStateChange={(state) => handleStateChange(state)}
handlePastedText={() => false}
wrapperClassName="wrapper-class" wrapperClassName="wrapper-class"
editorClassName="editor-class" editorClassName="editor-class"
toolbarClassName="toolbar-class" toolbarClassName="toolbar-class"
......
...@@ -124,30 +124,34 @@ const Editing: React.FC = () => { ...@@ -124,30 +124,34 @@ const Editing: React.FC = () => {
} else return true } else return true
} }
const handleEditorChange = ( const handleEditorChange = useCallback(
value: string, (
type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image' value: string,
): void => { type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image'
setIsTouched(true) ): void => {
if (type === 'info') { setIsTouched(true)
setInfo(value) if (type === 'info') {
} setInfo(value)
if (type === 'title') { }
setTitle(value) if (type === 'title') {
} setTitle(value)
if (type === 'content') { }
setContent(value) if (type === 'content') {
} setContent(value)
if (type === 'question') { }
setQuestion(value) if (type === 'question') {
} setQuestion(value)
if (type === 'link') { }
setLink(value) if (type === 'link') {
} setLink(value)
if (type === 'image') { }
setImageURL(value) if (type === 'image') {
} setImageURL(value)
} }
},
[]
)
const resetFields = useCallback(() => { const resetFields = useCallback(() => {
setImageURL('') setImageURL('')
setInfo('') setInfo('')
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment