Draftjs replaceText保存风格

Question

我使用Draftjs和草稿js插件编辑器，我使用两个插件：草稿-js-mathjax-插件和草稿-js-提到-插件

当用户使用“@”提到元素时，我希望稍后用值替换所有提到的内容。例如，“您有@A”将被替换为“您有300”。我发现并使用了草稿-js构建、搜索和替换功能，这是详细的文档和解释。我稍微改变了一些功能，以使它们更加全球化：

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,
    );
}

这是很好的单独使用，但当我把数学表达式使用mathjax插件，然后我使用Replace函数，所有的数学知识消失了…

我知道在replaceText函数的定义中我们可以插入inlineStyle，但是我没有找到任何方法来“提取”样式。我试着用getEntityAt，findStyleRanges，findEntityRanges和其他函数，但是我不能让他们做我想做的.

这是我的反应组件：

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>
        );
    }
}

如果我没有使用替换函数，那么所有内容都会按预期显示，使用正确的样式表示，并显示数学表达式。

Answer 1

我找不到一个“合适的”解决方案，然后我直接在原始内容状态上进行手工编辑。

首先对所有块进行迭代，然后对该块中的每个实体进行迭代。我将手动替换blocki.text中的文本。然后，我必须比较前一个元素和新元素的长度来更改下一个元素的偏移量。

我使用两个数组，一个称为输入，另一个称为值。输入必须按长度排序(从高到低)，因为如果我们有@AB和@A，并且从@A开始，我们可能会发生冲突。

然后，输入数组中的每个元素都必须有一个"index“值，该值链接到值数组，以便用正确的值正确地替换。

let instruction = {"blocks":[{"key":"ar0s","text":"Multiply @alpha by @beta  \t\t ","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":9,"length":6,"key":0},{"offset":19,"length":5,"key":1},{"offset":26,"length":2,"key":2}],"data":{}}],"entityMap":{"0":{"type":"mention","mutability":"IMMUTABLE","data":{"mention":{"index":0,"type":"Integer","name":"alpha","min":0,"max":10}}},"1":{"type":"mention","mutability":"IMMUTABLE","data":{"mention":{"index":1,"type":"Integer","name":"beta","min":0,"max":10}}},"2":{"type":"INLINETEX","mutability":"IMMUTABLE","data":{"teX":"\\frac{@alpha}{@beta}","displaystyle":false}}}}

let inputs = [{index:0,name:'alpha'},{index:1,name:'beta'}];
let values = [1,123456];

replace(instruction,inputs,values);

function replace(contentState,inputs,values)
{
    instruction.blocks.forEach((block,i) => {

    console.log('Block['+i+'] "' + block.text + '"');

    let offsetChange = 0;

    block.entityRanges.forEach((entity) => {

      entity.offset+=offsetChange;
      console.log('\n[Entity] offsetChange:' + offsetChange);

      inputs.forEach(input => {

      if(instruction.entityMap[entity.key].type === 'mention') {
          if(input.name === instruction.entityMap[entity.key].data.mention.name)
          {

            console.log('replace ' + entity.offset + ' ' + entity.length + ' ' + block.text.toString().substr(entity.offset,entity.length));

            block.text = block.text.toString().replace(block.text.toString().substr(entity.offset,entity.length),values[input.index])

            let newLength = values[input.index].toString().length
            console.log('newLength:' +newLength);

            offsetChange+= (newLength-entity.length);
            entity.length=newLength;


          }
      }

      });

    });


  });

  return instruction;
}

所以它在为我所需要的东西工作。