[RegistryPreview] Adopt Monaco Editor (#35122)

This commit is contained in:
Davide Giacometti 2024-10-24 21:55:51 +02:00 committed by GitHub
parent b0be69a1b7
commit f9127b63a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
135 changed files with 456 additions and 133 deletions

View File

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

View File

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

View File

@ -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. 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. 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. 4. Generate the JSON file as described in the generate [monaco_languages.json file](#monaco_languagesjson) section.
### Add a new language definition ### 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 ```javascript
export function idDefinition() { export function idDefinition() {
@ -29,7 +29,7 @@ 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 ```javascript
import { idDefinition } from './customLanguages/file.js'; import { idDefinition } from './customLanguages/file.js';
@ -37,7 +37,7 @@ 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. > 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 ```javascript
registerAdditionalNewLanguage("id", [".fileExtension"], idDefinition(), monaco) 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". * 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 ```javascript
{token: 'token-name', foreground: 'ff0000'} {token: 'token-name', foreground: 'ff0000'}
``` ```
@ -60,7 +60,7 @@ registerAdditionalNewLanguage("id", [".fileExtension"], idDefinition(), monaco)
### Add a new file extension to an existing language ### 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 ```javascript
registerAdditionalLanguage("id", [".fileExtension"], "existingId", monaco) registerAdditionalLanguage("id", [".fileExtension"], "existingId", monaco)
@ -68,17 +68,17 @@ 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`. * 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. 3. Execute the steps described in the [monaco_languages.json](#monaco_languagesjson) section.
### monaco_languages.json ### 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. * 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 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. 3. Replace the old file with the newly downloaded one in the source code folder.

View File

@ -181,7 +181,7 @@ call powershell.exe -NonInteractive -executionpolicy Unrestricted -File $(MSBuil
<Target Name="AfterBuild"> <Target Name="AfterBuild">
</Target> --> </Target> -->
<Target Name="BeforeBuild"> <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> </Target>
<!-- Prevents NU1503 --> <!-- Prevents NU1503 -->
<Target Name="_IsProjectRestoreSupported" Returns="@(_ValidProjectsForRestore)"> <Target Name="_IsProjectRestoreSupported" Returns="@(_ValidProjectsForRestore)">

30
src/Monaco.props Normal file
View File

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

Some files were not shown because too many files have changed in this diff Show More