es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

TipTap utiliza Editor devolviendo nulo.

28 May, 2023 Programación

Estoy usando la función useEditor de la biblioteca TipTap para crear un editor, pero al principio devuelve null. Lo que quiero decir es que si uso useEditor y registro inmediatamente la variable que le asigno, devuelve null, pero después devuelve un objeto Editor. Estoy utilizando React con create-react-app.

Tengo esto en mi archivo App.js:

const editorUse = useEditor({
extensions: [StarterKit],
content: JSON.parse(localStorage.getItem("text")) ?? "",
});
console.log(editorUse);

Imprime esto:
error image

Código sandbox: https://codesandbox.io/s/zealous-darwin-iswww?file=/src/App.js

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La razón por la cual useEditor devuelve null al principio cuando se registra es porque lleva un tiempo leve cargar la instancia del editor.
    Para solucionar este problema, puede agregar una verificación para ver si la variable editorUse existe antes de registrarla, de esta manera:

    const editorUse = useEditor({
  extensions: [StarterKit],
  content: JSON.parse(localStorage.getItem("text")) ?? "",
});

if (editorUse) {
  console.log(editorUse);
}

    Esto garantizará que editorUse solo se registre después de que se haya inicializado con la instancia del editor. Alternativamente, puede usar el gancho useEffect para registrar la variable editorUse solo después de que se haya cargado por completo:

    const editorUse = useEditor({
  extensions: [StarterKit],
  content: JSON.parse(localStorage.getItem("text")) ?? "",
});

useEffect(() => {
  console.log(editorUse);
}, [editorUse]);

    Esto registrará la variable editorUse cada vez que cambie, lo que garantizará que se haya cargado por completo antes de registrarse.

Comments are closed.