diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index b24e32b2c..2ca350eef 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,5 +1,5 @@ { "packages": ["sandpack-client", "sandpack-react"], - "sandboxes": ["sowx8r"], + "sandboxes": ["sowx8r", "c3uup0"], "node": "14" } diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json index d6c044896..f9244b528 100644 --- a/.codesandbox/tasks.json +++ b/.codesandbox/tasks.json @@ -70,7 +70,7 @@ "runAtStart": false }, "yarn install": { - "name": "yarn install", + "name": "Install", "command": "yarn install" } } diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx index 4e82ef1ec..06c4c1ee9 100644 --- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx @@ -248,6 +248,8 @@ export const CodeMirror = React.forwardRef( history(), closeBrackets(), + ...extensions, + keymap.of([ ...closeBracketsKeymap, ...defaultKeymap, @@ -262,7 +264,6 @@ export const CodeMirror = React.forwardRef( getEditorTheme(), highlightTheme, - ...extensions, ]; if (readOnly) { diff --git a/sandpack-react/src/components/CodeEditor/styles.ts b/sandpack-react/src/components/CodeEditor/styles.ts index 294b168b7..d602adc77 100644 --- a/sandpack-react/src/components/CodeEditor/styles.ts +++ b/sandpack-react/src/components/CodeEditor/styles.ts @@ -33,17 +33,6 @@ export const cmClassName = css({ margin: "0", outline: "none", height: "100%", - - "&:focus-visible": { - boxShadow: "inset 0 0 0 4px $colors$accent", - paddingLeft: "$space$1", - paddingRight: "$space$1", - }, - "&:focus-visible .cm-line": { padding: "0 $space$2" }, - "&:focus-visible .cm-gutter.cm-lineNumbers": { - paddingLeft: "0", - paddingRight: "$space$2", - }, }); export const readOnlyClassName = css({ diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx index f556bbe43..43a4f895d 100644 --- a/sandpack-react/src/components/FileTabs/index.tsx +++ b/sandpack-react/src/components/FileTabs/index.tsx @@ -51,7 +51,6 @@ export const tabButton = css({ whiteSpace: "nowrap", "&:focus": { outline: "none" }, - "&:focus-visible": { boxShadow: "inset 0 0 0 2px $colors$accent" }, [`&:hover > .${closeButtonClassName}`]: { visibility: "unset" }, });