Instalación y Configuración Inicial

Para habilitar la edición de contenido directamente en el DOM dentro de una aplicación React, la biblioteca react-contenteditable ofrece una solución robusta. Para incorporarla a su entorno de desarrollo, ejecute el siguiente comando en la terminal de su proyecto:

npm install react-contenteditable

Implementación con Componentes de Clase

A continuación, se detalla la implementación utilizando un componente basado en clases. Este enfoque permite encapsular el estado del markup HTML y gestionar las referencias al nodo DOM de manera controlada.

import React, { Component, createRef } from 'react';
import ContentEditable from 'react-contenteditable';

class EditorDeTexto extends Component {
  constructor(props) {
    super(props);
    this.refEditor = createRef();
    this.state = {
      markup: '<p>Edite este <strong>texto</strong> directamente.</p>'
    };
  }

  procesarCambio = (evento) => {
    this.setState({ markup: evento.target.value });
  };

  render() {
    return (
      <ContentEditable
        innerRef={this.refEditor}
        html={this.state.markup}
        disabled={false}
        onChange={this.procesarCambio}
        tagName="section"
        className="editor-personalizado"
      />
    );
  }
}

export default EditorDeTexto;

Refereencia de la API

El componente expone diversas propiedades para controlar su comportamiento y apariencia. La siguiente tabla detalla los parámetros de configuración disponibles:

Integración con React Hooks

Al migrar a componentes funcionales con React Hooks, es crucial manejar el estado correctamente para evitar problemas comunes como el salto del cursor durante la escritura. Una estrategia eficaz consiste en utilizar useRef para almacenar el valor actual sin forzar re-renderizados innecesarios que interrumpan la experiencia de usuario, combinado con eventos de pérdida de foco para sincronizar el estado global.

import React, { useRef } from 'react';
import ContentEditable from 'react-contenteditable';

const EditorFuncional = () => {
  const contenidoRef = useRef('<em>Contenido inicial con Hooks</em>');

  const sincronizarContenido = (evento) => {
    contenidoRef.current = evento.target.value;
  };

  const manejarSalida = () => {
    console.log('Contenido finalizado:', contenidoRef.current);
  };

  return (
    <ContentEditable
      html={contenidoRef.current}
      onChange={sincronizarContenido}
      onBlur={manejarSalida}
      tagName="div"
    />
  );
};

export default EditorFuncional;