random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-25 06:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Word Wrap menu option to Editor React monaco context menu in Documents Tab (#1922)

Browse Source 
* Remove "Go to Symbol..." menu option by default in monaco. Add option to toggle word wrap.

* Remove code that removes "Go to symbol" as it is not a public API

* Move WordWrap context menu item to its own section. Remove unnecessary parameters.

* Fix format
This commit is contained in:
Laurent Nguyen 2024-08-02 17:53:00 +02:00 committed by GitHub
parent 31773ee73b
commit bc479fb808
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Explorer/Controls/Editor/EditorReact.tsx
View File

@ -24,13 +24,19 @@ export interface EditorReactProps {
monacoContainerStyles?: React.CSSProperties; monacoContainerStyles?: React.CSSProperties;
className?: string; className?: string;
spinnerClassName?: string; spinnerClassName?: string;
enableWordWrapContextMenuItem?: boolean; // Enable/Disable "Word Wrap" context menu item
onWordWrapChanged?: (wordWrap: "on" | "off") => void; // Called when word wrap is changed
} }
export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> { export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
private static readonly VIEWING_OPTIONS_GROUP_ID = "viewingoptions"; // Group ID for the context menu group
private rootNode: HTMLElement; private rootNode: HTMLElement;
private editor: monaco.editor.IStandaloneCodeEditor; private editor: monaco.editor.IStandaloneCodeEditor;
private selectionListener: monaco.IDisposable; private selectionListener: monaco.IDisposable;
private monacoEditorOptionsWordWrap: monaco.editor.EditorOption;
public constructor(props: EditorReactProps) { public constructor(props: EditorReactProps) {
super(props); super(props);
this.state = { this.state = {
@ -113,6 +119,23 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
}, },
); );
} }
if (this.props.enableWordWrapContextMenuItem) {
editor.addAction({
// An unique identifier of the contributed action.
id: "wordwrap",
label: "Toggle Word Wrap",
contextMenuGroupId: EditorReact.VIEWING_OPTIONS_GROUP_ID,
contextMenuOrder: 1,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convenience
run: (ed) => {
const newOption = ed.getOption(this.monacoEditorOptionsWordWrap) === "on" ? "off" : "on";
ed.updateOptions({ wordWrap: newOption });
this.props.onWordWrapChanged(newOption);
},
});
}
} }
/** /**
@ -136,9 +159,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
}; };
this.rootNode.innerHTML = ""; this.rootNode.innerHTML = "";
const monaco = await loadMonaco(); const lazymonaco = await loadMonaco();
// We can only get this constant after loading monaco lazily
this.monacoEditorOptionsWordWrap = lazymonaco.editor.EditorOption.wordWrap;
try { try {
createCallback(monaco?.editor?.create(this.rootNode, options)); createCallback(lazymonaco?.editor?.create(this.rootNode, options));
} catch (error) { } catch (error) {
// This could happen if the parent node suddenly disappears during create() // This could happen if the parent node suddenly disappears during create()
console.error("Unable to create EditorReact", error); console.error("Unable to create EditorReact", error);

1
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -1876,6 +1876,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
lineNumbers={"on"} lineNumbers={"on"}
theme={"_theme"} theme={"_theme"}
onContentChanged={_onEditorContentChange} onContentChanged={_onEditorContentChange}
enableWordWrapContextMenuItem={true}
/> />
)} )}
{selectedRows.size > 1 && ( {selectedRows.size > 1 && (