use escape-goat

components/BackgroundSelect.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { escape } from 'escape-goat'
 
 import ImagePicker from './ImagePicker'
 import ColorPicker from './ColorPicker'
@@ -19,16 +20,7 @@ class BackgroundSelect extends React.PureComponent {
   render() {
     const { color, mode, image, onChange, aspectRatio, isVisible, toggleVisibility } = this.props
 
-    let background =
-      typeof color === 'string'
-        ? color
-            .replace(/&/g, '&')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#x27;')
-            .replace(/\//g, '&#x2F;')
-        : color
+    let background = typeof color === 'string' ? escape(color).replace(/\//g, '&#x2F;') : color
 
     if (!validateColor(background)) {
       background = DEFAULT_BG_COLOR

lib/util.js

@@ -1,5 +1,6 @@
 import morph from 'morphmorph'
 import omitBy from 'lodash.omitby'
+import { unescape } from 'escape-goat'
 
 const SETTINGS_KEY = 'CARBON_STATE'
 const PRESETS_KEY = 'CARBON_PRESETS'
@@ -30,10 +31,7 @@ export const escapeHtml = s => {
 
 export const unescapeHtml = s => {
   if (typeof s === 'string') {
-    return s
-      .replace(/&lt;/g, '<')
-      .replace(/&gt;/g, '>')
-      .replace(/&#x2F;/g, '/')
+    return unescape(s).replace(/&#x2F;/g, '/')
   }
 }
 

package.json

@@ -27,6 +27,7 @@
     "dom-to-image": "^2.5.2",
     "downshift": "^3.1.12",
     "dropperx": "0.2.1",
+    "escape-goat": "^1.3.0",
     "graphql": "^14.1.1",
     "highlight.js": "^9.13.1",
     "lodash.debounce": "^4.0.8",

yarn.lock

@@ -2609,6 +2609,11 @@ es-to-primitive@^1.1.1, es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+escape-goat@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-1.3.0.tgz#bf3ee8ad1e488fbba404b084b2e4a55e09231c64"
+  integrity sha512-E2nU1Y39N5UgfLU8qwMlK0vZrZprIwWLeVmDYN8wd/e37hMtGzu2w1DBiREts0XHfgyZEQlj/hYr0H0izF0HDQ==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"