如何在draft-js上做多行加亮？

Question

现在我做了高亮标记。

高亮内联并不是那么困难。我使用CompositeDecorator重写文本。https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html

但是我不能使用多行语法(例如，codeblock)。默认情况下，换行符将成为下一个块，装饰符将逐个块地处理。

下图是我的实现示例。我不能修饰代码块语法。

​

​

如何在draft-js上创建多行高亮显示？

Answer 1

这取决于你想要的“高亮”风格。大多数情况下，如果你只想要一些颜色或字体大小，内联样式就足够了。查看color示例。

而对于块样式，您需要一个自定义的CSS类并将块映射到您的类，请参阅this。

Answer 2

我在附近找到了工作。在blockRendererFn上通过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;
}

但它是脏的。