Is there any way to override the mark style?

[DevCraftsmanShubham]

I need custom styling for mark which highlights the text, is there anyway i can do that?

[guillaumedsde]

Hi, if you're using the TokenAnnotator, there are examples of how to do that in the repository, if you use the TextAnnotator, last I checked it did not work.

I filed an issue and a PR is opened

[mattychen]

@Sk1794 set renderMark as a custom prop to override the default highlight.

<TokenAnnotator
        tokens={["My", "text", "needs", "annotating", "for", "NLP", "training"]}
        value={[{ start: 5, end: 6, tag: "TOPIC", color: "#EEE" }]}
        renderMark={ *YourCustomComponent* }
      />

You will get an error due to the way props is currently passed down in the source code, but you can ignore it.

Warning: React does not recognize the `renderMark` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `rendermark` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This is found in the current source code:

  const {tokens, value, onChange, getSpan: _, ...divProps} = props
  const splits = splitTokensWithOffsets(tokens, value)
  return (
    <div {...divProps} onMouseUp={handleMouseUp}>
      {splits.map((split, i) =>
        split.mark ? (
          renderMark({
            key: `${split.start}-${split.end}`,
            ...split,
            onClick: handleSplitClick,
          })
        ) : (
          <Token key={split.i} {...split} />
        )
      )}
    </div>
  )
}

where renderMark is thrown in as divProps, but it will work.