diff --git a/www/code/inner.js b/www/code/inner.js
index 9e4d0a207..b061e36fa 100644
--- a/www/code/inner.js
+++ b/www/code/inner.js
@@ -363,7 +363,15 @@ define([
         });
 
         framework.setFileExporter(CodeMirror.getContentExtension, CodeMirror.fileExporter);
-        framework.setFileImporter({}, CodeMirror.fileImporter);
+        framework.setFileImporter({}, function () {
+            /*  setFileImporter currently takes a function with the following signature:
+                (content, file) => {}
+                I used 'apply' with 'arguments' to avoid breaking things if this API ever changes.
+            */
+            var ret = CodeMirror.fileImporter.apply(null, Array.prototype.slice.call(arguments));
+            previewPane.modeChange(ret.mode);
+            return ret;
+        });
 
         framework.setNormalizer(function (c) {
             return {
diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js
index ebf7d752e..8a0e2de63 100644
--- a/www/common/sframe-common-codemirror.js
+++ b/www/common/sframe-common-codemirror.js
@@ -323,7 +323,7 @@ define([
             var mode;
             if (!mime) {
                 var ext = /.+\.([^.]+)$/.exec(file.name);
-                if (ext[1]) {
+                if (ext && ext[1]) {
                     mode = CMeditor.findModeByExtension(ext[1]);
                     mode = mode && mode.mode || null;
                 }
@@ -339,7 +339,8 @@ define([
                 exp.setMode('text');
                 $toolbarContainer.find('#language-mode').val('text');
             }
-            return { content: content };
+            // return the mode so that the code editor can decide how to display the new content
+            return { content: content, mode: mode };
         };
 
         exp.setValueAndCursor = function (oldDoc, remoteDoc) {