Custom renderMark for TextAnnotator
Hi, I could be mistaken, but am I right in thinking, that it is possible to implement a custom renderMark optionally passed through props to the TextAnnotator component?
I am looking to implement a popover menu that appears above the selection and for that it would be useful for me to be able to pass a custom mark.
Example
is modifying TextAnnotator like so feasible?
class TextAnnotator extends React.Component<TextAnnotatorProps, {}> {
static defaultProps = {
renderMark: props => <Mark {...props} />,
}
// ...
render() {
const {content, value, style} = this.props
const splits = splitWithOffsets(content, value)
return (
<div style={style} ref={this.rootRef}>
{splits.map((split, i) =>
split.mark ? (
renderMark({
key: `${split.start}-${split.end}`,
...split,
onClick: this.handleSplitClick,
})
) : (
<Split key={`${split.start}-${split.end}`} {...split} onClick={this.handleSplitClick} />
)
)}
</div>
)
}
}
Custom
renderMarkfor TextAnnotatorHi, I could be mistaken, but am I right in thinking, that it is possible to implement a custom
renderMarkoptionally passed through props to theTextAnnotatorcomponent?I am looking to implement a popover menu that appears above the selection and for that it would be useful for me to be able to pass a custom mark.
Example
is modifying TextAnnotator like so feasible?