From dea91498482df511becb8fa333fdfa13f10f7dbc Mon Sep 17 00:00:00 2001
From: sokripon <sokripon@gmail.com>
Date: Mon, 30 Dec 2024 03:44:38 +0100
Subject: [PATCH] fix(TextComponent): add white-space pre formatting for inline
 text (#4985)

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

* feat(TextComponent): add preFormattingMonospace

* fix(multiplayer): disable preFormattingMonospace for TextComponent
---
 .../src/routes/menu/common/TextComponent.svelte     | 13 +++++++++----
 .../src/routes/menu/multiplayer/Multiplayer.svelte  |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src-theme/src/routes/menu/common/TextComponent.svelte b/src-theme/src/routes/menu/common/TextComponent.svelte
index 86afd86bf224..78fc521d5544 100644
--- 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
index 32eb4fa5d027..ec54a208a875 100644
--- 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">