Feat CTRL + Y to submit the solution (#1419)

* feat: ctrl + y to submit the solution

* feat: ctrl +y shortcut to submit the code

* wrapped handleSubmit on useCallback

* removed useRef

---------

Co-authored-by: bautistaaa <chrisbautistaaa@gmail.com>

packages/monaco/src/index.tsx

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import lzstring from 'lz-string';
 import type * as monaco from 'monaco-editor';
 import { usePathname, useSearchParams } from 'next/navigation';
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useResetEditor } from './editor-hooks';
 import SplitEditor, { TESTS_PATH, USER_CODE_PATH } from './split-editor';
 import { useLocalStorage } from './useLocalStorage';
@@ -71,7 +71,7 @@ export function CodePanel(props: CodePanelProps) {
   const [userEditorState, setUserEditorState] = useState<monaco.editor.IStandaloneCodeEditor>();
   const [monacoInstance, setMonacoInstance] = useState<typeof monaco>();
 
-  const handleSubmit = async () => {
+  const handleSubmit = useCallback(async () => {
     const hasErrors = tsErrors?.some((e) => e.length) ?? false;
 
     try {
@@ -98,9 +98,23 @@ export function CodePanel(props: CodePanelProps) {
         action: <ToastAction altText="Dismiss">Dismiss</ToastAction>,
       });
     }
-  };
+  }, [tsErrors]);
   const hasFailingTest = tsErrors?.some((e) => e.length) ?? false;
 
+  useEffect(() => {
+    const onSubmit = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyY') {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+
+    document.addEventListener('keydown', onSubmit);
+
+    return () => {
+      document.removeEventListener('keydown', onSubmit);
+    };
+  }, [handleSubmit]);
   return (
     <>
       <div className="sticky top-0 flex h-[40px] shrink-0 items-center justify-end gap-4 border-b border-zinc-300 bg-white px-3 py-2 dark:border-zinc-700 dark:bg-[#1e1e1e]">
@@ -289,10 +303,14 @@ export function CodePanel(props: CodePanelProps) {
                 {disabled && 'Login to '}Submit{tsErrors === undefined && ' (open test cases)'}
               </Button>
             </TooltipTrigger>
-            {disabled && (
+            {disabled ? (
               <TooltipContent>
                 <p>Login to Submit</p>
               </TooltipContent>
+            ) : (
+              <TooltipContent>
+                <p>Submit (CTRL + Y)</p>
+              </TooltipContent>
             )}
           </Tooltip>
         </div>