new-log-viewer: Integrate Monaco Editor for enhanced log viewing. #54
Conversation
junhaoliao
changed the title
…for navigating to the top and bottom of the page.
| const editor = monaco.editor.create( | ||
| editorContainer, | ||
| { | ||
| // TODO: add custom observer debounce automatic layout |
There was a problem hiding this comment.
To be done in a follow up PR.
| {line} | ||
| </p> | ||
| ))} | ||
| <div style={{flexDirection: "column", flexGrow: 1}}> |
There was a problem hiding this comment.
The flex approach has proven to be somewhat inefficient in laying out the editor. In a future PR where the other UI elements (sidebar, menu bar and status bar) are added, an absolute frame with definite top and bottom styles will be used for the editor instance container instead.
| * @param editor | ||
| * @param onCursorExplicitPosChange | ||
| */ | ||
| const setupCursorExplicitPosChangeAction = ( |
There was a problem hiding this comment.
How about setupCursorExplicitPosChangeCallback (or Handler)? The term "action" is a bit overused, so I think limiting it to things related to ActionType would be clearer.
| * @param touch1 | ||
| * @param touch2 |
There was a problem hiding this comment.
touch0 and touch1 for consistency?
| }; | ||
|
|
||
| /** | ||
| * Initializes a Monaco Editor instance. |
There was a problem hiding this comment.
| * Initializes a Monaco Editor instance. | |
| * Creates and initializes a Monaco Editor instance. | |
| * @param handlers | ||
| * @return The initialized editor instance. | ||
| */ | ||
| const initMonacoEditor = ( |
There was a problem hiding this comment.
How about createMonacoEditor?
new-log-viewer/src/utils/actions.ts
Outdated
| /* eslint-disable sort-keys */ | ||
| const EDITOR_ACTIONS : ActionType[] = [ | ||
| { | ||
| action: null, |
There was a problem hiding this comment.
I haven't read through all the code, but so far I'm not sure why we allow action to be null (in the same vein as why we can't handle Backquote with setupCustomActions).
There was a problem hiding this comment.
why we can't handle Backquote with
setupCustomActions
When the monaco container is not focused, any keydown events are not picked up by Monaco and therefore no Monaco customer actions can be triggered.
There was a problem hiding this comment.
Right. So then do we need the action for the backquote?
There was a problem hiding this comment.
Discussed offline - to be used in rendering a help menu for shortcuts. It might be better to document why we have null values here though.
Co-authored-by: kirkrodrigues <[email protected]>
…sChangeCallback`.
References
new-log-viewer series: #45 #46 #48 #51 #52 #53
Description
This PR introduces the MonacoInstance component, integrating the Monaco Editor into the log viewer application. The editor provides a more interactive and feature-rich environment for viewing log files, including custom actions and mobile support.
monaco-editorWrapper (named<MonacoEdior/>): A React component that wraps the officialmonaco-editorwith configurable properties and event handlers.<MonacoEdior/>Wrapper (named<MonacoInstance/>; seeindex.tsx): A React component that wraps the<MonacoEditor/>with logging viewing specific context and states.<MonacoInstance/>.getMapKeyByValueto find the key associated with a specific value in a map.getLastItemNumInPrevChunkandgetNextItemNumInNextChunk.Validation performed
logEventNumas 1 in the debug header input and observed the cursor moved to the first event; updated thelogEventNumin the URL hash parameter and observed the cursor moved to the 3rd event.Ctrl+](shortcut for "Next Page" action) and observed the 2nd page getting loaded. The cursor position was at the first event on the page (logEventNum=10001).Ctrl+[(shortcut for "Previous Page" action) and observed the 1st page getting loaded. The cursor position was at the last event on the page (logEventNum=10000).Ctrl+[again and the cursor moved to the very first message.Ctrl+I(shortcut for "Go to Bottom") and observed the cursor moved to the last line and the last line got revealed in the editor.Ctrl+U(shortcut for "Go to Top") and observed the cursor moved to the first line and the first line got revealed in the editor.Ctrl+Shift+](shortcut for "Last Page") and observed the last page got loaded and the cursor moved to the last line.Ctrl+Shift+[(shortcut for "First Page") and observed the first page got loaded and the cursor moved to the first line.`and observed the editor regained focus.