add key shortcut

Author: peilingjiang

client/modules/IDE/components/Editor.jsx

@@ -136,7 +136,7 @@ class Editor extends React.Component {
       }
     });
     this.hinter = new Fuse(hinter.p5Hinter, {
-      threshold: 0.2,
+      threshold: 0.05,
       keys: ['text']
     });
 
@@ -345,19 +345,62 @@ class Editor extends React.Component {
   }
 
   showHint(_cm) {
+    let focusedLinkElement = null;
+    const setFocusedLinkElement = (set) => {
+      if (set && !focusedLinkElement) {
+        const activeItemLink = document.querySelector(
+          `.CodeMirror-hint-active a`
+        );
+        if (activeItemLink) {
+          focusedLinkElement = activeItemLink;
+          focusedLinkElement.classList.add('focused-hint-link');
+          focusedLinkElement.parentElement.parentElement.classList.add(
+            'unfocused'
+          );
+        }
+      }
+    };
+    const removeFocusedLinkElement = () => {
+      if (focusedLinkElement) {
+        focusedLinkElement.classList.remove('focused-hint-link');
+        focusedLinkElement.parentElement.parentElement.classList.remove(
+          'unfocused'
+        );
+        focusedLinkElement = null;
+        return true;
+      }
+      return false;
+    };
+
     const hintOptions = {
       _fontSize: this.props.fontSize,
       completeSingle: false,
       extraKeys: {
-        Tab: (cm, e) => {
-          const activeItem = document.querySelector(
+        'Shift-Right': (cm, e) => {
+          const activeItemLink = document.querySelector(
             `.CodeMirror-hint-active a`
           );
-          if (activeItem) {
-            activeItem.focus();
-          } else {
-            e.pick();
-          }
+          if (activeItemLink) activeItemLink.click();
+        },
+        Right: (cm, e) => {
+          setFocusedLinkElement(true);
+        },
+        Left: (cm, e) => {
+          removeFocusedLinkElement();
+        },
+        Up: (cm, e) => {
+          const onLink = removeFocusedLinkElement();
+          e.moveFocus(-1);
+          setFocusedLinkElement(onLink);
+        },
+        Down: (cm, e) => {
+          const onLink = removeFocusedLinkElement();
+          e.moveFocus(1);
+          setFocusedLinkElement(onLink);
+        },
+        Enter: (cm, e) => {
+          if (focusedLinkElement) focusedLinkElement.click();
+          else e.pick();
         }
       },
       closeOnUnfocus: false

client/styles/abstracts/_variables.scss

@@ -125,7 +125,9 @@ $themes: (
     hint-var-text-color: #D52889,
     hint-type-text-color: $middle-dark,
     hint-arrow-color: $lightest,
-    hint-arrow-background-color: $p5js-pink,
+    hint-arrow-background-color: #ed225dcc,
+    hint-arrow-background-active-color: $p5js-pink,
+    hint-arrow-focus-outline-color: #cfcfcf,
     hint-item-hover-background-color: #f4f4f4,
     hint-item-active-text-color: unset,
     hint-item-active-background-color: #cfcfcf,
@@ -220,11 +222,13 @@ $themes: (
     hint-var-text-color: #DE4A9B,
     hint-type-text-color: #E0D7D1,
     hint-arrow-color: #FDFDFD,
-    hint-arrow-background-color: $p5js-pink,
+    hint-arrow-background-color: #ed225dcc,
+    hint-arrow-background-active-color: $p5js-pink,
+    hint-arrow-focus-outline-color: #cfcfcf,
     hint-item-hover-background-color: $middle-dark,
     hint-item-active-text-color: $darker,
     hint-item-active-background-color: #cfcfcf,
-    hint-item-active-type-text-color: $middle-dark,
+    hint-item-active-type-text-color: $darker,
     hint-item-active-outline: none,
     hint-item-active-outline-offset: 0
   ),
@@ -315,7 +319,9 @@ $themes: (
     hint-var-text-color: #FFA9D9,
     hint-type-text-color: #c1c1c1,
     hint-arrow-color: #333,
-    hint-arrow-background-color: #F5DC23,
+    hint-arrow-background-color: #F5DC23CC,
+    hint-arrow-background-active-color: #F5DC23,
+    hint-arrow-focus-outline-color: #FDFDFD,
     hint-item-hover-background-color: #454545,
     hint-item-active-text-color: #FDFDFD,
     hint-item-active-background-color: unset,

client/styles/components/_hints.scss

@@ -42,6 +42,15 @@
     a {
       color: getThemifyVariable('hint-arrow-color');
       background: getThemifyVariable('hint-arrow-background-color');
+
+      &:hover, &:active {
+        background: getThemifyVariable('hint-arrow-background-active-color');
+      }
+
+      &.focused-hint-link {
+        outline: 2px solid getThemifyVariable('hint-arrow-focus-outline-color');
+        outline-offset: -2px;
+      }
     }
 
     li.CodeMirror-hint-active {
@@ -51,7 +60,16 @@
       outline-offset: getThemifyVariable('hint-item-active-outline-offset');
 
       .hint-type {
-        color: getThemifyVariable('hint-item-active-type-text-color:');
+        color: getThemifyVariable('hint-item-active-type-text-color');
+      }
+
+      &.unfocused {
+        background: getThemifyVariable('hint-background-color') !important;
+        outline: unset !important;
+
+        .hint-type {
+          color: getThemifyVariable('hint-type-text-color') !important;
+        }
       }
     }
 
@@ -92,17 +110,12 @@
       margin: 0;
       padding-top: 0.4rem;
       text-align: center;
-      opacity: 0.75;
       outline: none;
       z-index: 1;
     }
 
     a:focus, a:active {
       outline: 0;
     }
-  
-    a:hover, a:active {
-      opacity: 1;
-    }
   }
 }