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

@@ -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": [

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 {

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>
 

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>

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}

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}

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>

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)}
+        <SelectOption value={idx} disabled={disabled.includes(idx)}>
-            >{option}</SelectOption
+            {option}
-        >
+        </SelectOption>
     {/each}
 </Select>

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}
+                <button type="button" class="btn btn-primary" on:click={onOkClicked}>
-                    >OK</button
+                    OK
-                >
+                </button>
             </div>
         </div>
     </div>

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>

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>
 

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")}
+        <DropdownItem on:click={() => dispatch("add")}>
-            >{tr.deckConfigAddGroup()}</DropdownItem
+            {tr.deckConfigAddGroup()}
-        >
+        </DropdownItem>
-        <DropdownItem on:click={() => dispatch("clone")}
+        <DropdownItem on:click={() => dispatch("clone")}>
-            >{tr.deckConfigCloneGroup()}</DropdownItem
+            {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()}

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"
+                        <label for="prompt-input" class="col-form-label">
-                            >{prompt}:</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"
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-                    >Cancel</button
+                    Cancel
-                >
+                </button>
-                <button type="button" class="btn btn-primary" on:click={onOkClicked}
+                <button type="button" class="btn btn-primary" on:click={onOkClicked}>
-                    >OK</button
+                    OK
-                >
+                </button>
             </div>
         </div>
     </div>

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>

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"
+                <Badge --badge-color="tomato" --icon-align="top">
-                    >{@html alertIcon}</Badge
+                    {@html alertIcon}
-                >
+                </Badge>
                 <span>{@html hint}</span>
             </Notification>
         </Absolute>

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">

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">

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">

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>

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"
+                <span class="ms-auto ps-2 shortcut">
-                    >{getPlatformString(keyCombination)}</span
+                    {getPlatformString(keyCombination)}
-                >
+                </span>
             </DropdownItem>
         {/each}
     </Popover>

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>

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>

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>

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>

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>

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>

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>
 

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}

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}

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">

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>

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}
+<Badge class="d-flex align-items-center ms-1 {className}" on:click iconSize={80}>
-    >{@html deleteIcon}</Badge
+    {@html deleteIcon}
->
+</Badge>

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>

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")}
+        <DropdownItem on:click={() => dispatch("tagcopy")}>
-            >{tr.editingTagsCopy()} ({getPlatformString(copyShortcut)})</DropdownItem
+            {tr.editingTagsCopy()} ({getPlatformString(copyShortcut)})
-        >
+        </DropdownItem>
 
-        <DropdownItem on:click={() => dispatch("tagdelete")}
+        <DropdownItem on:click={() => dispatch("tagdelete")}>
-            >{tr.editingTagsRemove()} ({getPlatformString(
+            {tr.editingTagsRemove()} ({getPlatformString(removeShortcut)})
-                removeShortcut,
+        </DropdownItem>
-            )})</DropdownItem
-        >
     </Popover>
 </WithFloating>