Additional Prettier Options (#933)

* Allow more prettier options

* update codemirror with settings

* remove yarn commands in build script

Author: William

README.md

@@ -60,13 +60,17 @@ These are the settings currently available:
 
 ```js
 {
-  'general.betaUpdates': false,
   'editor.cursorShape': 'line', // possible values: 'line', 'block', 'underline'
-  'editor.fontSize': 14,
   'editor.fontFamily': `'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace`,
-  'editor.theme': 'dark', // possible values: 'dark', 'light'
+  'editor.fontSize': 14,
   'editor.reuseHeaders': true, // new tab reuses headers from last tab
+  'editor.theme': 'dark', // possible values: 'dark', 'light'
+  'general.betaUpdates': false,
+  'prettier.printWidth': 80,
+  'prettier.tabWidth': 2,
+  'prettier.useTabs': false,
   'request.credentials': 'omit', // possible values: 'omit', 'include', 'same-origin'
+  'schema.disableComments': boolean,
   'tracing.hideTracingResponse': true,
 }
 ```
@@ -86,14 +90,18 @@ The React component `<Playground />` and all middlewares expose the following op
 
 ```ts
 interface ISettings {
-	'general.betaUpdates': boolean
-	'editor.theme': Theme
-	'editor.reuseHeaders': boolean
-	'tracing.hideTracingResponse': boolean
-	'editor.fontSize': number
-	'editor.fontFamily': string
-	'request.credentials': string
-	'schema.disableComments': boolean
+  'editor.cursorShape': 'line' | 'block' | 'underline'
+  'editor.fontFamily': string
+  'editor.fontSize': number
+  'editor.reuseHeaders': boolean
+  'editor.theme': 'dark' | 'light'
+  'general.betaUpdates': boolean
+  'prettier.printWidth': number
+  'prettier.tabWidth': number
+  'prettier.useTabs': boolean
+  'request.credentials': 'omit' | 'include' | 'same-origin'
+  'schema.disableComments': boolean
+  'tracing.hideTracingResponse': boolean
 }
 ```
 

packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx

@@ -17,6 +17,8 @@ import {
   getQuery,
   getSelectedSessionIdFromRoot,
   getScrollTop,
+  getTabWidth,
+  getUseTabs,
 } from '../../state/sessions/selectors'
 import EditorWrapper from './EditorWrapper'
 import { styled } from '../../styled'
@@ -48,6 +50,8 @@ export interface ReduxProps {
   value: string
   sessionId?: string
   scrollTop?: number
+  tabWidth?: number
+  useTabs?: boolean
 }
 
 const md = new MD()
@@ -102,7 +106,8 @@ export class QueryEditor extends React.PureComponent<Props & ReduxProps, {}> {
       autofocus: !isIframe() ? true : false,
       value: this.props.value || '',
       lineNumbers: true,
-      tabSize: 2,
+      tabSize: this.props.tabWidth || 2,
+      indentWithTabs: this.props.useTabs || false,
       mode: 'graphql',
       theme: 'graphiql',
       keyMap: 'sublime',
@@ -305,6 +310,8 @@ const mapStateToProps = createStructuredSelector({
   value: getQuery,
   sessionId: getSelectedSessionIdFromRoot,
   scrollTop: getScrollTop,
+  tabWidth: getTabWidth,
+  useTabs: getUseTabs,
 })
 
 export default connect(

packages/graphql-playground-react/src/components/Playground/util/createSDL.ts

@@ -91,10 +91,18 @@ export function getSDL(
       // Removes Comments but still has new lines
       const sdlWithNewLines = rawSdl.replace(/(\#[\w\'\s\r\n\*](.*)$)/gm, '')
       // Removes newlines left behind by Comments
-      const sdlWithoutComments = prettify(sdlWithNewLines, 80)
+      const sdlWithoutComments = prettify(sdlWithNewLines, {
+        printWidth: 80,
+        tabWidth: 2,
+        useTabs: false,
+      })
       return addLineBreaks(sdlWithoutComments, commentsDisabled)
     }
-    const sdl = prettify(rawSdl, 80)
+    const sdl = prettify(rawSdl, {
+      printWidth: 80,
+      tabWidth: 2,
+      useTabs: false,
+    })
     return addLineBreaks(sdl)
   }
   return ''

packages/graphql-playground-react/src/state/sessions/sagas.ts

@@ -192,7 +192,11 @@ function* prettifyQuery() {
   const { query } = yield select(getSelectedSession)
   const settings = yield select(getSettings)
   try {
-    const prettyQuery = prettify(query, settings['prettier.printWidth'])
+    const prettyQuery = prettify(query, {
+      printWidth: settings['prettier.printWidth'],
+      tabWidth: settings['prettier.tabWidth'],
+      useTabs: settings['prettier.useTabs'],
+    })
     yield put(editQuery(prettyQuery))
   } catch (e) {
     // TODO show erros somewhere

packages/graphql-playground-react/src/state/sessions/selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import { makeWorkspace } from '../workspace/reducers'
+import { makeWorkspace, getSettingsString } from '../workspace/reducers'
 
 function getSelectedWorkspaceId(state) {
   return state.get('selectedWorkspace')
@@ -86,6 +86,27 @@ export const getDocExplorerWidth = makeSessionSelector('docExplorerWidth')
 export const getNextQueryStartTime = makeSessionSelector('nextQueryStartTime')
 export const getTracingSupported = makeSessionSelector('tracingSupported')
 
+export const getTabWidth = createSelector([getSettingsString], settings => {
+  try {
+    const json = JSON.parse(settings)
+    return json['prettier.tabWidth'] || 2
+  } catch (e) {
+    //
+  }
+
+  return 2
+})
+export const getUseTabs = createSelector([getSettingsString], settings => {
+  try {
+    const json = JSON.parse(settings)
+    return json['prettier.useTabs'] || false
+  } catch (e) {
+    //
+  }
+
+  return false
+})
+
 export const getHeadersCount = createSelector([getHeaders], headers => {
   try {
     const json = JSON.parse(headers)

packages/graphql-playground-react/src/state/workspace/reducers.ts

@@ -41,17 +41,19 @@ export class Workspace extends Record({
 }
 
 export const defaultSettings: ISettings = {
-  'general.betaUpdates': false,
   'editor.cursorShape': 'line',
-  'editor.fontSize': 14,
   'editor.fontFamily': `'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace`,
-  'editor.theme': 'dark',
+  'editor.fontSize': 14,
   'editor.reuseHeaders': true,
+  'editor.theme': 'dark',
+  'general.betaUpdates': false,
   'prettier.printWidth': 80,
+  'prettier.tabWidth': 2,
+  'prettier.useTabs': false,
   'request.credentials': 'omit',
-  'tracing.hideTracingResponse': true,
   'schema.disableComments': true,
   'schema.enablePolling': true,
+  'tracing.hideTracingResponse': true,  
 }
 
 // tslint:disable-next-line:max-classes-per-file

packages/graphql-playground-react/src/types.ts

@@ -17,15 +17,17 @@ export type Theme = 'dark' | 'light'
 export type CursorShape = 'line' | 'block' | 'underline'
 
 export interface ISettings {
-  ['general.betaUpdates']: boolean
   ['editor.cursorShape']: CursorShape
   ['editor.fontFamily']: string
   ['editor.fontSize']: number
-  ['editor.theme']: Theme
   ['editor.reuseHeaders']: boolean
+  ['editor.theme']: Theme
+  ['general.betaUpdates']: boolean
   ['prettier.printWidth']: number
-  ['tracing.hideTracingResponse']: boolean
+  ['prettier.tabWidth']: number
+  ['prettier.useTabs']: boolean
   ['request.credentials']: 'omit' | 'include' | 'same-origin'
   ['schema.disableComments']: boolean
   ['schema.enablePolling']: boolean
+  ['tracing.hideTracingResponse']: boolean
 }

packages/graphql-playground-react/src/utils.ts

@@ -12,10 +12,16 @@ export function safely(cb: any) {
   }
 }
 
-export function prettify(query: string, printWidth: number) {
+interface PrettierOptions {
+  printWidth: number
+  tabWidth: number
+  useTabs: boolean
+}
+
+export function prettify(query: string, options: PrettierOptions) {
   return prettier.format(query, {
+    ...options,
     parser: 'graphql',
-    printWidth,
     plugins: [graphql],
   })
 }