Finish deciding, testing and documenting Ctrl/Cmd difference (Fixes #200)

Author: WebCoder49

code-input.d.ts

@@ -129,16 +129,16 @@ export namespace plugins {
 
   // ESM-SUPPORT-START-PLUGIN-find-and-replace Do not (re)move this - it's needed for ESM generation
   /**
-   * Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default) functionality to the code editor.
+   * Add Find-and-Replace (Ctrl/Cmd+F for find, Ctrl+H for replace by default) functionality to the code editor.
    * Files: find-and-replace.js / find-and-replace.css
    */
   class FindAndReplace extends Plugin {
     /**
-     * Create a find-and-replace command plugin to pass into a template
-     * @param {boolean} useCtrlF Should Ctrl+F be overriden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
+     * Create a find-and-replace command plugin to pass into a template. To ensure keyboard shortcuts remain intuitive, set the alwaysCtrl parameter to false.
+     * @param {boolean} useCtrlF Should Ctrl/Cmd+F be overriden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
      * @param {boolean} useCtrlH Should Ctrl+H be overriden for find-and-replace replace functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
      * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the find-and-replace.js source code for the English text.
-     * @param {boolean} alwaysCtrl: if true always use Ctrl+F/H as the keyboard shortcut; if false use Cmd+F/H on Apple devices and Ctrl+F/H elsewhere. False highly recommended; defaults to true for backwards compatiblity.
+     * @param {boolean} alwaysCtrl Setting this to false makes the keyboard shortcuts follow the operating system while avoiding clashes (right now: Cmd+F/Ctrl+H on Apple, Ctrl+F/Ctrl+H otherwise.) and is recommended; true forces Ctrl+F/Ctrl+H and is default for backwards compatibility.
      */
     constructor(useCtrlF?: boolean, useCtrlH?: boolean,
                 instructionTranslations?: {
@@ -174,13 +174,13 @@ export namespace plugins {
 
   // ESM-SUPPORT-START-PLUGIN-go-to-line Do not (re)move this - it's needed for ESM generation
   /**
-   * Add basic Go-To-Line (ctrl-G by default) functionality to the code editor.
+   * Add Go-To-Line (Ctrl/Cmd+G by default) functionality to the code editor.
    * Files: go-to-line.js / go-to-line.css
    */
   class GoToLine extends Plugin {
     /**
-     * Create a go-to-line command plugin to pass into a template
-     * @param {boolean} useCtrlG Should Ctrl+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+     * Create a go-to-line command plugin to pass into a template.
+     * @param {boolean} useCtrlG Should Ctrl/Cmd+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
      * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
      */
     constructor(useCtrlG?: boolean,
@@ -193,7 +193,6 @@ export namespace plugins {
                   guidanceValidLine?: (line: Number) => string;
                   guidanceValidColumn?: (line: Number, column: Number) => string;
                 },
-                alwaysCtrl?: boolean
               );
     /**
      * Show a search-like dialog prompting line number.
@@ -217,7 +216,6 @@ export namespace plugins {
      * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
      * @param {boolean} escTabToChangeFocus Whether pressing the Escape key before (Shift+)Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
      * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
-     * @param {boolean} alwaysCtrl: if true always use Ctrl+G as the keyboard shortcut; if false use Cmd+G on Apple devices and Ctrl+G elsewhere. False highly recommended; defaults to true for backwards compatiblity.
      */
     constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object, escTabToChangeFocus?: boolean, instructionTranslations?: {
       tabForIndentation?: string;

docs/i18n/_index.md

@@ -20,7 +20,7 @@ code-input:not(.code-input_registered)::after {
 
 It is only present for debugging and explanatory purposes when highlighting cannot be seen, and should not contain important or specific information about the editor state; if you need such information, especially for screen reader users, add separate text to your application which disappears after registering the code-input without errors.
 
-**Plugins** sometimes come with user interface features (e.g. the find-and-replace dialog) which contain text to be translated. The text is provided as an extra argument to the plugin constructor containing translated strings or functions to produce them for each translation key, with the keys and their English values found in either the `code-input.d.ts` or the plugin's source code file. Here's an example:
+**Plugins** sometimes come with user interface features (e.g. the find-and-replace dialog) which contain text to be translated. The text is provided as an argument to the plugin constructor containing translated strings or functions to produce them for each translation key, with the keys and their English values found in either the `code-input.d.ts` or the plugin's source code file. Here's an example:
 ```javascript
 // CC-BY; Attribution: Translated by Oliver Geer with some help from English Wiktionary
 let findAndReplaceTranslations = {
@@ -45,7 +45,7 @@ let findAndReplaceTranslations = {
 };
 // ...
 // passed when the plugin is constructed:
-new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
+new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations, false),
 ```
 
 ## Other

docs/plugins/_index.md

@@ -144,10 +144,10 @@ Right now, you can only add one plugin of each type (e.g. one SelectTokenCallbac
 
         <script>
             let findAndReplacePlugin = new codeInput.plugins.FindAndReplace(
-                true, // Should Ctrl+F be overriden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
-                true, // Should Ctrl+H be overriden for find-and-replace replace functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
+                true, // Should Ctrl/Cmd+F be overriden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
+                true, // Should Ctrl/Cmd+H be overriden for find-and-replace replace functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
                 {}, // Keep this as an empty object for the English UI, or add translations as in https://code-input-js.org/i18n/
-                false // Should Ctrl key be forced for keyboard shortcuts; setting this to false makes the keyboard shortcut follow the operating system (i.e. Cmd on Apple).
+                false // Setting this to false makes the keyboard shortcuts follow the operating system while avoiding clashes (right now: Cmd+F/Ctrl+H on Apple, Ctrl+F/Ctrl+H otherwise.) and is recommended; true forces Ctrl+F/Ctrl+H and is default for backwards compatibility.
             );
             // Programatically opening the dialogs, to integrate with your user interface
             function find() {
@@ -197,9 +197,8 @@ Hickory dickory dock.</code-input>
 
         <script>
             let goToLinePlugin = new codeInput.plugins.GoToLine(
-                true, // Should Ctrl+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+                true, // Should Ctrl/Cmd+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
                 {}, // Keep this as an empty object for the English UI, or add translations as in https://code-input-js.org/i18n/
-                false // Should Ctrl key be forced for keyboard shortcuts; setting this to false makes the keyboard shortcut follow the operating system (i.e. Cmd on Apple).
             );
             // Programatically opening the dialogs, to integrate with your user interface
             function goToLine() {

plugins/find-and-replace.js

@@ -1,5 +1,5 @@
 /**
- * Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default) functionality to the code editor.
+ * Add Find-and-Replace (Ctrl/Cmd+F for find, Ctrl+H for replace by default) functionality to the code editor.
  * Files: find-and-replace.js / find-and-replace.css
  */
 "use strict";
@@ -32,11 +32,11 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
     };
 
     /**
-     * Create a find-and-replace command plugin to pass into a template
-     * @param {boolean} useCtrlF Should Ctrl+F be overriden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
+     * Create a find-and-replace command plugin to pass into a template. To ensure keyboard shortcuts remain intuitive, set the alwaysCtrl parameter to false.
+     * @param {boolean} useCtrlF Should Ctrl/Cmd+F be overriden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
      * @param {boolean} useCtrlH Should Ctrl+H be overriden for find-and-replace replace functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
-     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the find-and-replace.js source code for the English text and available keys.
-     * @param {boolean} alwaysCtrl: if true always use Ctrl+F/H as the keyboard shortcut; if false use Cmd+F/H on Apple devices and Ctrl+F/H elsewhere. False highly recommended; defaults to true for backwards compatiblity.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the find-and-replace.js source code for the English text.
+     * @param {boolean} alwaysCtrl Setting this to false makes the keyboard shortcuts follow the operating system while avoiding clashes (right now: Cmd+F/Ctrl+H on Apple, Ctrl+F/Ctrl+H otherwise.) and is recommended; true forces Ctrl+F/Ctrl+H and is default for backwards compatibility.
      */
     constructor(useCtrlF = true, useCtrlH = true, instructionTranslations = {}, alwaysCtrl = true) {
         super([]); // No observed attributes
@@ -422,29 +422,24 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
         this.updateFindMatches(dialog);
     }
 
-    hasModifier(event) {
-        if(this.alwaysCtrl) return event.ctrlKey;
-        // Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform
-        if(navigator.platform.startsWith("Mac") || navigator.platform === "iPhone") {
-            // Command
-            return event.metaKey;
-        } else {
-            // Control
-            return event.ctrlKey;
-        }
-    }
-
-    /* Event handler for keydown event that makes Ctrl+F open find dialog */
+    /* Event handler for keydown event that makes Ctrl/Cmd+F open find dialog */
     checkCtrlF(codeInput, event) {
-        if (this.hasModifier(event) && event.key == 'f') {
-            event.preventDefault();
-            this.showPrompt(codeInput, false);
+        if(!this.alwaysCtrl && (navigator.platform.startsWith("Mac") || navigator.platform === "iPhone")) {
+            if (event.metaKey && event.key == 'f') { // Cmd+F
+                event.preventDefault();
+                this.showPrompt(codeInput, false);
+            }
+        } else {
+            if (event.ctrlKey && event.key == 'f') {
+                event.preventDefault();
+                this.showPrompt(codeInput, false);
+            }
         }
     }
 
     /* Event handler for keydown event that makes Ctrl+H open find+replace dialog */
     checkCtrlH(codeInput, event) {
-        if (this.hasModifier(event) && event.key == 'h') {
+        if (event.ctrlKey && event.key == 'h') {
             event.preventDefault();
             this.showPrompt(codeInput, true);
         }

plugins/go-to-line.js

@@ -1,5 +1,5 @@
 /**
- * Add basic Go-To-Line (Ctrl+G by default) functionality to the code editor.
+ * Add Go-To-Line (Ctrl/Cmd+G by default) functionality to the code editor.
  * Files: go-to-line.js / go-to-line.css
  */
 "use strict";
@@ -18,12 +18,11 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
     };
 
     /**
-     * Create a go-to-line command plugin to pass into a template
+     * Create a go-to-line command plugin to pass into a template.
      * @param {boolean} useCtrlG Should Ctrl/Cmd+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
-     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the available keys and English text.
-     * @param {boolean} alwaysCtrl: if true always use Ctrl+G as the keyboard shortcut; if false use Cmd+G on Apple devices and Ctrl+G elsewhere. False highly recommended; defaults to true for backwards compatiblity.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
      */
-    constructor(useCtrlG = true, instructionTranslations = {}, alwaysCtrl = true) {
+    constructor(useCtrlG = true, instructionTranslations = {}) {
         super([]); // No observed attributes
         this.useCtrlG = useCtrlG;
         this.addTranslations(this.instructions, instructionTranslations);
@@ -203,21 +202,9 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
         }
     }
 
-    hasModifier(event) {
-        if(this.alwaysCtrl) return event.ctrlKey;
-        // Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform
-        if(navigator.platform.startsWith("Mac") || navigator.platform === "iPhone") {
-            // Command
-            return event.metaKey;
-        } else {
-            // Control
-            return event.ctrlKey;
-        }
-    }
-
     /* Event handler for keydown event that makes Ctrl+G open go to line dialog */
     checkCtrlG(codeInput, event) {
-        if (this.hasModifier(event) && event.key == 'g') {
+        if (event.ctrlKey && event.key == 'g') {
             event.preventDefault();
             this.showPrompt(codeInput);
         }