draft-jで複数行のハイラーを作成するにはどうすればよいですか？

Question

今、私はマークダウンハイライターを作っています。

ハイライトインラインはあまり難しくありません。私は、CompositeDecoratorを使ってテキストを書き換えます。 https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html

しかし、私は複数行の構文（codeblockなど）を使用することはできません。デフォルトでは、改行は次のブロックになり、デコレータはブロックごとに処理されます。

以下の画像は私の実装例です。私はコードブロックの構文を飾ることができません。私はドラフト-JSに複数行のハイライトを作るにはどうすればよい

？

Answer 1

「ハイライト」のスタイルによって異なります。いくつかの色やフォントサイズが必要な場合は、ほとんどがインラインスタイルで十分です。例：colorを確認してください。

ブロックスタイルでは、カスタムCSSクラスが必要で、ブロックをクラスにマップする必要があります（thisを参照）。

Answer 2

私は回避策を見つけました。 blockRendererFnのmarkdown codeblockをdandで検出しています。

// use blockRedererFn 
<Editor 
    blockRendererFn={(block) => blockRenderer(block, this.state.editorState)} 
    editorState={this.state.editorState} 
/>; 

// detect code block and add fontFamily: monospace 
// Example 
// 
// ``` 
// here 
// ``` 
function blockRenderer(contentBlock, editorState) { 
    const type = contentBlock.getType(); 
    if (type === "unstyled") { 
    const allText = editorState.getCurrentContent().getPlainText(); 
    const allCount = countCodeBlockHeader(allText); 
    if (allCount > 0 && allCount % 2 === 0) { 
     const contentText = contentBlock.getText(); 
     const [before, after] = allText.split(contentText); 
     const beforeCount = countCodeBlockHeader(before); 
     const afterCount = countCodeBlockHeader(after); 
     if (beforeCount % 2 === 1) { 
     if (afterCount % 2 === 1) { 
      return { 
      component: (_props) => { 
       return <code style={{ 
       fontFamily: "monospace", 
       direction: "ltr", 
       unicodeBidi: "bidi-override", 
       }}>{contentText}</code>; 
      }, 
      editable: true 
      }; 
     } 
     } 
    } 
    } 
} 

function countCodeBlockHeader(text) { 
    return text 
    .split("\n") 
    .filter(l => l.match(new RegExp("^(```)"))) 
    .length; 
} 

でも汚れています。