diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md
index 898255811f..eb674db09a 100644
--- a/components/mention/demo/basic.md
+++ b/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(
, mountNode);
````
diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md
index 16af74ed72..548f5e654b 100644
--- a/components/mention/demo/custom-tag.md
+++ b/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 (
);
},
diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md
index 632776b84c..311d5a6daa 100644
--- a/components/mention/index.en-US.md
+++ b/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
diff --git a/components/mention/index.tsx b/components/mention/index.tsx
index dde509af07..9a11dcc104 100644
--- a/components/mention/index.tsx
+++ b/components/mention/index.tsx
@@ -16,6 +16,7 @@ export interface MentionProps {
className?: string;
multiLines?: Boolean;
prefix?: string;
+ placeholder?: string;
}
export interface MentionState {
diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md
index 502c4495fa..a878d26328 100644
--- a/components/mention/index.zh-CN.md
+++ b/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 |
diff --git a/components/mention/style/index.less b/components/mention/style/index.less
index b59a7012be..6f16025f1a 100644
--- a/components/mention/style/index.less
+++ b/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;