fix: add tab gate to disable focus trap

.changeset/clean-jeans-clean.md

@@ -0,0 +1,5 @@
+---
+"react-live": patch
+---
+
+Add tab gate to disable focus trap ([#399](https://github.com/FormidableLabs/react-live/pull/399))

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;
+}