inline hint with full completion preview for functions

Author: peilingjiang

client/modules/IDE/components/Editor.jsx

@@ -269,7 +269,7 @@ class Editor extends React.Component {
     if (this.props.autocompleteHinter !== prevProps.autocompleteHinter) {
       if (!this.props.autocompleteHinter) {
         // close the hinter window once the preference is turned off
-        CodeMirror.showHint(this._cm, () => {});
+        CodeMirror.showHint(this._cm, () => {}, {});
       }
     }
 
@@ -352,7 +352,7 @@ class Editor extends React.Component {
 
   showHint(_cm) {
     if (!this.props.autocompleteHinter) {
-      CodeMirror.showHint(_cm, () => {});
+      CodeMirror.showHint(_cm, () => {}, {});
       return;
     }
 
@@ -425,7 +425,9 @@ class Editor extends React.Component {
           const c = _cm.getCursor();
           const token = _cm.getTokenAt(c);
 
-          const hints = this.hinter.search(token.string);
+          const hints = this.hinter
+            .search(token.string)
+            .filter((h) => h.item.text[0] === token.string[0]);
 
           return {
             list: hints,

client/modules/IDE/components/show-hint.js

@@ -286,6 +286,55 @@
 <span aria-hidden="true">&#10132;</span></a></p>`;
   }
 
+  function getInlineHintSuggestion(focus, tokenLength) {
+    const suggestionItem = focus.item;
+    const baseCompletion = `<span class="inline-hinter-suggestion">${suggestionItem.text.slice(
+      tokenLength
+    )}</span>`;
+    if (suggestionItem.type !== 'fun') return baseCompletion;
+
+    // for functions
+    return (
+      baseCompletion +
+      '<span class="inline-hinter-suggestion-light">(' +
+      (suggestionItem.params && suggestionItem.params.length
+        ? suggestionItem.params.map(({ p, o }) => (o ? `[${p}]` : p)).join(', ')
+        : '') +
+      ')</span>'
+    );
+  }
+
+  function removeInlineHint(cm) {
+    if (cm.state.inlineHint) {
+      cm.state.inlineHint.clear();
+      cm.state.inlineHint = null;
+    }
+  }
+
+  function changeInlineHint(cm, focus) {
+    // Copilot-style inline suggestion for autocomplete feature
+    removeInlineHint(cm);
+
+    const cursor = cm.getCursor();
+    const token = cm.getTokenAt(cursor);
+
+    if (token && focus.item) {
+      const suggestionHTML = getInlineHintSuggestion(
+        focus,
+        token.string.length
+      );
+
+      const widgetElement = document.createElement('span');
+      widgetElement.className = 'autocomplete-inline-hinter';
+      widgetElement.innerHTML = suggestionHTML;
+
+      const widget = cm.setBookmark(cursor, { widget: widgetElement });
+      cm.state.inlineHint = widget;
+
+      cm.setCursor(cursor);
+    }
+  }
+
   function Widget(completion, data) {
     this.id = 'cm-complete-' + Math.floor(Math.random(1e6));
     this.completion = completion;
@@ -306,6 +355,9 @@
     hints.className = 'CodeMirror-hints ' + theme;
     this.selectedHint = data.selectedHint || 0;
 
+    // Show inline hint
+    changeInlineHint(cm, data.list[this.selectedHint]);
+
     var completions = data.list;
 
     for (var i = 0; i < completions.length; ++i) {
@@ -431,10 +483,10 @@
     cm.addKeyMap(
       (this.keyMap = buildKeyMap(completion, {
         moveFocus: function (n, avoidWrap) {
-          widget.changeActive(widget.selectedHint + n, avoidWrap);
+          return widget.changeActive(widget.selectedHint + n, avoidWrap);
         },
         setFocus: function (n) {
-          widget.changeActive(n);
+          return widget.changeActive(n);
         },
         menuSize: function () {
           return widget.screenAmount();
@@ -540,6 +592,8 @@
         cm.off('focus', this.onFocus);
       }
       cm.off('scroll', this.onScroll);
+
+      removeInlineHint(cm);
     },
 
     disable: function () {
@@ -561,7 +615,12 @@
       if (i >= this.data.list.length)
         i = avoidWrap ? this.data.list.length - 1 : 0;
       else if (i < 0) i = avoidWrap ? 0 : this.data.list.length - 1;
-      if (this.selectedHint == i) return;
+
+      if (this.selectedHint == i) {
+        changeInlineHint(this.completion.cm, this.data.list[this.selectedHint]);
+        return this.data.list[this.selectedHint];
+      }
+
       var node = this.hints.childNodes[this.selectedHint];
       if (node) {
         node.className = node.className.replace(
@@ -583,6 +642,9 @@
         this.data.list[this.selectedHint],
         node
       );
+
+      changeInlineHint(this.completion.cm, this.data.list[this.selectedHint]);
+      return this.data.list[this.selectedHint];
     },
 
     scrollToActive: function () {

client/styles/abstracts/_variables.scss

@@ -135,7 +135,9 @@ $themes: (
     hint-var-active-border-bottom-color: #D52889,
     hint-item-active-type-text-color: $white,
     hint-item-active-outline: none,
-    hint-item-active-outline-offset: 0
+    hint-item-active-outline-offset: 0,
+    hint-inline-text-color-light: $middle-light,
+    hint-inline-text-color: $middle-gray,
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -234,7 +236,9 @@ $themes: (
     hint-var-active-border-bottom-color: #DE4A9B,
     hint-item-active-type-text-color: $darker,
     hint-item-active-outline: none,
-    hint-item-active-outline-offset: 0
+    hint-item-active-outline-offset: 0,
+    hint-inline-text-color-light: $middle-gray,
+    hint-inline-text-color: #cfcfcf,
   ),
   contrast: (
     logo-color: $yellow,
@@ -333,7 +337,9 @@ $themes: (
     hint-var-active-border-bottom-color: none,
     hint-item-active-type-text-color: $lighter,
     hint-item-active-outline: 2px solid $lighter,
-    hint-item-active-outline-offset: -2px
+    hint-item-active-outline-offset: -2px,
+    hint-inline-text-color-light: $middle-gray,
+    hint-inline-text-color: #cfcfcf,
   )
 );
 

client/styles/components/_hints.scss

@@ -160,3 +160,31 @@
     }
   }
 }
+
+// Inline hinter
+.CodeMirror-widget {
+  line-height: inherit;
+
+  @include themify() {
+    .autocomplete-inline-hinter {
+      // make the border left look like a cursor and animate like a cursor
+      border-left: #{1.2 / $base-font-size}rem solid getThemifyVariable(hint-inline-text-color);
+      animation: inline-hint-caret-blink 1s step-end infinite;
+      pointer-events: none;
+
+      .inline-hinter-suggestion {
+        color: getThemifyVariable(hint-inline-text-color);
+        font-style: italic;
+      }
+
+      .inline-hinter-suggestion-light {
+        color: getThemifyVariable(hint-inline-text-color-light);
+        font-style: italic;
+      }
+    }
+  }
+}
+
+@keyframes inline-hint-caret-blink {
+  50% { border-color: transparent; }
+}