[Monaco]Add option to set font size (#32559)

* Add setting to enable/disable it and add Peek support

* Add ability to set font size

src/common/FilePreviewCommon/Assets/Monaco/index.html

@@ -17,6 +17,8 @@
         var base64code = "[[PT_CODE]]";
 
         var stickyScroll = ([[PT_STICKY_SCROLL]] == 1) ? true : false;
+
+        var fontSize = [[PT_FONT_SIZE]];
         
         // Code taken from https://stackoverflow.com/a/30106551/14774889
         var code = decodeURIComponent(atob(base64code).split('').map(function(c) {
@@ -80,6 +82,7 @@
 
                 },
                 stickyScroll: {enabled: stickyScroll},
+                fontSize: fontSize,
                 wordWrap: (wrap?"on":"off") // Word wraps
             });
             window.onresize = function (){

src/modules/peek/Peek.FilePreviewer/Models/IPreviewSettings.cs

@@ -10,6 +10,8 @@ namespace Peek.FilePreviewer.Models
 
         public bool SourceCodeTryFormat { get; }
 
+        public int SourceCodeFontSize { get; }
+
         public bool SourceCodeStickyScroll { get; }
     }
 }

src/modules/peek/Peek.FilePreviewer/Models/PreviewSettings.cs

@@ -25,6 +25,8 @@ namespace Peek.FilePreviewer.Models
 
         public bool SourceCodeTryFormat { get; private set; }
 
+        public int SourceCodeFontSize { get; private set; }
+
         public bool SourceCodeStickyScroll { get; private set; }
 
         public PreviewSettings()
@@ -32,6 +34,7 @@ namespace Peek.FilePreviewer.Models
             _settingsUtils = new SettingsUtils();
             SourceCodeWrapText = false;
             SourceCodeTryFormat = false;
+            SourceCodeFontSize = 14;
             SourceCodeStickyScroll = true;
 
             LoadSettingsFromJson();
@@ -64,6 +67,7 @@ namespace Peek.FilePreviewer.Models
                         {
                             SourceCodeWrapText = settings.SourceCodeWrapText.Value;
                             SourceCodeTryFormat = settings.SourceCodeTryFormat.Value;
+                            SourceCodeFontSize = settings.SourceCodeFontSize.Value;
                             SourceCodeStickyScroll = settings.SourceCodeStickyScroll.Value;
                         }
 

src/modules/peek/Peek.FilePreviewer/Previewers/WebBrowserPreviewer/Helpers/MonacoHelper.cs

@@ -4,6 +4,7 @@
 
 using System;
 using System.Collections.Generic;
+using System.Globalization;
 using System.IO;
 using System.Linq;
 using System.Text.Json;
@@ -45,13 +46,13 @@ namespace Peek.FilePreviewer.Previewers
         /// <summary>
         /// Prepares temp html for the previewing
         /// </summary>
-        public static string PreviewTempFile(string fileText, string extension, string tempFolder, bool tryFormat, bool wrapText, bool stickyScroll)
+        public static string PreviewTempFile(string fileText, string extension, string tempFolder, bool tryFormat, bool wrapText, bool stickyScroll, int fontSize)
         {
             // TODO: check if file is too big, add MaxFileSize to settings
-            return InitializeIndexFileAndSelectedFile(fileText, extension, tempFolder, tryFormat, wrapText, stickyScroll);
+            return InitializeIndexFileAndSelectedFile(fileText, extension, tempFolder, tryFormat, wrapText, stickyScroll, fontSize);
         }
 
-        private static string InitializeIndexFileAndSelectedFile(string fileContent, string extension, string tempFolder, bool tryFormat, bool wrapText, bool stickyScroll)
+        private static string InitializeIndexFileAndSelectedFile(string fileContent, string extension, string tempFolder, bool tryFormat, bool wrapText, bool stickyScroll, int fontSize)
         {
             string vsCodeLangSet = Microsoft.PowerToys.FilePreviewCommon.MonacoHelper.GetLanguage(extension);
 
@@ -81,6 +82,7 @@ namespace Peek.FilePreviewer.Previewers
             html = html.Replace("[[PT_WRAP]]", wrapText ? "1" : "0", StringComparison.InvariantCulture);
             html = html.Replace("[[PT_STICKY_SCROLL]]", stickyScroll ? "1" : "0", StringComparison.InvariantCulture);
             html = html.Replace("[[PT_THEME]]", theme, StringComparison.InvariantCulture);
+            html = html.Replace("[[PT_FONT_SIZE]]", fontSize.ToString(CultureInfo.InvariantCulture), StringComparison.InvariantCulture);
             html = html.Replace("[[PT_CODE]]", base64FileCode, StringComparison.InvariantCulture);
             html = html.Replace("[[PT_URL]]", Microsoft.PowerToys.FilePreviewCommon.MonacoHelper.VirtualHostName, StringComparison.InvariantCulture);
 

src/modules/peek/Peek.FilePreviewer/Previewers/WebBrowserPreviewer/WebBrowserPreviewer.cs

@@ -112,7 +112,7 @@ namespace Peek.FilePreviewer.Previewers
                     if (IsDevFilePreview && !isHtml && !isMarkdown)
                     {
                         var raw = await ReadHelper.Read(File.Path.ToString());
-                        Preview = new Uri(MonacoHelper.PreviewTempFile(raw, File.Extension, TempFolderPath.Path, _previewSettings.SourceCodeTryFormat, _previewSettings.SourceCodeWrapText, _previewSettings.SourceCodeStickyScroll));
+                        Preview = new Uri(MonacoHelper.PreviewTempFile(raw, File.Extension, TempFolderPath.Path, _previewSettings.SourceCodeTryFormat, _previewSettings.SourceCodeWrapText, _previewSettings.SourceCodeStickyScroll, _previewSettings.SourceCodeFontSize));
                     }
                     else if (isMarkdown)
                     {

src/modules/previewpane/MonacoPreviewHandler/MonacoPreviewHandlerControl.cs

@@ -397,6 +397,8 @@ namespace Microsoft.PowerToys.PreviewHandler.Monaco
             _html = _html.Replace("[[PT_LANG]]", _vsCodeLangSet, StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_WRAP]]", _settings.Wrap ? "1" : "0", StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_THEME]]", Settings.GetTheme(), StringComparison.InvariantCulture);
+            _html = _html.Replace("[[PT_STICKY_SCROLL]]", _settings.StickyScroll ? "1" : "0", StringComparison.InvariantCulture);
+            _html = _html.Replace("[[PT_FONT_SIZE]]", _settings.FontSize.ToString(CultureInfo.InvariantCulture), StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_CODE]]", _base64FileCode, StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_STICKY_SCROLL]]", _settings.StickyScroll ? "1" : "0", StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_URL]]", FilePreviewCommon.MonacoHelper.VirtualHostName, StringComparison.InvariantCulture);

src/modules/previewpane/MonacoPreviewHandler/Settings.cs

@@ -77,6 +77,26 @@ namespace Microsoft.PowerToys.PreviewHandler.Monaco
             }
         }
 
+        /// <summary>
+        /// Gets the font size for the previewer. Set by PT settings.
+        /// </summary>
+        public double FontSize
+        {
+            get
+            {
+                try
+                {
+                    return moduleSettings.GetSettings<PowerPreviewSettings>(PowerPreviewSettings.ModuleName).Properties.MonacoPreviewFontSize.Value;
+                }
+                catch (FileNotFoundException)
+                {
+                    // Couldn't read the settings.
+                    // Assume default of 14.
+                    return 14;
+                }
+            }
+        }
+
         /// <summary>
         /// Gets a value indicating whether sticky scroll should be enabled. Set by PT settings.
         /// </summary>

src/settings-ui/Settings.UI.Library/PeekPreviewSettings.cs

@@ -16,12 +16,15 @@ namespace Settings.UI.Library
 
         public BoolProperty SourceCodeTryFormat { get; set; }
 
+        public IntProperty SourceCodeFontSize { get; set; }
+
         public BoolProperty SourceCodeStickyScroll { get; set; }
 
         public PeekPreviewSettings()
         {
             SourceCodeWrapText = new BoolProperty(false);
             SourceCodeTryFormat = new BoolProperty(false);
+            SourceCodeFontSize = new IntProperty(14);
             SourceCodeStickyScroll = new BoolProperty(true);
         }
 

src/settings-ui/Settings.UI.Library/PowerPreviewProperties.cs

@@ -15,6 +15,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
     {
         public const string DefaultStlThumbnailColor = "#FFC924";
         public const int DefaultMonacoMaxFileSize = 50;
+        public const int DefaultMonacoFontSize = 14;
         public const int DefaultSvgBackgroundColorMode = (int)SvgPreviewColorMode.Default;
         public const string DefaultSvgBackgroundSolidColor = "#FFFFFF";
         public const int DefaultSvgBackgroundCheckeredShade = (int)SvgPreviewCheckeredShade.Light;
@@ -133,6 +134,9 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         [JsonPropertyName("monaco-previewer-max-file-size")]
         public IntProperty MonacoPreviewMaxFileSize { get; set; }
 
+        [JsonPropertyName("monaco-previewer-font-size")]
+        public IntProperty MonacoPreviewFontSize { get; set; }
+
         private bool monacoPreviewStickyScroll = true;
 
         [JsonPropertyName("monaco-previewer-sticky-scroll")]
@@ -279,6 +283,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             SvgBackgroundCheckeredShade = new IntProperty(DefaultSvgBackgroundCheckeredShade);
             StlThumbnailColor = new StringProperty(DefaultStlThumbnailColor);
             MonacoPreviewMaxFileSize = new IntProperty(DefaultMonacoMaxFileSize);
+            MonacoPreviewFontSize = new IntProperty(DefaultMonacoFontSize);
         }
 
         public override string ToString()

src/settings-ui/Settings.UI/SettingsXAML/Views/PeekPage.xaml

@@ -55,6 +55,14 @@
                                     IsChecked="{x:Bind ViewModel.SourceCodeTryFormat, Mode=TwoWay}"
                                     IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}" />
                             </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard x:Uid="Peek_SourceCode_FontSize" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
+                                <NumberBox
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    Maximum="100"
+                                    Minimum="2"
+                                    SpinButtonPlacementMode="Compact"
+                                    Value="{x:Bind ViewModel.SourceCodeFontSize, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
                             <tkcontrols:SettingsCard ContentAlignment="Left" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                                 <CheckBox x:Uid="Peek_SourceCode_StickyScroll" IsChecked="{x:Bind ViewModel.SourceCodeStickyScroll, Mode=TwoWay}" />
                             </tkcontrols:SettingsCard>

src/settings-ui/Settings.UI/SettingsXAML/Views/PowerPreviewPage.xaml

@@ -89,6 +89,14 @@
                                     SpinButtonPlacementMode="Compact"
                                     Value="{x:Bind ViewModel.MonacoPreviewMaxFileSize, Mode=TwoWay}" />
                             </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard x:Uid="FileExplorerPreview_Toggle_Monaco_Font_Size" IsEnabled="{x:Bind ViewModel.MonacoRenderIsEnabled, Mode=OneWay}">
+                                <NumberBox
+                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                    Maximum="100"
+                                    Minimum="2"
+                                    SpinButtonPlacementMode="Compact"
+                                    Value="{x:Bind ViewModel.MonacoPreviewFontSize, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
                             <tkcontrols:SettingsCard ContentAlignment="Left" IsEnabled="{x:Bind ViewModel.MonacoRenderIsEnabled, Mode=OneWay}">
                                 <CheckBox
                                     x:Uid="FileExplorerPreview_ToggleSwitch_Monaco_Sticky_Scroll"

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -4068,4 +4068,18 @@ Activate by holding the key for the character you want to add an accent to, then
   <data name="Peek_SourceCode_StickyScroll.Content" xml:space="preserve">
     <value>Enable sticky scroll</value>
   </data>
+  <data name="FileExplorerPreview_Toggle_Monaco_Font_Size.Description" xml:space="preserve">
+    <value>Font size of the editor in pt. Recommended: 14pt</value>
+    <comment>{Locked="pt"}</comment>
+  </data>
+  <data name="FileExplorerPreview_Toggle_Monaco_Font_Size.Header" xml:space="preserve">
+    <value>Font size </value>
+  </data>
+  <data name="Peek_SourceCode_FontSize.Description" xml:space="preserve">
+    <value>Font size of the editor in pt. Recommended: 14pt</value>
+    <comment>{Locked="pt"}</comment>
+  </data>
+  <data name="Peek_SourceCode_FontSize.Header" xml:space="preserve">
+    <value>Font size</value>
+  </data>
 </root>

src/settings-ui/Settings.UI/ViewModels/PeekViewModel.cs

@@ -173,6 +173,20 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
         }
 
+        public int SourceCodeFontSize
+        {
+            get => _peekPreviewSettings.SourceCodeFontSize.Value;
+            set
+            {
+                if (_peekPreviewSettings.SourceCodeFontSize.Value != value)
+                {
+                    _peekPreviewSettings.SourceCodeFontSize.Value = value;
+                    OnPropertyChanged(nameof(SourceCodeFontSize));
+                    SavePreviewSettings();
+                }
+            }
+        }
+
         public bool SourceCodeStickyScroll
         {
             get => _peekPreviewSettings.SourceCodeStickyScroll.Value;

src/settings-ui/Settings.UI/ViewModels/PowerPreviewViewModel.cs

@@ -92,6 +92,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             _monacoWrapText = Settings.Properties.EnableMonacoPreviewWordWrap;
             _monacoPreviewTryFormat = Settings.Properties.MonacoPreviewTryFormat;
             _monacoMaxFileSize = Settings.Properties.MonacoPreviewMaxFileSize.Value;
+            _monacoFontSize = Settings.Properties.MonacoPreviewFontSize.Value;
             _monacoStickyScroll = Settings.Properties.MonacoPreviewStickyScroll;
 
             _pdfRenderEnabledGpoRuleConfiguration = GPOWrapper.GetConfiguredPdfPreviewEnabledValue();
@@ -233,6 +234,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         private bool _monacoPreviewTryFormat;
         private int _monacoMaxFileSize;
         private bool _monacoStickyScroll;
+        private int _monacoFontSize;
 
         private GpoRuleConfigured _pdfRenderEnabledGpoRuleConfiguration;
         private bool _pdfRenderEnabledStateIsGPOConfigured;
@@ -615,6 +617,24 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
         }
 
+        public int MonacoPreviewFontSize
+        {
+            get
+            {
+                return _monacoFontSize;
+            }
+
+            set
+            {
+                if (_monacoFontSize != value)
+                {
+                    _monacoFontSize = value;
+                    Settings.Properties.MonacoPreviewFontSize.Value = value;
+                    RaisePropertyChanged();
+                }
+            }
+        }
+
         public bool PDFRenderIsEnabled
         {
             get