Estoy usando draftjs en los que los usuarios pueden escribir cualquier cosa y también pueden hacer clic en un botón en el que estoy insertando una entidad INMUTABLE.

 const text = "foo"; const editorState = this.state.value; const selectionState = editorState.getSelection(); const contentState = editorState.getCurrentContent(); const contentStateWithEntity = contentState.createEntity("TOKEN", "IMMUTABLE", { time: new Date().getTime() }); const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); const modifiedContent = Modifier.insertText(contentState, selectionState, text, OrderedSet([ "INSERT" ]), entityKey); const nextState = EditorState.push( editorState, modifiedContent, editorState.getLastChangeType() ); this.setState({value: nextState}, this.focus );

https://codepen.io/dakridge/pen/XgLWJQ

Todo esto funciona bien, pero cuando se guarda el estado del editor y ahora estoy tratando de representar el HTML del ContentState guardado en mi página web, entonces no puedo identificar la entidad inmutable y aplicarle estilos o representarla de manera diferente.

Por ejemplo, en el ejemplo anterior, ¿cómo se puede renderizar foo con un color diferente y cómo se puede registrar la marca de tiempo guardada en la consola cuando paso el cursor sobre foo?

Estoy usando draftjs-to-html para renderizar html desde la salida de draftjs.