DraftJSでカスタム定義型を設定する

Question

DRAFTBLOCKTYPEから1つを使用する代わりに独自のブロックタイプを定義できるのが不思議です。

現在、draft-image-pluginというプラグインを使用しているdraft-wysiwygで遊んでいます。問題は、atomicの代わりにblock-imageをブロックのタイプとして渡してプラグインを機能させることです。

実際、私はthisの解決策を使用しようとしましたが、プラグインのタイプをatomicに上書きしています。しかし、アプリケーションのatomicタイプの他のブロックに影響を与えます。このブロックでは、blockRendererがそのプラグインのblockRendererによって「飲み込まれている」ため、自分自身のblockRendererFnを作成できません。このようblock-imageやblock-tableなど任意のカスタム定義された型にブロックタイプを設定する方法

AtomicBlockUtils.insertAtomicBlock(
    editorState, 
    entityKey, 
    ' ' 
) 

：atomicにブロックタイプを設定するには

は、私はでそれを容易に実現することができますか？それも可能ですか？

Answer 1

はい、可能ですが、いくつかのオプションがあります。あなたがタイプatomicのブロックをレンダリングするコンポーネントを管理している場合、それはおそらく、これらのブロックへのエンティティとしてあなたの新しいタイプを追加するのが最も簡単でしょう

1. ：ここで私が知っているいくつか紹介します。

2. これはオプションではない場合は、もう少し面倒です。 AtomicBlockUtilsは実際には、人々がメディア（アトミック）ブロックを簡単に作成するのを助けるために作られた単なるモジュールです（将来的にはもっと多くのユーティリティ機能が追加されるでしょう）。まったく同じ動作をしたいがタイプが異なる場合は、that moduleをコピーして'atomic'と他のもの（例えば、'block-image'またはより一般的な/再開可能にする変数）を交換してください。

   彼らが使用する技術は、空きブロックの選択を作成し、それを新しいブロックタイプを与えるModifier.setBlockType()関数を使用することが基本的に：

const asAtomicBlock = DraftModifier.setBlockType(
    afterSplit, // ContentState 
    insertionTarget, // SelectionState 
    'atomic' // your custom type 
); 

this exampleでは、著者は彼自身のバージョンを作成しました

は、（ただし、それは正確にAtomicBlockUtils内の1つのように動作しません）addNewBlock()と呼ばれる：

/* 
Adds a new block (currently replaces an empty block) at the current cursor position 
of the given `newType`. 
*/ 
const addNewBlock = (editorState, newType = Block.UNSTYLED, initialData = {}) => { 
    const selectionState = editorState.getSelection(); 
    if (!selectionState.isCollapsed()) { 
    return editorState; 
    } 
    const contentState = editorState.getCurrentContent(); 
    const key = selectionState.getStartKey(); 
    const blockMap = contentState.getBlockMap(); 
    const currentBlock = getCurrentBlock(editorState); 
    if (!currentBlock) { 
    return editorState; 
    } 
    if (currentBlock.getLength() === 0) { 
    if (currentBlock.getType() === newType) { 
     return editorState; 
    } 
    const newBlock = currentBlock.merge({ 
     type: newType, 
     data: getDefaultBlockData(newType, initialData), 
    }); 
    const newContentState = contentState.merge({ 
     blockMap: blockMap.set(key, newBlock), 
     selectionAfter: selectionState, 
    }); 
    return EditorState.push(editorState, newContentState, 'change-block-type'); 
    } 
    return editorState; 
}; 

更新

const newEditorState = addNewBlock(this.state.editorState, 'block-image', { src: 'https://...' })  
this.setState({ editorState: newEditorState }) 

：src属性で、あなたはそのように、この機能を使用することができ、型「ブロック画像」のブロックを作成 新しいタイプを追加する場合、あなたはまた、追加する必要がありますそれはあなたのエディタのブロックにレンダリングマップ：

import { Map } from 'immutable' 

<Editor 
    // editor props 
    blockRenderMap={Map({ 
    ['unstyled']: { 
     element: 'div' 
    }, 
    ['block-image']: { 
     element: 'div' // or whatever element you want as a wrapper 
    }, 
    // all your other block types 
    })} 
/>