[Dev file preview]Add wrap text setting (#16486)

* Push (not working)

* Add Context menu

* push

* Adress feedback

* Update installer

* Fix build

* Fix warnings
This commit is contained in:
Aaron Junker
2022-03-25 18:29:33 +01:00
committed by GitHub
parent 4aadaf9bf1
commit 79227b9db6
8 changed files with 123 additions and 21 deletions

View File

@@ -49,6 +49,7 @@
<ItemGroup>
<ProjectReference Include="..\..\..\common\Common.UI\Common.UI.csproj" />
<ProjectReference Include="..\..\..\settings-ui\Settings.UI.Library\Settings.UI.Library.csproj" />
<ProjectReference Include="..\common\PreviewHandlerCommon.csproj" />
</ItemGroup>

View File

@@ -6,6 +6,7 @@ using System;
using System.Drawing;
using System.IO;
using System.Reflection;
using Microsoft.PowerToys.Settings.UI.Library;
namespace Microsoft.PowerToys.PreviewHandler.Monaco
{
@@ -14,18 +15,14 @@ namespace Microsoft.PowerToys.PreviewHandler.Monaco
/// </summary>
public class Settings
{
/// <summary>
/// Word warping. Set by PT settings.
/// </summary>
private bool _wrap;
private static SettingsUtils moduleSettings = new SettingsUtils();
/// <summary>
/// Gets a value indicating whether word wrapping should be applied. Set by PT settings.
/// </summary>
public bool Wrap
{
get => _wrap;
set
{
_wrap = value;
}
get => moduleSettings.GetSettings<PowerPreviewSettings>(PowerPreviewSettings.ModuleName).Properties.EnableMonacoPreviewWordWrap;
}
/// <summary>

View File

@@ -9,6 +9,7 @@
// `theme` can be "light" or "dark"
// `lang` is the language of the file
// `wrap` if the editor is wrapping or not
var theme = ("[[PT_THEME]]" == "dark") ? "vs-dark" : "vs";
var lang = "[[PT_LANG]]";
var wrap = ([[PT_WRAP]] == 1) ? true : false;
@@ -46,21 +47,21 @@
</style>
</head>
<body>
<body oncontextmenu="onContextMenu()">
<!-- Container for the editor -->
<div id="container"></div>
<!-- Script -->
<script src="http://[[PT_URL]]/monacoSRC/min/vs/loader.js"></script>
<script>
var editor;
require.config({ paths: { vs: 'http://[[PT_URL]]/monacoSRC/min/vs' } });
require(['vs/editor/editor.main'], function () {
// Creates the editor
// For all parameters: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
var editor = monaco.editor.create(document.getElementById('container'), {
editor = monaco.editor.create(document.getElementById('container'), {
value: code, // Sets content of the editor
language: lang, // Sets language fof the code
readOnly: true, // Sets to readonly
contextmenu: false, // Disable context menu
theme: theme, // Sets editor theme
minimap: {enabled: false}, // Disables minimap
lineNumbersMinChars: "3", //Width of the line numbers
@@ -79,10 +80,59 @@
editor.layout();
};
// Disable command palette
editor.addAction({id: 'disable-F1',label: '',keybindings: [monaco.KeyCode.F1,],precondition: null,keybindingContext: null,contextMenuGroupId: 'navigation',contextMenuOrder: 1.5,run: function(ed) {return null;}});
// Add switch wrap button to context menu
editor.addAction({
id: 'text-wrap',
label: 'Toggle text wrapping',
// A precondition for this action.
precondition: null,
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convenience
run: function (ed) {
if(wrap){
editor.updateOptions({ wordWrap: "off" })
}else{
editor.updateOptions({ wordWrap: "on" })
}
wrap = !wrap;
}
});
onContextMenu();
});
function onContextMenu(){
// Hide context menu items
// Code modified from https://stackoverflow.com/questions/48745208/disable-cut-and-copy-in-context-menu-in-monaco-editor/65413517#65413517
let menus = require('vs/platform/actions/common/actions').MenuRegistry._menuItems
let contextMenuEntry = [...menus].find(entry => entry[0]._debugName == "EditorContext")
let contextMenuLinks = contextMenuEntry[1]
let removableIds = ['editor.action.clipboardCutAction', 'editor.action.formatDocument', 'editor.action.formatSelection', 'editor.action.quickCommand', 'editor.action.quickOutline', 'editor.action.refactor', 'editor.action.sourceAction', 'editor.action.rename', undefined, 'editor.action.revealDefinition', 'editor.action.revealDeclaration', 'editor.action.goToTypeDefinition', 'editor.action.goToImplementation', 'editor.action.goToReferences', 'editor.action.changeAll']
let removeById = (list, ids) => {
let node = list._first
do {
let shouldRemove = ids.includes(node.element?.command?.id)
if (shouldRemove) { list._remove(node) }
} while ((node = node.next))
}
removeById(contextMenuLinks, removableIds)
}
</script>
<!-- Context menu-->
</div>
</body>
</html>