hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

run prettier with new config (#983)

Browse Source 
Co-authored-by: repo-ranger[bot] <39074581+repo-ranger[bot]@users.noreply.github.com>
main
Michael Fix 5 years ago committed by GitHub
parent e3f2acb363
commit ae9b4445f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 317 additions and 324 deletions
Show Stats Download Patch File Download Diff File

2
components/BackgroundSelect.js
Unescape Escape View File

@ -31,7 +31,7 @@ class BackgroundSelect extends React.PureComponent {
isVisible, isVisible,
toggleVisibility, toggleVisibility,
carbonRef, carbonRef,
updateHighlights updateHighlights,
} = this.props } = this.props
const background = validateColor(color) ? color : DEFAULT_BG_COLOR const background = validateColor(color) ? color : DEFAULT_BG_COLOR

12
components/Billing.js
Unescape Escape View File

@ -105,17 +105,17 @@ function Billing(props) {
fontSmoothing: 'antialiased', fontSmoothing: 'antialiased',
':-webkit-autofill': { ':-webkit-autofill': {
color: '#fce883' color: '#fce883',
}, },
'::placeholder': { '::placeholder': {
color: 'rgba(255, 255, 255, 0.7)' color: 'rgba(255, 255, 255, 0.7)',
} },
}, },
invalid: { invalid: {
iconColor: COLORS.RED, iconColor: COLORS.RED,
color: COLORS.RED color: COLORS.RED,
} },
} },
}} }}
/> />
<hr /> <hr />

26
components/Carbon.js
Unescape Escape View File

@ -19,14 +19,14 @@ import {
LANGUAGE_NAME_HASH, LANGUAGE_NAME_HASH,
LANGUAGE_MIME_HASH, LANGUAGE_MIME_HASH,
DEFAULT_SETTINGS, DEFAULT_SETTINGS,
THEMES_HASH THEMES_HASH,
} from '../lib/constants' } from '../lib/constants'
const SelectionEditor = dynamic(() => import('./SelectionEditor'), { const SelectionEditor = dynamic(() => import('./SelectionEditor'), {
loading: () => null loading: () => null,
}) })
const Watermark = dynamic(() => import('./svg/Watermark'), { const Watermark = dynamic(() => import('./svg/Watermark'), {
loading: () => null loading: () => null,
}) })
function searchLanguage(l) { function searchLanguage(l) {
@ -38,7 +38,7 @@ function noop() {}
class Carbon extends React.PureComponent { class Carbon extends React.PureComponent {
static defaultProps = { static defaultProps = {
onChange: noop, onChange: noop,
onGutterClick: noop onGutterClick: noop,
} }
state = {} state = {}
@ -65,7 +65,7 @@ class Carbon extends React.PureComponent {
ms('300ms'), ms('300ms'),
{ {
leading: true, leading: true,
trailing: true trailing: true,
} }
) )
@ -90,12 +90,12 @@ class Carbon extends React.PureComponent {
if (selection.head.line + selection.head.ch > selection.anchor.line + selection.anchor.ch) { if (selection.head.line + selection.head.ch > selection.anchor.line + selection.anchor.ch) {
this.currentSelection = { this.currentSelection = {
from: selection.anchor, from: selection.anchor,
to: selection.head to: selection.head,
} }
} else { } else {
this.currentSelection = { this.currentSelection = {
from: selection.head, from: selection.head,
to: selection.anchor to: selection.anchor,
} }
} }
} }
@ -117,7 +117,7 @@ class Carbon extends React.PureComponent {
changes.italics != null && `font-style: ${changes.italics ? 'italic' : 'initial'}`, changes.italics != null && `font-style: ${changes.italics ? 'italic' : 'initial'}`,
changes.underline != null && changes.underline != null &&
`text-decoration: ${changes.underline ? 'underline' : 'initial'}`, `text-decoration: ${changes.underline ? 'underline' : 'initial'}`,
changes.color != null && `color: ${changes.color} !important` changes.color != null && `color: ${changes.color} !important`,
] ]
.filter(Boolean) .filter(Boolean)
.join('; ') .join('; ')
@ -150,10 +150,10 @@ class Carbon extends React.PureComponent {
lineWrapping: true, lineWrapping: true,
smartIndent: true, smartIndent: true,
extraKeys: { extraKeys: {
'Shift-Tab': 'indentLess' 'Shift-Tab': 'indentLess',
}, },
readOnly: this.props.readOnly, readOnly: this.props.readOnly,
showInvisibles: config.hiddenCharacters showInvisibles: config.hiddenCharacters,
} }
const backgroundImage = const backgroundImage =
(this.props.config.backgroundImage && this.props.config.backgroundImageSelection) || (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
@ -423,14 +423,14 @@ function selectedLinesReducer(
return { return {
selected: { ...selected, ...newState }, selected: { ...selected, ...newState },
prevLine: lineNumber prevLine: lineNumber,
} }
} }
function useSelectedLines(props, editorRef) { function useSelectedLines(props, editorRef) {
const [state, dispatch] = React.useReducer(selectedLinesReducer, { const [state, dispatch] = React.useReducer(selectedLinesReducer, {
prevLine: null, prevLine: null,
selected: {} selected: {},
}) })
React.useEffect(() => { React.useEffect(() => {
@ -450,7 +450,7 @@ function useSelectedLines(props, editorRef) {
if (props.config.selectedLines) { if (props.config.selectedLines) {
dispatch({ dispatch({
type: 'MULTILINE', type: 'MULTILINE',
selectedLines: props.config.selectedLines selectedLines: props.config.selectedLines,
}) })
} }
}, [props.config.selectedLines]) }, [props.config.selectedLines])

2
components/ColorPicker.js
Unescape Escape View File

@ -6,7 +6,7 @@ import { COLORS } from '../lib/constants'
const pickerStyle = { const pickerStyle = {
backgroundColor: COLORS.BLACK, backgroundColor: COLORS.BLACK,
padding: '8px 8px 0', padding: '8px 8px 0',
margin: '0 auto 1px' margin: '0 auto 1px',
} }
const ColorPicker = ({ onChange = () => {}, color, presets, style, disableAlpha }) => ( const ColorPicker = ({ onChange = () => {}, color, presets, style, disableAlpha }) => (

12
components/Dropdown.js
Unescape Escape View File

@ -9,7 +9,7 @@ import { COLORS } from '../lib/constants'
class Dropdown extends React.PureComponent { class Dropdown extends React.PureComponent {
state = { state = {
inputValue: this.props.selected.name, inputValue: this.props.selected.name,
itemsToShow: this.props.list itemsToShow: this.props.list,
} }
onUserAction = changes => { onUserAction = changes => {
@ -66,7 +66,7 @@ class Dropdown extends React.PureComponent {
itemWrapper, itemWrapper,
icon, icon,
disableInput, disableInput,
title title,
} = this.props } = this.props
const { itemsToShow, inputValue } = this.state const { itemsToShow, inputValue } = this.state
@ -91,7 +91,7 @@ class Dropdown extends React.PureComponent {
icon, icon,
disableInput, disableInput,
title, title,
labelId labelId,
})} })}
</Downshift> </Downshift>
) )
@ -105,7 +105,7 @@ const renderDropdown = ({ color, list, itemWrapper, icon, disableInput, title, l
getRootProps, getRootProps,
getToggleButtonProps, getToggleButtonProps,
getInputProps, getInputProps,
getItemProps getItemProps,
}) => { }) => {
return ( return (
<DropdownContainer {...getRootProps({ refKey: 'innerRef' })}> <DropdownContainer {...getRootProps({ refKey: 'innerRef' })}>
@ -132,7 +132,7 @@ const renderDropdown = ({ color, list, itemWrapper, icon, disableInput, title, l
{...getItemProps({ {...getItemProps({
item, item,
isSelected: selectedItem.name === item.name, isSelected: selectedItem.name === item.name,
isHighlighted: highlightedIndex === index isHighlighted: highlightedIndex === index,
})} })}
> >
{item.name} {item.name}
@ -197,7 +197,7 @@ const SelectedItem = ({
isOpen, isOpen,
color, color,
hasIcon, hasIcon,
disabled disabled,
}) => { }) => {
const itemColor = color || COLORS.SECONDARY const itemColor = color || COLORS.SECONDARY

38
components/Editor.js
Unescape Escape View File

@ -31,7 +31,7 @@ import {
DEFAULT_SETTINGS, DEFAULT_SETTINGS,
DEFAULT_LANGUAGE, DEFAULT_LANGUAGE,
DEFAULT_THEME, DEFAULT_THEME,
FONTS FONTS,
} from '../lib/constants' } from '../lib/constants'
import { serializeState, getRouteState } from '../lib/routing' import { serializeState, getRouteState } from '../lib/routing'
import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util' import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
@ -39,7 +39,7 @@ import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
const languageIcon = <LanguageIcon /> const languageIcon = <LanguageIcon />
const SnippetToolbar = dynamic(() => import('./SnippetToolbar'), { const SnippetToolbar = dynamic(() => import('./SnippetToolbar'), {
loading: () => null loading: () => null,
}) })
const getConfig = omit(['code']) const getConfig = omit(['code'])
@ -53,7 +53,7 @@ class Editor extends React.Component {
this.state = { this.state = {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
...this.props.snippet, ...this.props.snippet,
loading: true loading: true,
} }
this.exportImage = this.exportImage.bind(this) this.exportImage = this.exportImage.bind(this)
@ -77,7 +77,7 @@ class Editor extends React.Component {
...(this.props.snippet ? null : getSettings(localStorage)), ...(this.props.snippet ? null : getSettings(localStorage)),
// and then URL params // and then URL params
...queryState, ...queryState,
loading: false loading: false,
} }
// Makes sure the slash in 'application/X' is decoded // Makes sure the slash in 'application/X' is decoded
@ -107,7 +107,7 @@ class Editor extends React.Component {
onUpdate = debounce(updates => this.props.onUpdate(updates), 750, { onUpdate = debounce(updates => this.props.onUpdate(updates), 750, {
trailing: true, trailing: true,
leading: true leading: true,
}) })
updateState = updates => this.setState(updates, () => this.onUpdate(this.state)) updateState = updates => this.setState(updates, () => this.onUpdate(this.state))
@ -119,7 +119,7 @@ class Editor extends React.Component {
type, type,
squared = this.state.squaredImage, squared = this.state.squaredImage,
exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value, exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value,
includeTransparentRow = false includeTransparentRow = false,
} = { format: 'png' } } = { format: 'png' }
) { ) {
// if safari, get image from api // if safari, get image from api
@ -129,7 +129,7 @@ class Editor extends React.Component {
// pull from custom theme highlights, or state highlights // pull from custom theme highlights, or state highlights
const encodedState = serializeState({ const encodedState = serializeState({
...this.state, ...this.state,
highlights: { ...themeConfig.highlights, ...this.state.highlights } highlights: { ...themeConfig.highlights, ...this.state.highlights },
}) })
return this.context.image(encodedState) return this.context.image(encodedState)
} }
@ -160,7 +160,7 @@ class Editor extends React.Component {
style: { style: {
transform: `scale(${exportSize})`, transform: `scale(${exportSize})`,
'transform-origin': 'center', 'transform-origin': 'center',
background: squared ? this.state.backgroundColor : 'none' background: squared ? this.state.backgroundColor : 'none',
}, },
filter: n => { filter: n => {
if (n.className) { if (n.className) {
@ -178,7 +178,7 @@ class Editor extends React.Component {
return true return true
}, },
width, width,
height height,
} }
// current font-family used // current font-family used
@ -254,8 +254,8 @@ class Editor extends React.Component {
return this.getCarbonImage({ format: 'png', type: 'blob' }).then(blob => return this.getCarbonImage({ format: 'png', type: 'blob' }).then(blob =>
navigator.clipboard.write([ navigator.clipboard.write([
new window.ClipboardItem({ new window.ClipboardItem({
'image/png': blob 'image/png': blob,
}) }),
]) ])
) )
} }
@ -277,7 +277,7 @@ class Editor extends React.Component {
backgroundImage: file.content, backgroundImage: file.content,
backgroundImageSelection: null, backgroundImageSelection: null,
backgroundMode: 'image', backgroundMode: 'image',
preset: null preset: null,
}) })
} else { } else {
this.updateState({ code: file.content, language: 'auto' }) this.updateState({ code: file.content, language: 'auto' })
@ -297,7 +297,7 @@ class Editor extends React.Component {
code: code:
code.replace(unsplashPhotographerCredit, '') + code.replace(unsplashPhotographerCredit, '') +
`\n\n// Photo by ${photographer.name} on Unsplash`, `\n\n// Photo by ${photographer.name} on Unsplash`,
preset: null preset: null,
})) }))
} else { } else {
this.updateState({ ...changes, preset: null }) this.updateState({ ...changes, preset: null })
@ -309,8 +309,8 @@ class Editor extends React.Component {
this.setState(({ highlights = {} }) => ({ this.setState(({ highlights = {} }) => ({
highlights: { highlights: {
...highlights, ...highlights,
...updates ...updates,
} },
})) }))
createTheme = theme => { createTheme = theme => {
@ -341,7 +341,7 @@ class Editor extends React.Component {
.then(() => .then(() =>
this.props.setToasts({ this.props.setToasts({
type: 'SET', type: 'SET',
toasts: [{ children: 'Snippet duplicated!', timeout: 3000 }] toasts: [{ children: 'Snippet duplicated!', timeout: 3000 }],
}) })
) )
@ -352,7 +352,7 @@ class Editor extends React.Component {
.then(() => .then(() =>
this.props.setToasts({ this.props.setToasts({
type: 'SET', type: 'SET',
toasts: [{ children: 'Snippet deleted', timeout: 3000 }] toasts: [{ children: 'Snippet deleted', timeout: 3000 }],
}) })
) )
@ -364,7 +364,7 @@ class Editor extends React.Component {
backgroundImage, backgroundImage,
backgroundMode, backgroundMode,
code, code,
exportSize exportSize,
} = this.state } = this.state
const config = getConfig(this.state) const config = getConfig(this.state)
@ -493,7 +493,7 @@ function isImage(file) {
Editor.defaultProps = { Editor.defaultProps = {
onUpdate: () => {}, onUpdate: () => {},
onReset: () => {} onReset: () => {},
} }
export default Editor export default Editor

4
components/EditorContainer.js
Unescape Escape View File

@ -84,7 +84,7 @@ function EditorContainer(props) {
setSnippet(newSnippet) setSnippet(newSnippet)
setToasts({ setToasts({
type: 'ADD', type: 'ADD',
toast: { children: 'Snippet saved!', closable: true } toast: { children: 'Snippet saved!', closable: true },
}) })
} }
}) })
@ -92,7 +92,7 @@ function EditorContainer(props) {
update(snippetId, updates).then(() => { update(snippetId, updates).then(() => {
setToasts({ setToasts({
type: 'ADD', type: 'ADD',
toast: { children: 'Snippet saved!', closable: true } toast: { children: 'Snippet saved!', closable: true },
}) })
}) })
} }

4
components/ExportMenu.js
Unescape Escape View File

@ -40,7 +40,7 @@ function ExportMenu({
exportSize, exportSize,
isVisible, isVisible,
toggleVisibility, toggleVisibility,
exportImage: exp exportImage: exp,
}) { }) {
const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage]) const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
const online = useOnline() const online = useOnline()
@ -56,7 +56,7 @@ function ExportMenu({
const handleExport = format => () => const handleExport = format => () =>
exportImage(format, { exportImage(format, {
filename: input.current && input.current.value filename: input.current && input.current.value,
}) })
return ( return (

20
components/ImagePicker.js
Unescape Escape View File

@ -43,7 +43,7 @@ const INITIAL_STATE = {
imageAspectRatio: null, imageAspectRatio: null,
pixelCrop: null, pixelCrop: null,
photographer: null, photographer: null,
dataURL: null dataURL: null,
} }
export default class ImagePicker extends React.Component { export default class ImagePicker extends React.Component {
@ -68,10 +68,10 @@ export default class ImagePicker extends React.Component {
crop: makeAspectCrop( crop: makeAspectCrop(
{ {
...state.crop, ...state.crop,
aspect: nextProps.aspectRatio aspect: nextProps.aspectRatio,
}, },
state.imageAspectRatio state.imageAspectRatio
) ),
} }
} }
return null return null
@ -91,7 +91,7 @@ export default class ImagePicker extends React.Component {
onCropChange(crop, pixelCrop) { onCropChange(crop, pixelCrop) {
this.setState({ this.setState({
crop: { ...crop, aspect: this.props.aspectRatio }, crop: { ...crop, aspect: this.props.aspectRatio },
pixelCrop pixelCrop,
}) })
} }
@ -101,12 +101,12 @@ export default class ImagePicker extends React.Component {
x: 0, x: 0,
y: 0, y: 0,
width: 100, width: 100,
aspect: this.props.aspectRatio aspect: this.props.aspectRatio,
} }
this.setState({ this.setState({
imageAspectRatio, imageAspectRatio,
crop: makeAspectCrop(initialCrop, imageAspectRatio) crop: makeAspectCrop(initialCrop, imageAspectRatio),
}) })
} }
@ -115,7 +115,7 @@ export default class ImagePicker extends React.Component {
this.props.onChange({ this.props.onChange({
backgroundImage: url, backgroundImage: url,
backgroundImageSelection: null, backgroundImageSelection: null,
photographer photographer,
}) })
}) })
} }
@ -131,7 +131,7 @@ export default class ImagePicker extends React.Component {
if (err.message.indexOf('Network Error') > -1) { if (err.message.indexOf('Network Error') > -1) {
this.setState({ this.setState({
error: error:
'Fetching the image failed. This is probably a CORS-related issue. You can either enable CORS in your browser, or use another image.' 'Fetching the image failed. This is probably a CORS-related issue. You can either enable CORS in your browser, or use another image.',
}) })
} }
}) })
@ -170,7 +170,7 @@ export default class ImagePicker extends React.Component {
operator: palette[9], operator: palette[9],
meta: palette[10], meta: palette[10],
tag: palette[11], tag: palette[11],
comment: palette[12] comment: palette[12],
}) })
} }
} }
@ -179,7 +179,7 @@ export default class ImagePicker extends React.Component {
this.setState(INITIAL_STATE, () => { this.setState(INITIAL_STATE, () => {
this.props.onChange({ this.props.onChange({
backgroundImage: null, backgroundImage: null,
backgroundImageSelection: null backgroundImageSelection: null,
}) })
}) })
} }

2
components/ListSetting.js
Unescape Escape View File

@ -7,7 +7,7 @@ import { toggle } from '../lib/util'
class ListSetting extends React.Component { class ListSetting extends React.Component {
static defaultProps = { static defaultProps = {
onOpen: () => {}, onOpen: () => {},
onClose: () => {} onClose: () => {},
} }
state = { isVisible: false } state = { isVisible: false }

10
components/Meta.js
Unescape Escape View File

@ -26,8 +26,9 @@ export const StylesheetLink = ({ theme }) => {
href = `/static/themes/${theme}.min.css` href = `/static/themes/${theme}.min.css`
} else { } else {
const themeDef = THEMES_HASH[theme] const themeDef = THEMES_HASH[theme]
href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/${themeDef && href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/${
(themeDef.link || themeDef.id)}.min.css` themeDef && (themeDef.link || themeDef.id)
}.min.css`
} }
return <Link href={href} /> return <Link href={href} />
@ -71,8 +72,9 @@ export const MetaLinks = React.memo(() => {
<Link key={id} href={`/static/themes/${id}.min.css`} /> <Link key={id} href={`/static/themes/${id}.min.css`} />
))} ))}
{CDN_STYLESHEETS.map(themeDef => { {CDN_STYLESHEETS.map(themeDef => {
const href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/${themeDef && const href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/${
(themeDef.link || themeDef.id)}.min.css` themeDef && (themeDef.link || themeDef.id)
}.min.css`
return <Link key={themeDef.id} href={href} /> return <Link key={themeDef.id} href={href} />
})} })}
</React.Fragment> </React.Fragment>

4
components/Popout.js
Unescape Escape View File

@ -8,7 +8,7 @@ import { toggle } from '../lib/util'
export const managePopout = WrappedComponent => { export const managePopout = WrappedComponent => {
class PopoutManager extends React.Component { class PopoutManager extends React.Component {
state = { state = {
isVisible: false isVisible: false,
} }
toggleVisibility = () => this.setState(toggle('isVisible')) toggleVisibility = () => this.setState(toggle('isVisible'))
@ -46,7 +46,7 @@ export const managePopout = WrappedComponent => {
class Popout extends React.PureComponent { class Popout extends React.PureComponent {
static defaultProps = { static defaultProps = {
borderColor: COLORS.SECONDARY, borderColor: COLORS.SECONDARY,
style: {} style: {},
} }
render() { render() {

6
components/Presets.js
Unescape Escape View File

@ -11,7 +11,7 @@ const removeButtonStyles = {
right: '6px', right: '6px',
width: '11px', width: '11px',
height: '11px', height: '11px',
borderRadius: '999px' borderRadius: '999px',
} }
const Preset = React.memo(({ remove, apply, selected, preset }) => { const Preset = React.memo(({ remove, apply, selected, preset }) => {
@ -32,7 +32,7 @@ const Preset = React.memo(({ remove, apply, selected, preset }) => {
backgroundPosition: 'center center', backgroundPosition: 'center center',
backgroundSize: 'contain', backgroundSize: 'contain',
backgroundImage: `url('${preset.icon}')`, backgroundImage: `url('${preset.icon}')`,
backgroundColor: preset.backgroundColor backgroundColor: preset.backgroundColor,
}} }}
/> />
{preset.custom && ( {preset.custom && (
@ -68,7 +68,7 @@ const arrowButtonStyle = {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
right: '16px', right: '16px',
height: '100%' height: '100%',
} }
const Presets = React.memo( const Presets = React.memo(

10
components/SelectionEditor.js
Unescape Escape View File

@ -25,25 +25,25 @@ function reducer(state, action) {
case 'BOLD': { case 'BOLD': {
return { return {
...state, ...state,
bold: !state.bold bold: !state.bold,
} }
} }
case 'ITALICS': { case 'ITALICS': {
return { return {
...state, ...state,
italics: !state.italics italics: !state.italics,
} }
} }
case 'UNDERLINE': { case 'UNDERLINE': {
return { return {
...state, ...state,
underline: !state.underline underline: !state.underline,
} }
} }
case 'COLOR': { case 'COLOR': {
return { return {
...state, ...state,
color: action.color color: action.color,
} }
} }
} }
@ -59,7 +59,7 @@ function SelectionEditor({ onChange }) {
bold: null, bold: null,
italics: null, italics: null,
underline: null, underline: null,
color: null color: null,
}) })
React.useEffect(() => { React.useEffect(() => {

16
components/Settings.js
Unescape Escape View File

@ -32,7 +32,7 @@ function WindowSettings({
widthAdjustment, widthAdjustment,
watermark, watermark,
onWidthChanging, onWidthChanging,
onWidthChanged onWidthChanged,
}) { }) {
return ( return (
<div className="settings-content"> <div className="settings-content">
@ -112,7 +112,7 @@ function EditorSettings({
firstLineNumber, firstLineNumber,
hiddenCharacters, hiddenCharacters,
onWidthChanging, onWidthChanging,
onWidthChanged onWidthChanged,
}) { }) {
return ( return (
<div className="settings-content"> <div className="settings-content">
@ -236,7 +236,7 @@ function MiscSettings({ format, reset, applyPreset, settings }) {
const settingButtonStyle = { const settingButtonStyle = {
width: '40px', width: '40px',
height: '100%' height: '100%',
} }
class Settings extends React.PureComponent { class Settings extends React.PureComponent {
@ -245,7 +245,7 @@ class Settings extends React.PureComponent {
selectedMenu: 'Window', selectedMenu: 'Window',
showPresets: true, showPresets: true,
previousSettings: null, previousSettings: null,
widthChanging: false widthChanging: false,
} }
settingsRef = React.createRef() settingsRef = React.createRef()
@ -254,7 +254,7 @@ class Settings extends React.PureComponent {
componentDidMount() { componentDidMount() {
const storedPresets = getPresets(localStorage) || [] const storedPresets = getPresets(localStorage) || []
this.setState(({ presets }) => ({ this.setState(({ presets }) => ({
presets: [...storedPresets, ...presets] presets: [...storedPresets, ...presets],
})) }))
} }
@ -322,7 +322,7 @@ class Settings extends React.PureComponent {
newPreset.icon = await this.props.getCarbonImage({ newPreset.icon = await this.props.getCarbonImage({
format: 'png', format: 'png',
squared: true, squared: true,
exportSize: 1 exportSize: 1,
}) })
this.props.onChange('preset', newPreset.id) this.props.onChange('preset', newPreset.id)
@ -330,7 +330,7 @@ class Settings extends React.PureComponent {
this.setState( this.setState(
({ presets }) => ({ ({ presets }) => ({
previousSettings: null, previousSettings: null,
presets: [newPreset, ...presets] presets: [newPreset, ...presets],
}), }),
this.savePresets this.savePresets
) )
@ -420,7 +420,7 @@ class Settings extends React.PureComponent {
position: widthChanging ? 'fixed' : 'absolute', position: widthChanging ? 'fixed' : 'absolute',
width: '316px', width: '316px',
top: widthChanging ? this.settingPosition.top : 'initial', top: widthChanging ? this.settingPosition.top : 'initial',
left: widthChanging ? this.settingPosition.left : 'initial' left: widthChanging ? this.settingPosition.left : 'initial',
}} }}
> >
<Presets <Presets

8
components/Slider.js
Unescape Escape View File

@ -6,7 +6,7 @@ class Slider extends React.Component {
static defaultProps = { static defaultProps = {
onMouseDown: () => {}, onMouseDown: () => {},
onMouseUp: () => {}, onMouseUp: () => {},
unit: 'px' unit: 'px',
} }
handleChange = e => { handleChange = e => {
@ -23,9 +23,9 @@ class Slider extends React.Component {
<div <div
className="slider-bg" className="slider-bg"
style={{ style={{
transform: `translate3d(${(((parseFloat(this.props.value) - minValue) * 1.0) / transform: `translate3d(${
(maxValue - minValue)) * (((parseFloat(this.props.value) - minValue) * 1.0) / (maxValue - minValue)) * 100
100}%, 0px, 0px)` }%, 0px, 0px)`,
}} }}
/> />
<label>{this.props.label}</label> <label>{this.props.label}</label>

2
components/SnippetToolbar.js
Unescape Escape View File

@ -73,7 +73,7 @@ function SnippetToolbar(props) {
marginBottom: 0, marginBottom: 0,
flexDirection: 'row-reverse', flexDirection: 'row-reverse',
// justifyContent: 'space-between', // justifyContent: 'space-between',
zIndex: 1 zIndex: 1,
}} }}
> >
<DuplicateButton onClick={props.onCreate} /> <DuplicateButton onClick={props.onCreate} />

8
components/Themes/ThemeCreate.js
Unescape Escape View File

@ -11,7 +11,7 @@ import { stringifyRGBA, generateId } from '../../lib/util'
const colorPickerStyle = { const colorPickerStyle = {
backgroundColor: COLORS.BLACK, backgroundColor: COLORS.BLACK,
padding: 0, padding: 0,
margin: '4px' margin: '4px',
} }
const colorPresets = [] const colorPresets = []
@ -54,7 +54,7 @@ const ThemeCreate = ({
create, create,
updateHighlights, updateHighlights,
name, name,
onInputChange onInputChange,
}) => { }) => {
const [preset, updatePreset] = React.useState(theme.id) const [preset, updatePreset] = React.useState(theme.id)
const [highlight, selectHighlight] = React.useState() const [highlight, selectHighlight] = React.useState()
@ -103,7 +103,7 @@ const ThemeCreate = ({
backgroundColor: highlights[key], backgroundColor: highlights[key],
boxShadow: `inset 0px 0px 0px ${highlight === key ? 2 : 1}px ${ boxShadow: `inset 0px 0px 0px ${highlight === key ? 2 : 1}px ${
COLORS.SECONDARY COLORS.SECONDARY
}` }`,
}} }}
/> />
</div> </div>
@ -124,7 +124,7 @@ const ThemeCreate = ({
id: `theme:${generateId()}`, id: `theme:${generateId()}`,
name, name,
highlights, highlights,
custom: true custom: true,
}) })
} }
> >

10
components/Themes/index.js
Unescape Escape View File

@ -8,7 +8,7 @@ import RemoveIcon from '../svg/Remove'
import { COLORS } from '../../lib/constants' import { COLORS } from '../../lib/constants'
const ThemeCreate = dynamic(() => import('./ThemeCreate'), { const ThemeCreate = dynamic(() => import('./ThemeCreate'), {
loading: () => null loading: () => null,
}) })
const ThemeItem = ({ children, item, isSelected, remove }) => ( const ThemeItem = ({ children, item, isSelected, remove }) => (
@ -52,7 +52,7 @@ const getCustomName = themes =>
class Themes extends React.PureComponent { class Themes extends React.PureComponent {
state = { state = {
name: '' name: '',
} }
dropdown = React.createRef() dropdown = React.createRef()
@ -60,7 +60,7 @@ class Themes extends React.PureComponent {
static getDerivedStateFromProps(props) { static getDerivedStateFromProps(props) {
if (!props.isVisible) { if (!props.isVisible) {
return { return {
name: getCustomName(props.themes) name: getCustomName(props.themes),
} }
} }
return null return null
@ -95,9 +95,9 @@ class Themes extends React.PureComponent {
const dropdownList = [ const dropdownList = [
{ {
id: 'create', id: 'create',
name: 'Create +' name: 'Create +',
}, },
...themes ...themes,
] ]
return ( return (

2
components/Toggle.js
Unescape Escape View File

@ -5,7 +5,7 @@ import { COLORS } from '../lib/constants'
class Toggle extends React.PureComponent { class Toggle extends React.PureComponent {
static defaultProps = { static defaultProps = {
className: '' className: '',
} }
toggle = () => this.props.onChange(!this.props.enabled) toggle = () => this.props.onChange(!this.props.enabled)

2
components/svg/Copy.js
Unescape Escape View File

@ -23,7 +23,7 @@ const Copy = ({ size, color }) => {
} }
Copy.defaultProps = { Copy.defaultProps = {
size: 16 size: 16,
} }
export default Copy export default Copy

22
lib/api.js
Unescape Escape View File

@ -10,8 +10,8 @@ import { DEFAULT_CODE, DEFAULT_SETTINGS } from './constants'
export const client = axios.create({ export const client = axios.create({
baseURL: `${process.env.API_URL || ''}/api`, baseURL: `${process.env.API_URL || ''}/api`,
headers: { headers: {
Accept: 'application/json' Accept: 'application/json',
} },
}) })
function tweet(content, encodedImage) { function tweet(content, encodedImage) {
@ -20,7 +20,7 @@ function tweet(content, encodedImage) {
return client return client
.post('/twitter', { .post('/twitter', {
imageData: processedData, imageData: processedData,
altText: content altText: content,
}) })
.then(res => res.data.url) .then(res => res.data.url)
.then(url => encodeURIComponent(`Created with @carbon_app ${url}`)) .then(url => encodeURIComponent(`Created with @carbon_app ${url}`))
@ -70,7 +70,7 @@ const unsplash = {
async random() { async random() {
const imageUrls = await client.get('/unsplash/random') const imageUrls = await client.get('/unsplash/random')
return Promise.all(imageUrls.data.map(downloadThumbnailImage)) return Promise.all(imageUrls.data.map(downloadThumbnailImage))
} },
} }
function getSnippet(uid = '', { host } = {}) { function getSnippet(uid = '', { host } = {}) {
@ -92,11 +92,11 @@ function listSnippets(page) {
client client
.get(`/snippets`, { .get(`/snippets`, {
params: { params: {
page page,
}, },
headers: { headers: {
authorization authorization,
} },
}) })
.then(res => res.data) .then(res => res.data)
.catch(e => { .catch(e => {
@ -115,7 +115,7 @@ function updateSnippet(uid, state) {
const data = { const data = {
...sanitized, ...sanitized,
code: state.code != null ? state.code : DEFAULT_CODE code: state.code != null ? state.code : DEFAULT_CODE,
} }
if (uid) { if (uid) {
@ -148,7 +148,7 @@ function deleteSnippet(uid) {
const createSnippet = debounce(data => updateSnippet(null, data), ms('5s'), { const createSnippet = debounce(data => updateSnippet(null, data), ms('5s'), {
leading: true, leading: true,
trailing: false trailing: false,
}) })
export default { export default {
@ -157,10 +157,10 @@ export default {
list: listSnippets, list: listSnippets,
update: debounce(updateSnippet, ms('1s'), { leading: true, trailing: true }), update: debounce(updateSnippet, ms('1s'), { leading: true, trailing: true }),
create: createSnippet, create: createSnippet,
delete: id => deleteSnippet(id) delete: id => deleteSnippet(id),
}, },
tweet: debounce(tweet, ms('5s'), { leading: true, trailing: false }), tweet: debounce(tweet, ms('5s'), { leading: true, trailing: false }),
image: debounce(image, ms('5s'), { leading: true, trailing: false }), image: debounce(image, ms('5s'), { leading: true, trailing: false }),
unsplash, unsplash,
downloadThumbnailImage downloadThumbnailImage,
} }

9
lib/client.js
Unescape Escape View File

@ -10,16 +10,13 @@ if (firebase.apps.length === 0) {
projectId: process.env.FIREBASE_PROJECT_ID, projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: `${process.env.FIREBASE_PROJECT_ID}.appspot.com`, storageBucket: `${process.env.FIREBASE_PROJECT_ID}.appspot.com`,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID, messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_FE_APP_ID appId: process.env.FIREBASE_FE_APP_ID,
}) })
} }
} }
export function logout() { export function logout() {
return firebase return firebase.auth().signOut().catch(console.error)
.auth()
.signOut()
.catch(console.error)
} }
export function login(provider) { export function login(provider) {
@ -33,7 +30,7 @@ export function login(provider) {
export function loginGitHub() { export function loginGitHub() {
const provider = new firebase.auth.GithubAuthProvider() const provider = new firebase.auth.GithubAuthProvider()
provider.setCustomParameters({ provider.setCustomParameters({
allow_signup: 'true' allow_signup: 'true',
}) })
return login(provider) return login(provider)
} }

302
lib/constants.js
Unescape Escape View File

@ -13,7 +13,7 @@ export const FONTS = [
{ id: 'Monoid', name: 'Monoid' }, { id: 'Monoid', name: 'Monoid' },
{ id: 'Source Code Pro', name: 'Source Code Pro' }, { id: 'Source Code Pro', name: 'Source Code Pro' },
{ id: 'Space Mono', name: 'Space Mono' }, { id: 'Space Mono', name: 'Space Mono' },
{ id: 'Ubuntu Mono', name: 'Ubuntu Mono' } { id: 'Ubuntu Mono', name: 'Ubuntu Mono' },
] ]
export const HIGHLIGHT_KEYS = [ export const HIGHLIGHT_KEYS = [
@ -28,7 +28,7 @@ export const HIGHLIGHT_KEYS = [
'number', 'number',
'string', 'string',
'comment', 'comment',
'meta' 'meta',
] ]
export const THEMES = [ export const THEMES = [
@ -47,8 +47,8 @@ export const THEMES = [
number: '#a16a94', number: '#a16a94',
string: '#fded02', string: '#fded02',
comment: '#cdab53', comment: '#cdab53',
meta: '#555' meta: '#555',
} },
}, },
{ {
id: 'a11y-dark', id: 'a11y-dark',
@ -66,8 +66,8 @@ export const THEMES = [
string: '#ffd700', string: '#ffd700',
comment: '#d4d0ab', comment: '#d4d0ab',
meta: '#d4d0ab', meta: '#d4d0ab',
tag: '#dcc6e0' tag: '#dcc6e0',
} },
}, },
{ {
id: 'blackboard', id: 'blackboard',
@ -85,8 +85,8 @@ export const THEMES = [
string: '#61CE3C', string: '#61CE3C',
comment: '#AEAEAE', comment: '#AEAEAE',
meta: '#D8FA3C', meta: '#D8FA3C',
tag: '#8DA6CE' tag: '#8DA6CE',
} },
}, },
{ {
id: 'base16-dark', id: 'base16-dark',
@ -104,8 +104,8 @@ export const THEMES = [
string: '#f4bf75', string: '#f4bf75',
comment: '#8f5536', comment: '#8f5536',
meta: '#555', meta: '#555',
tag: '#ac4142' tag: '#ac4142',
} },
}, },
{ {
id: 'base16-light', id: 'base16-light',
@ -124,8 +124,8 @@ export const THEMES = [
string: '#f4bf75', string: '#f4bf75',
comment: '#8f5536', comment: '#8f5536',
meta: '#555', meta: '#555',
tag: '#ac4142' tag: '#ac4142',
} },
}, },
{ {
id: 'cobalt', id: 'cobalt',
@ -143,8 +143,8 @@ export const THEMES = [
string: '#3ad900', string: '#3ad900',
comment: '#08f', comment: '#08f',
meta: '#ff9d00', meta: '#ff9d00',
tag: '#9effff' tag: '#9effff',
} },
}, },
{ {
id: 'dracula', id: 'dracula',
@ -162,8 +162,8 @@ export const THEMES = [
string: '#f1fa8c', string: '#f1fa8c',
comment: '#6272a4', comment: '#6272a4',
meta: '#f8f8f2', meta: '#f8f8f2',
tag: '#ff79c6' tag: '#ff79c6',
} },
}, },
{ {
id: 'duotone-dark', id: 'duotone-dark',
@ -181,8 +181,8 @@ export const THEMES = [
string: '#ffb870', string: '#ffb870',
comment: '#6c6783', comment: '#6c6783',
meta: '#555', meta: '#555',
tag: '#eeebff' tag: '#eeebff',
} },
}, },
{ {
id: 'hopscotch', id: 'hopscotch',
@ -200,8 +200,8 @@ export const THEMES = [
string: '#fdcc59', string: '#fdcc59',
comment: '#b33508', comment: '#b33508',
meta: '#555', meta: '#555',
tag: '#dd464c' tag: '#dd464c',
} },
}, },
{ {
id: 'lucario', id: 'lucario',
@ -219,8 +219,8 @@ export const THEMES = [
string: '#E6DB74', string: '#E6DB74',
comment: '#5c98cd', comment: '#5c98cd',
meta: '#f8f8f2', meta: '#f8f8f2',
tag: '#ff6541' tag: '#ff6541',
} },
}, },
{ {
id: 'material', id: 'material',
@ -238,8 +238,8 @@ export const THEMES = [
string: '#C3E88D', string: '#C3E88D',
comment: '#546E7A', comment: '#546E7A',
meta: '#80CBC4', meta: '#80CBC4',
tag: 'rgba(255, 83, 112, 1)' tag: 'rgba(255, 83, 112, 1)',
} },
}, },
{ {
id: 'monokai', id: 'monokai',
@ -257,8 +257,8 @@ export const THEMES = [
string: '#e6db74', string: '#e6db74',
comment: '#75715e', comment: '#75715e',
meta: '#555', meta: '#555',
tag: '#bc6283' tag: '#bc6283',
} },
}, },
{ {
id: 'night-owl', id: 'night-owl',
@ -275,8 +275,8 @@ export const THEMES = [
number: '#F78C6C', number: '#F78C6C',
string: '#ecc48d', string: '#ecc48d',
comment: '#5c6370', comment: '#5c6370',
meta: '#7fdbca' meta: '#7fdbca',
} },
}, },
{ {
id: 'nord', id: 'nord',
@ -294,8 +294,8 @@ export const THEMES = [
string: '#A3BE8C', string: '#A3BE8C',
comment: '#4C566A', comment: '#4C566A',
meta: '#81A1C1', meta: '#81A1C1',
tag: '#81A1C1' tag: '#81A1C1',
} },
}, },
{ {
id: 'oceanic-next', id: 'oceanic-next',
@ -313,8 +313,8 @@ export const THEMES = [
string: '#99C794', string: '#99C794',
comment: '#65737E', comment: '#65737E',
meta: '#555', meta: '#555',
tag: '#C594C5' tag: '#C594C5',
} },
}, },
{ {
id: 'one-light', id: 'one-light',
@ -333,8 +333,8 @@ export const THEMES = [
string: '#50a14f', string: '#50a14f',
comment: '#a0a1a7', comment: '#a0a1a7',
meta: '#383a42', meta: '#383a42',
tag: '#e45649' tag: '#e45649',
} },
}, },
{ {
id: 'one-dark', id: 'one-dark',
@ -352,8 +352,8 @@ export const THEMES = [
string: '#98c379', string: '#98c379',
comment: '#5c6370', comment: '#5c6370',
meta: '#abb2bf', meta: '#abb2bf',
tag: '#e06c75' tag: '#e06c75',
} },
}, },
{ {
id: 'panda-syntax', id: 'panda-syntax',
@ -371,8 +371,8 @@ export const THEMES = [
string: '#19F9D8', string: '#19F9D8',
comment: '#676B79', comment: '#676B79',
meta: '#b084eb', meta: '#b084eb',
tag: '#ff2c6d' tag: '#ff2c6d',
} },
}, },
{ {
id: 'paraiso-dark', id: 'paraiso-dark',
@ -390,8 +390,8 @@ export const THEMES = [
string: '#fec418', string: '#fec418',
comment: '#e96ba8', comment: '#e96ba8',
meta: '#555', meta: '#555',
tag: '#ef6155' tag: '#ef6155',
} },
}, },
{ {
id: 'seti', id: 'seti',
@ -409,8 +409,8 @@ export const THEMES = [
string: '#55b5db', string: '#55b5db',
comment: '#41535b', comment: '#41535b',
meta: '#55b5db', meta: '#55b5db',
tag: '#55b5db' tag: '#55b5db',
} },
}, },
{ {
id: 'shades-of-purple', id: 'shades-of-purple',
@ -428,8 +428,8 @@ export const THEMES = [
string: '#A5FF90', string: '#A5FF90',
comment: '#B362FF', comment: '#B362FF',
meta: '#FF9D00', meta: '#FF9D00',
tag: '#9EFFFF' tag: '#9EFFFF',
} },
}, },
{ {
id: 'solarized dark', id: 'solarized dark',
@ -448,8 +448,8 @@ export const THEMES = [
string: '#859900', string: '#859900',
comment: '#586e75', comment: '#586e75',
meta: '#859900', meta: '#859900',
tag: '#93a1a1' tag: '#93a1a1',
} },
}, },
{ {
id: 'solarized light', id: 'solarized light',
@ -469,8 +469,8 @@ export const THEMES = [
string: '#859900', string: '#859900',
comment: '#586e75', comment: '#586e75',
meta: '#859900', meta: '#859900',
tag: '#93a1a1' tag: '#93a1a1',
} },
}, },
{ {
id: 'synthwave-84', id: 'synthwave-84',
@ -488,8 +488,8 @@ export const THEMES = [
string: '#ff8b39', string: '#ff8b39',
comment: '#6d77b3', comment: '#6d77b3',
meta: '#ff8b39', meta: '#ff8b39',
tag: '#f92aad' tag: '#f92aad',
} },
}, },
{ {
id: 'twilight', id: 'twilight',
@ -507,8 +507,8 @@ export const THEMES = [
string: '#8f9d6a', string: '#8f9d6a',
comment: '#777', comment: '#777',
meta: '#f7f7f7', meta: '#f7f7f7',
tag: '#997643' tag: '#997643',
} },
}, },
{ {
id: 'verminal', id: 'verminal',
@ -526,8 +526,8 @@ export const THEMES = [
string: '#98c379', string: '#98c379',
comment: '#5c6370', comment: '#5c6370',
meta: '#abb2bf', meta: '#abb2bf',
tag: '#e06c75' tag: '#e06c75',
} },
}, },
{ {
id: 'vscode', id: 'vscode',
@ -545,8 +545,8 @@ export const THEMES = [
string: '#CE9178', string: '#CE9178',
comment: '#6A9955', comment: '#6A9955',
meta: '#D4D4D4', meta: '#D4D4D4',
tag: '#569cd6' tag: '#569cd6',
} },
}, },
{ {
id: 'yeti', id: 'yeti',
@ -565,8 +565,8 @@ export const THEMES = [
string: '#96c0d8', string: '#96c0d8',
comment: '#d4c8be', comment: '#d4c8be',
meta: '#96c0d8', meta: '#96c0d8',
tag: '#96c0d8' tag: '#96c0d8',
} },
}, },
{ {
id: 'zenburn', id: 'zenburn',
@ -584,9 +584,9 @@ export const THEMES = [
string: '#cc9393', string: '#cc9393',
comment: '#7f9f7f', comment: '#7f9f7f',
meta: '#f0dfaf', meta: '#f0dfaf',
tag: '#93e0e3' tag: '#93e0e3',
} },
} },
] ]
export const THEMES_HASH = toHash(THEMES) export const THEMES_HASH = toHash(THEMES)
@ -594,404 +594,404 @@ export const THEMES_HASH = toHash(THEMES)
export const LANGUAGES = [ export const LANGUAGES = [
{ {
name: 'Auto', name: 'Auto',
mode: 'auto' mode: 'auto',
}, },
{ {
name: 'Apache', name: 'Apache',
mode: 'apache', mode: 'apache',
mime: 'text/apache', mime: 'text/apache',
custom: true, custom: true,
highlight: true highlight: true,
}, },
{ {
name: 'Bash', name: 'Bash',
mode: 'shell', mode: 'shell',
mime: 'application/x-sh', mime: 'application/x-sh',
highlight: true highlight: true,
}, },
{ {
name: 'Plain Text', name: 'Plain Text',
mode: 'text' mode: 'text',
}, },
{ {
name: 'C', name: 'C',
mode: 'clike', mode: 'clike',
mime: 'text/x-csrc', mime: 'text/x-csrc',
short: 'c' short: 'c',
}, },
{ {
name: 'C++', name: 'C++',
mode: 'clike', mode: 'clike',
mime: 'text/x-c++src', mime: 'text/x-c++src',
short: 'cpp', short: 'cpp',
highlight: true highlight: true,
}, },
{ {
name: 'C#', name: 'C#',
mode: 'clike', mode: 'clike',
mime: 'text/x-csharp', mime: 'text/x-csharp',
short: 'cs', short: 'cs',
highlight: true highlight: true,
}, },
{ {
name: 'Clojure', name: 'Clojure',
mode: 'clojure', mode: 'clojure',
highlight: true highlight: true,
}, },
{ {
name: 'COBOL', name: 'COBOL',
mode: 'cobol' mode: 'cobol',
}, },
{ {
name: 'CoffeeScript', name: 'CoffeeScript',
mode: 'coffeescript', mode: 'coffeescript',
highlight: true highlight: true,
}, },
{ {
name: 'Crystal', name: 'Crystal',
mode: 'crystal', mode: 'crystal',
highlight: true highlight: true,
}, },
{ {
name: 'CSS', name: 'CSS',
mode: 'css', mode: 'css',
highlight: true highlight: true,
}, },
{ {
name: 'D', name: 'D',
mode: 'd', mode: 'd',
highlight: true highlight: true,
}, },
{ {
name: 'Dart', name: 'Dart',
mode: 'dart', mode: 'dart',
highlight: true highlight: true,
}, },
{ {
name: 'Diff', name: 'Diff',
mode: 'diff', mode: 'diff',
mime: 'text/x-diff', mime: 'text/x-diff',
highlight: true highlight: true,
}, },
{ {
name: 'Django', name: 'Django',
mode: 'django', mode: 'django',
highlight: true highlight: true,
}, },
{ {
name: 'Docker', name: 'Docker',
mode: 'dockerfile', mode: 'dockerfile',
highlight: true highlight: true,
}, },
{ {
name: 'Elixir', name: 'Elixir',
mode: 'elixir', mode: 'elixir',
custom: true, custom: true,
highlight: true highlight: true,
}, },
{ {
name: 'Elm', name: 'Elm',
mode: 'elm', mode: 'elm',
highlight: true highlight: true,
}, },
{ {
name: 'Erlang', name: 'Erlang',
mode: 'erlang', mode: 'erlang',
highlight: true highlight: true,
}, },
{ {
name: 'Fortran', name: 'Fortran',
mode: 'fortran', mode: 'fortran',
highlight: true highlight: true,
}, },
{ {
name: 'Gherkin', name: 'Gherkin',
mode: 'gherkin', mode: 'gherkin',
highlight: true highlight: true,
}, },
{ {
name: 'GraphQL', name: 'GraphQL',
mode: 'graphql', mode: 'graphql',
custom: true custom: true,
}, },
{ {
name: 'Go', name: 'Go',
mode: 'go', mode: 'go',
mime: 'text/x-go', mime: 'text/x-go',
highlight: true highlight: true,
}, },
{ {
name: 'Groovy', name: 'Groovy',
mode: 'groovy', mode: 'groovy',
highlight: true highlight: true,
}, },
{ {
name: 'Handlebars', name: 'Handlebars',
mode: 'handlebars', mode: 'handlebars',
highlight: true highlight: true,
}, },
{ {
name: 'Haskell', name: 'Haskell',
mode: 'haskell', mode: 'haskell',
highlight: true highlight: true,
}, },
{ {
name: 'HTML/XML', name: 'HTML/XML',
mode: 'htmlmixed' mode: 'htmlmixed',
}, },
{ {
name: 'Java', name: 'Java',
mode: 'clike', mode: 'clike',
mime: 'text/x-java', mime: 'text/x-java',
short: 'java', short: 'java',
highlight: true highlight: true,
}, },
{ {
name: 'JavaScript', name: 'JavaScript',
mode: 'javascript', mode: 'javascript',
short: 'javascript', short: 'javascript',
highlight: true highlight: true,
}, },
{ {
name: 'JSON', name: 'JSON',
mode: 'javascript', mode: 'javascript',
mime: 'application/json', mime: 'application/json',
short: 'json', short: 'json',
highlight: true highlight: true,
}, },
{ {
name: 'JSX', name: 'JSX',
mode: 'jsx', mode: 'jsx',
short: 'jsx' short: 'jsx',
}, },
{ {
name: 'Julia', name: 'Julia',
mode: 'julia', mode: 'julia',
highlight: true highlight: true,
}, },
{ {
name: 'Kotlin', name: 'Kotlin',
mode: 'clike', mode: 'clike',
mime: 'text/x-kotlin', mime: 'text/x-kotlin',
short: 'kotlin', short: 'kotlin',
highlight: true highlight: true,
}, },
{ {
name: 'LaTeX', name: 'LaTeX',
mode: 'stex' mode: 'stex',
}, },
{ {
name: 'Lisp', name: 'Lisp',
mode: 'commonlisp' mode: 'commonlisp',
}, },
{ {
name: 'Lua', name: 'Lua',
mode: 'lua', mode: 'lua',
highlight: true highlight: true,
}, },
{ {
name: 'Markdown', name: 'Markdown',
mode: 'markdown', mode: 'markdown',
highlight: true highlight: true,
}, },
{ {
name: 'Mathematica', name: 'Mathematica',
mode: 'mathematica', mode: 'mathematica',
highlight: true highlight: true,
}, },
{ {
name: 'MATLAB/Octave', name: 'MATLAB/Octave',
mode: 'octave', mode: 'octave',
mime: 'text/x-octave' mime: 'text/x-octave',
}, },
{ {
name: 'MySQL', name: 'MySQL',
mode: 'sql', mode: 'sql',
mime: 'text/x-mysql', mime: 'text/x-mysql',
short: 'mysql' short: 'mysql',
}, },
{ {
name: 'N-Triples', name: 'N-Triples',
mode: 'ntriples', mode: 'ntriples',
mime: 'application/n-triples' mime: 'application/n-triples',
}, },
{ {
name: 'NGINX', name: 'NGINX',
mode: 'nginx', mode: 'nginx',
highlight: true highlight: true,
}, },
{ {
name: 'Nim', name: 'Nim',
mode: 'nimrod', mode: 'nimrod',
custom: true, custom: true,
highlight: true highlight: true,
}, },
{ {
name: 'Objective C', name: 'Objective C',
mode: 'clike', mode: 'clike',
mime: 'text/x-objectivec', mime: 'text/x-objectivec',
short: 'objectivec', short: 'objectivec',
highlight: true highlight: true,
}, },
{ {
name: 'OCaml/F#', name: 'OCaml/F#',
mode: 'mllike' mode: 'mllike',
}, },
{ {
name: 'Pascal', name: 'Pascal',
mode: 'pascal' mode: 'pascal',
}, },
{ {
name: 'Perl', name: 'Perl',
mode: 'perl', mode: 'perl',
highlight: true highlight: true,
}, },
{ {
name: 'PHP', name: 'PHP',
mode: 'php', mode: 'php',
mime: 'text/x-php', mime: 'text/x-php',
short: 'php', short: 'php',
highlight: true highlight: true,
}, },
{ {
name: 'PowerShell', name: 'PowerShell',
mode: 'powershell', mode: 'powershell',
highlight: true highlight: true,
}, },
{ {
name: 'Python', name: 'Python',
mode: 'python', mode: 'python',
highlight: true highlight: true,
}, },
{ {
name: 'R', name: 'R',
mode: 'r', mode: 'r',
highlight: true highlight: true,
}, },
{ {
name: 'RISC-V', name: 'RISC-V',
mode: 'riscv', mode: 'riscv',
custom: true custom: true,
}, },
{ {
name: 'Ruby', name: 'Ruby',
mode: 'ruby', mode: 'ruby',
highlight: true highlight: true,
}, },
{ {
name: 'Rust', name: 'Rust',
mode: 'rust', mode: 'rust',
highlight: true highlight: true,
}, },
{ {
name: 'Sass', name: 'Sass',
mode: 'sass' mode: 'sass',
}, },
{ {
name: 'Scala', name: 'Scala',
mode: 'clike', mode: 'clike',
mime: 'text/x-scala', mime: 'text/x-scala',
short: 'scala', short: 'scala',
highlight: true highlight: true,
}, },
{ {
name: 'Smalltalk', name: 'Smalltalk',
mode: 'smalltalk', mode: 'smalltalk',
highlight: true highlight: true,
}, },
{ {
name: 'Solidity', name: 'Solidity',
mode: 'solidity', mode: 'solidity',
custom: true custom: true,
}, },
{ {
name: 'SPARQL', name: 'SPARQL',
mode: 'sparql', mode: 'sparql',
mime: 'application/sparql-query' mime: 'application/sparql-query',
}, },
{ {
name: 'SQL', name: 'SQL',
mode: 'sql', mode: 'sql',
highlight: true highlight: true,
}, },
{ {
name: 'Stylus', name: 'Stylus',
mode: 'stylus', mode: 'stylus',
mime: 'stylus', mime: 'stylus',
highlight: true highlight: true,
}, },
{ {
name: 'Swift', name: 'Swift',
mode: 'swift', mode: 'swift',
highlight: true highlight: true,
}, },
{ {
name: 'TCL', name: 'TCL',
mode: 'tcl', mode: 'tcl',
highlight: true highlight: true,
}, },
{ {
name: 'TOML', name: 'TOML',
mode: 'toml' mode: 'toml',
}, },
{ {
name: 'Turtle', name: 'Turtle',
mode: 'turtle', mode: 'turtle',
mime: 'text/turtle' mime: 'text/turtle',
}, },
{ {
name: 'TypeScript', name: 'TypeScript',
mode: 'javascript', mode: 'javascript',
mime: 'application/typescript', mime: 'application/typescript',
short: 'typescript', short: 'typescript',
highlight: true highlight: true,
}, },
{ {
name: 'TSX', name: 'TSX',
mode: 'jsx', mode: 'jsx',
mime: 'text/typescript-jsx', mime: 'text/typescript-jsx',
short: 'tsx' short: 'tsx',
}, },
{ {
name: 'Twig', name: 'Twig',
mode: 'twig', mode: 'twig',
mime: 'text/x-twig', mime: 'text/x-twig',
highlight: true highlight: true,
}, },
{ {
name: 'VB.NET', name: 'VB.NET',
mode: 'vb' mode: 'vb',
}, },
{ {
name: 'Verilog', name: 'Verilog',
mode: 'verilog', mode: 'verilog',
highlight: true highlight: true,
}, },
{ {
name: 'VHDL', name: 'VHDL',
mode: 'vhdl', mode: 'vhdl',
highlight: true highlight: true,
}, },
{ {
name: 'Vue', name: 'Vue',
mode: 'vue' mode: 'vue',
}, },
{ {
name: 'XQuery', name: 'XQuery',
mode: 'xquery', mode: 'xquery',
highlight: true highlight: true,
}, },
{ {
name: 'YAML', name: 'YAML',
mode: 'yaml', mode: 'yaml',
highlight: true highlight: true,
} },
] ]
export const EXPORT_SIZES = [ export const EXPORT_SIZES = [
{ id: '1x', name: '1x', value: 1 }, { id: '1x', name: '1x', value: 1 },
{ id: '2x', name: '2x', value: 2 }, { id: '2x', name: '2x', value: 2 },
{ id: '4x', name: '4x', value: 4 } { id: '4x', name: '4x', value: 4 },
] ]
export const EXPORT_SIZES_HASH = toHash(EXPORT_SIZES) export const EXPORT_SIZES_HASH = toHash(EXPORT_SIZES)
@ -1015,7 +1015,7 @@ export const COLORS = {
PURPLE: '#C198FB', PURPLE: '#C198FB',
DARK_PURPLE: '#55436F', DARK_PURPLE: '#55436F',
RED: '#ff5f56', RED: '#ff5f56',
BLUE: '#57b5f9' BLUE: '#57b5f9',
} }
export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
@ -1053,14 +1053,14 @@ export const DEFAULT_SETTINGS = {
exportSize: '2x', exportSize: '2x',
watermark: false, watermark: false,
squaredImage: false, squaredImage: false,
hiddenCharacters: false hiddenCharacters: false,
} }
export const DEFAULT_PRESETS = [ export const DEFAULT_PRESETS = [
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
icon: '/static/presets/4.png', icon: '/static/presets/4.png',
id: 'preset:4' id: 'preset:4',
}, },
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
@ -1070,7 +1070,7 @@ export const DEFAULT_PRESETS = [
fontFamily: 'Fira Code', fontFamily: 'Fira Code',
lineHeight: '152%', lineHeight: '152%',
icon: '/static/presets/7.png', icon: '/static/presets/7.png',
id: 'preset:7' id: 'preset:7',
}, },
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
@ -1080,7 +1080,7 @@ export const DEFAULT_PRESETS = [
fontFamily: 'Fira Code', fontFamily: 'Fira Code',
lineHeight: '152%', lineHeight: '152%',
icon: '/static/presets/8.png', icon: '/static/presets/8.png',
id: 'preset:8' id: 'preset:8',
}, },
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
@ -1090,7 +1090,7 @@ export const DEFAULT_PRESETS = [
windowTheme: 'bw', windowTheme: 'bw',
lineHeight: '152%', lineHeight: '152%',
icon: '/static/presets/9.png', icon: '/static/presets/9.png',
id: 'preset:9' id: 'preset:9',
}, },
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
@ -1102,7 +1102,7 @@ export const DEFAULT_PRESETS = [
fontSize: '14px', fontSize: '14px',
lineHeight: '143%', lineHeight: '143%',
icon: '/static/presets/0.png', icon: '/static/presets/0.png',
id: 'preset:0' id: 'preset:0',
}, },
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
@ -1110,7 +1110,7 @@ export const DEFAULT_PRESETS = [
theme: 'one-light', theme: 'one-light',
lineHeight: '143%', lineHeight: '143%',
icon: '/static/presets/1.png', icon: '/static/presets/1.png',
id: 'preset:1' id: 'preset:1',
}, },
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
@ -1120,7 +1120,7 @@ export const DEFAULT_PRESETS = [
lineHeight: '143%', lineHeight: '143%',
windowControls: false, windowControls: false,
icon: '/static/presets/2.png', icon: '/static/presets/2.png',
id: 'preset:2' id: 'preset:2',
}, },
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
@ -1129,7 +1129,7 @@ export const DEFAULT_PRESETS = [
fontFamily: 'IBM Plex Mono', fontFamily: 'IBM Plex Mono',
lineHeight: '143%', lineHeight: '143%',
icon: '/static/presets/3.png', icon: '/static/presets/3.png',
id: 'preset:3' id: 'preset:3',
}, },
{ {
@ -1137,7 +1137,7 @@ export const DEFAULT_PRESETS = [
backgroundColor: 'rgba(222,171,99,1)', backgroundColor: 'rgba(222,171,99,1)',
theme: 'duotone-dark', theme: 'duotone-dark',
icon: '/static/presets/5.png', icon: '/static/presets/5.png',
id: 'preset:5' id: 'preset:5',
}, },
{ {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
@ -1147,6 +1147,6 @@ export const DEFAULT_PRESETS = [
theme: 'solarized light', theme: 'solarized light',
windowTheme: 'sharp', windowTheme: 'sharp',
icon: '/static/presets/6.png', icon: '/static/presets/6.png',
id: 'preset:6' id: 'preset:6',
} },
] ]

4
lib/custom/modes/apache.js
Unescape Escape View File

@ -128,9 +128,9 @@ CodeMirror.defineMode('apache', function(/* config */) {
position: 'def', position: 'def',
nextMultiline: false, nextMultiline: false,
inMultiline: false, inMultiline: false,
afterSection: false afterSection: false,
}
} }
},
} }
}) })

12
lib/custom/modes/nimrod.js
Unescape Escape View File

@ -33,7 +33,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
'{', '{',
'}', '}',
'.\\.', '.\\.',
'.' '.',
] ]
var operators = new RegExp( var operators = new RegExp(
ops ops
@ -114,7 +114,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
'isnot', 'isnot',
'in', 'in',
'as', 'as',
'of' 'of',
] ]
var commonBuiltins = [ var commonBuiltins = [
@ -327,7 +327,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
'EFloatDivByZero', 'EFloatDivByZero',
'EFloatOverflow', 'EFloatOverflow',
'EFloatInexact', 'EFloatInexact',
'EDeadThrea' 'EDeadThrea',
] ]
if (parserConf.extra_keywords != undefined) if (parserConf.extra_keywords != undefined)
@ -503,7 +503,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
state.scopes.unshift({ state.scopes.unshift({
offset: indentUnit, offset: indentUnit,
type: type type: type,
}) })
} }
@ -603,7 +603,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
lastStyle: null, lastStyle: null,
lastToken: null, lastToken: null,
lambda: false, lambda: false,
dedent: 0 dedent: 0,
} }
}, },
@ -627,7 +627,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
}, },
lineComment: '#', lineComment: '#',
fold: 'indent' fold: 'indent',
} }
return external return external

8
lib/custom/modes/riscv.js
Unescape Escape View File

@ -471,7 +471,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
'fsrm', 'fsrm',
'fsflags', 'fsflags',
'fsrmi', 'fsrmi',
'fsflagsi' 'fsflagsi',
], ],
'i' 'i'
) )
@ -548,7 +548,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
't4', 't4',
't5', 't5',
't6', 't6',
'pc' 'pc',
], ],
'' ''
) )
@ -597,7 +597,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
'.balign', '.balign',
'.zero', '.zero',
'.float', '.float',
'.double' '.double',
], ],
'i' 'i'
) )
@ -671,7 +671,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
else if (registers.test(word)) style = 'variable-2' else if (registers.test(word)) style = 'variable-2'
} }
return style return style
} },
} }
}) })

14
lib/routing.js
Unescape Escape View File

@ -51,8 +51,8 @@ const mapper = new Morph({
} catch (e) { } catch (e) {
return v return v
} }
} },
} },
}) })
const readMappings = [ const readMappings = [
@ -80,7 +80,7 @@ const readMappings = [
{ field: 'readonly', type: 'bool' }, { field: 'readonly', type: 'bool' },
{ field: 'id' }, { field: 'id' },
{ field: 'highlights', type: 'parse' }, { field: 'highlights', type: 'parse' },
{ field: 'code', type: 'decode' } { field: 'code', type: 'decode' },
] ]
const writeMappings = [ const writeMappings = [
@ -103,7 +103,7 @@ const writeMappings = [
{ field: 'squaredImage:si', type: 'bool' }, { field: 'squaredImage:si', type: 'bool' },
{ field: 'exportSize:es' }, { field: 'exportSize:es' },
{ field: 'watermark:wm', type: 'bool' }, { field: 'watermark:wm', type: 'bool' },
{ field: 'code', type: 'encode' } { field: 'code', type: 'encode' },
] ]
export const serializeState = state => { export const serializeState = state => {
@ -168,7 +168,7 @@ export const getRouteState = router => {
return { return {
parameter, parameter,
queryState queryState,
} }
} }
@ -179,11 +179,11 @@ export const updateRouteState = (router, state) => {
router.replace( router.replace(
{ {
pathname: router.pathname pathname: router.pathname,
}, },
{ {
pathname: router.pathname, pathname: router.pathname,
query: mappedState query: mappedState,
}, },
{ shallow: true } { shallow: true }
) )

14
lib/util.js
Unescape Escape View File

@ -24,7 +24,7 @@ export const saveSettings = morph.compose(
'themes', 'themes',
'highlights', 'highlights',
'fontUrl', 'fontUrl',
'selectedLines' 'selectedLines',
]) ])
) )
export const savePresets = morph.compose( export const savePresets = morph.compose(
@ -46,10 +46,7 @@ export const toggle = stateField => state => ({ [stateField]: !state[stateField]
// https://gist.github.com/alexgibson/1704515 // https://gist.github.com/alexgibson/1704515
export const escapeHtml = s => { export const escapeHtml = s => {
if (typeof s === 'string') { if (typeof s === 'string') {
return s return s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\//g, '&#x2F;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\//g, '&#x2F;')
} }
} }
@ -89,13 +86,10 @@ export const formatCode = async code => {
parser: 'babel', parser: 'babel',
plugins: [babylonParser], plugins: [babylonParser],
semi: false, semi: false,
singleQuote: true singleQuote: true,
}) })
} }
export const stringifyRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})` export const stringifyRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`
export const generateId = () => export const generateId = () => Math.random().toString(36).slice(2)
Math.random()
.toString(36)
.slice(2)

16
next.config.js
Unescape Escape View File

@ -18,28 +18,28 @@ const config = withOffline({
options: { options: {
cacheName: 'offlineCache', cacheName: 'offlineCache',
expiration: { expiration: {
maxEntries: 200 maxEntries: 200,
} },
} },
} },
] ],
}, },
env: { env: {
FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID, FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID, FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
FIREBASE_FE_APP_ID: process.env.FIREBASE_FE_APP_ID, FIREBASE_FE_APP_ID: process.env.FIREBASE_FE_APP_ID,
FIREBASE_API_KEY: process.env.FIREBASE_API_KEY, FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
STRIPE_PUBLIC_KEY: process.env.STRIPE_PUBLIC_KEY STRIPE_PUBLIC_KEY: process.env.STRIPE_PUBLIC_KEY,
}, },
webpack: (config, options) => { webpack: (config, options) => {
config.module.rules.push({ config.module.rules.push({
test: /\.js$/, test: /\.js$/,
include: /node_modules\/graphql-language-service-parser/, include: /node_modules\/graphql-language-service-parser/,
use: [options.defaultLoaders.babel] use: [options.defaultLoaders.babel],
}) })
return config return config
} },
}) })
module.exports = process.env.ANALYZE === 'true' ? withBundleAnalyzer(config) : config module.exports = process.env.ANALYZE === 'true' ? withBundleAnalyzer(config) : config

2
pages/[id].js
Unescape Escape View File

@ -23,7 +23,7 @@ class IdPage extends React.PureComponent {
// 404 Not found // 404 Not found
if (res) { if (res) {
res.writeHead(302, { res.writeHead(302, {
Location: '/' Location: '/',
}) })
res.end() res.end()
} else { } else {

2
pages/account.js
Unescape Escape View File

@ -14,7 +14,7 @@ import { loginGitHub, logout } from '../lib/client'
import { COLORS } from '../lib/constants' import { COLORS } from '../lib/constants'
const Billing = dynamic(() => import('../components/Billing'), { const Billing = dynamic(() => import('../components/Billing'), {
loading: () => <div style={{ minHeight: '360px' }} /> loading: () => <div style={{ minHeight: '360px' }} />,
}) })
function logoutThunk() { function logoutThunk() {

2
pages/embed/[id].js
Unescape Escape View File

@ -23,7 +23,7 @@ class EmbedIdPage extends React.PureComponent {
// 404 Not found // 404 Not found
if (res) { if (res) {
res.writeHead(302, { res.writeHead(302, {
Location: '/embed' Location: '/embed',
}) })
res.end() res.end()
} else { } else {

8
pages/embed/index.js
Unescape Escape View File

@ -40,7 +40,7 @@ class Embed extends React.Component {
code: DEFAULT_CODE, code: DEFAULT_CODE,
mounted: false, mounted: false,
readOnly: true, readOnly: true,
key: 0 key: 0,
} }
snippet = {} snippet = {}
@ -54,7 +54,7 @@ class Embed extends React.Component {
...queryState, ...queryState,
copyable: queryState.copy !== false, copyable: queryState.copy !== false,
readOnly: queryState.readonly !== false, readOnly: queryState.readonly !== false,
mounted: true mounted: true,
}, },
this.postMessage this.postMessage
) )
@ -70,7 +70,7 @@ class Embed extends React.Component {
// Used by embed provider // Used by embed provider
src: window.location.toString(), src: window.location.toString(),
context: 'iframe.resize', context: 'iframe.resize',
height: this.ref.current.offsetHeight height: this.ref.current.offsetHeight,
}), }),
'*' '*'
), ),
@ -84,7 +84,7 @@ class Embed extends React.Component {
window.top.postMessage( window.top.postMessage(
{ {
id: this.state.id ? `carbon:${this.state.id}` : 'carbon', id: this.state.id ? `carbon:${this.state.id}` : 'carbon',
code code,
}, },
'*' '*'
) )

Write Preview
Loading…
Cancel
Save