fix(logEventNum): Keyboard navigation shortcuts should update the log event number (fixes #105).

src/components/Editor/MonacoInstance/actions.ts

@@ -16,27 +16,29 @@ const MOBILE_ZOOM_LEVEL_DECREMENT = 1;
 const POSITION_CHANGE_DEBOUNCE_TIMEOUT_MILLIS = 50;
 
 /**
- * Sets up a callback for when the cursor position changes in the editor.
+ * Sets up a callback for when the cursor position either changes in the editor or is changed
+ * by the editor.setPosition function.
  *
  * @param editor
- * @param onCursorExplicitPosChange
+ * @param onCursorPosChange
  */
-const setupCursorExplicitPosChangeCallback = (
+const setupCursorPosChangeCallback = (
     editor: monaco.editor.IStandaloneCodeEditor,
-    onCursorExplicitPosChange: CursorExplicitPosChangeCallback
+    onCursorPosChange: CursorExplicitPosChangeCallback
 ) => {
     let posChangeDebounceTimeout: Nullable<ReturnType<typeof setTimeout>> = null;
 
     editor.onDidChangeCursorPosition((ev: monaco.editor.ICursorPositionChangedEvent) => {
         // only trigger if there was an explicit change that was made by keyboard or mouse
-        if (monaco.editor.CursorChangeReason.Explicit !== ev.reason) {
+        if (monaco.editor.CursorChangeReason.Explicit !== ev.reason &&
+            monaco.editor.CursorChangeReason.NotSet !== ev.reason) {
             return;
         }
         if (null !== posChangeDebounceTimeout) {
             clearTimeout(posChangeDebounceTimeout);
         }
         posChangeDebounceTimeout = setTimeout(() => {
-            onCursorExplicitPosChange(ev);
+            onCursorPosChange(ev);
             posChangeDebounceTimeout = null;
         }, POSITION_CHANGE_DEBOUNCE_TIMEOUT_MILLIS);
     });
@@ -171,7 +173,7 @@ const setupCustomActions = (
 };
 
 export {
-    setupCursorExplicitPosChangeCallback,
+    setupCursorPosChangeCallback as setupCursorExplicitPosChangeCallback,
     setupCustomActions,
     setupFocusOnBacktickDown,
     setupMobileZoom,

src/components/Editor/MonacoInstance/typings.ts

@@ -19,11 +19,12 @@ enum TOKEN_NAME {
 }
 
 /**
- * Gets called when the cursor position is explicitly changed in the editor.
+ * Gets called when the cursor position is either explicitly changed in the editor or
+ * changed by the editor.setPosition function.
  *
  * @param ev The event object containing information about the cursor position change.
  */
-type CursorExplicitPosChangeCallback = (ev: monaco.editor.ICursorPositionChangedEvent) => void;
+type CursorPosChangeCallback = (ev: monaco.editor.ICursorPositionChangedEvent) => void;
 
 /**
  * Gets called from registered Monaco editor actions.
@@ -62,15 +63,15 @@ type BeforeTextUpdateCallback = (editor: monaco.editor.IStandaloneCodeEditor) =>
 type TextUpdateCallback = (editor: monaco.editor.IStandaloneCodeEditor) => void;
 
 interface CustomMonacoEditorHandlers {
-    onCursorExplicitPosChange?: CursorExplicitPosChangeCallback;
+    onCursorExplicitPosChange?: CursorPosChangeCallback;
     onCustomAction?: CustomActionCallback;
 }
 
 export {TOKEN_NAME};
 export type {
     BeforeMountCallback,
     BeforeTextUpdateCallback,
-    CursorExplicitPosChangeCallback,
+    CursorPosChangeCallback as CursorExplicitPosChangeCallback,
     CustomActionCallback,
     CustomMonacoEditorHandlers,
     MountCallback,

src/components/Editor/index.tsx

@@ -34,7 +34,6 @@ import {
     getMapValueWithNearestLessThanOrEqualKey,
 } from "../../utils/data";
 import MonacoInstance from "./MonacoInstance";
-import {goToPositionAndCenter} from "./MonacoInstance/utils";
 
 import "./index.css";
 
@@ -83,15 +82,22 @@ const Editor = () => {
             case ACTION_NAME.LAST_PAGE:
                 loadPageByAction({code: actionName, args: null});
                 break;
-            case ACTION_NAME.PAGE_TOP:
-                goToPositionAndCenter(editor, {lineNumber: 1, column: 1});
+            case ACTION_NAME.PAGE_TOP: {
+                const newlogEventNum = beginLineNumToLogEventNumRef.current.get(1);
+                if (newlogEventNum) {
+                    updateWindowUrlHashParams({logEventNum: newlogEventNum});
+                }
                 break;
+            }
             case ACTION_NAME.PAGE_BOTTOM: {
                 const lineCount = editor.getModel()?.getLineCount();
                 if ("undefined" === typeof lineCount) {
                     break;
                 }
-                goToPositionAndCenter(editor, {lineNumber: lineCount, column: 1});
+                const newlogEvent = beginLineNumToLogEventNumRef.current.get(1);
+                if (newlogEvent) {
+                    updateWindowUrlHashParams({logEventNum: newlogEvent + pageSizeRef.current - 1});
+                }
                 break;
             }
             default:
@@ -126,12 +132,13 @@ const Editor = () => {
     }, []);
 
     /**
-     * On explicit position change of the cursor in the editor, get the `logEventNum` corresponding
-     * to the line number at the cursor's position and update the URL parameter.
+     * Get the `logEventNum` corresponding to the line number at the cursor's position and update
+     * the URL parameter when the position of the cursor either changes explicitly in the editor,
+     * or is changed by the editor.setPosition function.
      *
      * @param ev The event object containing information about the cursor position change.
      */
-    const handleCursorExplicitPosChange = useCallback((
+    const handleCursorPosChange = useCallback((
         ev: monaco.editor.ICursorPositionChangedEvent
     ) => {
         const newLogEventNum = getMapValueWithNearestLessThanOrEqualKey(
@@ -185,7 +192,7 @@ const Editor = () => {
                 themeName={(("system" === mode) ?
                     systemMode :
                     mode) ?? THEME_NAME.DARK}
-                onCursorExplicitPosChange={handleCursorExplicitPosChange}
+                onCursorExplicitPosChange={handleCursorPosChange}
                 onCustomAction={handleEditorCustomAction}
                 onMount={handleMount}
                 onTextUpdate={restoreCachedPageSize}/>