Merge pull request nubasedev#300 from mmomtchev/suggestions-autoplace

Suggestions autoplace

Author: andrerpena

readme.md

@@ -108,6 +108,7 @@ given `text` and `triggeredBy` (character that triggered the suggestions). The r
 The `preview` is what is going to be displayed in the suggestions box. The `value` is what is going to be inserted in the `textarea` on click or enter.
 - **suggestionTriggerCharacters (string[])**: Characters that will trigger mention suggestions to be loaded. This property is useless
 without `loadSuggestions`.
+- **suggestionsAutoplace?: boolean**: Try to move the suggestions popover around so that it fits in the viewport, defaults to false
 - **childProps?: [Object](https://github.com/andrerpena/react-mde/blob/master/src/child-props.ts#L16)**: An object containing props to be passed to `writeButton`, `previewButton`, `commandButtons` and `textArea`.
 
 ## Styling

src/components/ReactMde.tsx

@@ -43,6 +43,7 @@ export interface ReactMdeProps {
   readOnly?: boolean;
   disablePreview?: boolean;
   suggestionTriggerCharacters?: string[];
+  suggestionsAutoplace?: boolean;
   loadSuggestions?: (
     text: string,
     triggeredBy: string
@@ -91,7 +92,8 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
     heightUnits: "px",
     selectedTab: "write",
     disablePreview: false,
-    suggestionTriggerCharacters: ["@"]
+    suggestionTriggerCharacters: ["@"],
+    suggestionsAutoplace: false
   };
 
   constructor(props: ReactMdeProps) {
@@ -219,6 +221,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
           <TextArea
             classes={classes?.textArea}
             suggestionsDropdownClasses={classes?.suggestionsDropdown}
+            suggestionsAutoplace={this.props.suggestionsAutoplace}
             refObject={this.finalRefs.textarea}
             onChange={this.handleTextChange}
             onPaste={this.handlePaste}

src/components/SuggestionsDropdown.tsx

@@ -8,6 +8,7 @@ export interface SuggestionsDropdownProps {
   classes?: ClassValue;
   caret: CaretCoordinates;
   suggestions: Suggestion[];
+  suggestionsAutoplace: boolean;
   onSuggestionSelected: (index: number) => void;
   /**
    * Which item is focused by the keyboard
@@ -21,6 +22,7 @@ export const SuggestionsDropdown: React.FunctionComponent<SuggestionsDropdownPro
   suggestions,
   caret,
   onSuggestionSelected,
+  suggestionsAutoplace,
   focusIndex,
   textAreaRef
 }) => {
@@ -30,17 +32,36 @@ export const SuggestionsDropdown: React.FunctionComponent<SuggestionsDropdownPro
     onSuggestionSelected(index);
   };
 
-  // onMouseDown should be cancelled because onClick will handle it propertly. This way, the textarea does not lose
-  // focus
-  const handleMouseDown = (event: React.MouseEvent) => event.preventDefault();
+  const handleMouseDown =
+    (event: React.MouseEvent) => event.preventDefault();
 
+  const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+  const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+  
+  const left = caret.left - textAreaRef.current.scrollLeft;
+  const top = caret.top - textAreaRef.current.scrollTop;
+
+  const style = {} as React.CSSProperties;
+  if (suggestionsAutoplace && top +
+    textAreaRef.current.getBoundingClientRect().top +
+    textAreaRef.current.ownerDocument.defaultView.pageYOffset +
+    caret.lineHeight * 1.5 * suggestions.length > vh)
+    style.bottom = textAreaRef.current.offsetHeight - caret.top;
+  else
+    style.top = top;
+  
+  if (suggestionsAutoplace && left +
+    textAreaRef.current.getBoundingClientRect().left +
+    textAreaRef.current.ownerDocument.defaultView.pageXOffset +
+    caret.lineHeight * 0.6666 * Math.max.apply(Math, suggestions.map(x => x.preview.toString().length)) > vw)
+    style.right = textAreaRef.current.offsetWidth - caret.left;
+  else
+    style.left = left;
+  
   return (
     <ul
       className={classNames("mde-suggestions", classes)}
-      style={{
-        left: caret.left - textAreaRef.current.scrollLeft,
-        top: caret.top - textAreaRef.current.scrollTop
-      }}
+      style={style}
     >
       {suggestions.map((s, i) => (
         <li

src/components/TextArea.tsx

@@ -44,6 +44,7 @@ export interface TextAreaProps {
   height?: number;
   heightUnits?: string;
   suggestionTriggerCharacters?: string[];
+  suggestionsAutoplace?: boolean;
   loadSuggestions?: (
     text: string,
     triggeredBy: string
@@ -445,6 +446,7 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
             caret={mention.caret}
             suggestions={mention.suggestions}
             onSuggestionSelected={this.handleSuggestionSelected}
+            suggestionsAutoplace={this.props.suggestionsAutoplace}
             focusIndex={mention.focusIndex}
             textAreaRef={this.props.refObject}
           />