Mention fix (#3240)

* placeholder style fix

* add onSelect callback

components/mention/demo/basic.md

@@ -21,12 +21,17 @@ function onChange(editorState) {
   console.log(toString(editorState));
 }
 
+function onSelect(suggestion) {
+  console.log('onSelect', suggestion);
+}
+
 ReactDOM.render(
   <Mention
     style={{ width: 500, height: 100 }}
     onChange={onChange}
     defaultValue={toEditorState('@afc163')}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
+    onSelect={onSelect}
   />
 , mountNode);
 ````

components/mention/demo/custom-tag.md

@@ -27,6 +27,9 @@ const webFrameworks = [
   { name: 'Django', type: 'Python' },
 ];
 
+function onSelect(suggestion) {
+  console.log('onSelect', suggestion);
+}
 const CustomNavMention = React.createClass({
   getInitialState() {
     return {
@@ -48,9 +51,11 @@ const CustomNavMention = React.createClass({
     const { suggestions } = this.state;
     return (
       <Mention
+        placeholder="@someone"
         style={{ width: 500, height: 100 }}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
+        onSelect={onSelect}
       />
     );
   },

components/mention/index.en-US.md

@@ -37,12 +37,14 @@ When need to mention someone or something.
 | suggestionStyle | style of suggestion container | Object | {} |
 | onSearchChange | Callback function called when search content changes | function(value:String) | [] |
 | onChange | Callback function called when content of input changes | function(editorState: EditorState) | null |
+| onSelect | Callback function called when select from suggestions | function(suggestion: String) | null |
 | notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' |
 | loading | loading mode | boolean | false |
 | multiLines | multilines mode | boolean | false |
 | prefix | character which will trigger Mention to show mention list | string | '@' |
 | defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null |
 | value | core state of mention | EditorState | null |
+| placeHolder | placeholder of input | string | null |
 
 ### Nav props
 

components/mention/index.tsx

@@ -16,6 +16,7 @@ export interface MentionProps {
   className?: string;
   multiLines?: Boolean;
   prefix?: string;
+  placeholder?: string;
 }
 
 export interface MentionState {

components/mention/index.zh-CN.md

@@ -37,10 +37,12 @@ title: Mention
 | suggestionStyle | 弹出下拉框样式 | Object | {} |
 | onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] |
 | onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null |
+| onSelect | 下拉框选择建议时回调 | function(suggestion: String) | null |
 | notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' |
 | loading | 加载中 | boolean | false |
 | multiLines | 多行模式 | boolean | false |
 | prefix | 触发弹出下拉框的字符 | string | '@' |
+| placeHolder | 输入框默认文字 | string | null |
 | defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
 | value | 值 | EditorState | null |
 

components/mention/style/index.less

@@ -19,7 +19,18 @@
     overflow-y: auto;
     height: auto;
   }
-
+  .public-DraftEditorPlaceholder-root {
+    position: absolute;
+    .public-DraftEditorPlaceholder-inner {
+      color: #ccc;
+      opacity: 1;
+      outline: none;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      height: auto;
+      padding: 4px 7px;
+    }
+  }
   .DraftEditor-editorContainer .public-DraftEditor-content {
     height: auto;
     padding: 4px 7px;