Stop applying Ctrl markdown shortcuts on Mac

This commit updates the Markdown editor keyboard shortcuts to only apply
the appropriate variant (Ctrl vs ⌘) for the current platform.

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -143,7 +143,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
             "
-            :shortcuts="['command+b', 'ctrl+b']"
+            shortcuts="mod+b"
             icon="bold"
           />
           <toolbar-button
@@ -151,7 +151,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
             "
-            :shortcuts="['command+i', 'ctrl+i']"
+            shortcuts="mod+i"
             icon="italic"
           />
           <toolbar-button
@@ -207,7 +207,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
             "
-            :shortcuts="['command+k', 'ctrl+k']"
+            shortcuts="mod+k"
             icon="link"
           />
         </div>

app/views/shared/blob/_markdown_buttons.html.haml

@@ -2,18 +2,18 @@
 
 .md-header-toolbar.active
   = markdown_toolbar_button({ icon: "bold",
-                              data: { "md-tag" => "**", "md-shortcuts": '["command+b","ctrl+b"]' },
+                              data: { "md-tag" => "**", "md-shortcuts": '["mod+b"]' },
                               title: sprintf(s_("MarkdownEditor|Add bold text (%{modifier_key}B)") % { modifier_key: modifier_key }) })
 
   = markdown_toolbar_button({ icon: "italic",
-                              data: { "md-tag" => "_", "md-shortcuts": '["command+i","ctrl+i"]' },
+                              data: { "md-tag" => "_", "md-shortcuts": '["mod+i"]' },
                               title: sprintf(s_("MarkdownEditor|Add italic text (%{modifier_key}I)") % { modifier_key: modifier_key }) })
 
   = markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: _("Insert a quote") })
   = markdown_toolbar_button({ icon: "code", data: { "md-tag" => "`", "md-block" => "```" }, title: _("Insert code") })
 
   = markdown_toolbar_button({ icon: "link",
-                              data: { "md-tag" => "[{text}](url)", "md-select" => "url", "md-shortcuts": '["command+k","ctrl+k"]' },
+                              data: { "md-tag" => "[{text}](url)", "md-select" => "url", "md-shortcuts": '["mod+k"]' },
                               title: sprintf(s_("MarkdownEditor|Add a link (%{modifier_key}K)") % { modifier_key: modifier_key }) })
 
   = markdown_toolbar_button({ icon: "list-bulleted", data: { "md-tag" => "- ", "md-prepend" => true }, title: _("Add a bullet list") })

changelogs/unreleased/nfriend-only-apply-command-markdown-shortcuts-on-mac.yml

+---
+title: Stop applying Ctrl keyboard shortcuts inside Markdown editors on Mac
+merge_request: 42239
+author:
+type: fixed

spec/features/markdown/keyboard_shortcuts_spec.rb

@@ -6,6 +6,10 @@ RSpec.describe 'Markdown keyboard shortcuts', :js do
   let_it_be(:project) { create(:project, :repository) }
   let_it_be(:user) { create(:user) }
 
+  let(:is_mac) { page.evaluate_script('navigator.platform').include?('Mac') }
+  let(:modifier_key) { is_mac ? :command : :control }
+  let(:other_modifier_key) { is_mac ? :control : :command }
+
   before do
     project.add_developer(user)
 
@@ -16,7 +20,7 @@ RSpec.describe 'Markdown keyboard shortcuts', :js do
     wait_for_requests
   end
 
-  shared_examples 'keyboard shortcuts for modifier key' do
+  shared_examples 'keyboard shortcuts' do
     it 'bolds text when <modifier>+B is pressed' do
       type_and_select('bold')
 
@@ -57,17 +61,29 @@ RSpec.describe 'Markdown keyboard shortcuts', :js do
     end
   end
 
-  shared_examples 'keyboard shortcuts for implementation' do
-    context 'Ctrl key' do
-      let(:modifier_key) { :control }
+  shared_examples 'no side effects' do
+    it 'does not bold text when <other modifier>+B is pressed' do
+      type_and_select('bold')
+
+      markdown_field.send_keys([@other_modifier_key, 'b'])
+
+      expect(markdown_field.value).not_to eq('**bold**')
+    end
+
+    it 'does not italicize text when <other modifier>+I is pressed' do
+      type_and_select('italic')
+
+      markdown_field.send_keys([@other_modifier_key, 'i'])
 
-      it_behaves_like 'keyboard shortcuts for modifier key'
+      expect(markdown_field.value).not_to eq('_italic_')
     end
 
-    context '⌘ key' do
-      let(:modifier_key) { :command }
+    it 'does not link text when <other modifier>+K is pressed' do
+      type_and_select('link')
+
+      markdown_field.send_keys([@other_modifier_key, 'k'])
 
-      it_behaves_like 'keyboard shortcuts for modifier key'
+      expect(markdown_field.value).not_to eq('[link](url)')
     end
   end
 
@@ -76,7 +92,8 @@ RSpec.describe 'Markdown keyboard shortcuts', :js do
     let(:markdown_field) { find_field('Release notes') }
     let(:non_markdown_field) { find_field('Release title') }
 
-    it_behaves_like 'keyboard shortcuts for implementation'
+    it_behaves_like 'keyboard shortcuts'
+    it_behaves_like 'no side effects'
   end
 
   context 'Haml markdown editor' do
@@ -84,7 +101,8 @@ RSpec.describe 'Markdown keyboard shortcuts', :js do
     let(:markdown_field) { find_field('Description') }
     let(:non_markdown_field) { find_field('Title') }
 
-    it_behaves_like 'keyboard shortcuts for implementation'
+    it_behaves_like 'keyboard shortcuts'
+    it_behaves_like 'no side effects'
   end
 
   def type_and_select(text)

spec/frontend/shortcuts_spec.js

@@ -63,9 +63,9 @@ describe('Shortcuts', () => {
       // Get all shortcuts specified with md-shortcuts attributes in the fixture.
       // `shortcuts` will look something like this:
       // [
-      //   [ 'command+b', 'ctrl+b' ],
-      //   [ 'command+i', 'ctrl+i' ],
-      //   [ 'command+k', 'ctrl+k' ]
+      //   [ 'mod+b' ],
+      //   [ 'mod+i' ],
+      //   [ 'mod+k' ]
       // ]
       shortcuts = $('.edit-note .js-md')
         .map(function getShortcutsFromToolbarBtn() {