Calculate autocompletion box position without jquery.caret.

Author: vlad-shatskyi

src/views/4_PromptComponent.tsx

@@ -30,6 +30,7 @@ interface Props {
 interface State {
     highlightedSuggestionIndex?: number;
     latestKeyCode?: number;
+    offsetTop?: number;
     suggestions?: Suggestion[];
 }
 
@@ -60,7 +61,10 @@ export default class PromptComponent extends React.Component<Props, State> imple
 
         keyDownSubject
             .filter(_.negate(withModifierKey))
-            .forEach((event: KeyboardEvent) => this.setState({latestKeyCode: event.keyCode}));
+            .forEach((event: KeyboardEvent) => this.setState({
+                latestKeyCode: event.keyCode,
+                offsetTop: (event.target as HTMLDivElement).getBoundingClientRect().top}
+            ));
 
 
         const promptKeys = keyDownSubject.filter(() => this.props.status !== e.Status.InProgress)
@@ -133,7 +137,6 @@ export default class PromptComponent extends React.Component<Props, State> imple
     }
 
     render() {
-        const classes = ["prompt-wrapper", this.props.status].join(" ");
         // FIXME: write better types.
         let autocomplete: any;
         let autocompletedPreview: any;
@@ -143,7 +146,8 @@ export default class PromptComponent extends React.Component<Props, State> imple
 
         if (this.showAutocomplete()) {
             autocomplete = <AutocompleteComponent suggestions={this.state.suggestions}
-                                                  caretOffset={$(this.commandNode).caret("offset")}
+                                                  offsetTop={this.state.offsetTop}
+                                                  caretPosition={getCaretPosition(this.commandNode)}
                                                   onSuggestionHover={this.highlightSuggestion.bind(this)}
                                                   onSuggestionClick={this.applySuggestion.bind(this)}
                                                   highlightedIndex={this.state.highlightedSuggestionIndex}
@@ -170,7 +174,7 @@ export default class PromptComponent extends React.Component<Props, State> imple
         }
 
         return (
-            <div className={classes} style={css.promptWrapper(this.props.status)}>
+            <div className="prompt-wrapper" style={css.promptWrapper(this.props.status)}>
                 <div style={css.arrow(this.props.status)}>
                     <div style={css.arrowInner(this.props.status)}></div>
                 </div>
@@ -179,7 +183,7 @@ export default class PromptComponent extends React.Component<Props, State> imple
                      dangerouslySetInnerHTML={{__html: this.props.status === Status.Interrupted ? fontAwesome.close : ""}}></div>
                 <div className="prompt"
                      style={css.prompt}
-                     onKeyDown={this.handlers.onKeyDown.bind(this)}
+                     onKeyDown={event => this.handlers.onKeyDown(event)}
                      onInput={this.handleInput.bind(this)}
                      onKeyPress={this.handleKeyPress.bind(this)}
                      type="text"

src/views/AutocompleteComponent.tsx

@@ -21,7 +21,8 @@ const SuggestionComponent = ({suggestion, onHover, onClick, isHighlighted}: Sugg
     </li>;
 
 interface AutocompleteProps {
-    caretOffset: Offset;
+    offsetTop: number;
+    caretPosition: number;
     suggestions: Suggestion[];
     onSuggestionHover: (index: number) => void;
     onSuggestionClick: () => void;
@@ -47,7 +48,7 @@ export default class AutocompleteComponent extends React.Component<AutocompleteP
         }
 
         return (
-            <div style={css.autocomplete.box(this.props.caretOffset, suggestionDescription.length !== 0)}>
+            <div style={css.autocomplete.box(this.props.offsetTop, this.props.caretPosition, suggestionDescription.length !== 0)}>
                 <ul style={css.autocomplete.suggestionsList}>{suggestionViews}</ul>
                 {descriptionElement}
             </div>

src/views/css/main.ts

@@ -55,9 +55,10 @@ export interface CSSObject {
 
 const fontSize = 14;
 const outputPadding = 10;
-const promptPadding = 5;
-const promptHeight = 12 + (2 * promptPadding);
-const promptWrapperHeight = promptHeight + promptPadding;
+const promptVerticalPadding = 5;
+const promptHorizontalPadding = 10;
+const promptHeight = 12 + (2 * promptVerticalPadding);
+const promptWrapperHeight = promptHeight + promptVerticalPadding;
 const promptBackgroundColor = lighten(colors.black, 5);
 const suggestionSize = 2 * fontSize;
 const defaultShadow = "0 2px 8px 1px rgba(0, 0, 0, 0.3)";
@@ -95,7 +96,10 @@ const progressBarStripesSize = 30;
 const arrowColor = lighten(promptBackgroundColor, 10);
 
 const promptInlineElement = {
-    padding: "0 10px 3px 10px", // FIXME: Use grid-column-gap when it's supported.
+    paddingTop: 0,
+    paddingRight: promptHorizontalPadding,
+    paddingBottom: 3,
+    paddingLeft: promptHorizontalPadding,
     gridArea: "prompt",
     fontSize: fontSize,
     WebkitFontFeatureSettings: '"liga", "dlig"',
@@ -185,14 +189,14 @@ export const debugTag = {
 };
 
 export const autocomplete = {
-    box: (caretOffset: Offset, hasDescription: boolean) => {
-        const shouldDisplayAbove = caretOffset.top + (suggestionsLimit * suggestionSize) > window.innerHeight;
+    box: (offsetTop: number, caretPosition: number, hasDescription: boolean) => {
+        const shouldDisplayAbove = offsetTop + (suggestionsLimit * suggestionSize) > window.innerHeight;
 
         return {
             position: "absolute",
             top: shouldDisplayAbove ? "auto" : promptWrapperHeight,
             bottom: shouldDisplayAbove ? suggestionSize + (hasDescription ? suggestionSize : 0) : "auto",
-            left: caretOffset.left,
+            left: decorationWidth + promptHorizontalPadding + (caretPosition * letterWidth),
             minWidth: 300,
             boxShadow: defaultShadow,
             backgroundColor: colors.black,
@@ -501,7 +505,7 @@ export const promptInfo = (status: Status) => {
 export const promptWrapper = (status: Status) => {
     const styles: CSSObject = {
         top: 0,
-        paddingTop: promptPadding,
+        paddingTop: promptVerticalPadding,
         position: "relative", // To position the autocompletion box correctly.
         display: "grid",
         gridTemplateAreas: "'decoration prompt actions'",
@@ -523,7 +527,7 @@ export const arrow = (status: Status) => {
         gridArea: "decoration",
         position: "relative",
         width: decorationWidth,
-        height: promptHeight - promptPadding,
+        height: promptHeight - promptVerticalPadding,
         margin: "0 auto",
         overflow: "hidden",
         zIndex: arrowZIndex,