diff --git a/ts/editor/editor-toolbar/BlockButtons.svelte b/ts/editor/editor-toolbar/BlockButtons.svelte index 01406132c..ae000c1fa 100644 --- a/ts/editor/editor-toolbar/BlockButtons.svelte +++ b/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"]; @@ -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} @@ -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} @@ -138,6 +149,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {@html justifyLeftIcon} @@ -147,6 +159,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {@html justifyCenterIcon} @@ -156,6 +169,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {@html justifyRightIcon} @@ -165,6 +179,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {@html justifyFullIcon} diff --git a/ts/editor/editor-toolbar/CommandIconButton.svelte b/ts/editor/editor-toolbar/CommandIconButton.svelte index 7a22773d7..fa165dab7 100644 --- a/ts/editor/editor-toolbar/CommandIconButton.svelte +++ b/ts/editor/editor-toolbar/CommandIconButton.svelte @@ -8,6 +8,7 @@ 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"; @@ -15,6 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html 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 {/if} {:else} - queryCommandState(key)} - let:state={active} - let:updateState - > + queryCommandState(key)} let:state={active}> { action(); - updateState(event); + modeVariantKeys.map((key) => updateStateByKey(key, event)); }} > @@ -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}