Estoy enfrentando un problema con el componente del editor de seguimiento de DraftJS.

 import React, { useRef } from "react"; import styled from "styled-components"; import { EditorState, Editor as DraftEdior } from "draft-js"; const Wrapper = styled.div` border: 1px solid #ccc; padding: 1rem; `; interface IEditorProps { state: EditorState; onChange: (state: EditorState) => void; readOnly?: boolean; } export const Editor: React.FunctionComponent<IEditorProps> = (props) => { const { state, onChange, readOnly } = props; const ref = useRef<DraftEdior | null>(null); return ( <Wrapper onClick={() => ref?.current?.focus()}> <DraftEdior ref={ref} editorState={state} onChange={onChange} readOnly={!!readOnly} /> </Wrapper> ); }; export default Editor;

y la aplicación.js

 import React from "react"; import { EditorState } from "draft-js"; import { Editor } from "./Editor"; const App = () => { const [state, setState] = React.useState<EditorState>(() => EditorState.createEmpty() ); return ( <> <h3>Editor</h3> <Editor state={state} onChange={(state) => setState(state)} /> <h3>Result</h3> <Editor state={state} readOnly onChange={() => null} /> </> ); }; export default App;

Cuando solo hay un editor en la página, todo funciona bien. Pero el editor perdía continuamente el foco cuando añadía un componente de solo lectura.

Este es un enlace de código sanbox

https://codesandbox.io/s/vigilant-wilson-70op8?file=/src/App.tsx:0-451

Como solucionarlo, muchas gracias.