11

彼ら！助けてください。

私が欲しいもの:Enterユーザーが新しい行から開始するときに、ユーザーが URLを入力し、 URL を含むブロックを削除して、それを custom に置き換えたいと押しますEntity。ドキュメントのメディアの例によく似ていますが、Add imageボタンはありません。

私が試したこと：（ただの大まかなドラフト）

var mediaBlockRenderer = function(block) {
    if (block.getType() === 'atomic') {
        return {
            component: TestComponent,
            editable: false
        };
    }
    return null;
};

var TestComponent = function() {
    return <div className="test-component">TEST COMPONENT</div>;
};

onChange: function(editorState) {
        var currentKey = editorState.getSelection().getStartKey();
        var content = editorState.getCurrentContent();
        var selection = content.getSelectionBefore();
        var beforeKey = content.getKeyBefore(currentKey);
        var block = content.getBlockForKey(beforeKey);

        if (block && block.getText() === 'test') {
            console.log(block.getText());
            var len = block.getCharacterList().size;

            var newSelection = selection.merge({
                anchorOffset: 0,
                focusOffset: len
            });

            var newContent = Modifier.removeRange(content, newSelection, 'backward');
            editorState = EditorState.push(editorState, newContent, 'insert');
            var key = Entity.create('media', 'IMMUTABLE');
            editorState = AtomicBlockUtils.insertAtomicBlock(
                editorState,
                key,
                ' '
            );
            //editorState = EditorState.forceSelection(editorState, newContent.getSelectionBefore());

        }

        this.setState({
            editorState: editorState
        })
    }

それはほとんど私が望むことをしますが、挿入されたブロックはバックスペースを押しても削除できません.カーソルは右上隅にジャンプするだけです.

私の質問:ブロックを置き換える推奨される方法は何ですか? ブロックをどのように削除しますか? 挿入したブロックが削除されないのはなぜですか?

ありがとう！

4

1 に答える 1

1

Modifier.replaceText代わりに を使用して、これを理解することになりModifier.removeRangeました。できることは、URL の最初のインデックスと URL の最後のインデックスを見つけることです (これらaをbそれぞれ と と呼びましょう)。次のことができます。

let newSelection = editorState.getSelection();
newSelection = newSelection.merge({
    anchorOffset: a,
    focusOffset: b
});

let newContent = Modifier.replaceText(editorState.getCurrentContent(), newSelection, "");
let newState = EditorState.push(editorState, newContent, 'insert-characters');

this.setState({ editorState: newState });

好きなように定義することもできるnewSelectionので、分割しContentBlocksたい場合は可能です。

于 2020-06-04T18:37:45.863 に答える