From e63b4b992723551101554c14e6d61ea52d40027d Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Thu, 1 Jun 2023 11:11:26 +1000
Subject: [PATCH] Experiment with disabling prettier whitespace sensitivity

Prettier by default tries to preserve whitespace around inline tags,
which can prevent problems such as a space before the period in
'<a>text</a>.':

https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

Unfortunately only standard HTML block elements are excluded from this
behaviour, so all of our Svelte components are treated the same way, even
if they are block-based, or used in a way where the extra whitespace
doesn't matter. This makes the code somewhat harder to read.

Changing this option does carry the risk that rogue spaces will creep
into our UI in the future as code is formatted, but as there don't appear
to be any such issues with this initial reformat, I think the improved
readability may justify the relatively small risk.
---
 .dprint.json                                  |  3 ++-
 ts/components/CheckBox.svelte                 |  5 ++++-
 ts/deck-options/AdvancedOptions.svelte        | 19 ++++++++++++------
 ts/deck-options/AudioOptions.svelte           |  7 +++++--
 ts/deck-options/BuryOptions.svelte            | 10 +++++++---
 ts/deck-options/DailyLimits.svelte            | 10 +++++++---
 ts/deck-options/DisplayOrder.svelte           | 19 +++++++++++++-----
 ts/deck-options/EnumSelector.svelte           |  6 +++---
 ts/deck-options/HelpModal.svelte              |  6 +++---
 ts/deck-options/LapseOptions.svelte           | 12 +++++++----
 ts/deck-options/NewOptions.svelte             | 13 ++++++++----
 ts/deck-options/SaveButton.svelte             | 17 ++++++++--------
 ts/deck-options/TextInputModal.svelte         | 18 ++++++++---------
 ts/deck-options/TimerOptions.svelte           |  8 ++++++--
 ts/editor/NoteEditor.svelte                   |  6 +++---
 ts/editor/PlainTextBadge.svelte               |  4 +++-
 ts/editor/RichTextBadge.svelte                |  4 +++-
 ts/editor/StickyBadge.svelte                  |  4 +++-
 ts/editor/editor-toolbar/BlockButtons.svelte  | 20 +++++++++++++------
 ts/editor/editor-toolbar/LatexButton.svelte   |  6 +++---
 ts/editor/image-overlay/FloatButtons.svelte   | 12 ++++++++---
 ts/editor/image-overlay/ImageOverlay.svelte   |  5 +++--
 ts/editor/image-overlay/SizeSelect.svelte     |  8 ++++++--
 .../mathjax-overlay/MathjaxButtons.svelte     |  4 +++-
 ts/graphs/CardCounts.svelte                   |  5 ++++-
 ts/graphs/ReviewsGraph.svelte                 |  5 ++++-
 ts/image-occlusion/SideToolbar.svelte         |  4 +++-
 ts/image-occlusion/Toast.svelte               |  4 ++--
 .../notes-toolbar/MoreTools.svelte            |  4 +++-
 .../notes-toolbar/TextFormatting.svelte       |  4 +++-
 ts/import-csv/Tags.svelte                     |  8 ++++----
 ts/tag-editor/TagDeleteBadge.svelte           |  6 +++---
 ts/tag-editor/WithAutocomplete.svelte         |  6 ++++--
 .../TagsSelectedButton.svelte                 | 14 ++++++-------
 34 files changed, 185 insertions(+), 101 deletions(-)

diff --git a/.dprint.json b/.dprint.json
index f23774ae9..00cf437b2 100644
--- a/.dprint.json
+++ b/.dprint.json
@@ -11,7 +11,8 @@
         "trailingComma": "all",
         "printWidth": 88,
         "tabWidth": 4,
-        "semi": true
+        "semi": true,
+        "htmlWhitespaceSensitivity": "ignore"
     },
     "includes": ["**/*.{ts,tsx,js,jsx,cjs,mjs,json,md,toml,svelte}"],
     "excludes": [
diff --git a/ts/components/CheckBox.svelte b/ts/components/CheckBox.svelte
index aa5ddafa0..3038b86f4 100644
--- a/ts/components/CheckBox.svelte
+++ b/ts/components/CheckBox.svelte
@@ -6,7 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let value: boolean;
 </script>
 
-<label><input type="checkbox" bind:checked={value} /><slot /></label>
+<label>
+    <input type="checkbox" bind:checked={value} />
+    <slot />
+</label>
 
 <style lang="scss">
     label {
diff --git a/ts/deck-options/AdvancedOptions.svelte b/ts/deck-options/AdvancedOptions.svelte
index 741fc8633..8cfc99539 100644
--- a/ts/deck-options/AdvancedOptions.svelte
+++ b/ts/deck-options/AdvancedOptions.svelte
@@ -96,8 +96,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("maximumInterval"))}
-                    >{settings.maximumInterval.title}</SettingTitle
                 >
+                    {settings.maximumInterval.title}
+                </SettingTitle>
             </SpinBoxRow>
         </Item>
 
@@ -111,8 +112,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("startingEase"))}
-                    >{settings.startingEase.title}</SettingTitle
                 >
+                    {settings.startingEase.title}
+                </SettingTitle>
             </SpinBoxFloatRow>
         </Item>
 
@@ -126,8 +128,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("easyBonus"))}
-                    >{settings.easyBonus.title}</SettingTitle
                 >
+                    {settings.easyBonus.title}
+                </SettingTitle>
             </SpinBoxFloatRow>
         </Item>
 
@@ -142,8 +145,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("intervalModifier"),
-                        )}>{settings.intervalModifier.title}</SettingTitle
+                        )}
                 >
+                    {settings.intervalModifier.title}
+                </SettingTitle>
             </SpinBoxFloatRow>
         </Item>
 
@@ -157,8 +162,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("hardInterval"))}
-                    >{settings.hardInterval.title}</SettingTitle
                 >
+                    {settings.hardInterval.title}
+                </SettingTitle>
             </SpinBoxFloatRow>
         </Item>
 
@@ -171,8 +177,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("newInterval"))}
-                    >{settings.newInterval.title}</SettingTitle
                 >
+                    {settings.newInterval.title}
+                </SettingTitle>
             </SpinBoxFloatRow>
         </Item>
 
diff --git a/ts/deck-options/AudioOptions.svelte b/ts/deck-options/AudioOptions.svelte
index 5d9ddb307..4165645ec 100644
--- a/ts/deck-options/AudioOptions.svelte
+++ b/ts/deck-options/AudioOptions.svelte
@@ -64,8 +64,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("disableAutoplay"))}
-                    >{settings.disableAutoplay.title}</SettingTitle
                 >
+                    {settings.disableAutoplay.title}
+                </SettingTitle>
             </SwitchRow>
         </Item>
 
@@ -78,8 +79,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("skipQuestionWhenReplaying"),
-                        )}>{settings.skipQuestionWhenReplaying.title}</SettingTitle
+                        )}
                 >
+                    {settings.skipQuestionWhenReplaying.title}
+                </SettingTitle>
             </SwitchRow>
         </Item>
     </DynamicallySlottable>
diff --git a/ts/deck-options/BuryOptions.svelte b/ts/deck-options/BuryOptions.svelte
index 2a4d2b314..b7cc839b4 100644
--- a/ts/deck-options/BuryOptions.svelte
+++ b/ts/deck-options/BuryOptions.svelte
@@ -69,8 +69,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("buryNewSiblings"))}
-                    >{settings.buryNewSiblings.title}</SettingTitle
                 >
+                    {settings.buryNewSiblings.title}
+                </SettingTitle>
             </SwitchRow>
         </Item>
 
@@ -83,8 +84,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("buryReviewSiblings"),
-                        )}>{settings.buryReviewSiblings.title}</SettingTitle
+                        )}
                 >
+                    {settings.buryReviewSiblings.title}
+                </SettingTitle>
             </SwitchRow>
         </Item>
 
@@ -101,8 +104,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                     "buryInterdayLearningSiblings",
                                 ),
                             )}
-                        >{settings.buryInterdayLearningSiblings.title}</SettingTitle
                     >
+                        {settings.buryInterdayLearningSiblings.title}
+                    </SettingTitle>
                 </SwitchRow>
             </Item>
         {/if}
diff --git a/ts/deck-options/DailyLimits.svelte b/ts/deck-options/DailyLimits.svelte
index 46653c7b2..21653d863 100644
--- a/ts/deck-options/DailyLimits.svelte
+++ b/ts/deck-options/DailyLimits.svelte
@@ -178,8 +178,9 @@
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("newLimit"))}
-                    >{settings.newLimit.title}</SettingTitle
                 >
+                    {settings.newLimit.title}
+                </SettingTitle>
             </SpinBoxRow>
         </Item>
 
@@ -192,8 +193,9 @@
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("reviewLimit"))}
-                    >{settings.reviewLimit.title}</SettingTitle
                 >
+                    {settings.reviewLimit.title}
+                </SettingTitle>
             </SpinBoxRow>
         </Item>
 
@@ -210,8 +212,10 @@
                                 Object.keys(settings).indexOf(
                                     "newCardsIgnoreReviewLimit",
                                 ),
-                            )}>{settings.newCardsIgnoreReviewLimit.title}</SettingTitle
+                            )}
                     >
+                        {settings.newCardsIgnoreReviewLimit.title}
+                    </SettingTitle>
                 </SwitchRow>
             </Item>
         {/if}
diff --git a/ts/deck-options/DisplayOrder.svelte b/ts/deck-options/DisplayOrder.svelte
index d5f558ed0..61528d5ef 100644
--- a/ts/deck-options/DisplayOrder.svelte
+++ b/ts/deck-options/DisplayOrder.svelte
@@ -148,8 +148,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("newGatherPriority"),
-                        )}>{settings.newGatherPriority.title}</SettingTitle
+                        )}
                 >
+                    {settings.newGatherPriority.title}
+                </SettingTitle>
             </EnumSelectorRow>
         </Item>
 
@@ -164,8 +166,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("newCardSortOrder"),
-                        )}>{settings.newCardSortOrder.title}</SettingTitle
+                        )}
                 >
+                    {settings.newCardSortOrder.title}
+                </SettingTitle>
             </EnumSelectorRow>
         </Item>
 
@@ -179,8 +183,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("newReviewPriority"),
-                        )}>{settings.newReviewPriority.title}</SettingTitle
+                        )}
                 >
+                    {settings.newReviewPriority.title}
+                </SettingTitle>
             </EnumSelectorRow>
         </Item>
 
@@ -194,8 +200,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("interdayStepPriority"),
-                        )}>{settings.interdayStepPriority.title}</SettingTitle
+                        )}
                 >
+                    {settings.interdayStepPriority.title}
+                </SettingTitle>
             </EnumSelectorRow>
         </Item>
 
@@ -208,8 +216,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("reviewSortOrder"))}
-                    >{settings.reviewSortOrder.title}</SettingTitle
                 >
+                    {settings.reviewSortOrder.title}
+                </SettingTitle>
             </EnumSelectorRow>
         </Item>
     </DynamicallySlottable>
diff --git a/ts/deck-options/EnumSelector.svelte b/ts/deck-options/EnumSelector.svelte
index c383b66bd..503058458 100644
--- a/ts/deck-options/EnumSelector.svelte
+++ b/ts/deck-options/EnumSelector.svelte
@@ -15,8 +15,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <Select bind:value {label}>
     {#each options as option, idx}
-        <SelectOption value={idx} disabled={disabled.includes(idx)}
-            >{option}</SelectOption
-        >
+        <SelectOption value={idx} disabled={disabled.includes(idx)}>
+            {option}
+        </SelectOption>
     {/each}
 </Select>
diff --git a/ts/deck-options/HelpModal.svelte b/ts/deck-options/HelpModal.svelte
index 0b2d06bcb..766944d15 100644
--- a/ts/deck-options/HelpModal.svelte
+++ b/ts/deck-options/HelpModal.svelte
@@ -130,9 +130,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </Row>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-primary" on:click={onOkClicked}
-                    >OK</button
-                >
+                <button type="button" class="btn btn-primary" on:click={onOkClicked}>
+                    OK
+                </button>
             </div>
         </div>
     </div>
diff --git a/ts/deck-options/LapseOptions.svelte b/ts/deck-options/LapseOptions.svelte
index ad9ac70b4..93909b03c 100644
--- a/ts/deck-options/LapseOptions.svelte
+++ b/ts/deck-options/LapseOptions.svelte
@@ -92,8 +92,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("relearningSteps"))}
-                    >{settings.relearningSteps.title}</SettingTitle
                 >
+                    {settings.relearningSteps.title}
+                </SettingTitle>
             </StepsInputRow>
         </Item>
 
@@ -106,8 +107,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("minimumInterval"))}
-                    >{settings.minimumInterval.title}</SettingTitle
                 >
+                    {settings.minimumInterval.title}
+                </SettingTitle>
             </SpinBoxRow>
         </Item>
 
@@ -124,8 +126,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("leechThreshold"))}
-                    >{settings.leechThreshold.title}</SettingTitle
                 >
+                    {settings.leechThreshold.title}
+                </SettingTitle>
             </SpinBoxRow>
         </Item>
 
@@ -139,8 +142,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("leechAction"))}
-                    >{settings.leechAction.title}</SettingTitle
                 >
+                    {settings.leechAction.title}
+                </SettingTitle>
             </EnumSelectorRow>
         </Item>
     </DynamicallySlottable>
diff --git a/ts/deck-options/NewOptions.svelte b/ts/deck-options/NewOptions.svelte
index f623ed204..0198b97f3 100644
--- a/ts/deck-options/NewOptions.svelte
+++ b/ts/deck-options/NewOptions.svelte
@@ -108,8 +108,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("learningSteps"))}
-                    >{settings.learningSteps.title}</SettingTitle
                 >
+                    {settings.learningSteps.title}
+                </SettingTitle>
             </StepsInputRow>
         </Item>
 
@@ -122,8 +123,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("graduatingInterval"),
-                        )}>{settings.graduatingInterval.title}</SettingTitle
+                        )}
                 >
+                    {settings.graduatingInterval.title}
+                </SettingTitle>
             </SpinBoxRow>
         </Item>
 
@@ -139,8 +142,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("easyInterval"))}
-                    >{settings.easyInterval.title}</SettingTitle
                 >
+                    {settings.easyInterval.title}
+                </SettingTitle>
             </SpinBoxRow>
         </Item>
 
@@ -158,8 +162,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <SettingTitle
                     on:click={() =>
                         openHelpModal(Object.keys(settings).indexOf("insertionOrder"))}
-                    >{settings.insertionOrder.title}</SettingTitle
                 >
+                    {settings.insertionOrder.title}
+                </SettingTitle>
             </EnumSelectorRow>
         </Item>
 
diff --git a/ts/deck-options/SaveButton.svelte b/ts/deck-options/SaveButton.svelte
index 8fc0e1206..a50ecf679 100644
--- a/ts/deck-options/SaveButton.svelte
+++ b/ts/deck-options/SaveButton.svelte
@@ -95,17 +95,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {@html chevronDown}
     </IconButton>
     <Popover slot="floating">
-        <DropdownItem on:click={() => dispatch("add")}
-            >{tr.deckConfigAddGroup()}</DropdownItem
-        >
-        <DropdownItem on:click={() => dispatch("clone")}
-            >{tr.deckConfigCloneGroup()}</DropdownItem
-        >
+        <DropdownItem on:click={() => dispatch("add")}>
+            {tr.deckConfigAddGroup()}
+        </DropdownItem>
+        <DropdownItem on:click={() => dispatch("clone")}>
+            {tr.deckConfigCloneGroup()}
+        </DropdownItem>
         <DropdownItem on:click={() => dispatch("rename")}>
             {tr.deckConfigRenameGroup()}
         </DropdownItem>
-        <DropdownItem on:click={removeConfig}>{tr.deckConfigRemoveGroup()}</DropdownItem
-        >
+        <DropdownItem on:click={removeConfig}>
+            {tr.deckConfigRemoveGroup()}
+        </DropdownItem>
         <DropdownDivider />
         <DropdownItem on:click={() => save(true)}>
             {tr.deckConfigSaveToAllSubdecks()}
diff --git a/ts/deck-options/TextInputModal.svelte b/ts/deck-options/TextInputModal.svelte
index 0271737be..f4718cb70 100644
--- a/ts/deck-options/TextInputModal.svelte
+++ b/ts/deck-options/TextInputModal.svelte
@@ -66,9 +66,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <div class="modal-body">
                 <form on:submit|preventDefault={onOkClicked}>
                     <div class="mb-3">
-                        <label for="prompt-input" class="col-form-label"
-                            >{prompt}:</label
-                        >
+                        <label for="prompt-input" class="col-form-label">
+                            {prompt}:
+                        </label>
                         <input
                             id="prompt-input"
                             bind:this={inputRef}
@@ -81,12 +81,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </form>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
-                    >Cancel</button
-                >
-                <button type="button" class="btn btn-primary" on:click={onOkClicked}
-                    >OK</button
-                >
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                    Cancel
+                </button>
+                <button type="button" class="btn btn-primary" on:click={onOkClicked}>
+                    OK
+                </button>
             </div>
         </div>
     </div>
diff --git a/ts/deck-options/TimerOptions.svelte b/ts/deck-options/TimerOptions.svelte
index e9c2e9860..d296e65de 100644
--- a/ts/deck-options/TimerOptions.svelte
+++ b/ts/deck-options/TimerOptions.svelte
@@ -74,8 +74,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:click={() =>
                         openHelpModal(
                             Object.keys(settings).indexOf("maximumAnswerSecs"),
-                        )}>{settings.maximumAnswerSecs.title}</SettingTitle
+                        )}
                 >
+                    {settings.maximumAnswerSecs.title}
+                </SettingTitle>
             </SpinBoxRow>
         </Item>
 
@@ -94,8 +96,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         on:click={() =>
                             openHelpModal(
                                 Object.keys(settings).indexOf("showAnswerTimer"),
-                            )}>{settings.showAnswerTimer.title}</SettingTitle
+                            )}
                     >
+                        {settings.showAnswerTimer.title}
+                    </SettingTitle>
                 </SwitchRow>
             </div>
         </Item>
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 212b55f8b..8d35f8b42 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -448,9 +448,9 @@ the AddCards dialog) should be implemented in the user of this component.
     {#if hint}
         <Absolute bottom right --margin="10px">
             <Notification>
-                <Badge --badge-color="tomato" --icon-align="top"
-                    >{@html alertIcon}</Badge
-                >
+                <Badge --badge-color="tomato" --icon-align="top">
+                    {@html alertIcon}
+                </Badge>
                 <span>{@html hint}</span>
             </Notification>
         </Absolute>
diff --git a/ts/editor/PlainTextBadge.svelte b/ts/editor/PlainTextBadge.svelte
index a82f1f428..51b46aa50 100644
--- a/ts/editor/PlainTextBadge.svelte
+++ b/ts/editor/PlainTextBadge.svelte
@@ -39,8 +39,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <Badge
         tooltip="{tr.editingToggleHtmlEditor()} ({getPlatformString(keyCombination)})"
-        iconSize={80}>{@html plainTextIcon}</Badge
+        iconSize={80}
     >
+        {@html plainTextIcon}
+    </Badge>
 </span>
 
 <style lang="scss">
diff --git a/ts/editor/RichTextBadge.svelte b/ts/editor/RichTextBadge.svelte
index 2fce343d6..a76e3dc51 100644
--- a/ts/editor/RichTextBadge.svelte
+++ b/ts/editor/RichTextBadge.svelte
@@ -39,8 +39,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <Badge
         tooltip="{tr.editingToggleVisualEditor()} ({getPlatformString(keyCombination)})"
-        iconSize={80}>{@html richTextIcon}</Badge
+        iconSize={80}
     >
+        {@html richTextIcon}
+    </Badge>
 </span>
 
 <style lang="scss">
diff --git a/ts/editor/StickyBadge.svelte b/ts/editor/StickyBadge.svelte
index 5790daa9e..b420788c8 100644
--- a/ts/editor/StickyBadge.svelte
+++ b/ts/editor/StickyBadge.svelte
@@ -42,8 +42,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <Badge
         tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
-        widthMultiplier={0.7}>{@html stickyIcon}</Badge
+        widthMultiplier={0.7}
     >
+        {@html stickyIcon}
+    </Badge>
 </span>
 
 <style lang="scss">
diff --git a/ts/editor/editor-toolbar/BlockButtons.svelte b/ts/editor/editor-toolbar/BlockButtons.svelte
index 821bc0056..9ca7d3cfc 100644
--- a/ts/editor/editor-toolbar/BlockButtons.svelte
+++ b/ts/editor/editor-toolbar/BlockButtons.svelte
@@ -89,16 +89,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <CommandIconButton
                 key="insertUnorderedList"
                 tooltip={tr.editingUnorderedList()}
-                shortcut="Control+,">{@html ulIcon}</CommandIconButton
+                shortcut="Control+,"
             >
+                {@html ulIcon}
+            </CommandIconButton>
         </ButtonGroupItem>
 
         <ButtonGroupItem>
             <CommandIconButton
                 key="insertOrderedList"
                 tooltip={tr.editingOrderedList()}
-                shortcut="Control+.">{@html olIcon}</CommandIconButton
+                shortcut="Control+."
             >
+                {@html olIcon}
+            </CommandIconButton>
         </ButtonGroupItem>
 
         <ButtonGroupItem>
@@ -126,27 +130,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                 tooltip={tr.editingAlignLeft()}
                                 --border-left-radius="5px"
                                 --border-right-radius="0px"
-                                >{@html justifyLeftIcon}</CommandIconButton
                             >
+                                {@html justifyLeftIcon}
+                            </CommandIconButton>
 
                             <CommandIconButton
                                 key="justifyCenter"
                                 tooltip={tr.editingCenter()}
-                                >{@html justifyCenterIcon}</CommandIconButton
                             >
+                                {@html justifyCenterIcon}
+                            </CommandIconButton>
 
                             <CommandIconButton
                                 key="justifyRight"
                                 tooltip={tr.editingAlignRight()}
-                                >{@html justifyRightIcon}</CommandIconButton
                             >
+                                {@html justifyRightIcon}
+                            </CommandIconButton>
 
                             <CommandIconButton
                                 key="justifyFull"
                                 tooltip={tr.editingJustify()}
                                 --border-right-radius="5px"
-                                >{@html justifyFullIcon}</CommandIconButton
                             >
+                                {@html justifyFullIcon}
+                            </CommandIconButton>
                         </ButtonGroup>
 
                         <ButtonGroup>
diff --git a/ts/editor/editor-toolbar/LatexButton.svelte b/ts/editor/editor-toolbar/LatexButton.svelte
index 35163bdd6..b5a28db79 100644
--- a/ts/editor/editor-toolbar/LatexButton.svelte
+++ b/ts/editor/editor-toolbar/LatexButton.svelte
@@ -100,9 +100,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {#each dropdownItems as [callback, keyCombination, label]}
             <DropdownItem on:click={() => setTimeout(callback, 100)}>
                 <span>{label}</span>
-                <span class="ms-auto ps-2 shortcut"
-                    >{getPlatformString(keyCombination)}</span
-                >
+                <span class="ms-auto ps-2 shortcut">
+                    {getPlatformString(keyCombination)}
+                </span>
             </DropdownItem>
         {/each}
     </Popover>
diff --git a/ts/editor/image-overlay/FloatButtons.svelte b/ts/editor/image-overlay/FloatButtons.svelte
index ed0c4ff86..dbda123d7 100644
--- a/ts/editor/image-overlay/FloatButtons.svelte
+++ b/ts/editor/image-overlay/FloatButtons.svelte
@@ -36,8 +36,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             image.style.float = "left";
             setTimeout(() => dispatch("update"));
         }}
-        --border-left-radius="5px">{@html inlineStartIcon}</IconButton
+        --border-left-radius="5px"
     >
+        {@html inlineStartIcon}
+    </IconButton>
 
     <IconButton
         tooltip={tr.editingFloatNone()}
@@ -49,8 +51,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             image.style.float = "none";
             removeStyleProperties(image, "float");
             setTimeout(() => dispatch("update"));
-        }}>{@html floatNoneIcon}</IconButton
+        }}
     >
+        {@html floatNoneIcon}
+    </IconButton>
 
     <IconButton
         tooltip={tr.editingFloatRight()}
@@ -60,6 +64,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             image.style.float = "right";
             setTimeout(() => dispatch("update"));
         }}
-        --border-right-radius="5px">{@html inlineEndIcon}</IconButton
+        --border-right-radius="5px"
     >
+        {@html inlineEndIcon}
+    </IconButton>
 </ButtonGroup>
diff --git a/ts/editor/image-overlay/ImageOverlay.svelte b/ts/editor/image-overlay/ImageOverlay.svelte
index 759e7dca3..8f28cda83 100644
--- a/ts/editor/image-overlay/ImageOverlay.svelte
+++ b/ts/editor/image-overlay/ImageOverlay.svelte
@@ -308,8 +308,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     {:else}
                         <span>{actualWidth}&times;{actualHeight}</span>
                         {#if customDimensions}
-                            <span>(Original: {naturalWidth}&times;{naturalHeight})</span
-                            >
+                            <span>
+                                (Original: {naturalWidth}&times;{naturalHeight})
+                            </span>
                         {/if}
                     {/if}
                 </HandleLabel>
diff --git a/ts/editor/image-overlay/SizeSelect.svelte b/ts/editor/image-overlay/SizeSelect.svelte
index 2805c41cc..547c12223 100644
--- a/ts/editor/image-overlay/SizeSelect.svelte
+++ b/ts/editor/image-overlay/SizeSelect.svelte
@@ -28,13 +28,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         flipX={$direction === "rtl"}
         tooltip="{tr.editingActualSize()} ({tr.editingDoubleClickImage()})"
         on:click={() => dispatch("imagetoggle")}
-        --border-left-radius="5px">{@html icon}</IconButton
+        --border-left-radius="5px"
     >
+        {@html icon}
+    </IconButton>
 
     <IconButton
         disabled={restoringDisabled}
         tooltip={tr.editingRestoreOriginalSize()}
         on:click={() => dispatch("imageclear")}
-        --border-right-radius="5px">{@html sizeClear}</IconButton
+        --border-right-radius="5px"
     >
+        {@html sizeClear}
+    </IconButton>
 </ButtonGroup>
diff --git a/ts/editor/mathjax-overlay/MathjaxButtons.svelte b/ts/editor/mathjax-overlay/MathjaxButtons.svelte
index 2857cd04b..881800d66 100644
--- a/ts/editor/mathjax-overlay/MathjaxButtons.svelte
+++ b/ts/editor/mathjax-overlay/MathjaxButtons.svelte
@@ -45,7 +45,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tooltip={tr.actionsDelete()}
             on:click={() => dispatch("delete")}
             --border-left-radius="5px"
-            --border-right-radius="5px">{@html deleteIcon}</IconButton
+            --border-right-radius="5px"
         >
+            {@html deleteIcon}
+        </IconButton>
     </ButtonGroup>
 </ButtonToolbar>
diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 67876129d..5ba56f455 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/ts/graphs/CardCounts.svelte
@@ -76,7 +76,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {/each}
 
                 <tr>
-                    <td><span style="visibility: hidden;">■</span> {total}</td>
+                    <td>
+                        <span style="visibility: hidden;">■</span>
+                        {total}
+                    </td>
                     <td class="right">{graphData.totalCards}</td>
                     <td />
                 </tr>
diff --git a/ts/graphs/ReviewsGraph.svelte b/ts/graphs/ReviewsGraph.svelte
index ed286f524..06afbafff 100644
--- a/ts/graphs/ReviewsGraph.svelte
+++ b/ts/graphs/ReviewsGraph.svelte
@@ -57,7 +57,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <Graph {title} {subtitle}>
     <InputBox>
-        <label> <input type="checkbox" bind:checked={showTime} /> {time} </label>
+        <label>
+            <input type="checkbox" bind:checked={showTime} />
+            {time}
+        </label>
 
         <GraphRangeRadios bind:graphRange {revlogRange} followRevlog={true} />
     </InputBox>
diff --git a/ts/image-occlusion/SideToolbar.svelte b/ts/image-occlusion/SideToolbar.svelte
index 7728d680b..5a0b38c31 100644
--- a/ts/image-occlusion/SideToolbar.svelte
+++ b/ts/image-occlusion/SideToolbar.svelte
@@ -57,8 +57,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             active={activeTool === tool.id}
             on:click={() => {
                 activeTool = tool.id;
-            }}>{@html tool.icon}</IconButton
+            }}
         >
+            {@html tool.icon}
+        </IconButton>
     {/each}
 </div>
 
diff --git a/ts/image-occlusion/Toast.svelte b/ts/image-occlusion/Toast.svelte
index df83be331..df263122d 100644
--- a/ts/image-occlusion/Toast.svelte
+++ b/ts/image-occlusion/Toast.svelte
@@ -19,8 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <div class="toast {type === 'success' ? 'success' : 'error'}">
             {message}
             <IconButton iconSize={96} on:click={closeToast} class="toast-icon">
-                {@html mdiClose}</IconButton
-            >
+                {@html mdiClose}
+            </IconButton>
         </div>
     </div>
 {/if}
diff --git a/ts/image-occlusion/notes-toolbar/MoreTools.svelte b/ts/image-occlusion/notes-toolbar/MoreTools.svelte
index 6abba6155..415b21beb 100644
--- a/ts/image-occlusion/notes-toolbar/MoreTools.svelte
+++ b/ts/image-occlusion/notes-toolbar/MoreTools.svelte
@@ -24,6 +24,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class="note-tool-icon-button right-border-radius"
         {iconSize}
         on:click={() => tool.action()}
-        tooltip={tool.title}>{@html tool.icon}</IconButton
+        tooltip={tool.title}
     >
+        {@html tool.icon}
+    </IconButton>
 {/each}
diff --git a/ts/image-occlusion/notes-toolbar/TextFormatting.svelte b/ts/image-occlusion/notes-toolbar/TextFormatting.svelte
index 3d0b62a23..559d45bee 100644
--- a/ts/image-occlusion/notes-toolbar/TextFormatting.svelte
+++ b/ts/image-occlusion/notes-toolbar/TextFormatting.svelte
@@ -46,8 +46,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={() => {
             // setActiveTool(tool);
             textFormat(tool);
-        }}>{@html tool.icon}</IconButton
+        }}
     >
+        {@html tool.icon}
+    </IconButton>
 {/each}
 
 <style lang="scss">
diff --git a/ts/import-csv/Tags.svelte b/ts/import-csv/Tags.svelte
index a233162d5..7976b5bfc 100644
--- a/ts/import-csv/Tags.svelte
+++ b/ts/import-csv/Tags.svelte
@@ -24,8 +24,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tags={globalTagsWritable}
             on:tagsupdate={({ detail }) => (globalTags = detail.tags)}
             keyCombination={"Control+T"}
-        /></Col
-    >
+        />
+    </Col>
 </Row>
 <Row --cols={2}>
     <Col>{tr.importingTagUpdatedNotes()}</Col>
@@ -33,6 +33,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <TagEditor
             tags={updatedTagsWritable}
             on:tagsupdate={({ detail }) => (updatedTags = detail.tags)}
-        /></Col
-    >
+        />
+    </Col>
 </Row>
diff --git a/ts/tag-editor/TagDeleteBadge.svelte b/ts/tag-editor/TagDeleteBadge.svelte
index 15dcd69e2..eeed772a7 100644
--- a/ts/tag-editor/TagDeleteBadge.svelte
+++ b/ts/tag-editor/TagDeleteBadge.svelte
@@ -10,6 +10,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 </script>
 
-<Badge class="d-flex align-items-center ms-1 {className}" on:click iconSize={80}
-    >{@html deleteIcon}</Badge
->
+<Badge class="d-flex align-items-center ms-1 {className}" on:click iconSize={80}>
+    {@html deleteIcon}
+</Badge>
diff --git a/ts/tag-editor/WithAutocomplete.svelte b/ts/tag-editor/WithAutocomplete.svelte
index 93ad9016d..0161067ff 100644
--- a/ts/tag-editor/WithAutocomplete.svelte
+++ b/ts/tag-editor/WithAutocomplete.svelte
@@ -150,8 +150,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         }}
                         on:mouseenter={(event) => selectIfMousedown(event, index)}
                         on:mouseleave={() => (active = false)}
-                        >{suggestion}</AutocompleteItem
                     >
+                        {suggestion}
+                    </AutocompleteItem>
                 {:else}
                     <AutocompleteItem
                         on:mousedown={() => setSelectedAndActive(index)}
@@ -160,8 +161,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             chooseSelected();
                         }}
                         on:mouseenter={(event) => selectIfMousedown(event, index)}
-                        >{suggestion}</AutocompleteItem
                     >
+                        {suggestion}
+                    </AutocompleteItem>
                 {/if}
             {/each}
         </div>
diff --git a/ts/tag-editor/tag-options-button/TagsSelectedButton.svelte b/ts/tag-editor/tag-options-button/TagsSelectedButton.svelte
index a00f9eb53..98f44843e 100644
--- a/ts/tag-editor/tag-options-button/TagsSelectedButton.svelte
+++ b/ts/tag-editor/tag-options-button/TagsSelectedButton.svelte
@@ -38,15 +38,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             {tr.editingTagsSelectAll()} ({getPlatformString(selectAllShortcut)})
         </DropdownItem>
 
-        <DropdownItem on:click={() => dispatch("tagcopy")}
-            >{tr.editingTagsCopy()} ({getPlatformString(copyShortcut)})</DropdownItem
-        >
+        <DropdownItem on:click={() => dispatch("tagcopy")}>
+            {tr.editingTagsCopy()} ({getPlatformString(copyShortcut)})
+        </DropdownItem>
 
-        <DropdownItem on:click={() => dispatch("tagdelete")}
-            >{tr.editingTagsRemove()} ({getPlatformString(
-                removeShortcut,
-            )})</DropdownItem
-        >
+        <DropdownItem on:click={() => dispatch("tagdelete")}>
+            {tr.editingTagsRemove()} ({getPlatformString(removeShortcut)})
+        </DropdownItem>
     </Popover>
 </WithFloating>