Skip to content

Custom renderMark for TextAnnotator #6

Open
@guillaumedsde

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions