Merge branch 'master' into customMentionRenderer

Author: nikhil2kumar

.circleci/config.yml

@@ -3,9 +3,9 @@ version: 2
 defaults: &defaults
   working_directory: ~/project/react-mentions
   docker:
-    - image: circleci/node:8-browsers
-      environment:
-        CHROME_BIN: '/usr/bin/google-chrome'
+    - image: cimg/node:16.15.0
+      # environment:
+      #   CHROME_BIN: '/usr/bin/google-chrome'
 
 attach_workspace: &attach_workspace
   attach_workspace:
@@ -60,10 +60,10 @@ jobs:
       - *restore_cache
       - run:
           name: Test
-          command: yarn test --coverage
-      - run:
-          name: Codecov
-          command: bash <(curl -s https://codecov.io/bash)
+          command: yarn test
+      # - run:
+      #     name: Codecov
+      #     command: bash <(curl -s https://codecov.io/bash)
 
   release:
     <<: *defaults

README.md

@@ -7,7 +7,7 @@
 
 A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
 
-Used in production at [Signavio](https://signavio.com), [State](https://state.com), [Snips](https://snips.ai), [Swat.io](https://swat.io), [GotDone](https://www.gotdone.me), [Volinspire](https://volinspire.com), [Marvin](https://amazingmarvin.com), [Timely](https://timelyapp.com), [GuideFitter](https://www.guidefitter.com/), [Evite](https://www.evite.com/), [Publer](https://publer.me/), [Kontentino](https://www.kontentino.com/), and [you?](https://github.com/signavio/react-mentions/edit/master/README.md)
+Used in production at [Signavio](https://signavio.com), [State](https://state.com), [Snips](https://snips.ai), [Swat.io](https://swat.io), [GotDone](https://www.gotdone.me), [Volinspire](https://volinspire.com), [Marvin](https://amazingmarvin.com), [Timely](https://timelyapp.com), [GuideFitter](https://www.guidefitter.com/), [Evite](https://www.evite.com/), [Publer](https://publer.me/), [Kontentino](https://www.kontentino.com/), [Wix.com](https://wix.com), [Highlight](https://highlight.run/) and [you?](https://github.com/signavio/react-mentions/edit/master/README.md)
 
 ## Getting started
 
@@ -65,6 +65,7 @@ The `MentionsInput` supports the following props for configuring the widget:
 | inputRef                    | React ref                                               | undefined      | Accepts a React ref to forward to the underlying input element                         |
 | allowSuggestionsAboveCursor | boolean                                                 | false          | Renders the SuggestionList above the cursor if there is not enough space below         |
 | a11ySuggestionsListLabel    | string                                                  | `''`           | This label would be exposed to screen readers when suggestion popup appears            |
+| customSuggestionsContainer    | function(children)                                                  | empty function | Allows customizing the container of the suggestions            |
 
 Each data source is configured using a `Mention` component, which has the following props:
 
@@ -102,13 +103,8 @@ We recommend using [@testing-library/user-event](https://github.com/testing-libr
 Spawn a development server with an example page and module hot loading all set up:
 
 ```
-npm start
-```
-
-Update the examples page on Github Pages:
+yarn start
 
-```
-npm run pages-publish
 ```
 
 [build-badge]: https://circleci.com/gh/signavio/react-mentions/tree/master.svg?style=shield&circle-token=:circle-token

demo/src/examples/CustomSuggestionsContainer.js

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Mention, MentionsInput } from '../../../src'
+
+import { provideExampleValue } from './higher-order'
+import defaultStyle from './defaultStyle'
+import defaultMentionStyle from './defaultMentionStyle'
+
+function CustomSuggestionsContainer({ value, data, onChange, onAdd }) {
+  return (
+    <div className="custom-suggestions">
+      <h3>Custom Mentions Container</h3>
+
+      <MentionsInput
+        value={value}
+        onChange={onChange}
+        style={defaultStyle}
+        placeholder={"Mention people using '@'"}
+        a11ySuggestionsListLabel={"Suggested mentions"}
+        allowSuggestionsAboveCursor={true}
+        customSuggestionsContainer={(children)=><div>{children}<span>This is a customized container</span></div>}
+      >
+        <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
+      </MentionsInput>
+    </div>
+  )
+}
+
+const asExample = provideExampleValue('')
+
+export default asExample(CustomSuggestionsContainer)

demo/src/examples/CutCopyPaste.js

@@ -11,7 +11,7 @@ const emailRegex = /(([^\s@]+@[^\s@]+\.[^\s@]+))$/
 const defaultValue =
   "Hi @[John Doe](user:johndoe), \n\nlet's add @[[email protected]](email:[email protected]) and @[John Doe](user:johndoe) to this conversation... "
 
-function CutCopyPaste({ data }) {
+function CutCopyPaste({ data, disabledSource }) {
   const [sourceValue, onSourceChange, onSourceAdd] = useExampleValue(
     defaultValue
   )
@@ -20,7 +20,7 @@ function CutCopyPaste({ data }) {
 
   return (
     <div className="multiple-triggers">
-      <h3>Copy and paste mentions between mention components</h3>
+      <h3>Copy and paste mentions between mention components{disabledSource && " from a disabled field"}</h3>
       <p>This functionality is not supported in Internet Explorer.</p>
 
       <div style={{ display: 'flex' }}>
@@ -31,6 +31,7 @@ function CutCopyPaste({ data }) {
             data={data}
             onChange={onSourceChange}
             onAdd={onSourceAdd}
+            disabled={disabledSource}
           />
         </div>
 
@@ -59,13 +60,14 @@ function CutCopyPaste({ data }) {
   )
 }
 
-const MultiMention = ({ value, data, onChange, onAdd }) => (
+const MultiMention = ({ value, data, onChange, onAdd, disabled }) => (
   <MentionsInput
     value={value}
     onChange={onChange}
     style={defaultStyle}
     placeholder={"Mention people using '@'"}
     a11ySuggestionsListLabel={"Suggested mentions"}
+    disabled={disabled}
   >
     <Mention
       markup="@[__display__](user:__id__)"

demo/src/examples/Examples.js

@@ -13,12 +13,37 @@ import SingleLine from './SingleLine'
 import SingleLineIgnoringAccents from './SingleLineIgnoringAccents'
 import SuggestionPortal from './SuggestionPortal'
 import BottomGuard from './BottomGuard'
+import CustomSuggestionsContainer from './CustomSuggestionsContainer'
 
 const users = [
   {
     id: 'walter',
     display: 'Walter White',
   },
+  {
+    id: 'pipilu',
+    display: '皮皮鲁',
+  },
+  {
+    id: 'luxixi',
+    display: '鲁西西',
+  },
+  {
+    id: 'satoshi1',
+    display: '中本聪',
+  },
+  {
+    id: 'satoshi2',
+    display: 'サトシ・ナカモト',
+  },
+  {
+    id: 'nobi',
+    display: '野比のび太',
+  },
+  {
+    id: 'sung',
+    display: '성덕선',
+  },
   {
     id: 'jesse',
     display: 'Jesse Pinkman',
@@ -59,12 +84,13 @@ export default function Examples() {
         <Scrollable data={users} />
         <Advanced data={users} />
         <CutCopyPaste data={users} />
+        <CutCopyPaste data={users} disabledSource />
         <CssModules data={users} />
         <AsyncGithubUserMentions data={users} />
         <Emojis data={users} />
         <SuggestionPortal data={users} />
         <BottomGuard data={users} />
-        <CustomMentionRenderer data={users} />
+        <CustomSuggestionsContainer data={users} />
       </div>
     </StylesViaJss>
   )

jest/setupTestFramework.js

@@ -3,16 +3,16 @@ import 'jest-enzyme'
 
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import jasmineReporters from 'jasmine-reporters'
+// import jasmineReporters from 'jasmine-reporters'
 
 configure({ adapter: new Adapter() })
 
-jasmine.VERBOSE = true
+// jasmine.VERBOSE = true
 
-jasmine.getEnv().addReporter(
-  new jasmineReporters.JUnitXmlReporter({
-    consolidateAll: false,
-    savePath: './reports/junit',
-    filePrefix: 'test-results-',
-  })
-)
+// jasmine.getEnv().addReporter(
+//   new jasmineReporters.JUnitXmlReporter({
+//     consolidateAll: false,
+//     savePath: './reports/junit',
+//     filePrefix: 'test-results-',
+//   })
+// )

package.json

@@ -11,7 +11,7 @@
     "build": "preconstruct build",
     "format": "prettier --write --no-semi --single-quote --trailing-comma es5 \"{src,test,demo/src}/**/*.js\"",
     "lint": "eslint --max-warnings=0 --ext .js src test demo",
-    "start": "cross-env NODE_ENV=development webpack-dev-server --config demo/webpack.config.js",
+    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development webpack-dev-server --config demo/webpack.config.js",
     "semantic-release": "semantic-release",
     "test": "jest",
     "now-build": "webpack --config demo/webpack.config.js"
@@ -47,10 +47,13 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@testing-library/dom": "^8.13.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^8.0.6",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "condition-circle": "^2.0.1",
+    "condition-circle": "^2.0.2",
     "core-js": "^3.1.4",
     "cross-env": "^5.2.1",
     "css-loader": "^3.0.0",
@@ -74,7 +77,7 @@
     "react-dom": "16.8.6",
     "recompose": "^0.30.0",
     "regenerator-runtime": "^0.13.2",
-    "semantic-release": "^12.4.1",
+    "semantic-release": "^19.0.2",
     "style-loader": "^0.23.1",
     "substyle-jss": "^4.0.1",
     "webpack": "^4.35.2",
@@ -90,8 +93,5 @@
   "peerDependencies": {
     "react": ">=16.8.3",
     "react-dom": ">=16.8.3"
-  },
-  "release": {
-    "verifyConditions": "condition-circle"
   }
 }

src/MentionsInput.js

@@ -12,6 +12,7 @@ import {
   mapPlainTextIndex,
   readConfigFromChildren,
   spliceString,
+  isIE,
   isNumber,
   keys,
   omit,
@@ -78,6 +79,7 @@ const propTypes = {
 
   value: PropTypes.string,
   onKeyDown: PropTypes.func,
+  customSuggestionsContainer: PropTypes.func,
   onSelect: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -194,6 +196,7 @@ class MentionsInput extends React.Component {
       ...style('input'),
 
       value: this.getPlainText(),
+      onScroll: this.updateHighlighterScroll,
 
       ...(!readOnly &&
         !disabled && {
@@ -203,7 +206,6 @@ class MentionsInput extends React.Component {
           onBlur: this.handleBlur,
           onCompositionStart: this.handleCompositionStart,
           onCompositionEnd: this.handleCompositionEnd,
-          onScroll: this.updateHighlighterScroll,
         }),
 
       ...(this.isOpened() && {
@@ -262,7 +264,7 @@ class MentionsInput extends React.Component {
       return null
     }
 
-    const { position, left, top } = this.state.suggestionsPosition
+    const { position, left, top, right } = this.state.suggestionsPosition
 
     const suggestionsNode = (
       <SuggestionsOverlay
@@ -271,10 +273,12 @@ class MentionsInput extends React.Component {
         position={position}
         left={left}
         top={top}
+        right={right}
         focusIndex={this.state.focusIndex}
         scrollFocusedIntoView={this.state.scrollFocusedIntoView}
         containerRef={this.setSuggestionsElement}
         suggestions={this.state.suggestions}
+        customSuggestionsContainer ={this.props.customSuggestionsContainer}
         onSelect={this.addMention}
         onMouseDown={this.handleSuggestionsMouseDown}
         onMouseEnter={this.handleSuggestionsMouseEnter}
@@ -384,10 +388,24 @@ class MentionsInput extends React.Component {
       newPlainTextValue,
       getMentions(newValue, config)
     )
+
+    // Move the cursor position to the end of the pasted data
+    const startOfMention = findStartOfMentionInPlainText(
+      value,
+      config,
+      selectionStart
+    )
+    const nextPos =
+      (startOfMention || selectionStart) +
+      getPlainText(pastedMentions || pastedData, config).length
+    this.setSelection(nextPos, nextPos)
   }
 
   saveSelectionToClipboard(event) {
-    const { selectionStart, selectionEnd } = this.state
+    // use the actual selectionStart & selectionEnd instead of the one stored
+    // in state to ensure copy & paste also works on disabled inputs & textareas
+    const selectionStart = this.inputElement.selectionStart
+    const selectionEnd = this.inputElement.selectionEnd
     const { children, value } = this.props
 
     const config = readConfigFromChildren(children)
@@ -471,13 +489,15 @@ class MentionsInput extends React.Component {
   // Handle input element's change event
   handleChange = (ev) => {
     isComposing = false
-    // if we are inside iframe, we need to find activeElement within its contentDocument
-    const currentDocument =
-      (document.activeElement && document.activeElement.contentDocument) ||
-      document
-    if (currentDocument.activeElement !== ev.target) {
-      // fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
-      return
+    if(isIE()){
+      // if we are inside iframe, we need to find activeElement within its contentDocument
+      const currentDocument =
+        (document.activeElement && document.activeElement.contentDocument) ||
+        document
+      if (currentDocument.activeElement !== ev.target) {
+        // fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
+        return
+      }
     }
 
     const value = this.props.value || ''
@@ -518,7 +538,8 @@ class MentionsInput extends React.Component {
       this.state.selectionEnd > startOfMention
     ) {
       // only if a deletion has taken place
-      selectionStart = startOfMention
+      selectionStart =
+        startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0)
       selectionEnd = selectionStart
       setSelectionAfterMentionChange = true
     }