Custom `renderMark` for TextAnnotator

[guillaumedsde]

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>
    )
  }
}

[mcamac]

Working on in #8 - I need to refactor some of the click logic. Clicking on a mark currently deselects it

[guillaumedsde]

Cheers, do you have a PayPal or somewhere I could buy you a coffee ? :)

[junwen29]

Hi, I am also interested in customizing the mark for the text annotator. Cheers to the good work thus far.

[v-sinha9004]

Is this resolved now? The PR is still open

[chetandhadankar]

@mcamac Text Annotator is really Great. Can you please let us know if renderMark for TextAnnotator is complete ? When is this PR getting merged ?

Thanks

[sparshva]

can you please add renderMark function to text annotator ???? its really urgent @mcamac

[Dimiftb]

Hi,

I'm looking to implement a selection popover similar to @guillaumedsde, however I wan to show a list of labels on selection, allowing to choose a label. Is this PR merged?

Thanks.

[Dimiftb]

Update for everyone, I solved the custom changes I wanted to do by taking his code and implementing it as plain typescript, seeing as this repo seems managed no longer.