[RegistryPreview] Adopt Monaco Editor (#35122)

.github/actions/spell-check/excludes.txt

@@ -2,11 +2,11 @@
 (?:^|/)(?i)COPYRIGHT
 (?:^|/)(?i)LICEN[CS]E
 (?:^|/)3rdparty/
-(?:^|/)FilePreviewCommon/Assets/Monaco/customLanguages/
-(?:^|/)FilePreviewCommon/Assets/Monaco/generateLanguagesJson.html
-(?:^|/)FilePreviewCommon/Assets/Monaco/index.html
-(?:^|/)FilePreviewCommon/Assets/Monaco/monaco_languages.json
-(?:^|/)FilePreviewCommon/Assets/Monaco/monacoSpecialLanguages.js
+(?:^|/)src/Monaco/customLanguages/
+(?:^|/)src/Monaco/generateLanguagesJson.html
+(?:^|/)src/Monaco/index.html
+(?:^|/)src/Monaco/monaco_languages.json
+(?:^|/)src/Monaco/monacoSpecialLanguages.js
 (?:^|/)go\.sum$
 (?:^|/)monacoSRC/
 (?:^|/)package(?:-lock|)\.json$
@@ -99,7 +99,7 @@
 ^\Q.pipelines/ESRPSigning_core.json\E$
 ^\Q.pipelines/sdl.gdnbaselines\E$
 ^\Qinstaller/PowerToysSetup/Settings.wxs\E$
-^\Qsrc/common/FilePreviewCommon/Assets/Monaco/monaco_languages.json\E$
+^\Qsrc/Monaco/monaco_languages.json\E$
 ^\Qsrc/common/ManagedCommon/ColorFormatHelper.cs\E$
 ^\Qsrc/common/notifications/BackgroundActivatorDLL/cpp.hint\E$
 ^\Qsrc/modules/colorPicker/ColorPickerUI/Assets/ColorPicker/colorPicker.cur\E$

PowerToys.sln

@@ -177,6 +177,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		Directory.Build.props = Directory.Build.props
 		Directory.Build.targets = Directory.Build.targets
 		Directory.Packages.props = Directory.Packages.props
+		src\Monaco.props = src\Monaco.props
 		Solution.props = Solution.props
 		src\Version.props = src\Version.props
 	EndProjectSection

doc/devdocs/common/FilePreviewCommon.md

@@ -12,14 +12,14 @@ This previewer is used for the File Explorer Dev File Previewer, as well as Powe
 
 1. Download Monaco editor with [npm](https://www.npmjs.com/): Run `npm i monaco-editor` in the command prompt.
 2. Delete everything except the `min` folder (the minimised code) from the downloaded files.
-3. Copy the `min` folder into the `src/common/FilePreviewCommon/Assets/Monaco/monacoSRC` folder of the PowerToys project.
+3. Copy the `min` folder into the `/src/Monaco/monacoSRC` folder of the PowerToys project.
 4. Generate the JSON file as described in the generate [monaco_languages.json file](#monaco_languagesjson) section.
 
 ### Add a new language definition
 
-As an example on how to add a new language definition you can look at the one for [registry files](/src/common/FilePreviewCommon/Assets/Monaco/customLanguages/reg.js).
+As an example on how to add a new language definition you can look at the one for [registry files](/src/Monaco/customLanguages/reg.js).
 
-1. Add the new language definition (written with [Monarch](https://microsoft.github.io/monaco-editor/monarch.html)) as a new file to the [folder containing Monaco custom languages](/src/common/FilePreviewCommon/Assets/Monaco/customLanguages/) (Remember the file name and the string you used for "idDefinition" as you need it later.). The file should be formatted like in the example below. (Please change `idDefinition` to the name of your language.)
+1. Add the new language definition (written with [Monarch](https://microsoft.github.io/monaco-editor/monarch.html)) as a new file to the [folder containing Monaco custom languages](/src/Monaco/customLanguages/) (Remember the file name and the string you used for "idDefinition" as you need it later.). The file should be formatted like in the example below. (Please change `idDefinition` to the name of your language.)
 
 ```javascript
 export function idDefinition() {
@@ -29,15 +29,15 @@ export function idDefinition() {
 }
 ```
 
-2. Add the following line to the [`monacoSpecialLanguages.js`](/src/common/FilePreviewCommon/Assets/Monaco/monacoSpecialLanguages.js) file, after the other import statements:
+2. Add the following line to the [`monacoSpecialLanguages.js`](/src/Monaco/monacoSpecialLanguages.js) file, after the other import statements:
 
 ```javascript
 import { idDefinition } from './customLanguages/file.js';
 ```
 
 > Replace file.js with the name of your definition file from step 1. Please replace idDefinition with the string you used in step 1.
 
-3. In the [`monacoSpecialLanguages.js`](/src/common/FilePreviewCommon/Assets/Monaco/monacoSpecialLanguages.js) file add the following line into the `registerAdditionalLanguages` function:
+3. In the [`monacoSpecialLanguages.js`](/src/Monaco/monacoSpecialLanguages.js) file add the following line into the `registerAdditionalLanguages` function:
 
 ```javascript
 registerAdditionalNewLanguage("id", [".fileExtension"], idDefinition(), monaco)
@@ -47,7 +47,7 @@ registerAdditionalNewLanguage("id", [".fileExtension"], idDefinition(), monaco)
 
   * The id can be anything. Recommended is one of the file extensions. For example "php" or "reg".
 
-4. In case you wish to add a custom color for a token, you can do so by adding the following line to [`customTokenColors.js`](/src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js):
+4. In case you wish to add a custom color for a token, you can do so by adding the following line to [`customTokenColors.js`](/src/Monaco/customTokenColors.js):
 ```javascript
 {token: 'token-name', foreground: 'ff0000'}
 ```
@@ -60,25 +60,25 @@ registerAdditionalNewLanguage("id", [".fileExtension"], idDefinition(), monaco)
 
 ### Add a new file extension to an existing language
 
-1. In the [`monacoSpecialLanguages.js`](/src/common/FilePreviewCommon/Assets/Monaco/monacoSpecialLanguages.js) file add the following line to the `registerAdditionalLanguages` function. (`existingId` is the id of the language you want to add the extension to. You can find these id's in the [`monaco_languages.json`](/src/common/FilePreviewCommon/Assets/Monaco/monaco_languages.json) file):
+1. In the [`monacoSpecialLanguages.js`](/src/Monaco/monacoSpecialLanguages.js) file add the following line to the `registerAdditionalLanguages` function. (`existingId` is the id of the language you want to add the extension to. You can find these id's in the [`monaco_languages.json`](/src/Monaco/monaco_languages.json) file):
 
 ```javascript
 registerAdditionalLanguage("id", [".fileExtension"], "existingId", monaco)
 ```
 
   * If for instance you want to add more extensions to the php language set the id to `phpExt` and the existingId to `php`.
 
-2. Copy the existing language definition into the `languageDefinitions` function in the same file. You can find the existing definitions in the following folder: [`/src/common/FilePreviewCommon/Assets/Monaco/monacoSRC/min/vs/basic-languages/`](/src/common/FilePreviewCommon/Assets/Monaco/monacoSRC/min/vs/basic-languages/).
+2. Copy the existing language definition into the `languageDefinitions` function in the same file. You can find the existing definitions in the following folder: [`/src/Monaco/monacoSRC/min/vs/basic-languages/`](/src/Monaco/monacoSRC/min/vs/basic-languages/).
 
 3. Execute the steps described in the [monaco_languages.json](#monaco_languagesjson) section.
 
 ### monaco_languages.json
 
-[`monaco_languages.json`](/src/common/FilePreviewCommon/Assets/Monaco/monaco_languages.json) contains all extensions and IDs for the languages supported by Monaco. The [`MonacoHelper`](/src/common/FilePreviewCommon/MonacoHelper.cs) class and the installer are using this file to register preview handlers for the defined extensions.
+[`monaco_languages.json`](/src/Monaco/monaco_languages.json) contains all extensions and IDs for the languages supported by Monaco. The [`MonacoHelper`](/src/common/FilePreviewCommon/MonacoHelper.cs) class and the installer are using this file to register preview handlers for the defined extensions.
 
-After updating Monaco Editor and/or adding a new language you should update the [`monaco_languages.json`](/src/common/FilePreviewCommon/Assets/Monaco/monaco_languages.json) file.
+After updating Monaco Editor and/or adding a new language you should update the [`monaco_languages.json`](/src/Monaco/monaco_languages.json) file.
 
-1. Run the [`generateLanguagesJson.html`](/src/common/FilePreviewCommon/Assets/Monaco/generateLanguagesJson.html) file on a local webserver (as webbrowsers will block certain needed features when running the file locally.)
+1. Run the [`generateLanguagesJson.html`](/src/Monaco/generateLanguagesJson.html) file on a local webserver (as webbrowsers will block certain needed features when running the file locally.)
   *  This can for example be achieved by using the [Preview Server](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server) extension for Visual Studio Code: Open the file in Visual Studio Code, right click in the code editor and select `vscode-preview-server: Launch on browser`. The file will be opened in a browser.
 2. The browser will download the new `monaco_languages.json` file
 3. Replace the old file with the newly downloaded one in the source code folder.

installer/PowerToysSetup/PowerToysInstaller.wixproj

@@ -181,7 +181,7 @@ call powershell.exe -NonInteractive -executionpolicy Unrestricted -File $(MSBuil
 	<Target Name="AfterBuild">
 	</Target> -->
   <Target Name="BeforeBuild">
-    <HeatDirectory Directory="..\..\src\common\FilePreviewCommon\Assets\Monaco\monacoSRC" PreprocessorVariable="var.MonacoSRCHarvestPath" OutputFile="MonacoSRC.wxs" ComponentGroupName="MonacoSRCHeatGenerated" DirectoryRefId="MonacoPreviewHandlerMonacoSRCFolder" AutogenerateGuids="false" GenerateGuidsNow="true" ToolPath="$(WixToolPath)" RunAsSeparateProcess="true" SuppressFragments="false" SuppressRegistry="false" SuppressRootDirectory="true" />
+    <HeatDirectory Directory="..\..\src\Monaco\monacoSRC" PreprocessorVariable="var.MonacoSRCHarvestPath" OutputFile="MonacoSRC.wxs" ComponentGroupName="MonacoSRCHeatGenerated" DirectoryRefId="MonacoPreviewHandlerMonacoSRCFolder" AutogenerateGuids="false" GenerateGuidsNow="true" ToolPath="$(WixToolPath)" RunAsSeparateProcess="true" SuppressFragments="false" SuppressRegistry="false" SuppressRootDirectory="true" />
   </Target>
   <!-- Prevents NU1503 -->
   <Target Name="_IsProjectRestoreSupported" Returns="@(_ValidProjectsForRestore)">

src/Monaco.props

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Include Monaco Editor source code -->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup>
+    <None Include="$(MSBuildThisFileDirectory)\Monaco\customTokenColors.js">
+      <Link>Assets\Monaco\customTokenColors.js</Link>
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="$(MSBuildThisFileDirectory)\Monaco\monacoSpecialLanguages.js">
+      <Link>Assets\Monaco\monacoSpecialLanguages.js</Link>
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="$(MSBuildThisFileDirectory)\Monaco\index.html">
+      <Link>Assets\Monaco\index.html</Link>
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="$(MSBuildThisFileDirectory)\Monaco\monaco_languages.json">
+      <Link>Assets\Monaco\monaco_languages.json</Link>
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Include="$(MSBuildThisFileDirectory)\Monaco\monacoSRC\**">
+      <Link>Assets\Monaco\monacoSRC\%(RecursiveDir)%(FileName)%(Extension)</Link>
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+   <None Include="$(MSBuildThisFileDirectory)\Monaco\customLanguages\**">
+      <Link>Assets\Monaco\customLanguages\%(RecursiveDir)%(FileName)%(Extension)</Link>
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+  </ItemGroup>
+</Project>

src/common/FilePreviewCommon/FilePreviewCommon.csproj

@@ -1,6 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
   <!-- Look at Directory.Build.props in root for common stuff as well -->
   <Import Project="..\..\Common.Dotnet.CsWinRT.props" />
+  <Import Project="..\..\Monaco.props" />
 
   <PropertyGroup>
     <Description>PowerToys FilePreviewCommon</Description>
@@ -15,28 +16,4 @@
     <PackageReference Include="System.Text.Encoding.CodePages" />
     <PackageReference Include="UTF.Unknown" />
   </ItemGroup>
-
-  <ItemGroup>
-    <None Update="Assets\Monaco\customLanguages\reg.js">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </None>
-    <None Update="Assets\Monaco\customLanguages\gitignore.js">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </None>
-    <None Update="Assets\Monaco\index.html">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </None>
-    <None Update="Assets\Monaco\monacoSpecialLanguages.js">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </None>
-    <None Update="Assets\Monaco\customTokenColors.js">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </None>
-    <Content Include="Assets\Monaco\monacoSRC\**">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </Content>
-    <None Update="Assets\Monaco\monaco_languages.json">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </None>
-  </ItemGroup>
 </Project>

src/modules/registrypreview/RegistryPreviewUILib/Assets/RegistryPreview/index.html

@@ -0,0 +1,64 @@
+<!doctype HTML>
+<html>
+<head>
+	<!-- Set browser to Edge-->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<!-- Set charset -->
+	<meta charset="utf-8" />
+	<!-- Title (normally not displayed)-->
+	<title>Registry Preview Editor</title>
+	<style>
+		/* Fits content to window size */
+		html, body {
+			padding: 0;
+		}
+
+		#container, .monaco-editor {
+			position: fixed;
+			height: 100%;
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+		}
+
+		.overflowingContentWidgets {
+			/*Hides alert box */
+			display: none !important
+		}
+	</style>
+</head>
+
+<body>
+	<!-- Container for the editor -->
+	<div id="container"></div>
+	<!-- Script -->
+	<script src="http://PowerToysLocalMonaco/monacoSRC/min/vs/loader.js"></script>
+	<script type="module">
+        import { registerAdditionalLanguages } from 'http://PowerToysLocalMonaco/monacoSpecialLanguages.js';
+        import { customTokenColors } from 'http://PowerToysLocalMonaco/customTokenColors.js';
+        require.config({ paths: { vs: 'http://PowerToysLocalMonaco/monacoSRC/min/vs' } });
+		require(['vs/editor/editor.main'], async function () {
+            await registerAdditionalLanguages(monaco)
+
+            const editor = monaco.editor.create(document.getElementById('container'), {
+				automaticLayout: true,
+				language: 'reg',
+                minimap: { enabled: false },
+            });
+
+            window.onresize = () => {
+                editor.layout();
+			};
+
+            editor.getModel().onDidChangeContent((event) => {
+                window.chrome.webview.postMessage({ 'id': 'contentChanged', 'content': editor.getValue() });
+			});
+
+			editor.focus();
+
+            window.editor = editor;
+		});      
+	</script>
+</body>
+</html>

src/modules/registrypreview/RegistryPreviewUILib/MonacoEditorControl.xaml

@@ -0,0 +1,35 @@
+<UserControl
+    x:Class="RegistryPreviewUILib.MonacoEditorControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:RegistryPreviewUILib"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
+    mc:Ignorable="d">
+
+    <UserControl.Resources>
+        <tkconverters:BoolToVisibilityConverter
+            x:Key="BoolToInvertedVisibilityConverter"
+            FalseValue="Visible"
+            TrueValue="Collapsed" />
+    </UserControl.Resources>
+
+    <Grid>
+        <ProgressRing
+            Width="48"
+            Height="48"
+            Visibility="{x:Bind IsLoading, Mode=OneWay}" />
+        <Border
+            BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
+            BorderThickness="1"
+            Visibility="{x:Bind IsLoading, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
+            <controls:WebView2
+                x:Name="Browser"
+                HorizontalAlignment="Stretch"
+                VerticalAlignment="Stretch"
+                Loaded="Browser_Loaded" />
+        </Border>
+    </Grid>
+</UserControl>