Estoy usando DraftJS para editar contenido de texto, pero cuando traté de editar cualquier contenido existente que recuperé de DB y cargué en el Editor, el cursor salta automáticamente al principio de los textos y comencé a escribir desde atrás.
He importado el Editor a Bulletin.js , por lo que tengo que obtener el contenido pasando getContent al Editor y recuperar el html sin formato usando getContent en la función handleEditorChange del Editor .
Descubrí que si eliminé la función getContent para devolver el HTML sin procesar en handleEditorChange , el editor funciona normalmente, pero luego no podré devolver el contenido html a Bulletin.js .
Aquí está el codesandbox que he creado como referencia.
El problema es que establece en cada cambio un nuevo EditorState aquí:
useEffect(() => { if (htmlContent) { let convertedToHTML = decodeURIComponent(htmlContent); const blocksFromHtml = htmlToDraft(convertedToHTML); const { contentBlocks, entityMap } = blocksFromHtml; const contentState = ContentState.createFromBlockArray( contentBlocks, entityMap ); setEditorState(EditorState.createWithContent(contentState)); } }, [htmlContent]); htmlContent siempre cambia a medida que convierte EditorState a HTML en cada cambio a través de la función getContent .
Si desea inicializar su EditorState con htmlContent , puede hacerlo en la función useState y eliminar useEffect :
const [editorState, setEditorState] = useState(() => { if (htmlContent) { let convertedToHTML = decodeURIComponent(htmlContent); const blocksFromHtml = htmlToDraft(convertedToHTML); const { contentBlocks, entityMap } = blocksFromHtml; const contentState = ContentState.createFromBlockArray( contentBlocks, entityMap ); return EditorState.createWithContent(contentState); } return EditorState.createEmpty() });