Fix visual behavior of modal buttons in editor (#3009)

* Fix behavior of justification buttons

* Make list buttons update each other when clicked

Author: lucasscharenbroch

ts/editor/editor-toolbar/BlockButtons.svelte

@@ -77,6 +77,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     const rtl = window.getComputedStyle(document.body).direction === "rtl";
+
+    const justificationKeys = [
+        "justifyLeft",
+        "justifyCenter",
+        "justifyRight",
+        "justifyFull",
+    ];
+
+    const listKeys = ["insertUnorderedList", "insertOrderedList"];
 </script>
 
 <ButtonGroup>
@@ -92,6 +101,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 key="insertUnorderedList"
                 tooltip={tr.editingUnorderedList()}
                 shortcut="Control+,"
+                modeVariantKeys={listKeys}
             >
                 {@html ulIcon}
             </CommandIconButton>
@@ -102,6 +112,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 key="insertOrderedList"
                 tooltip={tr.editingOrderedList()}
                 shortcut="Control+."
+                modeVariantKeys={listKeys}
             >
                 {@html olIcon}
             </CommandIconButton>
@@ -138,6 +149,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                     <CommandIconButton
                                         key="justifyLeft"
                                         tooltip={tr.editingAlignLeft()}
+                                        modeVariantKeys={justificationKeys}
                                     >
                                         {@html justifyLeftIcon}
                                     </CommandIconButton>
@@ -147,6 +159,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                     <CommandIconButton
                                         key="justifyCenter"
                                         tooltip={tr.editingCenter()}
+                                        modeVariantKeys={justificationKeys}
                                     >
                                         {@html justifyCenterIcon}
                                     </CommandIconButton>
@@ -156,6 +169,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                     <CommandIconButton
                                         key="justifyRight"
                                         tooltip={tr.editingAlignRight()}
+                                        modeVariantKeys={justificationKeys}
                                     >
                                         {@html justifyRightIcon}
                                     </CommandIconButton>
@@ -165,6 +179,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                     <CommandIconButton
                                         key="justifyFull"
                                         tooltip={tr.editingJustify()}
+                                        modeVariantKeys={justificationKeys}
                                     >
                                         {@html justifyFullIcon}
                                     </CommandIconButton>

ts/editor/editor-toolbar/CommandIconButton.svelte

@@ -8,13 +8,15 @@ 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 { updateStateByKey } from "../../components/WithState.svelte";
     import { execCommand, queryCommandState } from "../../domlib";
     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 | null = null;
+    export let modeVariantKeys: string[] = [key];
 
     $: theTooltip = shortcut ? `${tooltip} (${getPlatformString(shortcut)})` : tooltip;
 
@@ -38,19 +40,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <Shortcut keyCombination={shortcut} on:action={action} />
     {/if}
 {:else}
-    <WithState
-        {key}
-        update={async () => queryCommandState(key)}
-        let:state={active}
-        let:updateState
-    >
+    <WithState {key} update={async () => queryCommandState(key)} let:state={active}>
         <IconButton
             tooltip={theTooltip}
             {active}
             {disabled}
             on:click={(event) => {
                 action();
-                updateState(event);
+                modeVariantKeys.map((key) => updateStateByKey(key, event));
             }}
         >
             <slot />
@@ -61,7 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 keyCombination={shortcut}
                 on:action={(event) => {
                     action();
-                    updateState(event);
+                    modeVariantKeys.map((key) => updateStateByKey(key, event));
                 }}
             />
         {/if}