Keyboard navigation

website/src/components/TutorialComponents/CodeBlock.tsx

@@ -66,7 +66,7 @@ export function UndoBtn(props: { undoCode: () => void }) {
                 'clean-btn',
                 codeBlockContentStyles.codeButton,
             )}
-            style={{borderColor: "var(--custom-editor-reset-color)"}}
+            style={{ borderColor: "var(--custom-editor-reset-color)" }}
             onClick={undoCode}>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="var(--custom-editor-reset-color)" strokeWidth="3" className="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                 <path fillRule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
@@ -97,6 +97,7 @@ function CodeEditor(props: {
     const [disabled, setDisabled] = useState(props.disabled);
     const [allowUndo, setAllowUndo] = useState(false);
     const [tmpCode, setTmpCode] = useState("");
+    const [hasFocus, setHasFocus] = useState(false);
 
     useEffect(() => {
         setCode(props.code);
@@ -106,8 +107,9 @@ function CodeEditor(props: {
         setCode(_code.slice(0, -1));
     }, []);
 
-    useEditable(editorRef, onEditableChange, {
-        disabled: disabled,
+
+    const editObj = useEditable(editorRef, onEditableChange, {
+        disabled: props.disabled || !hasFocus,
         indentation: 2,
     });
 
@@ -121,19 +123,62 @@ function CodeEditor(props: {
         setTmpCode(code.slice()); // use copy not reference
         setCode(props.code);
         setDisabled(true);
+        setHasFocus(false);
         setAllowUndo(true);
         setTimeout(() => {
             setDisabled(props.disabled);
+            setHasFocus(true);
             setAllowUndo(false);
         }, 3000);
     }
 
     const onClickUndo = () => {
-        console.log(tmpCode)
         setCode(tmpCode);
     }
 
-    //   prismIncludeLanguages(Prism);
+    const handleFocus = (e: React.FocusEvent) => {
+        const selectObj = window.getSelection();
+        if (selectObj.rangeCount === 0) {
+            // when focusing on the editor without using the mouse, 
+            // merely from the Tab key
+            const range = new Range();
+            range.collapse(true);
+            selectObj.addRange(range);
+        }
+        setHasFocus(true);
+    }
+
+    const handleBlur = (e: React.FocusEvent) => {
+        setHasFocus(false);
+    }
+
+    const handleKeydown = (e: KeyboardEvent) => {
+        const editor = editorRef.current;
+        if (e.key === 'Escape' && !props.disabled) {
+            if (e.target === editor) {
+                e.stopImmediatePropagation();
+                e.stopPropagation();
+                e.preventDefault();
+                editor.focus(); // sometimes blur won't fire without focus first
+                editor.blur();
+            }
+        }
+    }
+
+
+
+    useEffect(() => {
+        document.addEventListener('keydown',
+            (e) => handleKeydown(e),
+            {
+                capture: true,
+            }
+        );
+        return () => {
+            document.removeEventListener('keydown', (e) => handleKeydown(e));
+        };
+    }, []);
+
 
     return (
         <div className={props.className} style={props.style}>
@@ -165,20 +210,19 @@ function CodeEditor(props: {
                                 ))}
                             </span>}
                         <pre
+                            tabIndex={0}
                             className={clsx(
                                 _className,
                                 styles.codeBlock,
                                 'thin-scrollbar')}
                             style={{
-                                // margin: 0,
-                                // outline: "none",
                                 padding: "0",
-                                // fontFamily: "inherit",
-                                // fontSize: "inherit",
                                 ...(!props.className || !props.theme ? {} : _style),
                             }}
                             ref={editorRef}
                             spellCheck="false"
+                            onFocus={(e) => handleFocus(e)}
+                            onBlur={(e) => handleBlur(e)}
                         >
                             <code
                                 className={clsx(