Feat/caret position (#35)

* feat: added options for output

* fix: fixed flow

* fix: eslint

* test: added cypress tests for the new feats

* fix: lint

* chore(deps): updated deps

* docs: updated readme

* fix: lint

* test

Author: jukben

.eslintignore

@@ -1 +1 @@
-dist/
+example/

.eslintrc

@@ -1,7 +1,5 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["airbnb", "plugin:flowtype/recommended"],
-  "plugins": ["react", "jsx-a11y", "flowtype"],
+  "extends": ["callstack-io"],
   "rules": {
     "react/jsx-filename-extension": [
       1,
@@ -10,8 +8,14 @@
       }
     ],
     "no-underscore-dangle": 0,
+    "no-console": 0,
+    "flowtype/no-weak-types": 0,
     "react/forbid-prop-types": [0, { "forbid": ["object"] }]
   },
+  "globals": {
+    "cy": true,
+    "context": true
+  },
   "env": {
     "es6": true,
     "browser": true,

README.md

@@ -100,8 +100,8 @@ export default App;
 
 ```javascript 
 {
-    [triggerChar: string]: {}
-        ?output: (item: Object | string, trigger?: string) => string,
+    [triggerChar: string]: {|
+        ?output: (item: Object | string, trigger?: string) => {| text: string, caretPosition: "start" | "end" | number |} | string,
         dataProvider: (token: string) => Promise<Array<Object | string>> | Array<Object | string>,
         component: ReactClass<*>,
     |},
@@ -112,7 +112,9 @@ export default App;
 - **component** is the component for render the item in suggestion list. It has `selected` and `entity` props provided by React Textarea Autocomplete
 - **output** (Optional for string based item. If the item is an object this method is *required*) This function defines text which will be placed into textarea after the user makes a selection.
 
-    Default behavior for string based item is string: `<TRIGGER><ITEM><TRIGGER>`). This method should **always** return a unique string.
+   You can also specify the behavior of caret if you return object `{text: "item", caretPosition: "start"}` the caret will be before the word once the user confirms his selection. Other possible value is "end" and number, which is absolute number in contex of textarea. (0 is equal position before the first char);
+ 
+   Default behavior for string based item is string: `<TRIGGER><ITEM><TRIGGER>`). This method should **always** return a unique string.
 
 ## [Example of usage](http://react-textarea-autocomplete.surge.sh/)
 `create-react-app example && cd example && yarn add @jukben/emoji-search @webscopeio/react-textarea-autocomplete`

__tests__/__snapshots__/index.spec.js.snap

@@ -276,6 +276,7 @@ ShallowWrapper {
         minChar={1}
         onCaretPositionChange={[Function]}
         onChange={[Function]}
+        onSelect={undefined}
         placeholder="Write a message."
         style={
           Object {
@@ -315,6 +316,7 @@ ShallowWrapper {
           "minChar": 1,
           "onCaretPositionChange": [Function],
           "onChange": [Function],
+          "onSelect": undefined,
           "placeholder": "Write a message.",
           "style": Object {
             "background": "red",
@@ -413,6 +415,7 @@ ShallowWrapper {
     minChar={1}
     onCaretPositionChange={[Function]}
     onChange={[Function]}
+    onSelect={undefined}
     placeholder="Write a message."
     style={
       Object {
@@ -489,6 +492,7 @@ ShallowWrapper {
         minChar={1}
         onCaretPositionChange={[Function]}
         onChange={[Function]}
+        onSelect={undefined}
         placeholder="Write a message."
         style={
           Object {
@@ -529,6 +533,7 @@ ShallowWrapper {
           "minChar": 1,
           "onCaretPositionChange": [Function],
           "onChange": [Function],
+          "onSelect": undefined,
           "placeholder": "Write a message.",
           "style": Object {
             "background": "red",
@@ -628,6 +633,7 @@ ShallowWrapper {
     minChar={1}
     onCaretPositionChange={[Function]}
     onChange={[Function]}
+    onSelect={undefined}
     placeholder="Write a message."
     style={
       Object {

cypress/integration/simple.js

@@ -0,0 +1,78 @@
+describe('React Textarea Autocomplete', () => {
+  it('server is reachable', () => {
+    cy.visit('http://localhost:8080');
+  });
+
+  it('textarea exists', () => {
+    cy.get('.rta__textarea');
+  });
+
+  context('basic', () => {
+    beforeEach(() => {
+      cy.get('.rta__textarea').clear();
+    });
+
+    it('basic test with keyboard', () => {
+      cy
+        .get('.rta__textarea')
+        .type('This is test :ro{downarrow}{enter}')
+        .should('have.value', 'This is test 🤣');
+    });
+
+    it('basic test with mouse', () => {
+      cy
+        .get('.rta__textarea')
+        .type('This is test :ro')
+        .get('li:nth-child(2)')
+        .click();
+
+      cy.get('.rta__textarea').should('have.value', 'This is test 🤣');
+    });
+  });
+
+  context('advanced', () => {
+    beforeEach(() => {
+      cy.get('.rta__textarea').clear();
+    });
+
+    it('should have place caret before outputed word', () => {
+      cy.get('[data-test="changeCaretOption"]').click();
+
+      cy.get('.rta__textarea').type('This is test :ro{downarrow}{downarrow}');
+
+      cy.get('.rta__item:nth-child(3)').click();
+
+      cy.get('[data-test="actualCaretPosition"]').contains('13');
+    });
+
+    it('should have place caret after word', () => {
+      cy.get('[data-test="changeCaretOption"]').click();
+
+      cy.get('.rta__textarea').type('This is test :ro{downarrow}{downarrow}');
+
+      cy.get('.rta__item:nth-child(3)').click();
+
+      cy.get('[data-test="actualCaretPosition"]').contains('15'); // emoji is 2 bytes
+    });
+
+    it('set caret position', () => {
+      cy.get('.rta__textarea').type('This is test :ro{uparrow}{enter}');
+      cy.get('[data-test="setCaretPosition"]').click();
+      cy.get('[data-test="actualCaretPosition"]').contains('1');
+    });
+
+    it('get caret position', () => {
+      const stub = cy.stub();
+
+      cy.on('window:alert', stub);
+
+      cy.get('.rta__textarea').type('This is test :ro{uparrow}{enter}');
+      cy
+        .get('[data-test="getCaretPosition"]')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith(15);
+        });
+    });
+  });
+});

cypress/integration/textarea.js

@@ -1,18 +1,96 @@
-import React, { Component } from 'react';
+import React from 'react';
 import ReactTextareaAutocomplete from '@webscopeio/react-textarea-autocomplete';
 import emoji from '@jukben/emoji-search';
 
 // import '@webscopeio/react-textarea-autocomplete/style.css'
 import '../style.css';
 
-const Item = ({ entity: { name, char } }) => <div>{`${name}: ${char}`}</div>;
-const Loading = ({ data }) => <div>Loading</div>;
-class App extends Component {
+type ItemProps = {
+  entity: {
+    char: string,
+    name: string,
+  },
+};
+
+const Item = ({ entity: { name, char } }: ItemProps) => (
+  <div>{`${name}: ${char}`}</div>
+);
+
+type LoadingProps = {
+  data: Array<{ name: string, char: string }>,
+};
+
+const Loading = ({ data }: LoadingProps) => <div>Loading</div>;
+
+class App extends React.Component {
+  state = {
+    optionsCaretStart: false,
+    caretPosition: 0,
+    text: '',
+  };
+
+  _handleOptionsCaretStart = () => {
+    this.setState(({ optionsCaretStart }) => ({
+      optionsCaretStart: !optionsCaretStart,
+    }));
+  };
+
+  _onChangeHandle = ({ target: { value } }) => {
+    this.setState({
+      text: value,
+    });
+  };
+
+  _onCaretPositionChangeHandle = (position: number) => {
+    this.setState({
+      caretPosition: position,
+    });
+  };
+
+  _setCaretPosition = () => {
+    this.rtaRef.setCaretPosition(1);
+  };
+
+  _getCaretPosition = () => {
+    alert(this.rtaRef.getCaretPosition());
+  };
+
+  _getCarePosition = () => {};
+
+  _outputCaretEnd = (item, trigger) => item.char;
+
+  _outputCaretStart = item => ({ text: item.char, caretPosition: 'start' });
+
   render() {
+    const { optionsCaretStart, caretPosition, text } = this.state;
+
     return (
       <div>
+        <label>
+          Place caret before word
+          <input
+            data-test="changeCaretOption"
+            type="checkbox"
+            defaultChecked={optionsCaretStart}
+            onChange={this._handleOptionsCaretStart}
+          />
+        </label>
+        <div>
+          Actual caret position:{' '}
+          <span data-test="actualCaretPosition">{caretPosition}</span>
+        </div>
+        <button data-test="setCaretPosition" onClick={this._setCaretPosition}>
+          setCaretPosition(1);
+        </button>
+        <button data-test="getCaretPosition" onClick={this._getCaretPosition}>
+          getCaretPosition();
+        </button>
+
         <ReactTextareaAutocomplete
-          className="my-textarea"
+          className="one"
+          ref={ref => {
+            this.rtaRef = ref;
+          }}
           loadingComponent={Loading}
           style={{
             fontSize: '18px',
@@ -25,15 +103,20 @@ class App extends Component {
             height: 100,
             margin: '20px auto',
           }}
+          onCaretPositionChange={this._onCaretPositionChangeHandle}
           minChar={0}
+          value={text}
+          onChange={this._onChangeHandle}
           trigger={{
             ':': {
               dataProvider: token =>
                 emoji(token)
                   .slice(0, 10)
                   .map(({ name, char }) => ({ name, char })),
               component: Item,
-              output: (item, trigger) => item.char,
+              output: optionsCaretStart
+                ? this._outputCaretStart
+                : this._outputCaretEnd,
             },
           }}
         />

example/App.jsx

@@ -37,7 +37,7 @@
     "test:watch": "jest --watch",
     "flow": "flow",
     "flow:check": "flow check",
-    "cypress": "yarn run dev & cypress run",
+    "cypress": "yarn run dev & cypress run --headed",
     "cypress:open": "cypress open",
     "precommit": "lint-staged"
   },
@@ -46,37 +46,38 @@
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-react-app": "^3.0.3",
-    "babel-runtime": "^6.26.0",
+    "babel-preset-react-app": "^3.1.0",
+    "babel-runtime": "^6.23.0",
     "css-loader": "^0.28.7",
-    "cypress": "^1.0.2",
+    "cypress": "^1.1.2",
     "enzyme": "^2.9.1",
-    "eslint": "^4.10.0",
+    "eslint": "^4.12.1",
     "eslint-config-callstack-io": "^1.0.1",
-    "flow-bin": "^0.57.3",
+    "flow-bin": "^0.60.1",
     "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",
     "jest": "^21.2.1",
-    "lint-staged": "^4.3.0",
-    "prettier": "^1.7.4",
+    "lint-staged": "^6.0.0",
+    "prettier": "^1.8.2",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-test-renderer": "^15.6.1",
-    "rollup": "^0.50.0",
+    "rollup": "^0.52.0",
     "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^8.2.5",
+    "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-license": "^0.5.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-uglify": "^2.0.1",
     "style-loader": "^0.19.0",
-    "webpack": "^3.8.1",
-    "webpack-dev-server": "^2.9.3"
+    "webpack": "^3.9.1",
+    "webpack-dev-server": "^2.9.5"
   },
   "peerDependencies": {
-    "prop-types": ">=15",
-    "react": ">=15"
+    "prop-types": "^15.0.0 || ^16.0.0",
+    "react": "^15.0.0 || ^16.0.0"
   },
   "dependencies": {
+    "eslint-plugin-prettier": "^2.3.1",
     "textarea-caret": "3.0.2"
   },
   "lint-staged": {