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.
2025-09-18 22:12:21 -04:00 · 2023-06-01 11:11:26 +10:00 · 2023-06-01 11:11:26 +10:00 · e63b4b9927
commit e63b4b9927
parent 06a5ada99b
34 changed files with 185 additions and 101 deletions
--- 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": [
--- 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 {
--- 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>

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

--- 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()}
--- 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>
--- 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>
--- 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>
--- 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">
--- 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">
--- 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">
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>

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