From c95da6b2d945d68803999b922260efaedcb735bd Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Mon, 2 Oct 2023 15:03:58 +0200
Subject: [PATCH] Swapped control symbol for text on Windows (#18420)

Refs https://github.com/TryGhost/Product/issues/3973
---
 .../app/components/gh-post-settings-menu.hbs  | 12 ++++++------
 .../gh-post-settings-menu/ctrl-or-symbol.hbs  |  1 +
 .../gh-post-settings-menu/ctrl-or-symbol.js   | 19 +++++++++++++++++++
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 ghost/admin/app/components/gh-post-settings-menu/ctrl-or-symbol.hbs
 create mode 100644 ghost/admin/app/components/gh-post-settings-menu/ctrl-or-symbol.js

diff --git a/ghost/admin/app/components/gh-post-settings-menu.hbs b/ghost/admin/app/components/gh-post-settings-menu.hbs
index b9a141ec2f..964f317ded 100644
--- a/ghost/admin/app/components/gh-post-settings-menu.hbs
+++ b/ghost/admin/app/components/gh-post-settings-menu.hbs
@@ -279,7 +279,7 @@
                                     <div class="gh-shortcut">
                                         <div class="code">Inline code</div>
                                         <div class="gh-keys">
-                                            <span class="gh-key" data-tooltip="Control">&#8963;</span>
+                                            <GhPostSettingsMenu::CtrlOrSymbol />
                                             <span class="gh-key" data-tooltip="Shift">&#8679;</span>
                                             <span class="gh-key mono">K</span>
                                         </div>
@@ -287,14 +287,14 @@
                                     <div class="gh-shortcut">
                                         <div>List</div>
                                         <div class="gh-keys">
-                                            <span class="gh-key" data-tooltip="Control">&#8963;</span>
+                                            <GhPostSettingsMenu::CtrlOrSymbol />
                                             <span class="gh-key mono">L</span>
                                         </div>
                                     </div>
                                     <div class="gh-shortcut">
                                         <div>Ordered list</div>
                                         <div class="gh-keys">
-                                            <span class="gh-key" data-tooltip="Control">&#8963;</span>
+                                            <GhPostSettingsMenu::CtrlOrSymbol />
                                             <GhPostSettingsMenu::OptionOrAlt />
                                             <span class="gh-key mono">L</span>
                                         </div>
@@ -302,21 +302,21 @@
                                     <div class="gh-shortcut">
                                         <div>Quote</div>
                                         <div class="gh-keys">
-                                            <span class="gh-key" data-tooltip="Control">&#8963;</span>
+                                            <GhPostSettingsMenu::CtrlOrSymbol />
                                             <span class="gh-key mono">Q</span>
                                         </div>
                                     </div>
                                     <div class="gh-shortcut">
                                         <div>H2</div>
                                         <div class="gh-keys">
-                                            <span class="gh-key" data-tooltip="Control">&#8963;</span>
+                                            <GhPostSettingsMenu::CtrlOrSymbol />
                                             <span class="gh-key mono">H</span>
                                         </div>
                                     </div>
                                     <div class="gh-shortcut">
                                         <div>H3</div>
                                         <div class="gh-keys">
-                                            <span class="gh-key" data-tooltip="Control">&#8963;</span>
+                                            <GhPostSettingsMenu::CtrlOrSymbol />
                                             <span class="gh-key mono">H</span>
                                             <span class="gh-key mono clear">2x</span>
                                         </div>
diff --git a/ghost/admin/app/components/gh-post-settings-menu/ctrl-or-symbol.hbs b/ghost/admin/app/components/gh-post-settings-menu/ctrl-or-symbol.hbs
new file mode 100644
index 0000000000..5ae2184e61
--- /dev/null
+++ b/ghost/admin/app/components/gh-post-settings-menu/ctrl-or-symbol.hbs
@@ -0,0 +1 @@
+<span class="gh-key {{this.class}}" data-tooltip={{this.tooltip}}>{{this.character}}</span>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-post-settings-menu/ctrl-or-symbol.js b/ghost/admin/app/components/gh-post-settings-menu/ctrl-or-symbol.js
new file mode 100644
index 0000000000..71f389fb3b
--- /dev/null
+++ b/ghost/admin/app/components/gh-post-settings-menu/ctrl-or-symbol.js
@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import {htmlSafe} from '@ember/template';
+
+const isMac = window.navigator.platform.startsWith('Mac');
+
+export default class CtrlOrCmd extends Component {
+    get tooltip() {
+        return isMac ? 'Control' : '';
+    }
+
+    get character() {
+        const character = isMac ? '&#8963;' : 'Ctrl';
+        return htmlSafe(character);
+    }
+
+    get class() {
+        return isMac ? '' : 'mono';
+    }
+}