Next major: Upgrade substyle & make cut/copy & paste generally availa…

…ble (#393)

* chore: upgrade substyle, prettify, fixed some problematic props passing

* BREAKING CHANGE: if you use react-mentions together with local versions of substyle, substyle-jss or substyle-glamor, you need to upgrade to these packages to their latest versions (substyle@9, substyle-jss@4, substyle-glamor@4)
* BREAKING CHANGE: inline style passed to the textarea/input element are no longer forwarded to the highlighter element

* feat: generally enable cut/copy & paste

BREAKING CHANGE: cut/copy & paste is now enabled by default, the prop `EXPERIMENTAL_cutCopyPaste` is no longer supported and must be removed from `<MentionsInput >`

* chore: fix example after the breaking change about forwarding input props

* fix: use more sensible default styles

bring some order into the example styles

* upgrade to substyle 9 and adjust API

* chore: fix emoji example styles

* chore: upgrade to fixed version of substyle

demo/src/examples/BottomGuard.js

@@ -7,64 +7,65 @@ import defaultMentionStyle from './defaultMentionStyle'
 let container
 
 function BottomGuard({ value, data, onChange, onAdd }) {
-    return (
-        <div
-            id="suggestionPortal"
-            style={{
-                height: '400px',
-            }}
-            ref={el => {
-                container = el
-            }}
+  return (
+    <div
+      id="suggestionPortal"
+      style={{
+        height: '400px',
+      }}
+      ref={el => {
+        container = el
+      }}
+    >
+      <h3>Bottom guard example</h3>
+      <p>
+        Note that the bottom input will open the suggestions list above the
+        cursor
+      </p>
+      <div
+        style={{
+          position: 'absolute',
+          height: '300px',
+          width: '400px',
+          overflow: 'auto',
+          border: '1px solid green',
+          padding: '8px',
+        }}
+      >
+        <MentionsInput
+          value={value}
+          onChange={onChange}
+          style={defaultStyle}
+          placeholder={"Mention people using '@'"}
+          suggestionsPortalHost={container}
+          allowSuggestionsAboveCursor={true}
         >
-            <h3>Bottom guard example</h3>
-            <p>
-                Note that the bottom input will open the suggestions list above the cursor
-            </p>
-            <div
-                style={{
-                    position: 'absolute',
-                    height: '300px',
-                    width: '400px',
-                    overflow: 'auto',
-                    border: '1px solid green',
-                    padding: '8px',
-                }}
-            >
-                <MentionsInput
-                    value={value}
-                    onChange={onChange}
-                    style={defaultStyle}
-                    placeholder={"Mention people using '@'"}
-                    suggestionsPortalHost={container}
-                    allowSuggestionsAboveCursor={true}
-                >
-                    <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
-                </MentionsInput>
-                <br/>
-                <br/>
-                <br/>
-                <br/>
-                <br/>
-                <br/>
-                <br/>
-                <br/>
-                <br/>
-                <MentionsInput
-                    value={value}
-                    onChange={onChange}
-                    style={defaultStyle}
-                    placeholder={"Mention people using '@'"}
-                    suggestionsPortalHost={container}
-                    allowSuggestionsAboveCursor={true}
-                >
-                    <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
-                </MentionsInput>
-            </div>
-        </div>
-    )
+          <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
+        </MentionsInput>
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <MentionsInput
+          value={value}
+          onChange={onChange}
+          style={defaultStyle}
+          placeholder={"Mention people using '@'"}
+          suggestionsPortalHost={container}
+          allowSuggestionsAboveCursor={true}
+        >
+          <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
+        </MentionsInput>
+      </div>
+    </div>
+  )
 }
 
 const asExample = provideExampleValue('')
 
-export default asExample(BottomGuard)
+export default asExample(BottomGuard)

demo/src/examples/CssModules.js

@@ -11,7 +11,12 @@ function CssModules({ value, data, onChange }) {
     <div className="advanced">
       <h3>Styling with css modules</h3>
 
-      <MentionsInput value={value} onChange={onChange} className="mentions" classNames={classNames}>
+      <MentionsInput
+        value={value}
+        onChange={onChange}
+        className="mentions"
+        classNames={classNames}
+      >
         <Mention data={data} className={classNames.mentions__mention} />
       </MentionsInput>
     </div>

demo/src/examples/ExperimentalCutCopyPaste.js → 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 ExperimentalCutCopyPaste({ data }) {
+function CutCopyPaste({ data }) {
   const [sourceValue, onSourceChange, onSourceAdd] = useExampleValue(
     defaultValue
   )
@@ -20,11 +20,7 @@ function ExperimentalCutCopyPaste({ data }) {
 
   return (
     <div className="multiple-triggers">
-      <h3>EXPERIMENTAL: Copy and paste mentions between mention components</h3>
-      <p>
-        In order to activate this functionality you need to set the
-        EXPERIMENTAL__cutCopyPaste flag on a MentionsInput to true .
-      </p>
+      <h3>Copy and paste mentions between mention components</h3>
       <p>This functionality is not supported in Internet Explorer.</p>
 
       <div style={{ display: 'flex' }}>
@@ -54,7 +50,7 @@ function ExperimentalCutCopyPaste({ data }) {
             <textarea
               style={{ width: '100%', height: 80 }}
               value={plainTextValue}
-              onChange={event => setPlainTextValue(event.target.value)}
+              onChange={(event) => setPlainTextValue(event.target.value)}
             />
           </div>
         </div>
@@ -65,7 +61,6 @@ function ExperimentalCutCopyPaste({ data }) {
 
 const MultiMention = ({ value, data, onChange, onAdd }) => (
   <MentionsInput
-    EXPERIMENTAL_cutCopyPaste
     value={value}
     onChange={onChange}
     style={defaultStyle}
@@ -93,11 +88,11 @@ const MultiMention = ({ value, data, onChange, onAdd }) => (
     <Mention
       markup="@[__display__](email:__id__)"
       trigger={emailRegex}
-      data={search => [{ id: search, display: search }]}
+      data={(search) => [{ id: search, display: search }]}
       onAdd={onAdd}
       style={{ backgroundColor: '#d1c4e9' }}
     />
   </MentionsInput>
 )
 
-export default ExperimentalCutCopyPaste
+export default CutCopyPaste

demo/src/examples/Examples.js

@@ -1,18 +1,17 @@
-import Radium from 'radium'
 import React from 'react'
-import { EnhancerProvider } from 'substyle'
+import { StylesViaJss } from 'substyle-jss'
 
 import Advanced from './Advanced'
 import AsyncGithubUserMentions from './AsyncGithubUserMentions'
 import CssModules from './CssModules'
 import Emojis from './Emojis'
-import ExperimentalCutCopyPaste from './ExperimentalCutCopyPaste'
+import CutCopyPaste from './CutCopyPaste'
 import MultipleTrigger from './MultipleTrigger'
 import Scrollable from './Scrollable'
 import SingleLine from './SingleLine'
 import SingleLineIgnoringAccents from './SingleLineIgnoringAccents'
 import SuggestionPortal from './SuggestionPortal'
-import BottomGuard from "./BottomGuard";
+import BottomGuard from './BottomGuard'
 
 const users = [
   {
@@ -45,26 +44,26 @@ const users = [
   },
   {
     id: 'lydia',
-    display: 'Lydìã Rôdarté-Qüayle'
-  }
+    display: 'Lydìã Rôdarté-Qüayle',
+  },
 ]
 
 export default function Examples() {
   return (
-    <EnhancerProvider enhancer={Radium}>
+    <StylesViaJss>
       <div>
         <MultipleTrigger data={users} />
         <SingleLine data={users} />
         <SingleLineIgnoringAccents data={users} />
         <Scrollable data={users} />
         <Advanced data={users} />
-        <ExperimentalCutCopyPaste data={users} />
+        <CutCopyPaste data={users} />
         <CssModules data={users} />
         <AsyncGithubUserMentions data={users} />
         <Emojis data={users} />
         <SuggestionPortal data={users} />
         <BottomGuard data={users} />
       </div>
-    </EnhancerProvider>
+    </StylesViaJss>
   )
 }

demo/src/examples/Scrollable.js

@@ -13,6 +13,11 @@ function Scrollable({ value, data, onChange, onAdd }) {
       overflow: 'auto',
       height: 70,
     },
+    highlighter: {
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      height: 70,
+    },
   })
 
   return (

demo/src/examples/defaultStyle.js

@@ -1,53 +1,36 @@
 export default {
   control: {
     backgroundColor: '#fff',
-
     fontSize: 14,
     fontWeight: 'normal',
   },
 
-  highlighter: {
-    overflow: 'hidden',
-  },
-
-  input: {
-    margin: 0,
-  },
-
-  '&singleLine': {
+  '&multiLine': {
     control: {
-      display: 'inline-block',
-
-      width: 130,
+      fontFamily: 'monospace',
+      minHeight: 63,
     },
-
     highlighter: {
-      padding: 1,
-      border: '2px inset transparent',
+      padding: 9,
+      border: '1px solid transparent',
     },
-
     input: {
-      padding: 1,
-
-      border: '2px inset',
+      padding: 9,
+      border: '1px solid silver',
     },
   },
 
-  '&multiLine': {
-    control: {
-      fontFamily: 'monospace',
-      border: '1px solid silver',
-    },
+  '&singleLine': {
+    display: 'inline-block',
+    width: 180,
 
     highlighter: {
-      padding: 9,
+      padding: 1,
+      border: '2px inset transparent',
     },
-
     input: {
-      padding: 9,
-      minHeight: 63,
-      outline: 0,
-      border: 0,
+      padding: 1,
+      border: '2px inset',
     },
   },
 
@@ -57,11 +40,9 @@ export default {
       border: '1px solid rgba(0,0,0,0.15)',
       fontSize: 14,
     },
-
     item: {
       padding: '5px 15px',
       borderBottom: '1px solid rgba(0,0,0,0.15)',
-
       '&focused': {
         backgroundColor: '#cee4e5',
       },

demo/src/examples/emojiExampleStyle.js

@@ -1,22 +1,20 @@
 export default {
   control: {
-    backgroundColor: '#fff',
     fontSize: 16,
-    fontWeight: 'normal',
-    border: '1px solid silver',
+    lineHeight: 1.2,
+    minHeight: 63,
   },
 
   highlighter: {
-    overflow: 'hidden',
+    padding: 9,
+    border: '1px solid transparent',
   },
 
   input: {
-    margin: 0,
+    fontSize: 16,
+    lineHeight: 1.2,
     padding: 9,
-    minHeight: 63,
-    outline: 0,
-    border: 0,
-    lineHeight: 1,
+    border: '1px solid silver',
   },
 
   suggestions: {

package.json

@@ -70,13 +70,13 @@
     "jest-watch-typeahead": "^0.3.1",
     "preconstruct": "^0.0.82",
     "prettier": "^1.10.2",
-    "radium": "^0.21.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "recompose": "^0.30.0",
     "regenerator-runtime": "^0.13.2",
     "semantic-release": "^12.4.1",
     "style-loader": "^0.23.1",
+    "substyle-jss": "^4.0.1",
     "webpack": "^4.35.2",
     "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2"
@@ -85,11 +85,11 @@
     "@babel/runtime": "7.4.5",
     "invariant": "^2.2.4",
     "prop-types": "^15.5.8",
-    "substyle": "^6.3.1"
+    "substyle": "^9.1.0"
   },
   "peerDependencies": {
-    "react": "16.x",
-    "react-dom": "16.x"
+    "react": ">=16.8.3",
+    "react-dom": ">=16.8.3"
   },
   "release": {
     "verifyConditions": "condition-circle"