He estado tratando de adaptar Draft.js en una especie de IDE con resaltado de sintaxis personalizado, sé que Prism existe, incluido Prism para Draft.js, pero carece de las características que necesito. No estoy usando Draft.js de la manera esperada, pero parece que es algo que debería poder manejar.
En la página Draft.js Estilos en línea complejos en Modelo, se muestra una variedad de estilos y, aunque está etiquetado como "Modelo" y "En esencia", parece que es posible hacer algo así.
Inicialmente, seguí la ruta establecida en este hilo . Draftjs aplica estilo en línea al texto programáticamente , sin embargo, potencialmente cada carácter tendrá un estilo diferente al siguiente y no es práctico hacer esto para cada carácter potencialmente en cada pulsación de tecla. Pero generar una variedad de estilos sería realmente fácil de administrar.
La documentación para Draft.js se siente incompleta y sigo llegando a callejones sin salida en cualquier ruta que tome, como que no hay una página de OrderedSet . Sé que debo mostrar el código que probé, pero es principalmente ese subproceso SO que probé, pero lo moví a una función onChange y lo hice funcionar con onChange, así como alternar estilos, lo incluí pero estoy bastante seguro de que me regañarían por no proporcionar nada.
Estoy completamente perplejo y un poco frustrado, probablemente hay un método que estoy buscando, pero no puedo encontrarlo.
const onChange = e => { const selectionState = e.getSelection(); const newSelection = selectionState.merge({ anchorOffset: 0, focusOffset: 1, }); //Selects the first character of the line that was edited const editorStateWithNewSelection = EditorState.forceSelection(e, newSelection); const editorStateWithStyles = RichUtils.toggleInlineStyle(editorStateWithNewSelection,'red'); //There's no method to even just set a style, only toggle const editorStateWithStylesAndPreviousSelection = EditorState.forceSelection( editorStateWithStyles, selectionState, ); setEditorState(editorStateWithStylesAndPreviousSelection); }