Merge pull request #3621 from paulkaplan/fix-safari-block-images

Strip nbsp to fix serializing svg on safari

src/containers/backpack.jsx

@@ -114,8 +114,9 @@ class Backpack extends React.Component {
                         contents: [item].concat(this.state.contents)
                     });
                 })
-                .catch(() => {
+                .catch(error => {
                     this.setState({error: true, loading: false});
+                    throw error;
                 });
         });
     }
@@ -133,8 +134,9 @@ class Backpack extends React.Component {
                         contents: this.state.contents.filter(o => o.id !== id)
                     });
                 })
-                .catch(() => {
+                .catch(error => {
                     this.setState({error: true, loading: false});
+                    throw error;
                 });
         });
     }
@@ -155,8 +157,9 @@ class Backpack extends React.Component {
                             loading: false
                         });
                     })
-                    .catch(() => {
+                    .catch(error => {
                         this.setState({error: true, loading: false});
+                        throw error;
                     });
             });
         }

src/lib/backpack/block-to-image.js

@@ -15,6 +15,9 @@ export default function (blockId) {
     // blocking the drag end from finishing promptly.
     return new Promise(resolve => {
         setTimeout(() => {
+            // Strip   entities that cannot be inlined
+            blockSvg.innerHTML = blockSvg.innerHTML.replace(/ /g, ' ');
+
             // Create an <svg> element to put the cloned blockSvg inside
             const NS = 'http://www.w3.org/2000/svg';
             const svg = document.createElementNS(NS, 'svg');

src/lib/backpack/jpeg-thumbnail.js

-const jpegThumbnail = dataUrl => new Promise(resolve => {
+const jpegThumbnail = dataUrl => new Promise((resolve, reject) => {
     const image = new Image();
     image.onload = () => {
         const canvas = document.createElement('canvas');
@@ -14,6 +14,9 @@ const jpegThumbnail = dataUrl => new Promise(resolve => {
         // TODO we can play with the `quality` option here to optimize file size
         resolve(canvas.toDataURL('image/jpeg', 0.92 /* quality */)); // Default quality is 0.92
     };
+    image.onerror = err => {
+        reject(err);
+    };
     image.src = dataUrl;
 });