WebCoder49 · WebCoder49 · Nov 15, 2025 · Nov 7, 2025 · Nov 7, 2025 · Nov 15, 2025
diff --git a/code-input.d.ts b/code-input.d.ts
@@ -129,15 +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 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?: {
@@ -159,7 +160,8 @@ export namespace plugins {
                   replaceAction?: string;
                   replaceAllActionShort?: string;
                   replaceAllAction?: string
-                }
+                },
+                alwaysCtrl?: boolean
               );
     /**
      * Show a find-and-replace dialog.
@@ -172,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,
@@ -190,7 +192,8 @@ export namespace plugins {
                   guidanceColumnRange?: (line: Number, current: Number, max: Number) => string;
                   guidanceValidLine?: (line: Number) => string;
                   guidanceValidColumn?: (line: Number, column: Number) => string;
-                });
+                },
+              );
     /**
      * Show a search-like dialog prompting line number.
      * @param {codeInput.CodeInput} codeInput the `<code-input>` element.

diff --git a/docs/i18n/_index.md b/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

diff --git a/docs/plugins/_index.md b/docs/plugins/_index.md
@@ -144,8 +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 // 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() {
@@ -195,7 +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/
             );
             // Programatically opening the dialogs, to integrate with your user interface
             function goToLine() {

diff --git a/plugins/find-and-replace.js b/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,15 +32,17 @@ 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 {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 = {}) {
+    constructor(useCtrlF = true, useCtrlH = true, instructionTranslations = {}, alwaysCtrl = true) {
         super([]); // No observed attributes
         this.useCtrlF = useCtrlF;
         this.useCtrlH = useCtrlH;
+        this.alwaysCtrl = alwaysCtrl;
         this.addTranslations(this.instructions, instructionTranslations);
     }
 
@@ -420,11 +422,18 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
         this.updateFindMatches(dialog);
     }
 
-    /* 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 (event.ctrlKey && 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);
+            }
         }
     }
 

diff --git a/plugins/go-to-line.js b/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,9 +18,9 @@ codeInput.plugins.GoToLine = class extends codeInput.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)`.
-     * @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.
+     * 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 = true, instructionTranslations = {}) {
         super([]); // No observed attributes

diff --git a/tests/i18n-hljs.html b/tests/i18n-hljs.html
@@ -62,8 +62,8 @@
                     }
                 }),
                 new codeInput.plugins.Autodetect(),
-                new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
-                new codeInput.plugins.GoToLine(true, goToLineTranslations),
+                new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations, false),
+                new codeInput.plugins.GoToLine(true, goToLineTranslations, false),
                 new codeInput.plugins.Indent(true, 2, {"(": ")", "[": "]", "{": "}"}, true, indentTranslations),
                 new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
                 //new codeInput.plugins.SpecialChars(true),

diff --git a/tests/i18n-prism.html b/tests/i18n-prism.html
@@ -61,8 +61,8 @@
                         popupElem.style.display = "none";
                     }
                 }),
-                new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
-                new codeInput.plugins.GoToLine(true, goToLineTranslations),
+                new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations, false),
+                new codeInput.plugins.GoToLine(true, goToLineTranslations, false),
                 new codeInput.plugins.Indent(true, 2, {"(": ")", "[": "]", "{": "}"}, true, indentTranslations),
                 new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
                 //new codeInput.plugins.SpecialChars(true),

diff --git a/tests/tester.js b/tests/tester.js
@@ -120,15 +120,15 @@ function beginTest(isHLJS) {
                 }
             }),
             new codeInput.plugins.Autodetect(),
-            new codeInput.plugins.FindAndReplace(),
-            new codeInput.plugins.GoToLine(),
+            new codeInput.plugins.FindAndReplace(true, true, {}, false),
+            new codeInput.plugins.GoToLine(true, {}),
             new codeInput.plugins.Indent(true, 2),
             new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
             new codeInput.plugins.SpecialChars(true),
         ]));
     } else {
         codeInput.registerTemplate("code-editor", new codeInput.templates.Prism(Prism, [
-            new codeInput.plugins.AutoCloseBrackets(), 
+            new codeInput.plugins.AutoCloseBrackets(),
             new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd, selectionStart) {
                 if(selectionStart == selectionEnd && textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
                     // Show popup
@@ -138,8 +138,8 @@ function beginTest(isHLJS) {
                     popupElem.style.display = "none";
                 }
             }),
-            new codeInput.plugins.FindAndReplace(),
-            new codeInput.plugins.GoToLine(),
+            new codeInput.plugins.FindAndReplace(true, true, {}, false),
+            new codeInput.plugins.GoToLine(true, {}),
             new codeInput.plugins.Indent(true, 2),
             new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
             new codeInput.plugins.SpecialChars(true),
@@ -489,7 +489,12 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");
     await waitAsync(50); // Wait for highlighting so text updates
 
     // Open dialog and get interactive elements
-    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "f", "ctrlKey": true }));
+    // Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform
+    if(navigator.platform.startsWith("Mac") || navigator.platform === "iPhone") {
+        textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "f", "metaKey": true }));
+    } else {
+        textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "f", "ctrlKey": true }));
+    }
     let inputBoxes = codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog input");
     let findInput = inputBoxes[0];
     let regExpCheckbox = inputBoxes[1];
@@ -587,7 +592,7 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");
     lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
     lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
     assertEqual("GoToLine", "Line and Column", textarea.selectionStart, 45);
-    
+
     textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
     lineInput.value = "10";
     lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));