Merge branch 'develop' into Harshit-7373/Solved-issue-#-2592

Author: raclim

client/styles/components/_p5-contrast-codemirror-theme.scss

@@ -25,7 +25,7 @@ $p5-contrast-pink: #FFA9D9;
 
 $p5-contrast-gutter: #454545;
 $p5-contrast-number: #FDFDFD;
-$p5-contrast-selected: rgba(45, 123, 182, 25);
+$p5-contrast-selected: $middle-dark;
 $p5-contrast-activeline: #999999;
 
 .cm-s-p5-contrast {
@@ -81,8 +81,11 @@ $p5-contrast-activeline: #999999;
   color: $p5-contrast-number;
 }
 
-.cm-s-p5-contrast div .CodeMirror-selected {
-  background-color: $p5-contrast-selected;
+.cm-s-p5-contrast {
+  .CodeMirror-selected { background: $p5-contrast-selected; }
+  .CodeMirror-focused .CodeMirror-selected { background: $p5-contrast-selected; }
+  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: $p5-contrast-selected; }
+  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: $p5-contrast-selected; } 
 }
 
 .cm-s-p5-contrast .CodeMirror-activeline-background {

client/styles/components/_p5-dark-codemirror-theme.scss

@@ -26,7 +26,7 @@ $p5-dark-goldbrown: #b58318;
 
 $p5-dark-gutter: #f4f4f4;
 $p5-dark-number: #b5b5b5;
-$p5-dark-selected: rgba(45, 123, 182, 25);
+$p5-dark-selected: $medium-dark;
 $p5-dark-activeline: rgb(207, 207, 207);
 
 $p5-dark-error: #df3a3d;
@@ -84,8 +84,11 @@ $p5-dark-error: #df3a3d;
   color: $p5-dark-number;
 }
 
-.cm-s-p5-dark div.CodeMirror-selected {
-  background-color: $p5-dark-selected;
+.cm-s-p5-dark {
+  .CodeMirror-selected { background: $p5-dark-selected; }
+  .CodeMirror-focused .CodeMirror-selected { background: $p5-dark-selected; }
+  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: $p5-dark-selected; }
+  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: $p5-dark-selected; } 
 }
 
 .cm-s-p5-dark .CodeMirror-activeline-background {
@@ -146,8 +149,3 @@ $p5-dark-error: #df3a3d;
 .cm-s-p5-dark .cm-searching {
   background-color: $p5js-pink-opacity;
 }
-
-.cm-s-p5-dark .CodeMirror-selectedtext {
-  background-color: $medium-dark;
-}
-

client/styles/components/_p5-light-codemirror-theme.scss

@@ -23,7 +23,7 @@ $p5-light-green: #47820A;
 
 $p5-light-gutter: #f4f4f4;
 $p5-light-number: #b5b5b5;
-$p5-light-selected: rgba(45, 123, 182, 25);
+$p5-light-selected: $medium-light;
 $p5-light-activeline: rgb(207, 207, 207);
 
 .cm-s-p5-light {
@@ -79,8 +79,11 @@ $p5-light-activeline: rgb(207, 207, 207);
   color: $p5-light-number;
 }
 
-.cm-s-p5-light div .CodeMirror-selected {
-  background-color: $p5-light-selected;
+.cm-s-p5-light {
+  .CodeMirror-selected { background: $p5-light-selected; }
+  .CodeMirror-focused .CodeMirror-selected { background: $p5-light-selected; }
+  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: $p5-light-selected; }
+  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: $p5-light-selected; } 
 }
 
 .cm-s-p5-light .CodeMirror-activeline-background {
@@ -139,7 +142,3 @@ $p5-light-activeline: rgb(207, 207, 207);
 .cm-s-p5-light .cm-searching {
   background-color: $p5js-pink-opacity;
 }
-
-.cm-s-p5-light .CodeMirror-selectedtext {
-  background-color: $medium-light;
-}

package-lock.json

@@ -2,6 +2,7 @@ import JSZip from 'jszip';
 import format from 'date-fns/format';
 import isUrl from 'is-url';
 import { JSDOM } from 'jsdom';
+import mime from 'mime';
 import isAfter from 'date-fns/isAfter';
 import axios from 'axios';
 import slugify from 'slugify';
@@ -125,14 +126,18 @@ export async function getProjectAsset(req, res) {
   if (!resolvedFile) {
     return res.status(404).send({ message: 'Asset does not exist' });
   }
+  const contentType =
+    mime.getType(resolvedFile.name) || 'application/octet-stream';
   if (!resolvedFile.url) {
+    res.set('Content-Type', contentType);
     return res.send(resolvedFile.content);
   }
 
   try {
     const { data } = await axios.get(resolvedFile.url, {
       responseType: 'arraybuffer'
     });
+    res.set('Content-Type', contentType);
     return res.send(data);
   } catch (error) {
     return res.status(404).send({ message: 'Asset does not exist' });