fix metion styles

components/mention/demo/async.md

@@ -40,11 +40,14 @@ const AsyncMention = React.createClass({
   },
   render() {
     const { suggestions, loading } = this.state;
-    return (<Mention
+    return (
+      <Mention
+        style={{ width: 500, height: 100 }}
         loading={loading}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
-    />);
+      />
+    );
   },
 });
 

components/mention/demo/avatar.md

@@ -50,11 +50,14 @@ const CustomNavMention = React.createClass({
   },
   render() {
     const { suggestions, loading } = this.state;
-    return (<Mention
+    return (
+      <Mention
+        style={{ width: 500, height: 100 }}
         loading={loading}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
-    />);
+      />
+    );
   },
 });
 

components/mention/demo/basic.md

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

components/mention/demo/controlled.md

@@ -55,7 +55,8 @@ let App = React.createClass({
       initialValue: this.state.initValue,
     });
     console.log('>> render', getFieldValue('mention') === this.state.initValue);
-    return (<Form horizontal form={this.props.form}>
+    return (
+      <Form horizontal form={this.props.form}>
         <FormItem
           id="control-mention"
           label="最帅的码农"
@@ -67,19 +68,17 @@ let App = React.createClass({
             suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
           />
         </FormItem> 
-      <FormItem wrapperCol={{ span: 12, offset: 7 }}>
+        <FormItem wrapperCol={{ span: 14, offset: 6 }}>
           <Button type="primary" onClick={this.handleSubmit}>确定</Button>
           &nbsp;&nbsp;&nbsp;
           <Button type="ghost" onClick={this.handleReset}>重置</Button>
         </FormItem>
-    </Form>);
+      </Form>
+    );
   },
 });
 
-
 App = Form.create()(App);
-ReactDOM.render(
+
-  <App />,
+ReactDOM.render(<App />, mountNode);
-  mountNode
-);
 ````

components/mention/demo/custom-tag.md

@@ -37,22 +37,22 @@ const CustomNavMention = React.createClass({
     const filtered = webFrameworks.filter(item =>
       item.name.toLowerCase().indexOf(searchValue) !== -1
     );
-
     const suggestions = filtered.map(suggestion =>
       <Nav value={suggestion.name} >
         <span>{suggestion.name} - {suggestion.type} </span>
       </Nav>);
-    this.setState({
+    this.setState({ suggestions });
-      suggestions,
-    });
   },
   render() {
     const { suggestions, loading } = this.state;
-    return (<Mention
+    return (
+      <Mention
+        style={{ width: 500, height: 100 }}
         loading={loading}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
-    />);
+      />
+    );
   },
 });
 

components/mention/demo/multilines.md

@@ -21,11 +21,10 @@ function onChange(editorState) {
 
 ReactDOM.render(
   <Mention
-    style={{ width: '100%', height: 200 }}
+    style={{ width: 500, height: 100 }}
     onChange={onChange}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
     multiLines
-  />,
+  />
-  mountNode
+, mountNode);
-);
 ````

components/mention/style/index.less

@@ -6,12 +6,14 @@
   position: relative;
   display: inline-block;
   width: 100%;
+  vertical-align: middle;
   &.active .ant-mention-editor {
     .active;
   }
   .ant-mention-editor {
    .input;
    padding: 0;
+   display: block;
   }
   .ant-mention-editor-wrapper {
     overflow-y: auto;