remove safari edge cases (#1273)

components/Editor.js

@@ -32,8 +32,8 @@ import {
   DEFAULT_THEME,
   FONTS,
 } from '../lib/constants'
-import { serializeState, getRouteState } from '../lib/routing'
-import { getSettings, unescapeHtml, formatCode, omit, dataURLtoBlob } from '../lib/util'
+import { getRouteState } from '../lib/routing'
+import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
 import domtoimage from '../lib/dom-to-image'
 
 const languageIcon = <LanguageIcon />
@@ -79,9 +79,6 @@ class Editor extends React.Component {
     this.setState(newState)
 
     if (window.navigator) {
-      this.isSafari =
-        window.navigator.userAgent.indexOf('Safari') !== -1 &&
-        window.navigator.userAgent.indexOf('Chrome') === -1
       this.isFirefox =
         window.navigator.userAgent.indexOf('Firefox') !== -1 &&
         window.navigator.userAgent.indexOf('Chrome') === -1
@@ -162,20 +159,6 @@ class Editor extends React.Component {
         .then(data => new Blob([data], { type: 'image/svg+xml' }))
     }
 
-    // if safari, get image from api
-    if (this.context.image && this.isSafari) {
-      const themeConfig = this.getTheme()
-      // pull from custom theme highlights, or state highlights
-      const encodedState = serializeState({
-        ...this.state,
-        highlights: { ...themeConfig.highlights, ...this.state.highlights },
-      })
-      // TODO consider returning blob responseType from axios
-      return this.context
-        .image(encodedState)
-        .then(dataURL => (type === 'blob' ? dataURLtoBlob(dataURL) : dataURL))
-    }
-
     if (type === 'blob') {
       return domtoimage.toBlob(node, config)
     }
@@ -389,7 +372,6 @@ class Editor extends React.Component {
                 onChange={this.updateSetting}
                 exportImage={this.exportImage}
                 exportSize={exportSize}
-                backgroundImage={backgroundImage}
               />
             </div>
           </div>

components/ExportMenu.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useOnline, useKeyboardListener, useAsyncCallback } from 'actionsack'
+import { useKeyboardListener, useAsyncCallback } from 'actionsack'
 
 import { COLORS, EXPORT_SIZES } from '../lib/constants'
 import Button from './Button'
@@ -8,32 +8,8 @@ import Popout, { managePopout } from './Popout'
 
 import { Down as ArrowDown } from './svg/Arrows'
 
-const MAX_PAYLOAD_SIZE = 5e6 // bytes
-function verifyPayloadSize(str) {
-  if (typeof str !== 'string') return true
-
-  if (typeof window !== 'undefined') {
-    return new Blob([str]).size < MAX_PAYLOAD_SIZE
-  }
-
-  return Buffer.byteLength(str, 'utf8')
-}
-
 const popoutStyle = { width: '256px', right: 0 }
 
-function useSafari() {
-  const [isSafari, setSafari] = React.useState(false)
-  React.useEffect(() => {
-    setSafari(
-      window.navigator &&
-        window.navigator.userAgent.indexOf('Safari') !== -1 &&
-        window.navigator.userAgent.indexOf('Chrome') === -1
-    )
-  }, [])
-
-  return isSafari
-}
-
 function preventDefault(fn) {
   return e => {
     e.preventDefault()
@@ -41,23 +17,11 @@ function preventDefault(fn) {
   }
 }
 
-function ExportMenu({
-  backgroundImage,
-  onChange,
-  exportSize,
-  isVisible,
-  toggleVisibility,
-  exportImage: exp,
-}) {
-  const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
-  const online = useOnline()
-  const isSafari = useSafari()
+function ExportMenu({ onChange, exportSize, isVisible, toggleVisibility, exportImage: exp }) {
   const input = React.useRef()
 
   const [exportImage, { loading }] = useAsyncCallback(exp)
 
-  const disablePNG = isSafari && (tooLarge || !online)
-
   const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize)
 
   const handleExport = format => () =>
@@ -133,19 +97,17 @@ function ExportMenu({
           <div className="save-container">
             <span>Download</span>
             <div>
-              {!disablePNG && (
-                <Button
-                  center
-                  margin="0 8px 0 0"
-                  hoverColor={COLORS.PURPLE}
-                  color={COLORS.DARK_PURPLE}
-                  onClick={handleExport('png')}
-                  id="export-png"
-                  disabled={loading}
-                >
-                  PNG
-                </Button>
-              )}
+              <Button
+                center
+                margin="0 8px 0 0"
+                hoverColor={COLORS.PURPLE}
+                color={COLORS.DARK_PURPLE}
+                onClick={handleExport('png')}
+                id="export-png"
+                disabled={loading}
+              >
+                PNG
+              </Button>
               <Button
                 center
                 hoverColor={COLORS.PURPLE}

lib/api.js

@@ -40,10 +40,6 @@ function checkIfRateLimited(err) {
   throw err
 }
 
-function image(state) {
-  return client.post('/image', { state }).then(res => res.data)
-}
-
 function openTwitterUrl(twitterUrl) {
   const width = 575
   const height = 400
@@ -177,7 +173,6 @@ export default {
     delete: id => deleteSnippet(id),
   },
   tweet: debounce(tweet, ms('5s'), { leading: true, trailing: false }),
-  image: debounce(image, ms('5s'), { leading: true, trailing: false }),
   unsplash,
   imgur,
   downloadThumbnailImage,

lib/util.js

@@ -94,15 +94,3 @@ export const formatCode = async code => {
 export const stringifyColor = obj => `rgba(${obj.rgb.r},${obj.rgb.g},${obj.rgb.b},${obj.rgb.a})`
 
 export const generateId = () => Math.random().toString(36).slice(2)
-
-export function dataURLtoBlob(dataurl) {
-  const [first, second] = dataurl.split(',')
-  const mime = first.match(/:(.*?);/)[1]
-  const bstr = atob(second)
-  let n = bstr.length
-  const u8arr = new Uint8Array(n)
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n)
-  }
-  return new Blob([u8arr], { type: mime })
-}