Add hinting for the commands itself

Author: hieuthi

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [v1.3.0] - 2022-12-09
+### Changed
+- Changed the way setting is loaded
+
+### Added
+- Add i18n support for datetime commands
+- Add hinting for the commands themselves
+- Restore definitions to default if setting is blank
+
 ## [v1.2.1] - 2022-01-15
 ### Changed
 - Changed default definition of `/greet` command
@@ -18,6 +27,7 @@
 
 Initial version with String and Datetime Commands
 
+[v1.3.0]: https://github.com/hieuthi/joplin-plugin-slash-commands/compare/v1.2.1...v1.3.0
 [v1.2.1]: https://github.com/hieuthi/joplin-plugin-slash-commands/compare/v1.1.1...v1.2.1
 [v1.1.1]: https://github.com/hieuthi/joplin-plugin-slash-commands/compare/v1.0.0...v1.1.1
 [v1.0.0]: https://github.com/hieuthi/joplin-plugin-slash-commands/releases/tag/v1.0.0

src/command.js

@@ -19,6 +19,7 @@ function Command(keyword, options, configs=null) {
   this.keyword_ = keyword;
   this.options_ = options;
   this.configs_ = configs;
+  this.icon_ = '';
 };
 Command.prototype.getHints = function (token) {return null};
 Command.create = function(definition, prefix='/') {
@@ -37,15 +38,19 @@ Command.create = function(definition, prefix='/') {
 }
 
 // COMMAND: String
-function StringCommand(keyword, options, configs=null) { Command.call(this, keyword, options, configs); };
+function StringCommand(keyword, options, configs=null) { 
+  Command.call(this, keyword, options, configs); 
+  this.icon_ = '𝐓';
+};
 StringCommand.prototype.getHints = function (token) {
   if (this.keyword_ !== token) {return [];}
 
   let hints = [];
+  let icon = this.icon_;
   this.options_.forEach(option => {
     hints.push({
       text: option,
-      displayText: '𝐓\t' + option.replace(/\n/gm,"⏎")  + ' ',
+      displayText: icon + '\t' + option.replace(/\n/gm,"⏎")  + ' ',
       hint: async (cm, data, completion) => {
         const from = completion.from || data.from;
         cm.replaceRange(option, from, cm.getCursor(), "complete");
@@ -58,6 +63,7 @@ StringCommand.prototype.getHints = function (token) {
 // COMMAND: Datetime 
 function DatetimeCommand(keyword, options, configs=null) {
   Command.call(this, keyword, options, configs);
+  this.icon_ = '🕒';
 };
 DatetimeCommand.prototype.getHints = function (token) {
   if (this.keyword_ > token.length) { return []; }
@@ -147,11 +153,12 @@ DatetimeCommand.prototype.getHints = function (token) {
   } else {
     dateFormat.i18n = I18N_;
   }
+  let icon = this.icon_;
   this.options_.forEach(option => {
     let text = dateFormat(dt, option);
     hints.push({
       text: text,
-      displayText: '🕒\t' + text + ' ',
+      displayText: icon + '\t' + text + ' ',
       hint: async (cm, data, completion) => {
         const from = completion.from || data.from;
         cm.replaceRange(text, from, cm.getCursor(), "complete");
@@ -162,7 +169,10 @@ DatetimeCommand.prototype.getHints = function (token) {
 };
 
 
-function CalendarCommand(keyword, options, configs=null) { Command.call(this, keyword, options, configs); };
+function CalendarCommand(keyword, options, configs=null) { 
+  Command.call(this, keyword, options, configs); 
+  this.icon_ = '📅';
+};
 CalendarCommand.prototype.getHints = function (token) {
   if (this.keyword_ > token.length) { return []; }
   if (this.keyword_ !== token.slice(0,this.keyword_.length)) {return [];}
@@ -187,6 +197,7 @@ CalendarCommand.prototype.getHints = function (token) {
 
   let hints = [];
   let date = new Date(year,month,1);
+  let icon = this.icon_;
   this.options_.forEach(option => {
     let text    = "";
     let display = "";
@@ -197,14 +208,14 @@ CalendarCommand.prototype.getHints = function (token) {
         text += asciiCalendar(year, month, lang);
         text += "\n\n";
       })
-      display = `📅\t${month+1} ${year} (DEBUG - all locales)`;
+      display = `${icon}\t${month+1} ${year} (DEBUG - all locales)`;
     } else if ( LOCALES_.includes(option) ){
       text    = asciiCalendar(year, month, option);
-      display = `📅\t${date.toLocaleString(option, { month: 'long' })} ${year} (${option})`;
+      display = `${icon}\t${date.toLocaleString(option, { month: 'long' })} ${year} (${option})`;
     } else {
       let lang = typeof window !== 'undefined' ? window.navigator.language : undefined
       text    = asciiCalendar(year, month, lang);
-      display = `📅\t${date.toLocaleString(lang, { month: 'long' })} ${year} (${option} → ${lang})`;
+      display = `${icon}\t${date.toLocaleString(lang, { month: 'long' })} ${year} (${option} → ${lang})`;
     }
     hints.push({
       text: text,

src/manifest.json

@@ -2,7 +2,7 @@
 	"manifest_version": 1,
 	"id": "com.hieuthi.joplin.slash-commands",
 	"app_min_version": "2.2",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"name": "Slash Commands: Datetime & More",
 	"description": "Execute several utilities by typing a command that starts with a slash.",
 	"author": "Hieu-Thi Luong",

src/slashCommands.js

@@ -22,9 +22,24 @@ module.exports = {
             const cursor = cm.getCursor();
             const token  = cm.getRange(change.from, cursor);
             let hints = [];
+            let supps = [];
             for (let i=0; i<cm.state.slashCommands.length; i++){
-              hints = hints.concat(cm.state.slashCommands[i].getHints(token))
+              var command = cm.state.slashCommands[i];
+              let keyword = command.keyword_;
+              let icon    = command.icon_;
+              hints = hints.concat(command.getHints(token))
+              if (token == keyword.substring(0,token.length)){
+                supps.push({
+                  text: keyword,
+                  displayText: icon + '\t' + keyword,
+                  hint: async (cm, data, completion) => {
+                    const from = completion.from || data.from;
+                    cm.replaceRange(keyword, from, cm.getCursor(), "complete");
+                  },
+                })
+              }
             }
+            hints = hints.concat(supps);
             callback({
               list: hints,
               from: change.from,
@@ -35,6 +50,7 @@ module.exports = {
           CodeMirror.showHint(cm, hintFunc, {
             completeSingle: false,
             closeOnUnfocus: true,
+            completeSingle: false,
             async: true,
             closeCharacters: /[()\[\]{};>,.`'"]/
           });