Draftjs替换文本保存样式

Question

我正在使用Draftjs与draft-js-plugins-editor，我正在使用两个插件。Draft-js-mathjax-plugin，我使用了两个插件：draft-js-plugins-editor。 和 draft-js-mention-plugin

当用户使用'@'提及元素时，我希望稍后用值来替换所有提及的元素。例如 "你有@A "将被替换为 "你有300"。我发现并使用了 Draft-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-plugin将数学表达式放入，然后使用 Replace 函数，所有数学的东西都消失了......。

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

这是我的react组件。

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

如果我不使用replace函数，所有的东西都能按照预期显示，以正确的样式显示，还有数学表达式。

Answer 1

我找不到一个 "合适 "的解决方案，于是我直接在原始的Content State上进行手动编辑。

首先，我在迭代所有的 块那么，对于每个 实体 中的文字。我手动替换了block[i].text中的文本。然后我必须比较前一个元素和新元素的长度，以改变下一个元素的偏移量。

我使用了两个数组，一个叫输入，一个叫值。输入数组必须按长度排序（从高到低），因为如果我们有@AB和@A，而我们从@A开始，可能会有冲突。

然后，输入数组中的每个元素必须有一个 "索引 "值，它可以链接到值数组，以正确地替换正确的值。

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

所以，它的工作是我所需要的。