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

Sanitize color inputs (#196)

Browse Source 
* Sanitize color inputs

* Remove unneeded dep

* Move to constants

* Case insensative
main
Michael Fix 7 years ago committed by GitHub
parent 1951402d8a
commit 3d4ba85732
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 610 additions and 3 deletions
Show Stats Download Patch File Download Diff File

7
components/BackgroundSelect.js
Unescape Escape View File

@ -3,7 +3,8 @@ import enhanceWithClickOutside from 'react-click-outside'
import { SketchPicker } from 'react-color'
import WindowPointer from './WindowPointer'
import ImagePicker from './ImagePicker'
import { COLORS } from '../lib/constants'
import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants'
import { validateColor } from '../lib/colors'
import { parseRGBA, capitalizeFirstLetter } from '../lib/util'
class BackgroundSelect extends React.Component {
@ -46,6 +47,10 @@ class BackgroundSelect extends React.Component {
.replace(/\//g, '/')
: background
if (!validateColor(background)) {
background = DEFAULT_BG_COLOR
}
return (
<div className="bg-select-container">
<div className="bg-select-display">

600
lib/colors.js
Unescape Escape View File

@ -0,0 +1,600 @@
const colors = new Set([
'indian red',
'crimson',
'lightpink',
'lightpink 1',
'lightpink 2',
'lightpink 3',
'lightpink 4',
'pink',
'pink 1',
'pink 2',
'pink 3',
'pink 4',
'palevioletred',
'palevioletred 1',
'palevioletred 2',
'palevioletred 3',
'palevioletred 4',
'lavenderblush 1',
'lavenderblush',
'lavenderblush 2',
'lavenderblush 3',
'lavenderblush 4',
'violetred 1',
'violetred 2',
'violetred 3',
'violetred 4',
'hotpink',
'hotpink 1',
'hotpink 2',
'hotpink 3',
'hotpink 4',
'raspberry',
'deeppink 1',
'deeppink',
'deeppink 2',
'deeppink 3',
'deeppink 4',
'maroon 1',
'maroon 2',
'maroon 3',
'maroon 4',
'mediumvioletred',
'violetred',
'orchid',
'orchid 1',
'orchid 2',
'orchid 3',
'orchid 4',
'thistle',
'thistle 1',
'thistle 2',
'thistle 3',
'thistle 4',
'plum 1',
'plum 2',
'plum 3',
'plum 4',
'plum',
'violet',
'magenta',
'fuchsia',
'magenta 2',
'magenta 3',
'magenta 4',
'darkmagenta',
'purple',
'mediumorchid',
'mediumorchid 1',
'mediumorchid 2',
'mediumorchid 3',
'mediumorchid 4',
'darkviolet',
'darkorchid',
'darkorchid 1',
'darkorchid 2',
'darkorchid 3',
'darkorchid 4',
'indigo',
'blueviolet',
'purple 1',
'purple 2',
'purple 3',
'purple 4',
'mediumpurple',
'mediumpurple 1',
'mediumpurple 2',
'mediumpurple 3',
'mediumpurple 4',
'darkslateblue',
'lightslateblue',
'mediumslateblue',
'slateblue',
'slateblue 1',
'slateblue 2',
'slateblue 3',
'slateblue 4',
'ghostwhite',
'lavender',
'blue',
'blue 2',
'blue 3',
'mediumblue',
'blue 4',
'darkblue',
'navy',
'midnightblue',
'cobalt',
'royalblue',
'royalblue 1',
'royalblue 2',
'royalblue 3',
'royalblue 4',
'cornflowerblue',
'lightsteelblue',
'lightsteelblue 1',
'lightsteelblue 2',
'lightsteelblue 3',
'lightsteelblue 4',
'lightslategray',
'slategray',
'slategray 1',
'slategray 2',
'slategray 3',
'slategray 4',
'dodgerblue 1',
'dodgerblue',
'dodgerblue 2',
'dodgerblue 3',
'dodgerblue 4',
'aliceblue',
'steelblue',
'steelblue 1',
'steelblue 2',
'steelblue 3',
'steelblue 4',
'lightskyblue',
'lightskyblue 1',
'lightskyblue 2',
'lightskyblue 3',
'lightskyblue 4',
'skyblue 1',
'skyblue 2',
'skyblue 3',
'skyblue 4',
'skyblue',
'deepskyblue 1',
'deepskyblue',
'deepskyblue 2',
'deepskyblue 3',
'deepskyblue 4',
'peacock',
'lightblue',
'lightblue 1',
'lightblue 2',
'lightblue 3',
'lightblue 4',
'powderblue',
'cadetblue 1',
'cadetblue 2',
'cadetblue 3',
'cadetblue 4',
'turquoise 1',
'turquoise 2',
'turquoise 3',
'turquoise 4',
'cadetblue',
'darkturquoise',
'azure 1',
'azure',
'azure 2',
'azure 3',
'azure 4',
'lightcyan 1',
'lightcyan',
'lightcyan 2',
'lightcyan 3',
'lightcyan 4',
'paleturquoise 1',
'paleturquoise 2',
'paleturquoise',
'paleturquoise 3',
'paleturquoise 4',
'darkslategray',
'darkslategray 1',
'darkslategray 2',
'darkslategray 3',
'darkslategray 4',
'cyan',
'aqua',
'cyan 2',
'cyan 3',
'cyan 4',
'darkcyan',
'teal',
'mediumturquoise',
'lightseagreen',
'manganeseblue',
'turquoise',
'coldgrey',
'turquoiseblue',
'aquamarine 1',
'aquamarine',
'aquamarine 2',
'aquamarine 3',
'mediumaquamarine',
'aquamarine 4',
'mediumspringgreen',
'mintcream',
'springgreen',
'springgreen 1',
'springgreen 2',
'springgreen 3',
'mediumseagreen',
'seagreen 1',
'seagreen 2',
'seagreen 3',
'seagreen 4',
'seagreen',
'emeraldgreen',
'mint',
'cobaltgreen',
'honeydew 1',
'honeydew',
'honeydew 2',
'honeydew 3',
'honeydew 4',
'darkseagreen',
'darkseagreen 1',
'darkseagreen 2',
'darkseagreen 3',
'darkseagreen 4',
'palegreen',
'palegreen 1',
'palegreen 2',
'lightgreen',
'palegreen 3',
'palegreen 4',
'limegreen',
'forestgreen',
'green 1',
'lime',
'green 2',
'green 3',
'green 4',
'green',
'darkgreen',
'sapgreen',
'lawngreen',
'chartreuse 1',
'chartreuse',
'chartreuse 2',
'chartreuse 3',
'chartreuse 4',
'greenyellow',
'darkolivegreen 1',
'darkolivegreen 2',
'darkolivegreen 3',
'darkolivegreen 4',
'darkolivegreen',
'olivedrab',
'olivedrab 1',
'olivedrab 2',
'olivedrab 3',
'yellowgreen',
'olivedrab 4',
'ivory 1',
'ivory',
'ivory 2',
'ivory 3',
'ivory 4',
'beige',
'lightyellow 1',
'lightyellow',
'lightyellow 2',
'lightyellow 3',
'lightyellow 4',
'lightgoldenrodyellow',
'yellow 1',
'yellow',
'yellow 2',
'yellow 3',
'yellow 4',
'warmgrey',
'olive',
'darkkhaki',
'khaki 1',
'khaki 2',
'khaki 3',
'khaki 4',
'khaki',
'palegoldenrod',
'lemonchiffon 1',
'lemonchiffon',
'lemonchiffon 2',
'lemonchiffon 3',
'lemonchiffon 4',
'lightgoldenrod 1',
'lightgoldenrod 2',
'lightgoldenrod 3',
'lightgoldenrod 4',
'banana',
'gold 1',
'gold',
'gold 2',
'gold 3',
'gold 4',
'cornsilk 1',
'cornsilk',
'cornsilk 2',
'cornsilk 3',
'cornsilk 4',
'goldenrod',
'goldenrod 1',
'goldenrod 2',
'goldenrod 3',
'goldenrod 4',
'darkgoldenrod',
'darkgoldenrod 1',
'darkgoldenrod 2',
'darkgoldenrod 3',
'darkgoldenrod 4',
'orange 1',
'orange',
'orange 2',
'orange 3',
'orange 4',
'floralwhite',
'oldlace',
'wheat',
'wheat 1',
'wheat 2',
'wheat 3',
'wheat 4',
'moccasin',
'papayawhip',
'blanchedalmond',
'navajowhite 1',
'navajowhite',
'navajowhite 2',
'navajowhite 3',
'navajowhite 4',
'eggshell',
'tan',
'brick',
'cadmiumyellow',
'antiquewhite',
'antiquewhite 1',
'antiquewhite 2',
'antiquewhite 3',
'antiquewhite 4',
'burlywood',
'burlywood 1',
'burlywood 2',
'burlywood 3',
'burlywood 4',
'bisque 1',
'bisque',
'bisque 2',
'bisque 3',
'bisque 4',
'melon',
'carrot',
'darkorange',
'darkorange 1',
'darkorange 2',
'darkorange 3',
'darkorange 4',
'tan 1',
'tan 2',
'tan 3',
'peru',
'tan 4',
'linen',
'peachpuff 1',
'peachpuff',
'peachpuff 2',
'peachpuff 3',
'peachpuff 4',
'seashell 1',
'seashell',
'seashell 2',
'seashell 3',
'seashell 4',
'sandybrown',
'rawsienna',
'chocolate',
'chocolate 1',
'chocolate 2',
'chocolate 3',
'chocolate 4',
'saddlebrown',
'ivoryblack',
'flesh',
'cadmiumorange',
'burntsienna',
'sienna',
'sienna 1',
'sienna 2',
'sienna 3',
'sienna 4',
'lightsalmon 1',
'lightsalmon',
'lightsalmon 2',
'lightsalmon 3',
'lightsalmon 4',
'coral',
'orangered 1',
'orangered',
'orangered 2',
'orangered 3',
'orangered 4',
'sepia',
'darksalmon',
'salmon 1',
'salmon 2',
'salmon 3',
'salmon 4',
'coral 1',
'coral 2',
'coral 3',
'coral 4',
'burntumber',
'tomato 1',
'tomato',
'tomato 2',
'tomato 3',
'tomato 4',
'salmon',
'mistyrose 1',
'mistyrose',
'mistyrose 2',
'mistyrose 3',
'mistyrose 4',
'snow 1',
'snow',
'snow 2',
'snow 3',
'snow 4',
'rosybrown',
'rosybrown 1',
'rosybrown 2',
'rosybrown 3',
'rosybrown 4',
'lightcoral',
'indianred',
'indianred 1',
'indianred 2',
'indianred 4',
'indianred 3',
'brown',
'brown 1',
'brown 2',
'brown 3',
'brown 4',
'firebrick',
'firebrick 1',
'firebrick 2',
'firebrick 3',
'firebrick 4',
'red 1',
'red',
'red 2',
'red 3',
'red 4',
'darkred',
'maroon',
'sgi beet',
'sgi slateblue',
'sgi lightblue',
'sgi teal',
'sgi chartreuse',
'sgi olivedrab',
'sgi brightgray',
'sgi salmon',
'sgi darkgray',
'sgi gray 12',
'sgi gray 16',
'sgi gray 32',
'sgi gray 36',
'sgi gray 52',
'sgi gray 56',
'sgi lightgray',
'sgi gray 72',
'sgi gray 76',
'sgi gray 92',
'sgi gray 96',
'white',
'white smoke',
'gray 96',
'gainsboro',
'lightgrey',
'silver',
'darkgray',
'gray',
'dimgray',
'gray 42',
'black',
'gray 99',
'gray 98',
'gray 97',
'gray 95',
'gray 94',
'gray 93',
'gray 92',
'gray 91',
'gray 90',
'gray 89',
'gray 88',
'gray 87',
'gray 86',
'gray 85',
'gray 84',
'gray 83',
'gray 82',
'gray 81',
'gray 80',
'gray 79',
'gray 78',
'gray 77',
'gray 76',
'gray 75',
'gray 74',
'gray 73',
'gray 72',
'gray 71',
'gray 70',
'gray 69',
'gray 68',
'gray 67',
'gray 66',
'gray 65',
'gray 64',
'gray 63',
'gray 62',
'gray 61',
'gray 60',
'gray 59',
'gray 58',
'gray 57',
'gray 56',
'gray 55',
'gray 54',
'gray 53',
'gray 52',
'gray 51',
'gray 50',
'gray 49',
'gray 48',
'gray 47',
'gray 46',
'gray 45',
'gray 44',
'gray 43',
'gray 40',
'gray 39',
'gray 38',
'gray 37',
'gray 36',
'gray 35',
'gray 34',
'gray 33',
'gray 32',
'gray 31',
'gray 30',
'gray 29',
'gray 28',
'gray 27',
'gray 26',
'gray 25',
'gray 24',
'gray 23',
'gray 22',
'gray 21',
'gray 20',
'gray 19',
'gray 18',
'gray 17',
'gray 16',
'gray 15',
'gray 14',
'gray 13',
'gray 12',
'gray 11',
'gray 10',
'gray 9',
'gray 8',
'gray 7',
'gray 6',
'gray 5',
'gray 4',
'gray 3',
'gray 2',
'gray 1',
'whitesmoke'
])
export const validateColor = (str = '') => {
return /#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || colors.has(str.toLowerCase())
}

1
lib/constants.js
Unescape Escape View File

@ -382,6 +382,7 @@ export const LANGUAGE_NAME_HASH = toHash(LANGUAGES, 'short')
export const DEFAULT_LANGUAGE = 'auto'
export const DEFAULT_THEME = THEMES_HASH.seti
export const DEFAULT_BG_COLOR = 'rgba(171, 184, 195, 1)'
export const COLORS = {
BLACK: '#121212',

5
pages/editor.js
Unescape Escape View File

@ -25,7 +25,8 @@ import {
DEFAULT_LANGUAGE,
DEFAULT_THEME,
COLORS,
DEFAULT_CODE
DEFAULT_CODE,
DEFAULT_BG_COLOR
} from '../lib/constants'
import { getQueryStringState, updateQueryString } from '../lib/routing'
import { getState, saveState } from '../lib/util'
@ -60,7 +61,7 @@ class Editor extends React.Component {
this.state = Object.assign(
{
backgroundMode: 'color',
backgroundColor: 'rgba(171, 184, 195, 1)',
backgroundColor: DEFAULT_BG_COLOR,
backgroundImage: null,
backgroundImageSelection: null,
theme: DEFAULT_THEME.id,

Write Preview
Loading…
Cancel
Save