fix: add tab gate triggered by ESC key and disabled by refocusing the

editor or container

Author: Stephen Pearce

packages/react-live/src/components/Editor/index.tsx

@@ -1,6 +1,7 @@
 import { Highlight, Prism, themes } from "prism-react-renderer";
 import { CSSProperties, useEffect, useRef, useState } from "react";
 import { useEditable } from "use-editable";
+import useTabGate from "../../hooks/useTabGate";
 
 export type Props = {
   className?: string;
@@ -16,10 +17,13 @@ export type Props = {
 
 const CodeEditor = (props: Props) => {
   const { tabMode = "indentation" } = props;
+  const containerRef = useRef(null);
   const editorRef = useRef(null);
   const [code, setCode] = useState(props.code || "");
   const { theme } = props;
 
+  useTabGate(containerRef, editorRef, tabMode === "indentation");
+
   useEffect(() => {
     setCode(props.code);
   }, [props.code]);
@@ -36,7 +40,7 @@ const CodeEditor = (props: Props) => {
   }, [code]);
 
   return (
-    <div className={props.className} style={props.style}>
+    <div className={props.className} style={props.style} ref={containerRef}>
       <Highlight
         code={code}
         theme={props.theme || themes.nightOwl}

packages/react-live/src/hooks/useTabGate.ts

@@ -0,0 +1,58 @@
+import { RefObject, useEffect, useState } from "react";
+
+export default function useTabGate(
+  container: RefObject<HTMLElement>,
+  editor: RefObject<HTMLElement>,
+  enabled = true
+) {
+  const [tabGate, setTabGate] = useState(false);
+
+  const setTabIndex = (element: RefObject<HTMLElement>, index: number) =>
+    element.current && (element.current.tabIndex = index);
+
+  const resetTabIndexes = () => {
+    if (container.current?.hasAttribute("tabIndex")) {
+      container.current?.removeAttribute("tabIndex");
+    }
+    setTabIndex(editor, 0);
+  };
+
+  const containerBlur = (event: FocusEvent) => {
+    if (event.relatedTarget !== container.current) resetTabIndexes();
+  };
+
+  const catchEscape = (event: KeyboardEvent) => {
+    if (event.code === "Escape" && enabled) setTabGate(true);
+  };
+
+  const containerFocus = () => editor.current?.focus();
+
+  const editorFocus = () => {
+    resetTabIndexes();
+    setTabGate(false);
+  };
+
+  useEffect(() => {
+    container.current?.addEventListener("blur", containerBlur);
+    container.current?.addEventListener("focus", containerFocus);
+    editor.current?.addEventListener("keydown", catchEscape);
+    editor.current?.addEventListener("focus", editorFocus);
+
+    return () => {
+      container.current?.removeEventListener("blur", containerBlur);
+      container.current?.removeEventListener("focus", containerFocus);
+      editor.current?.removeEventListener("keydown", catchEscape);
+      editor.current?.removeEventListener("focus", editorFocus);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!tabGate) return;
+
+    setTabIndex(container, 0);
+    editor.current?.blur();
+    setTabIndex(editor, -1);
+  }, [tabGate]);
+
+  return tabGate;
+}