diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js index a6e9cb4..27e5eb6 100644 --- a/components/BackgroundSelect.js +++ b/components/BackgroundSelect.js @@ -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 (
diff --git a/lib/colors.js b/lib/colors.js new file mode 100644 index 0000000..54a6b21 --- /dev/null +++ b/lib/colors.js @@ -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()) +} diff --git a/lib/constants.js b/lib/constants.js index 926e39f..5055f98 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -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', diff --git a/pages/editor.js b/pages/editor.js index 04f4c10..e612d7b 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -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,