Estoy usando Draft.js para su complemento de menciones. A veces, quiero que los usuarios agreguen una mención no seleccionando un elemento de un menú desplegable sino escribiendo algo como, por ejemplo, "@elemento" o "@elemento ".
Como puede ver en la función a continuación, si escribo una palabra que comienza con @* o termina con *, se convierte en una mención automáticamente.
export const replaceString = (editorState, setEditorState) => { const contentState = editorState.getCurrentContent(); const selectionState = editorState.getSelection(); const block = contentState.getBlockForKey(selectionState.getAnchorKey()); const blockAsArray = block.getText().split(' '); const lastWord = blockAsArray.pop(); if (lastWord.startsWith('@*') || lastWord.endsWith('*') ) { const currentSelectionState = editorState.getSelection(); const currentContent = editorState.getCurrentContent(); const contentStateWithEntity = currentContent.createEntity( "MENTION", "MUTABLE", { nature: 'remedy', lastWord} ); const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); const newContentState = Modifier.replaceText( contentState, selectionState.merge({ anchorOffset: currentSelectionState.getEndOffset() - lastWord.length, focusOffset: currentSelectionState.getEndOffset() }), lastWord, editorState.getCurrentInlineStyle(), entityKey ); setEditorState(EditorState.push( editorState, newContentState, 'replace-text' )) } else { setEditorState(editorState) } }Lo que me encantaría hacer ahora es insertar esta mención como un lapso que puedo diseñar. ¿Hay alguna manera de que pueda hacer eso?
https://draftjs.org/docs/advanced-topics-inline-styles/
Draftjs renderiza desde su propio modelo. Debe controlar los estilos por entidad.