fix(vision): fix codemirror autocomplete styling (#2875)

sanity-io · Oct 19, 2021 · 9b10c55 · 9b10c55 · vercel · Oct 19, 2021
1 parent f5054ea
commit 9b10c55
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/packages/@sanity/vision/src/components/QueryEditor.js b/packages/@sanity/vision/src/components/QueryEditor.js
@@ -80,6 +80,7 @@ class QueryEditor extends React.PureComponent {
 
   render() {
     const options = {
+      theme: 'default CodeMirror-vision',
       lineNumbers: true,
       tabSize: 2,
       mode: {name: 'javascript', json: true},

diff --git a/packages/@sanity/vision/src/components/VisionGui.js b/packages/@sanity/vision/src/components/VisionGui.js
@@ -48,6 +48,7 @@ import {
   TimingsFooter,
   TimingsCard,
   TimingsTextContainer,
+  GlobalCodeMirrorStyle,
 } from './VisionGui.styled'
 
 /* eslint-disable import/no-unassigned-import, import/no-unresolved */
@@ -429,6 +430,7 @@ class VisionGui extends React.PureComponent {
         sizing="border"
         overflow="hidden"
       >
+        <GlobalCodeMirrorStyle />
         <Header paddingX={3} paddingY={2}>
           <Grid columns={12}>
             {/* Dataset selector */}

diff --git a/packages/@sanity/vision/src/components/VisionGui.styled.js b/packages/@sanity/vision/src/components/VisionGui.styled.js
@@ -1,4 +1,4 @@
-import styled, {css} from 'styled-components'
+import styled, {css, createGlobalStyle} from 'styled-components'
 import {Button, Card, Box, Flex, Label, rem} from '@sanity/ui'
 
 export const Root = styled(Card)`
@@ -67,6 +67,24 @@ export const Root = styled(Card)`
   }
 `
 
+export const GlobalCodeMirrorStyle = createGlobalStyle`
+  // This is for the autocomplete menu when you do ctrl-space in in the Query editor
+  .CodeMirror-hints.CodeMirror-vision {
+    z-index: 20;
+    font-family: ${({theme}) => theme.sanity.fonts.code.family};
+    font-size: ${({theme}) => rem(theme.sanity.fonts.code.sizes[1].fontSize)};
+    padding: ${({theme}) => rem(theme.sanity.space[2])};
+  }
+
+  .CodeMirror-hint {
+    padding: ${({theme}) => `${rem(theme.sanity.space[1])} ${rem(theme.sanity.space[1])}`};
+  }
+
+  .CodeMirror-hint-active {
+    background-color: var(--card-bg-color);
+  }
+`
+
 Root.displayName = 'Root'
 
 export const Header = styled(Card)`