如何在draft-js上制作多线hilighter？

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检测markdown codeblock。

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

但它很脏。