add reserved keywords and objects

Author: peilingjiang

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

@@ -275,15 +275,19 @@
     }
   }
 
-  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/${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) {
@@ -377,7 +381,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);

client/styles/abstracts/_variables.scss

@@ -123,11 +123,13 @@ $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,
@@ -224,11 +226,13 @@ $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,
@@ -325,11 +329,13 @@ $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,

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 {
       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 {
         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;
@@ -168,8 +181,8 @@
   @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;
+      // 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 {

client/utils/p5-hinter.js

@@ -6,6 +6,77 @@ const axios = require('axios');
 //   return d.split('\n')[0].replace('<p>', '');
 // };
 
+const reservedKeywords = [
+  'await',
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'export',
+  'extends',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'import',
+  'in',
+  'instanceof',
+  'new',
+  'return',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield',
+  'let'
+];
+
+const reservedObjects = [
+  'Array',
+  'Boolean',
+  'Date',
+  'Error',
+  'Function',
+  'JSON',
+  'Math',
+  'Number',
+  'Object',
+  'RegExp',
+  'String',
+  'Promise',
+  'Set',
+  'Map',
+  'Symbol',
+  'WeakMap',
+  'WeakSet',
+  'ArrayBuffer',
+  'DataView',
+  'Int32Array',
+  'Uint32Array',
+  'Float32Array',
+  'window',
+  'document',
+  'navigator',
+  'console',
+  'localStorage',
+  'sessionStorage',
+  'history',
+  'location'
+];
+
 axios
   .get('https://p5js.org/reference/data.json')
   .then((response) => {
@@ -37,11 +108,28 @@ axios
         p5Keywords.push({
           text: obj.name,
           type,
-          params
+          params,
+          p5: true
         });
       }
     });
 
+    reservedKeywords.forEach((keyword) => {
+      p5Keywords.push({
+        text: keyword,
+        type: 'keyword',
+        p5: false
+      });
+    });
+
+    reservedObjects.forEach((keyword) => {
+      p5Keywords.push({
+        text: keyword,
+        type: 'obj',
+        p5: false
+      });
+    });
+
     const keywords = JSON.stringify(p5Keywords);
 
     let generatedCode = '/* eslint-disable */\n';