From 66fc7ad6ed3383bc42e8bfdc820bba263b111d8e Mon Sep 17 00:00:00 2001
From: Martin Camacho <martin@mcamac.com>
Date: Sat, 14 Dec 2019 20:03:26 -0800
Subject: [PATCH] Begin refactoring mark

---
 README.md              |  7 ++++---
 docs/Customizing.mdx   | 46 ++++++++++++++++++++++++++++++++++++++++++
 src/Mark.tsx           | 17 ++++++++++------
 src/TextAnnotator.tsx  | 19 +++++++++++++----
 src/TokenAnnotator.tsx |  4 ++--
 5 files changed, 78 insertions(+), 15 deletions(-)
 create mode 100644 docs/Customizing.mdx

diff --git a/README.md b/README.md
index 494b492..d485bba 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # react-text-annotate
 
+![NPM Version](https://img.shields.io/npm/v/react-text-annotate)
+
 A React component for interactively highlighting parts of text.
 
 ## Usage
@@ -18,9 +20,8 @@ A simple controlled annotation.
 
 ```tsx
 import {TokenAnnotator, TextAnnotator} from 'react-text-annotate'
-
-<TokenAnnotator
+;<TokenAnnotator
   tokens={['My', 'text', 'needs', 'annotating', 'for', 'NLP', 'training']}
   value={[{start: 5, end: 6, tag: 'TOPIC', color: '#EEE'}]}
 />
-```
\ No newline at end of file
+```
diff --git a/docs/Customizing.mdx b/docs/Customizing.mdx
new file mode 100644
index 0000000..1ff4114
--- /dev/null
+++ b/docs/Customizing.mdx
@@ -0,0 +1,46 @@
+---
+name: Customizing Styles
+route: /customizing
+---
+
+# Customizing Styles
+
+import {Playground, Props} from 'docz'
+import {State} from 'react-powerplug'
+import {TextAnnotator, TokenAnnotator} from '../src'
+import {Card, TEXT, TAG_COLORS} from './Examples'
+
+Each annotator takes a `renderMark` prop which can be used to customize how highlights are rendered.
+
+In the example below, drag or double click to select text. Click on a selected "mark" to deselect.
+
+<Playground>
+  <State initial={{value: [{start: 18, end: 28, tag: 'PERSON'}], tag: 'PERSON'}}>
+{({state, setState}) => (
+  <Card>
+      <select onChange={e => setState({tag: e.target.value})} value={state.tag}>
+        <option value="ORG">ORG</option>
+        <option value="PERSON">PERSON</option>
+      </select>
+      <TextAnnotator
+        style={{
+          maxWidth: 500,
+          lineHeight: 1.5,
+        }}
+        content={TEXT}
+        value={state.value}
+        onChange={value => setState({value})}
+        getSpan={span => ({
+          ...span,
+          tag: state.tag,
+          color: TAG_COLORS[state.tag],
+        })}
+        renderMark={props => <span style={{backgroundColor: 'red'}}>{props.content} [{props.tag}]</span>}
+      />
+       <pre style={{fontSize: 12, lineHeight: 1.2}}>
+        {JSON.stringify(state, null, 2)}
+      </pre>
+    </Card>
+)}
+</State>
+</Playground>
diff --git a/src/Mark.tsx b/src/Mark.tsx
index 7c8aa18..cfc0876 100644
--- a/src/Mark.tsx
+++ b/src/Mark.tsx
@@ -10,17 +10,22 @@ export interface MarkProps {
   onClick: (any) => any
 }
 
-const Mark: React.SFC<MarkProps> = props => (
+export const Mark: React.SFC<MarkProps> = props => (
+  <span style={{backgroundColor: props.color || '#84d2ff', padding: '0 4px'}}>
+    {props.content}
+    {props.tag && (
+      <span style={{fontSize: '0.7em', fontWeight: 500, marginLeft: 6}}>{props.tag}</span>
+    )}
+  </span>
+)
+
+export const MarkWrapper = props => (
   <mark
-    style={{backgroundColor: props.color || '#84d2ff', padding: '0 4px'}}
     data-start={props.start}
     data-end={props.end}
     onClick={() => props.onClick({start: props.start, end: props.end})}
   >
-    {props.content}
-    {props.tag && (
-      <span style={{fontSize: '0.7em', fontWeight: 500, marginLeft: 6}}>{props.tag}</span>
-    )}
+    {props.renderMark ? props.renderMark(props) : <Mark {...props} />}
   </mark>
 )
 
diff --git a/src/TextAnnotator.tsx b/src/TextAnnotator.tsx
index 345cdb9..cfceb4b 100644
--- a/src/TextAnnotator.tsx
+++ b/src/TextAnnotator.tsx
@@ -1,10 +1,15 @@
 import * as React from 'react'
 
-import Mark from './Mark'
+import Mark, {MarkProps, MarkWrapper} from './Mark'
 import {selectionIsEmpty, selectionIsBackwards, splitWithOffsets} from './utils'
 
 const Split = props => {
-  if (props.mark) return <Mark {...props} />
+  if (props.mark)
+    return (
+      <MarkWrapper {...props}>
+        {props.renderMark ? props.renderMark(props) : <Mark {...props} />}
+      </MarkWrapper>
+    )
 
   return (
     <span
@@ -29,6 +34,7 @@ export interface TextAnnotatorProps extends Omit<React.HTMLAttributes<HTMLDivEle
   value: TextSpan[]
   onChange: (value: TextSpan[]) => any
   getSpan?: (span: TextSpan) => TextSpan
+  renderMark?: (props: MarkProps) => JSX.Element
   // TODO: determine whether to overwrite or leave intersecting ranges.
 }
 
@@ -92,12 +98,17 @@ class TextAnnotator extends React.Component<TextAnnotatorProps, {}> {
   }
 
   render() {
-    const {content, value, style} = this.props
+    const {content, value, style, renderMark} = this.props
     const splits = splitWithOffsets(content, value)
     return (
       <div style={style} ref={this.rootRef}>
         {splits.map(split => (
-          <Split key={`${split.start}-${split.end}`} {...split} onClick={this.handleSplitClick} />
+          <Split
+            key={`${split.start}-${split.end}`}
+            {...split}
+            onClick={this.handleSplitClick}
+            renderMark={renderMark}
+          />
         ))}
       </div>
     )
diff --git a/src/TokenAnnotator.tsx b/src/TokenAnnotator.tsx
index 288b35a..9f38a8a 100644
--- a/src/TokenAnnotator.tsx
+++ b/src/TokenAnnotator.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import Mark, {MarkProps} from './Mark'
+import {MarkWrapper, MarkProps} from './Mark'
 import {selectionIsEmpty, selectionIsBackwards, splitTokensWithOffsets} from './utils'
 
 interface TokenProps {
@@ -31,7 +31,7 @@ export interface TokenAnnotatorProps
 // TODO: When React 16.3 types are ready, remove casts.
 class TokenAnnotator extends React.Component<TokenAnnotatorProps, {}> {
   static defaultProps = {
-    renderMark: props => <Mark {...props} />,
+    renderMark: props => <MarkWrapper {...props} />,
   }
 
   rootRef: React.RefObject<HTMLDivElement>