Fix CommandIconButton (#1648)

- It did not respect shortcuts

ts/editable/content-editable.ts

@@ -89,7 +89,7 @@ if (isApplePlatform()) {
 }
 
 export function preventBuiltinContentEditableShortcuts(editable: HTMLElement): void {
-    for (const keyCombination of ["Control+B", "Control+U", "Control+I", "Control+R"]) {
+    for (const keyCombination of ["Control+B", "Control+U", "Control+I"]) {
         registerShortcut(preventDefault, keyCombination, editable);
     }
 }

ts/editor/editor-toolbar/CommandIconButton.svelte

@@ -6,15 +6,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import IconButton from "../../components/IconButton.svelte";
     import Shortcut from "../../components/Shortcut.svelte";
     import WithState from "../../components/WithState.svelte";
+    import { getPlatformString } from "../../lib/shortcuts";
     import { execCommand, queryCommandState } from "../helpers";
     import { context as noteEditorContext } from "../NoteEditor.svelte";
     import { editingInputIsRichText } from "../rich-text-input";
 
     export let key: string;
     export let tooltip: string;
-    export let shortcut: string = "";
+    export let shortcut: string | null = null;
+
+    $: theTooltip = shortcut ? `${tooltip} (${getPlatformString(shortcut)})` : tooltip;
 
-    export let withoutShortcut = false;
     export let withoutState = false;
 
     const { focusedInput } = noteEditorContext.get();
@@ -27,12 +29,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 {#if withoutState}
-    <IconButton {tooltip} {disabled} on:click={action}>
+    <IconButton tooltip={theTooltip} {disabled} on:click={action}>
         <slot />
     </IconButton>
 
-    {#if !withoutShortcut}
-        <Shortcut keyCombination={shortcut} on:click={action} />
+    {#if shortcut}
+        <Shortcut keyCombination={shortcut} on:action={action} />
     {/if}
 {:else}
     <WithState
@@ -42,7 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         let:updateState
     >
         <IconButton
-            {tooltip}
+            tooltip={theTooltip}
             {active}
             {disabled}
             on:click={(event) => {
@@ -53,7 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <slot />
         </IconButton>
 
-        {#if !withoutShortcut}
+        {#if shortcut}
             <Shortcut
                 keyCombination={shortcut}
                 on:action={(event) => {

ts/editor/editor-toolbar/FormatBlockButtons.svelte

@@ -97,7 +97,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             <CommandIconButton
                                 key="justifyLeft"
                                 tooltip={tr.editingAlignLeft()}
-                                withoutShortcut
                                 --border-left-radius="5px"
                                 >{@html justifyLeftIcon}</CommandIconButton
                             >
@@ -105,21 +104,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             <CommandIconButton
                                 key="justifyCenter"
                                 tooltip={tr.editingCenter()}
-                                withoutShortcut
                                 >{@html justifyCenterIcon}</CommandIconButton
                             >
 
                             <CommandIconButton
                                 key="justifyRight"
                                 tooltip={tr.editingAlignRight()}
-                                withoutShortcut
                                 >{@html justifyRightIcon}</CommandIconButton
                             >
 
                             <CommandIconButton
                                 key="justifyFull"
                                 tooltip={tr.editingJustify()}
-                                withoutShortcut
                                 --border-right-radius="5px"
                                 >{@html justifyFullIcon}</CommandIconButton
                             >