fix(TextComponent): add white-space pre formatting for inline text (C…

…CBlueX#4985) * fix(TextComponent): add white-space pre formatting for inline text * feat(TextComponent): add preFormattingMonospace * fix(multiplayer): disable preFormattingMonospace for TextComponent
commandblock2 · Dec 31, 2024 · dea9149 · dea9149
1 parent 6697138
commit dea9149
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src-theme/src/routes/menu/common/TextComponent.svelte b/src-theme/src/routes/menu/common/TextComponent.svelte
@@ -3,6 +3,7 @@
 
     export let textComponent: TTextComponent | string;
     export let allowPreformatting = false;
+    export let preFormattingMonospace = true;
     export let inheritedColor = "#ffffff";
     export let inheritedStrikethrough = false;
     export let inheritedItalic = false;
@@ -107,7 +108,7 @@
 
 <span class="text-component">
     {#if typeof textComponent === "string"}
-        <svelte:self {fontSize} {allowPreformatting} textComponent={convertLegacyCodes(textComponent)}/>
+        <svelte:self {fontSize} {allowPreformatting} {preFormattingMonospace} textComponent={convertLegacyCodes(textComponent)}/>
     {:else if textComponent}
         {#if textComponent.text}
             {#if !textComponent.text.includes("§")}
@@ -116,9 +117,10 @@
                       class:underlined={textComponent.underlined !== undefined ? textComponent.underlined : inheritedUnderlined}
                       class:strikethrough={textComponent.strikethrough !== undefined ? textComponent.strikethrough : inheritedStrikethrough}
                       class:allow-preformatting={allowPreformatting}
+                      class:monospace={preFormattingMonospace && allowPreformatting}
                       style="color: {textComponent.color !== undefined ? translateColor(textComponent.color) : translateColor(inheritedColor)}; font-size: {fontSize}px;">{textComponent.text}</span>
             {:else}
-                <svelte:self {allowPreformatting} {fontSize}
+                <svelte:self {allowPreformatting} {preFormattingMonospace} {fontSize}
                              inheritedColor={textComponent.color !== undefined ? textComponent.color : inheritedColor}
                              inheritedBold={textComponent.bold !== undefined ? textComponent.bold : inheritedBold}
                              inheritedItalic={textComponent.italic !== undefined ? textComponent.italic : inheritedItalic}
@@ -129,7 +131,7 @@
         {/if}
         {#if textComponent.extra}
             {#each textComponent.extra as e}
-                <svelte:self {allowPreformatting} {fontSize}
+                <svelte:self {allowPreformatting} {preFormattingMonospace} {fontSize}
                              inheritedColor={textComponent.color !== undefined ? textComponent.color : inheritedColor}
                              inheritedBold={textComponent.bold !== undefined ? textComponent.bold : inheritedBold}
                              inheritedItalic={textComponent.italic !== undefined ? textComponent.italic : inheritedItalic}
@@ -150,10 +152,13 @@
         display: inline;
 
         &.allow-preformatting {
-            font-family: monospace;
             white-space: pre;
         }
 
+        &.monospace {
+            font-family: monospace;
+        }
+
         &.bold {
             font-weight: 500;
         }

diff --git a/src-theme/src/routes/menu/multiplayer/Multiplayer.svelte b/src-theme/src/routes/menu/multiplayer/Multiplayer.svelte
@@ -177,7 +177,7 @@
                             :`data:image/png;base64,${server.icon}`}
                               title={server.name}
                               on:dblclick={() => connectToServer(server.address)}>
-                    <TextComponent slot="subtitle" fontSize={18}
+                    <TextComponent allowPreformatting={true} preFormattingMonospace={false} slot="subtitle" fontSize={18}
                                    textComponent={server.ping <= 0 ? "§CCan't connect to server" : server.label}/>
 
                     <svelte:fragment slot="tag">