Autocomplete++

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

@@ -275,15 +275,70 @@
     }
   }
 
-  function displayHint(name, type) {
+  function displayHint(name, type, p5) {
     return `<p class="${type}-item">\
 <span class="${type}-name hint-name">${name}</span>\
 <span class="hint-hidden">, </span>\
 <span class="hint-type">${type}</span>\
 <span class="hint-hidden">, </span>\
-<a href="https://p5js.org/reference/#/p5/${name}" role="link" onclick="event.stopPropagation()" target="_blank">\
+${
+  p5
+    ? `<a href="https://p5js.org/reference/#/p5/${
+        typeof p5 === 'string' ? p5 : name
+      }" role="link" onclick="event.stopPropagation()" target="_blank">\
 <span class="hint-hidden">open ${name} reference</span>\
-<span aria-hidden="true">&#10132;</span></a></p>`;
+<span aria-hidden="true">&#10132;</span></a>`
+    : `<span class="no-link-placeholder"><span class="hint-hidden">no reference for ${name}</span></span>`
+}</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) {
@@ -306,6 +361,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) {
@@ -325,7 +383,7 @@
         const name = getText(cur);
 
         if (cur.item && cur.item.type) {
-          cur.displayText = displayHint(name, cur.item.type);
+          cur.displayText = displayHint(name, cur.item.type, cur.item.p5);
         }
 
         elt.appendChild(e);
@@ -431,10 +489,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 +598,8 @@
         cm.off('focus', this.onFocus);
       }
       cm.off('scroll', this.onScroll);
+
+      removeInlineHint(cm);
     },
 
     disable: function () {
@@ -561,7 +621,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 +648,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

@@ -123,19 +123,23 @@ $themes: (
     hint-item-border-bottom-color: $white,
     hint-fun-text-color: #0B7CA9,
     hint-var-text-color: #D52889,
+    hint-keyword-text-color: #7A5A3A,
     hint-type-text-color: $medium-dark,
     hint-arrow-color: $lightest,
     hint-arrow-background-color: #ed225ddd,
     hint-arrow-background-active-color: $p5js-active-pink,
     hint-arrow-focus-outline-color: $middle-dark,
+    hint-no-link-background-color: $medium-light,
     hint-item-hover-background-color: #f4f4f4,
     hint-item-active-text-color: $white,
     hint-item-active-background-color: $middle-gray,
     hint-fun-active-border-bottom-color: #0B7CA9,
     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,
@@ -222,19 +226,23 @@ $themes: (
     hint-item-border-bottom-color: $darker,
     hint-fun-text-color: #0F9DD7,
     hint-var-text-color: #DE4A9B,
+    hint-keyword-text-color: #B58318,
     hint-type-text-color: $light,
     hint-arrow-color: $lightest,
     hint-arrow-background-color: #ed225ddd,
     hint-arrow-background-active-color: $p5js-active-pink,
     hint-arrow-focus-outline-color: #cfcfcf,
+    hint-no-link-background-color: $medium-dark,
     hint-item-hover-background-color: $medium-dark,
     hint-item-active-text-color: $darker,
     hint-item-active-background-color: #cfcfcf,
     hint-fun-active-border-bottom-color: #0F9DD7,
     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,
@@ -321,19 +329,23 @@ $themes: (
     hint-item-border-bottom-color: $medium-dark,
     hint-fun-text-color: #00FFFF,
     hint-var-text-color: #FFA9D9,
+    hint-keyword-text-color: #F5DC23,
     hint-type-text-color: $middle-light,
     hint-arrow-color: $darker,
     hint-arrow-background-color: #F5DC23DD,
     hint-arrow-background-active-color: #F5DC23,
     hint-arrow-focus-outline-color: $lighter,
+    hint-no-link-background-color: $medium-dark,
     hint-item-hover-background-color: $dark,
     hint-item-active-text-color: $lighter,
     hint-item-active-background-color: unset,
     hint-fun-active-border-bottom-color: none,
     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

@@ -31,13 +31,17 @@
       height: 100%;
     }
 
-    .fun-name {
+    .fun-name, .obj-name {
       color: getThemifyVariable('hint-fun-text-color');
     }
 
-    .var-name {
+    .var-name, .boolean-name {
       color: getThemifyVariable('hint-var-text-color');
     }
+
+    .keyword-name {
+      color: getThemifyVariable('hint-keyword-text-color');
+    }
 
     .hint-type {
       color: getThemifyVariable('hint-type-text-color');
@@ -57,6 +61,11 @@
         outline-offset: #{-3 / $base-font-size}rem;
       }
     }
+
+    .no-link-placeholder {
+      background: getThemifyVariable('hint-no-link-background-color');
+      pointer-events: none;
+    }
 
     li.CodeMirror-hint-active:not(.unfocused) {
       background: getThemifyVariable('hint-item-active-background-color');
@@ -75,13 +84,17 @@
         color: getThemifyVariable('hint-item-active-text-color');
       }
 
-      .fun-name {
+      .fun-name, .obj-name {
         background-color: getThemifyVariable('hint-fun-text-color');
       }
 
-      .var-name {
+      .var-name, .boolean-name {
         background-color: getThemifyVariable('hint-var-text-color');
       }
+
+      .keyword-name {
+        background-color: getThemifyVariable('hint-keyword-text-color');
+      }
 
       .hint-type, .plain-hint-item {
         color: getThemifyVariable('hint-item-active-type-text-color');
@@ -140,7 +153,7 @@
       @extend %hidden-element;
     }
 
-    a {
+    a, .no-link-placeholder {
       position: absolute;
       top: 0;
       right: 0;
@@ -160,3 +173,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; }
+}