feat(editor): Add "Copy Log Event" option to context menu (resolves #179). (#197)

Co-authored-by: Junhao Liao <[email protected]>
Co-authored-by: Junhao Liao <[email protected]>

Author: hoophalab

src/components/Editor/MonacoInstance/actions.ts

@@ -155,17 +155,18 @@ const setupCustomActions = (
     actions: EditorAction[],
     onCustomAction: CustomActionCallback
 ) => {
-    actions.forEach(({actionName, label, keyBindings}) => {
+    actions.forEach(({actionName, label, keyBindings, ...rest}) => {
         if (null === actionName) {
             return;
         }
         editor.addAction({
             id: actionName,
-            label: label,
             keybindings: keyBindings,
+            label: label,
             run: () => {
                 onCustomAction(editor, actionName);
             },
+            ...rest,
         });
     });
 };

src/components/Editor/index.tsx

@@ -39,6 +39,79 @@ import {goToPositionAndCenter} from "./MonacoInstance/utils";
 import "./index.css";
 
 
+/**
+ * Gets the beginning line number of the log event selected by mouse in editor.
+ *
+ * @param editor
+ * @param beginLineNumToLogEventNum
+ * @return the beginning line number of the selected log event.
+ */
+const getSelectedLogEventNum = (
+    editor: monaco.editor.IStandaloneCodeEditor,
+    beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap
+): Nullable<number> => {
+    const selectedLineNum = editor.getPosition()?.lineNumber;
+    if ("undefined" === typeof selectedLineNum) {
+        return null;
+    }
+
+    return getMapValueWithNearestLessThanOrEqualKey(
+        beginLineNumToLogEventNum,
+        selectedLineNum
+    );
+};
+
+/**
+ * Handles copy log event action in the editor.
+ *
+ * @param editor
+ * @param beginLineNumToLogEventNum
+ * @throws {Error} if the editor's model cannot be retrieved.
+ */
+const handleCopyLogEventAction = (
+    editor: monaco.editor.IStandaloneCodeEditor,
+    beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap
+) => {
+    const selectedLogEventNum = getSelectedLogEventNum(
+        editor,
+        beginLineNumToLogEventNum,
+    );
+
+    if (null === selectedLogEventNum) {
+        return;
+    }
+    const selectedLogEventLineNum =
+        getMapKeyByValue(beginLineNumToLogEventNum, selectedLogEventNum);
+    const nextLogEventLineNum =
+        getMapKeyByValue(beginLineNumToLogEventNum, selectedLogEventNum + 1);
+
+    if (null === selectedLogEventLineNum) {
+        throw new Error("Unable to get the beginning line number of the selected log event.");
+    }
+
+    let endLineNumber: number;
+    if (null !== nextLogEventLineNum) {
+        endLineNumber = nextLogEventLineNum - 1;
+    } else {
+        // Handle the case when this is the last log event in the file.
+        const model = editor.getModel();
+        if (null === model) {
+            throw new Error("Unable to get the text model.");
+        }
+        endLineNumber = model.getLineCount() - 1;
+    }
+
+    const selectionRange = new monaco.Range(
+        selectedLogEventLineNum,
+        0,
+        endLineNumber,
+        Infinity
+    );
+
+    editor.setSelection(selectionRange);
+    editor.trigger(handleCopyLogEventAction.name, "editor.action.clipboardCopyAction", null);
+};
+
 /**
  * Renders a read-only editor for viewing logs.
  *
@@ -80,6 +153,9 @@ const Editor = () => {
                 goToPositionAndCenter(editor, {lineNumber: lineCount, column: 1});
                 break;
             }
+            case ACTION_NAME.COPY_LOG_EVENT:
+                handleCopyLogEventAction(editor, beginLineNumToLogEventNumRef.current);
+                break;
             default:
                 break;
         }

src/utils/actions.ts

@@ -12,12 +12,15 @@ enum ACTION_NAME {
     PAGE_TOP = "pageTop",
     PAGE_BOTTOM = "pageBottom",
     RELOAD = "reload",
+    COPY_LOG_EVENT = "copyLogEvent",
 }
 
 interface EditorAction {
     actionName: Nullable<ACTION_NAME>;
-    label: string;
+    contextMenuGroupId?: string;
+    contextMenuOrder?: number;
     keyBindings: monaco.KeyCode[];
+    label: string;
 }
 
 /**
@@ -27,38 +30,45 @@ interface EditorAction {
 const EDITOR_ACTIONS : EditorAction[] = [
     {
         actionName: null,
-        label: "Focus on Editor",
         keyBindings: [monaco.KeyCode.Backquote],
+        label: "Focus on Editor",
     },
     {
         actionName: ACTION_NAME.FIRST_PAGE,
-        label: "First page",
         keyBindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.BracketLeft],
+        label: "First page",
     },
     {
         actionName: ACTION_NAME.PREV_PAGE,
-        label: "Previous page",
         keyBindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.BracketLeft],
+        label: "Previous page",
     },
     {
         actionName: ACTION_NAME.NEXT_PAGE,
-        label: "Next page",
         keyBindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.BracketRight],
+        label: "Next page",
     },
     {
         actionName: ACTION_NAME.LAST_PAGE,
-        label: "Last page",
         keyBindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.BracketRight],
+        label: "Last page",
     },
     {
         actionName: ACTION_NAME.PAGE_TOP,
-        label: "Top of page",
         keyBindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyU],
+        label: "Top of page",
     },
     {
         actionName: ACTION_NAME.PAGE_BOTTOM,
-        label: "Bottom of page",
         keyBindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI],
+        label: "Bottom of page",
+    },
+    {
+        actionName: ACTION_NAME.COPY_LOG_EVENT,
+        contextMenuGroupId: "9_cutcopypaste",
+        contextMenuOrder: 2,
+        keyBindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyC],
+        label: "Copy Log Event",
     },
 ];