diff --git a/package.json b/package.json
index d5f06cfdf..3b4012492 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
"parse-domain": "~2.3.0",
"polished": "~3.4.0",
"postcss-focus": "~4.0.0",
+ "prettier": "~1.18.2",
"react": "16.8.6",
"react-codecopy": "~4.0.1",
"react-dom": "16.8.6",
diff --git a/src/components/elements/CodeEditor/CodeEditor.js b/src/components/elements/CodeEditor/CodeEditor.js
index 0c62b8d73..8f1f54b39 100644
--- a/src/components/elements/CodeEditor/CodeEditor.js
+++ b/src/components/elements/CodeEditor/CodeEditor.js
@@ -1,11 +1,11 @@
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { getLines, serializeComponent } from 'helpers'
+import { prettier, getLines, serializeComponent } from 'helpers'
import styled, { css } from 'styled-components'
+import { get, identity, range } from 'lodash'
import { Box } from 'components/elements'
import React, { useState } from 'react'
import CodeCopy from 'react-codecopy'
import { colors, fonts } from 'theme'
-import { range } from 'lodash'
const generateHighlighLines = linesRange => {
if (!linesRange) return
@@ -259,7 +259,6 @@ Terminal.defaultProps = {
function CodeEditor (props) {
const { ActionComponent, showLineNumbers, interactive, children, my } = props
- const text = serializeComponent(children.trim())
const className = props.className
? props.className + (props.metastring || '')
: ''
@@ -272,6 +271,8 @@ function CodeEditor (props) {
return 'javascript'
})()
+ const pretty = get(prettier, language, identity)
+ const text = pretty(children)
const theme = { ...baseTheme, ...langTheme[language] }
const css = highlightLines && highlighLinesStyle(highlightLines)
diff --git a/src/components/pages/embed/template.js b/src/components/pages/embed/template.js
index 1433bd4eb..48694e16b 100644
--- a/src/components/pages/embed/template.js
+++ b/src/components/pages/embed/template.js
@@ -3,7 +3,6 @@ import React, { Fragment } from 'react'
import humanizeUrl from 'humanize-url'
import { Plus } from 'react-feather'
import { colors } from 'theme'
-
import { get } from 'lodash'
import {
@@ -23,6 +22,8 @@ import {
import { Microlink } from 'components/patterns'
+import prettier, { serializeObject, serializeFmt } from 'helpers/prettier'
+
const DEFAULT_LOGO = {
url: 'https://cdn.microlink.io/logo/trim.png',
width: 500,
@@ -32,26 +33,6 @@ const DEFAULT_LOGO = {
size_pretty: '1.45 kB'
}
-const serializeFmt = (props, { quotes = true } = {}) => {
- return Object.keys(props).reduce((acc, rawKey) => {
- const rawValue = props[rawKey]
- const key = rawValue === true ? rawKey : `${rawKey}=`
- const value =
- rawValue === true ? '' : `${quotes ? `'${rawValue}'` : rawValue}`
- return `${acc}${key}${value} `
- }, '')
-}
-
-const serializeObject = props => {
- return Object.keys(props).reduce((acc, rawKey) => {
- const rawValue = props[rawKey]
- const key = rawValue === true ? rawKey : `${rawKey}: `
- const value = rawValue === true ? '' : `'${rawValue}'`
- const coma = acc === '' ? '' : ', '
- return `${acc}${coma}${key}${value}`
- }, '')
-}
-
const generateMqlCode = props => `
const mql = require('@microlink/mql')
const { status, response, data } = await mql(
@@ -64,27 +45,27 @@ console.log('data', data)
`
const generateLanguages = props => {
- const langReact = () => `
+ const langReact = () =>
+ prettier.js(`
import React from 'react'
import Microlink from '@microlink/react'
export default () => (
-
+
)
-`
+`)
langReact.language = 'jsx'
- const langVanilla = () => `
+ const langVanilla = () =>
+ prettier.html(`
-`
+`)
langVanilla.language = 'html'
diff --git a/src/helpers/index.js b/src/helpers/index.js
index 5d217401f..6595b9d3b 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -5,12 +5,14 @@ import unmarshall from './unmarshall'
import getLines from './get-lines'
import marshall from './marshall'
import title from './title'
+import prettier from './prettier'
export {
formatDate,
formatNumber,
getLines,
marshall,
+ prettier,
serializeComponent,
title,
unmarshall
diff --git a/src/helpers/prettier.js b/src/helpers/prettier.js
new file mode 100644
index 000000000..5e7634ba4
--- /dev/null
+++ b/src/helpers/prettier.js
@@ -0,0 +1,73 @@
+import prettierStandalone from 'prettier/standalone'
+import prettierParserHtml from 'prettier/parser-html'
+import prettierParserGraphql from 'prettier/parser-graphql'
+import prettierParserMarkdown from 'prettier/parser-markdown'
+import parserBabylon from 'prettier/parser-babylon'
+
+/**
+ * https://prettier.io/docs/en/options.html
+ */
+const PRETTIER_CONFIG = {
+ semi: false,
+ singleQuote: true,
+ jsxSingleQuote: true,
+ printWidth: 80,
+ tabWidth: 2
+}
+
+const JS_OPTS = {
+ parser: 'babel',
+ plugins: [parserBabylon]
+}
+
+const JSON_OPTS = {
+ parser: 'json',
+ plugins: [parserBabylon]
+}
+
+const HTML_OPTS = {
+ parser: 'html',
+ plugins: [prettierParserHtml]
+}
+
+const GRAPHQL_OPTS = {
+ parser: 'graphql',
+ plugins: [prettierParserGraphql]
+}
+
+const MARKDOWN_OPTS = {
+ parser: 'markdown',
+ plugins: [prettierParserMarkdown]
+}
+
+export const serializeFmt = (props, { quotes = true } = {}) => {
+ return Object.keys(props).reduce((acc, rawKey) => {
+ const rawValue = props[rawKey]
+ const key = rawValue === true ? rawKey : `${rawKey}=`
+ const value =
+ rawValue === true ? '' : `${quotes ? `'${rawValue}'` : rawValue}`
+ return `${acc}${key}${value} `
+ }, '')
+}
+
+export const serializeObject = props => {
+ return Object.keys(props).reduce((acc, rawKey) => {
+ const rawValue = props[rawKey]
+ const key = rawValue === true ? rawKey : `${rawKey}: `
+ const value = rawValue === true ? '' : `'${rawValue}'`
+ const coma = acc === '' ? '' : ', '
+ return `${acc}${coma}${key}${value}`
+ }, '')
+}
+
+const prettier = (code, opts) =>
+ prettierStandalone.format(code, { ...PRETTIER_CONFIG, ...opts })
+prettier.jsx = prettier.javascript = prettier.js = (code, opts) =>
+ prettier(code, { ...JS_OPTS, ...opts })
+prettier.html = (code, opts) => prettier(code, { ...HTML_OPTS, ...opts })
+prettier.graphql = (code, opts) => prettier(code, { ...GRAPHQL_OPTS, ...opts })
+prettier.md = prettier.markdown = (code, opts) =>
+ prettier(code, { ...MARKDOWN_OPTS, ...opts })
+prettier.json = (code, opts) => prettier(code, { ...JSON_OPTS, ...opts })
+
+export default prettier