Move example to its own folder

Author: mcamac

.gitignore

@@ -8,6 +8,7 @@
 
 # production
 /dist
+/lib
 
 # misc
 .DS_Store

index.html renamed to example/index.html

@@ -1,23 +1,13 @@
 import * as React from 'react'
 import {hot} from 'react-hot-loader'
 
-import TextAnnotator from './TextAnnotator'
-
-const Home = () => (
-  <div>
-    <div>
-      <h2>Welcome to React</h2>
-    </div>
-    <p>HMR works!</p>
-  </div>
-)
+import TextAnnotator from '../../src'
 
 const TEXT = `On Friday, former President Park Geun-hye joined their number as a court sentenced her to 24 years, more than a year after she was impeached and removed from office over an influence-peddling scandal.`
 
 class App extends React.Component<any, any> {
   state = {
-    // value: [{start: 3, end: 9}],
-    value: [],
+    value: [{start: 28, end: 41}],
   }
 
   handleChange = value => {

src/App.tsx renamed to example/src/App.tsx

@@ -3,8 +3,6 @@ import * as ReactDOM from 'react-dom'
 
 import App from './App'
 
-import './index.css'
-
 const render = Component => {
   ReactDOM.render(<Component />, document.getElementById('root'))
 }

src/index.tsx renamed to example/src/index.tsx

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    // "noImplicitAny": truowe,
+    "sourceMap": true,
+    "jsx": "react",
+    "lib": ["es2016", "dom"]
+  },
+  "include": ["src/**/*"]
+}

example/tsconfig.json

@@ -1,7 +1,8 @@
 {
-  "name": "frontend",
+  "name": "react-annotate-text",
   "version": "0.1.0",
-  "private": true,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "dependencies": {
     "@types/react": "^16.3.1",
     "@types/react-dom": "^16.0.4",
@@ -30,7 +31,9 @@
     "webpack-dev-server": "^3.1.1"
   },
   "scripts": {
-    "dev": "webpack-dev-server --hot --history-api-fallback --mode development",
-    "build": "NODE_ENV=production webpack --mode production"
+    "dev":
+      "cd example && webpack-dev-server --hot --history-api-fallback --mode development",
+    "build": "NODE_ENV=production webpack --mode production",
+    "prepublishOnly": "tsc -p ./ --declaration --outDir lib/"
   }
 }

webpack.config.js renamed to example/webpack.config.js

@@ -32,6 +32,34 @@ const splitWithOffsets = (text, offsets: {start: number; end: number}[]) => {
   return splits
 }
 
+const Mark = props => (
+  <mark
+    style={{backgroundColor: props.mark ? '#84d2ff' : null, padding: '0 4px'}}
+    data-start={props.start}
+    data-end={props.end}
+    onClick={() => props.onClick({start: props.start, end: props.end})}
+  >
+    {props.content}
+    <span style={{fontSize: '0.7em', fontWeight: 500, marginLeft: 6}}>
+      PERSON
+    </span>
+  </mark>
+)
+
+const Split = props => {
+  if (props.mark) return <Mark {...props} />
+
+  return (
+    <span
+      data-start={props.start}
+      data-end={props.end}
+      onClick={() => props.onClick({start: props.start, end: props.end})}
+    >
+      {props.content}
+    </span>
+  )
+}
+
 export interface TextAnnotatorProps {
   style: object
   content: string
@@ -61,36 +89,57 @@ class TextAnnotator extends React.Component<TextAnnotatorProps, {}> {
 
   handleMouseUp = () => {
     const selection = window.getSelection()
+
+    let position = selection.anchorNode.compareDocumentPosition(
+      selection.focusNode
+    )
+    if (position === 0 && selection.focusOffset === selection.anchorOffset)
+      return
+    let backward = false
+    // position == 0 if nodes are the same
+    if (
+      (!position && selection.anchorOffset > selection.focusOffset) ||
+      position === Node.DOCUMENT_POSITION_PRECEDING
+    )
+      backward = true
+
     console.log(selection)
-    const start =
+
+    let start =
       parseInt(
         selection.anchorNode.parentElement.getAttribute('data-start'),
         10
       ) + selection.anchorOffset
-    const end =
+    let end =
       parseInt(
         selection.focusNode.parentElement.getAttribute('data-start'),
         10
       ) + selection.focusOffset
+
+    if (backward) {
+      ;[start, end] = [end, start]
+    }
+
     console.log(start, end)
     this.props.onChange(this.props.value.concat({start, end}))
     window.getSelection().empty()
   }
 
+  handleSplitClick = ({start, end}) => {
+    console.log('click', start, end)
+  }
+
   render() {
     const {content, value, style} = this.props
     const splits = splitWithOffsets(content, value)
     return (
       <div style={style} ref={this.rootRef}>
         {splits.map(split => (
-          <span
-            style={{backgroundColor: split.mark ? '#84d2ff' : null}}
+          <Split
             key={`${split.start}-${split.end}`}
-            data-start={split.start}
-            data-end={split.end}
-          >
-            {split.content}
-          </span>
+            {...split}
+            onClick={this.handleSplitClick}
+          />
         ))}
       </div>
     )

package.json

@@ -0,0 +1,3 @@
+import TextAnnotator from './TextAnnotator'
+
+export default TextAnnotator