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 { 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"
......
......@@ -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('')
......
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