I'm using Draftjs with draft-js-plugins-editor, I'm using two plugins : draft-js-mathjax-plugin and draft-js-mention-plugin
When the user is mentioning element(s) using '@' I want later to replace all the mentions by values. For example "You have @A" will be replace by "You have 300". I found and used the Draft-js building search and replace functionality which is well documented and explained. I changed a bit the function to make them more global:
function findWithRegex (regex, contentBlock, callback) {
const text = contentBlock.getText();
let matchArr, start, end;
while ((matchArr = regex.exec(text)) !== null) {
start = matchArr.index;
end = start + matchArr[0].length;
callback(start, end);
}
}
function Replace (editorState,search,replace) {
const regex = new RegExp(search, 'g');
const selectionsToReplace = [];
const blockMap = editorState.getCurrentContent().getBlockMap();
blockMap.forEach((contentBlock,i) => (
findWithRegex(regex, contentBlock, (start, end) => {
const blockKey = contentBlock.getKey();
const blockSelection = SelectionState
.createEmpty(blockKey)
.merge({
anchorOffset: start,
focusOffset: end,
});
selectionsToReplace.push(blockSelection)
})
));
let contentState = editorState.getCurrentContent();
selectionsToReplace.forEach((selectionState,i) => {
contentState = Modifier.replaceText(
contentState,
selectionState,
replace
)
});
return EditorState.push(
editorState,
contentState,
);
}
This is working well alone but when I'm putting mathematics expression using mathjax-plugin, and then I use the Replace function, all the mathematics stuff disappear...
I know that in the definition of the replaceText function we can insert inlineStyle, but I don't found any way to "extract" the style.
I tried to use getEntityAt, findStyleRanges, findEntityRanges and others functions but I can't make them do what I want...
Here is my react component :
import React, { Component } from 'react';
import {EditorState, SelectionState, Modifier, convertFromRaw, convertToRaw} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createMathjaxPlugin from 'draft-js-mathjax-plugin';
import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin';
export default class EditorRplace extends Component {
constructor(props) {
super(props);
this.mentionPlugin = createMentionPlugin({
entityMutability: 'IMMUTABLE',
mentionPrefix: '@'
});
//We recover the data from the props
let JSONContentState = JSON.parse(this.props.instruction);
let inputs = this.props.inputs;
let values = this.props.values;
this.state = {
editorState: EditorState.createWithContent(convertFromRaw(JSONContentState)),
plugins:[this.mentionPlugin,createMathjaxPlugin({setReadOnly:this.props.isReadOnly})],
trigger:this.props.trigger,
inputs:inputs,
values:values,
};
}
componentDidMount() {
this.setState({
editorState:onReplace(this.state.editorState,'A','B')
})
}
onChange = (editorState) => {
this.setState({
editorState:editorState,
})
};
render() {
return (
<div>
<Editor
readOnly={true}
editorState={this.state.editorState}
plugins={this.state.plugins}
onChange={this.onChange}
/>
</div>
);
}
}
If I'm not using the replace function, everything is displayed as expected, the mention with the right style, and the mathematical expression.
