SetContents SunEditor no funciona React

Question

He estado probando con SunEditor desde que quiero precargar un texto HTML almacenado en la base de datos y permitir que los usuarios lo modifiquen si es necesario. Estoy pasando una variable de referencia del padre para que cuando se haga clic en el botón enviar, pueda obtener el valor y guardar las modificaciones. setContents funciona a veces. Cuando guardo el proyecto y se vuelve a compilar apareció el texto. Pero si uso la aplicación o actualizo la ventana, el texto desaparece. He comprobado que la variable todavía tiene el valor. Soy nuevo en React y no estoy seguro de si lo estoy haciendo mal o simplemente falla suneditor-react. ¿Me puedes ayudar?

Aquí está mi código:

export const TranslationArea = React.forwardRef((props, ref) =>{    
    
    const handleEditorChange = (value) => {
        console.log(value);  
    
        ref.current= value;
      }
     const handleClick  = () => {
         console.log(ref.current);
     } 
    return(
        <div>
            <h2>{props.title}</h2>
                <SunEditor 
                    autoFocus={true}
                    width="100%"
                    height="150px"
                    setOptions={{
                        buttonList: [
                            // default
                            ['undo', 'redo'],
                            ['bold', 'underline', 'italic', 'list'],
                            ['table', 'link', 'image'],
                            ['fullScreen']
                        ]
                    
                    }}
                    setContents={props.content}
                    onChange={handleEditorChange}
            
                />
                <div>{props.content}</div>
            <button onClick={handleClick}>Content</button>
        </div>
    );
});

Aquí está la captura de pantalla con el contenido correctamente cargado dentro de SunEditor div (solo al compilar el proyecto):

Si actualizo la página o navego hasta el mismo enlace ...

He mostrado un div con el mismo contenido de props.content solo para verificar que fowardRef está funcionando. ¿Por qué setContents está funcionando ahora? He inspeccionado con las herramientas React y la propiedad está cargada:

¿Alguna idea?

Answer 1

Estoy pasando una variable de referencia del padre para que cuando se haga clic en el botón enviar, pueda obtener el valor y guardar las modificaciones.

Si todo lo que necesita para acceder es el valor, pasemos una devolución de llamada. Lo llamaremos onSumbity será una función que toma el stringvalor del SunEditorcomponente.

Para tener acceso al valor editado actual, estoy usando un estado local en el TranslationAreacomponente y actualizando ese estado a través del onChangemétodo del editor . Luego, cuando se hace clic en el botón enviar, llamo onSubmitcon el valor de contentdesde el estado local. (Puede haber otra forma de hacer esto, pero no estoy familiarizado con SunEditor).

El TranslationAreacomponente se ve así:

export const TranslationArea = ({initialContent = "", title, onSubmit}) => {    
  const [content, setContent] = useState(initialContent);

  return(
      <div>
          <h2>{title}</h2>
              <SunEditor 
                  autoFocus={true}
                  width="100%"
                  height="150px"
                  setOptions={{
                      buttonList: [
                          // default
                          ['undo', 'redo'],
                          ['bold', 'underline', 'italic', 'list'],
                          ['table', 'link', 'image'],
                          ['fullScreen']
                      ]
                  
                  }}
                  setContents={initialContent}
                  onChange={setContent}
              />
              <div>{content}</div>
          <button onClick={() => onSubmit(content)}>Submit</button>
      </div>
  );
};

Lo probé en mi CodeSandbox dándole una onSubmitfunción que registra el contenido enviado, pero puedes hacer lo que necesites con él.

export default function App() {
  const initialContent = "Hello World";
  const onSubmit = (content: string) => {
    console.log("Submitted Content", content);
  };

  return (
    <div className="App">
      <TranslationArea
        initialContent={initialContent}
        onSubmit={onSubmit}
        title="Edit Text"
      />
    </div>
  );
}

Enlace CodeSandbox