Estoy usando una biblioteca llamada react-contentEditable. El div tiene un accesorio html y un valor. Estoy mezclando el texto con etiquetas. Cuando agrego la etiqueta en el div, registra un onChange que está configurando { html: target.value }. El html está bien, pero necesito el apoyo de valor para almacenar solo el texto dentro de la etiqueta, no el html agregado para crear la etiqueta.
Ejemplo, cuando el valor se guarda con onChange se ve así
Hola, firstName ¿Cómo estás hoy?
Necesito valor para lucir como Hola, nombre ¿Cómo estás hoy?
Mi enfoque es hacer state.value.replace(/<label class-"p-1" >, " ")
Sin embargo, recibo el error: esperaba una asignación o llamada de función y en su lugar vi una expresión
import React, { createRef, useRef, Fragment, useState, useEffect} from 'react'; const contentEditable = createRef() const [textValue, setTextValue] = useState({value: "", html: ""}); const component = () => { <div> <ContentEditable name="body" innerRef={contentEditable} html={textValue.html} value={textValue} onChange={({target}) => { const newValue = textValue.html.replace(/<label contentEditable=false class=p-1 bg-primary text-white rounded-capsule shadow-none fs--3>/, " ") setTextValue({ ...textValue, value: newValue, html: target.value}), setTemplate({...template, [target.name]: target.value})}} style={{minHeight: "10em"}} className="border border-2x border-300 bg-light rounded-soft fs-1" /> </div> } export default Component