[sql-hint addon] Add semantic classes to different types of hints

By adding classes that clearly define when a hint is a table or a keyword, it gives developers easy control if they wish to style hints differently. For example, you may wish to style table hints in a different colour to keywords (to make them easier to distinguish).
codemirror · Apr 20, 2018 · 6041c22 · 6041c22
1 parent 61623ec
commit 6041c22
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/addon/hint/sql-hint.js b/addon/hint/sql-hint.js
@@ -275,10 +275,23 @@
     if (search.charAt(0) == "." || search.charAt(0) == identifierQuote) {
       start = nameCompletion(cur, token, result, editor);
     } else {
-      addMatches(result, search, defaultTable, function(w) {return w;});
-      addMatches(result, search, tables, function(w) {return w;});
+      addMatches(result, search, defaultTable, function(w) {return {text:w, className: "CodeMirror-hint-table CodeMirror-hint-default-table"};});
+      addMatches(
+          result,
+          search,
+          tables,
+          function(w) {
+              if (typeof w === 'object') {
+                  w.className =  "CodeMirror-hint-table";
+              } else {
+                  w = {text: w, className: "CodeMirror-hint-table"};
+              }
+
+              return w;
+          }
+      );
       if (!disableKeywords)
-        addMatches(result, search, keywords, function(w) {return w.toUpperCase();});
+        addMatches(result, search, keywords, function(w) {return {text: w.toUpperCase(), className: "CodeMirror-hint-keyword"};});
     }
 
     return {list: result, from: Pos(cur.line, start), to: Pos(cur.line, end)};

diff --git a/test/sql-hint-test.js b/test/sql-hint-test.js
@@ -41,15 +41,15 @@
   test("keywords", {
     value: "SEL",
     cursor: Pos(0, 3),
-    list: ["SELECT"],
+    list: [{"text":"SELECT","className":"CodeMirror-hint-keyword"}],
     from: Pos(0, 0),
     to: Pos(0, 3)
   });
 
   test("from", {
     value: "SELECT * fr",
     cursor: Pos(0, 11),
-    list: ["FROM"],
+    list: [{"text":"FROM","className":"CodeMirror-hint-keyword"}],
     from: Pos(0, 9),
     to: Pos(0, 11)
   });
@@ -58,7 +58,7 @@
     value: "SELECT xc",
     cursor: Pos(0, 9),
     tables: simpleTables,
-    list: ["xcountries"],
+    list: [{"text":"xcountries","className":"CodeMirror-hint-table"}],
     from: Pos(0, 7),
     to: Pos(0, 9)
   });
@@ -123,8 +123,11 @@
     value: "SELECT schem",
     cursor: Pos(0, 12),
     tables: schemaTables,
-    list: ["schema.users", "schema.countries",
-           "SCHEMA", "SCHEMA_NAME", "SCHEMAS"],
+    list: [{"text":"schema.users","className":"CodeMirror-hint-table"},
+        {"text":"schema.countries","className":"CodeMirror-hint-table"},
+        {"text":"SCHEMA","className":"CodeMirror-hint-keyword"},
+        {"text":"SCHEMA_NAME","className":"CodeMirror-hint-keyword"},
+        {"text":"SCHEMAS","className":"CodeMirror-hint-keyword"}],
     from: Pos(0, 7),
     to: Pos(0, 12)
   });
@@ -186,7 +189,7 @@
     value: "SELECT myt",
     cursor: Pos(0, 10),
     tables: displayTextTables,
-    list: [{text: "mytable", displayText: "mytable | The main table",}],
+    list: [{text: "mytable", displayText: "mytable | The main table", "className":"CodeMirror-hint-table"}],
     from: Pos(0, 7),
     to: Pos(0, 10)
   });