feat(editor): Add keyboard shortcut to toggle word wrapping (resolves #60). (#210)

Author: Henry8192

src/components/Editor/index.tsx

@@ -112,6 +112,20 @@ const handleCopyLogEventAction = (
     editor.trigger(handleCopyLogEventAction.name, "editor.action.clipboardCopyAction", null);
 };
 
+/**
+ * Toggles the word wrap setting in the editor between "on" and "off".
+ *
+ * @param editor
+ */
+const handleWordWrapAction = (editor: monaco.editor.IStandaloneCodeEditor) => {
+    const currentWordWrap = editor.getRawOptions().wordWrap;
+    const newWordWrap = "on" === currentWordWrap ?
+        "off" :
+        "on";
+
+    editor.updateOptions({wordWrap: newWordWrap});
+};
+
 /**
  * Renders a read-only editor for viewing logs.
  *
@@ -156,6 +170,9 @@ const Editor = () => {
             case ACTION_NAME.COPY_LOG_EVENT:
                 handleCopyLogEventAction(editor, beginLineNumToLogEventNumRef.current);
                 break;
+            case ACTION_NAME.WORD_WRAP:
+                handleWordWrapAction(editor);
+                break;
             default:
                 break;
         }

src/utils/actions.ts

@@ -13,6 +13,7 @@ enum ACTION_NAME {
     PAGE_BOTTOM = "pageBottom",
     RELOAD = "reload",
     COPY_LOG_EVENT = "copyLogEvent",
+    WORD_WRAP = "wordWrap",
 }
 
 interface EditorAction {
@@ -70,6 +71,11 @@ const EDITOR_ACTIONS : EditorAction[] = [
         keyBindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyC],
         label: "Copy Log Event",
     },
+    {
+        actionName: ACTION_NAME.WORD_WRAP,
+        keyBindings: [monaco.KeyMod.Alt | monaco.KeyCode.KeyZ],
+        label: "Toggle word wrap",
+    },
 ];
 
 type NavigationActionsMap = {