[RegistryPreview] Adopt Monaco Editor

[davidegiacometti]

Summary of the Pull Request

PR Checklist

• Closes: Use monaco viewer to reg edit previewer #34988
• Communication: I've discussed this with core contributors already. If work hasn't been agreed, this work might be rejected
• Tests: Added/updated and all pass
• Localization: All end user facing strings can be localized
• Dev docs: Added/updated
• New binaries: Added on the required places
  • JSON for signing for new binaries
  • WXS for installer for new binaries and localization folder
  • YML for CI pipeline for new test projects
  • YML for signed pipeline
• Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

Detailed Description of the Pull Request / Additional comments

• Moved Monaco source code in a common location
• Replaced the TextBox with a WebView2 control that loads Monaco Editor
• Throttle UI refresh to at least 250ms when user type in the editor
• Fixed a crash when multiple ContentDialog are opened
  Easy reproducible on stable opening a new Registry Preview, typing fast on the TextBox and press Enter quickly

TODO

• Decouple from FilePreviewCommon project
• Share Monaco Editor source code between Peek, RegistryPreview and PreviewHandler projects
• Simulate an upgrade of PowerToys.RegistryPreviewUILib NuGet package in DevHome and validate that Monaco is working as expected
• Investigate high contrast theme - vs and vs-dark theme are handled in HC mode

Validation Steps Performed

• Performed a clean build of the user installer and validated that Monaco is still working in Peek and PreviewHandler
• Performed a clean build of the machine installer and validated that Monaco is still working in Peek and PreviewHandler
• Tested RegistryPreview
  • Explorer > .reg file > Open with > Registry Preview
  • Open File
  • Reload
  • Save
  • Save as
  • Write to Registry
  • Monaco Copy/Paste
  • Load test: verified that the Editor is still responsive with a 5K lines file

[htcfreek]

Does an on off switch (settings or RegistryPreviewUi) makes sense? 🤔

[davidegiacometti]

@htcfreek I think we can abstract the editor under an IEditor interface with two implementation: Monaco Editor Control and TextBox, then add an option to switch between the two modes.
Wondering what's the use case to stick with the TextBox 🤔

[htcfreek]

@htcfreek I think we can abstract the editor under an IEditor interface with two implementation: Monaco Editor Control and TextBox, then add an option to switch between the two modes.
Wondering what's the use case to stick with the TextBox 🤔

Only thought that not everybody like the colored view. And maybe with complex file it is easier to have no color than to have a rainbow.

[davidegiacometti]

This is ready for review! 😃

• I wasn't able to simulate an upgrade of the NuGet package in DevHome due to the WASDK mismatch but I will do it once DevHome will be on 1.6 too.
  If we are lucky, adding the new required assets in the package should be enough 🤞

• Let me know if we want to add an option to turn on/off Monaco.

[stefansjfw]

Can we disable command pallete? Not sure if it can cause any harm, but I'd argue it's too much to have for just a text input

[davidegiacometti]

Hi @stefansjfw

Unfortunately there is no API to disable the command palette but I managed to achieve that with a few lines of JavaScript 😅

// Remove the command palette item from the context menu: https://github.com/microsoft/monaco-editor/issues/1280#issuecomment-2099873176
const contextmenu = editor.getContribution('editor.contrib.contextmenu');
const realMethod = contextmenu._getMenuActions;
contextmenu._getMenuActions = function () {
    const items = realMethod.apply(contextmenu, arguments);
    return items.filter(function (item) {
        return item.id != 'editor.action.quickCommand';
    });
};

// Prevent pressing F1 from opening the command palette
editor.addCommand(monaco.KeyCode.F1, function () { });

It's working fine and I am not against doing that, just keep in mind that some actions from the command palette are still accessible using the relative shortcut.
Also not a big deal but I think this solution will have to be tested after upgrading Monaco.

Would like to know your thoughts about the solution before pushing the change.

Thanks for the review! 😃

[htcfreek]

Wondering if disabling command palette is really needed. I mean, it does annoys the users.

[stefansjfw]

Looks good! Nice work!

[stefansjfw]

are these two needed? can we turn them off?

[davidegiacometti]

Double checked this before merge but we need them
Scripts of course are needed to run Monaco 😄
Web messages are used for the communication between Monaco and Registry Preview

PowerToys/src/modules/registrypreview/RegistryPreviewUILib/MonacoEditorControl.xaml.cs

Lines 112 to 114 in 2c21979

	private void CoreWebView2_WebMessageReceived(CoreWebView2 sender, CoreWebView2WebMessageReceivedEventArgs args)
	{
	var json = JsonNode.Parse(args.WebMessageAsJson);

[stefansjfw]

got it. thank you. feel free to merge whenever :)

[stefansjfw]

Wondering if disabling command palette is really needed. I mean, it does annoys the users.

let's leave it. It can be useful for some more power users that use RegPrev for editing and writing reg files