Mention Improvement

+ add `getSuggestionContainer` callback function, which allow users modify the
 container element of suggestions dropdown.
 + the suggestions dropdown will mount on `document.body` defaultly, instead of
 on editor.
 + close #3588

components/mention/demo/async.md

@@ -44,7 +44,7 @@ const AsyncMention = React.createClass({
     const { suggestions, loading } = this.state;
     return (
       <Mention
-        style={{ width: 500, height: 100 }}
+        style={{ width: '100%', height: 100 }}
         loading={loading}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}

components/mention/demo/avatar.md

@@ -22,7 +22,7 @@ const Nav = Mention.Nav;
 const webFrameworks = [
   { name: 'React', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg' },
   { name: 'Angular', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png' },
-  { name: 'Laravel', type: 'PHP', icon: 'http://laravel-china.org/assets/img/laravel-logo.png' },
+  { name: 'Dva', type: 'Javascript', icon: 'https://zos.alipayobjects.com/rmsportal/EYPwSeEJKxDtVxI.png' },
   { name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' },
 ];
 
@@ -53,7 +53,7 @@ const CustomNavMention = React.createClass({
     const { suggestions } = this.state;
     return (
       <Mention
-        style={{ width: 500, height: 100 }}
+        style={{ width: '100%', height: 100 }}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
       />

components/mention/demo/basic.md

@@ -27,7 +27,7 @@ function onSelect(suggestion) {
 
 ReactDOM.render(
   <Mention
-    style={{ width: 500, height: 100 }}
+    style={{ width: '100%', height: 100 }}
     onChange={onChange}
     defaultValue={toEditorState('@afc163')}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}

components/mention/demo/controlled.md

@@ -55,7 +55,7 @@ let App = React.createClass({
       <Form horizontal>
         <FormItem
           id="control-mention"
-          label="Top programmers"
+          label="Top coders"
           labelCol={{ span: 6 }}
           wrapperCol={{ span: 14 }}
         >

components/mention/demo/custom-tag.md

@@ -52,7 +52,7 @@ const CustomNavMention = React.createClass({
     return (
       <Mention
         placeholder="@someone"
-        style={{ width: 500, height: 100 }}
+        style={{ width: '100%', height: 100 }}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
         onSelect={onSelect}

components/mention/demo/multilines.md

@@ -23,7 +23,7 @@ function onChange(editorState) {
 
 ReactDOM.render(
   <Mention
-    style={{ width: 500, height: 100 }}
+    style={{ width: '100%', height: 100 }}
     onChange={onChange}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
     multiLines

components/mention/index.en-US.md

@@ -1,6 +1,5 @@
 ---
 category: Components
-cols: 1
 type: Views
 title: Mention
 ---
@@ -45,6 +44,7 @@ When need to mention someone or something.
 | 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 |
+| getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative.  | Function() | () => document.ready |
 
 ### Nav props
 

components/mention/index.tsx

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

components/mention/index.zh-CN.md

@@ -1,7 +1,6 @@
 ---
 category: Components
 subtitle: 提及
-cols: 1
 type: Views
 title: Mention
 ---
@@ -45,6 +44,7 @@ title: Mention
 | placeHolder | 输入框默认文字 | string | null |
 | defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
 | value | 值 | EditorState | null |
+| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| Function() | () => document.body |
 
 ### Nav props
 

components/mention/style/index.less

@@ -35,76 +35,77 @@
     height: auto;
     padding: 4px 7px;
   }
+}
 
-  .@{ant-prefix}-mention-dropdown {
-    margin-top: 1.5em;
-    max-height: 250px;
-    min-width: 120px;
-    background-color: white;
-    box-shadow: @box-shadow-base;
-    border-radius: @border-radius-base;
-    box-sizing: border-box;
-    z-index: @zindex-dropdown;
-    left: -9999px;
-    top: -9999px;
-    position: absolute;
-    outline: none;
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: @font-size-base;
-    &-notfound.@{ant-prefix}-mention-dropdown-item {
+.@{ant-prefix}-mention-dropdown {
+  margin-top: 1.5em;
+  max-height: 250px;
+  min-width: 120px;
+  background-color: white;
+  box-shadow: @box-shadow-base;
+  border-radius: @border-radius-base;
+  box-sizing: border-box;
+  z-index: @zindex-dropdown;
+  left: -9999px;
+  top: -9999px;
+  position: absolute;
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: @font-size-base;
+  &-notfound.@{ant-prefix}-mention-dropdown-item {
+    color: #ccc;
+
+    .@{iconfont-css-prefix}-loading {
+      color: @primary-color;
+    }
+  }
+  &-item {
+    position: relative;
+    display: block;
+    padding: 7px 16px;
+    font-weight: normal;
+    color: #666;
+    white-space: nowrap;
+    cursor: pointer;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    transition: background 0.3s ease;
+
+    &:hover,
+    &.focus,
+    &-active {
+      background-color: tint(@primary-color, 90%);
+    }
+
+    &-disabled {
       color: #ccc;
+      cursor: not-allowed;
 
-      .@{iconfont-css-prefix}-loading {
-        color: @primary-color;
+      &:hover {
+        color: #ccc;
+        background-color: #fff;
+        cursor: not-allowed;
       }
     }
-    &-item {
-      position: relative;
-      display: block;
-      padding: 7px 16px;
-      font-weight: normal;
-      color: #666;
-      white-space: nowrap;
-      cursor: pointer;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+
+    &-selected {
+      &,
+      &:hover {
+        background-color: @background-color-base;
+        font-weight: bold;
+        color: #666;
+      }
+    }
+
+    &-divider {
+      height: 1px;
+      margin: 1px 0;
       overflow: hidden;
-      transition: background 0.3s ease;
-
-      &:hover,
-      &.focus,
-      &-active {
-        background-color: tint(@primary-color, 90%);
-      }
-
-      &-disabled {
-        color: #ccc;
-        cursor: not-allowed;
-
-        &:hover {
-          color: #ccc;
-          background-color: #fff;
-          cursor: not-allowed;
-        }
-      }
-
-      &-selected {
-        &,
-        &:hover {
-          background-color: @background-color-base;
-          font-weight: bold;
-          color: #666;
-        }
-      }
-
-      &-divider {
-        height: 1px;
-        margin: 1px 0;
-        overflow: hidden;
-        background-color: #e5e5e5;
-        line-height: 0;
-      }
+      background-color: #e5e5e5;
+      line-height: 0;
     }
   }
 }
+

package.json

@@ -49,7 +49,7 @@
     "rc-collapse": "~1.6.4",
     "rc-dialog": "~6.4.0",
     "rc-dropdown": "~1.4.8",
-    "rc-editor-mention": "~0.2.2",
+    "rc-editor-mention": "~0.3.0",
     "rc-form": "~1.0.0",
     "rc-input-number": "~2.7.0",
     "rc-menu": "~5.0.1",