mirror of
https://github.com/microsoft/PowerToys.git
synced 2024-11-27 14:59:16 +08:00
[RegistryPreview] Adopt Monaco Editor (#35122)
This commit is contained in:
parent
b0be69a1b7
commit
f9127b63a5
12
.github/actions/spell-check/excludes.txt
vendored
12
.github/actions/spell-check/excludes.txt
vendored
@ -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$
|
||||
|
@ -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
|
||||
|
@ -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,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
|
||||
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.
|
||||
|
||||
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,7 +60,7 @@ 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)
|
||||
@ -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`.
|
||||
|
||||
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.
|
||||
|
@ -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)">
|
||||
|
30
src/Monaco.props
Normal file
30
src/Monaco.props
Normal 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
Loading…
Reference in New Issue
Block a user