don't block rendering tinymce skin while loading simbola font

Change-Id: If7a28b89e3ea7cc3e75c889963fbbf9ded154e41
Reviewed-on: https://gerrit.instructure.com/9319
Tested-by: Hudson <hudson@instructure.com>
Reviewed-by: Ryan Florence <ryanf@instructure.com>

config/assets.yml

@@ -217,8 +217,8 @@ stylesheets:
   alerts:
     - public/stylesheets/compiled/alerts.css
   tinymce:
-    - public/stylesheets/static/mathquill.css
     - public/javascripts/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/ui.css
     - public/stylesheets/compiled/tiny_like_ck_with_external_tools.css
     - public/javascripts/tinymce/jscripts/tiny_mce/plugins/inlinepopups/skins/clearlooks2/window.css
+    - public/stylesheets/static/mathquill.css
   <%= anchors["stylesheets"].map{ |(bundle,anchor)| "#{bundle}: *#{anchor}" }.join("\n  ") %>

public/javascripts/tinymce/jscripts/tiny_mce/plugins/instructure_equation/editor_plugin.js

@@ -1,8 +1,8 @@
 /**
  * Copyright (C) 2011 Instructure, Inc.
- * 
+ *
  * This file is part of Canvas.
- * 
+ *
  * Canvas is free software: you can redistribute it and/or modify it under
  * the terms of the GNU Affero General Public License as published by the Free
  * Software Foundation, version 3 of the License.
@@ -23,6 +23,17 @@ define([
   'mathquill'
 ], function(tinymce, $) {
 
+  // the loading of this @font-face is done here because tinyMCE was blocking rendering untill all of the css
+  // was loaded. Remember to update the ?v1 querystring parameter if we ever update the font.
+  $('<style>' +
+      '@font-face { '+
+        'font-family: Symbola; src: url(/font/Symbola.eot?v1); src: local("Symbola Regular"), local("Symbola"),' +
+        'url(/font/Symbola.ttf?v1) format("truetype"),' +
+        'url(/font/Symbola.otf?v1) format("opentype"),' +
+        'url(/font/Symbola.svg?v1#webfont7MzkO3xs) format("svg");' +
+      '}' +
+    '</style>').appendTo("head");
+
   $("<span class='mathquill-embedded-latex' style='position: absolute; z-index: -1; top: 0; left: 0; width: 0; height: 0; overflow: hidden;'>a</span>").appendTo("body").mathquill();
 
   // like $.text() / Sizzle.getText(elems), except it also gets alt attributes

public/stylesheets/static/mathquill.css

@@ -507,14 +507,6 @@
 /*
  * instructure tweaks
  */
-@font-face {
-  font-family: Symbola;
-  src: url(/font/Symbola.eot);
-  src: local("Symbola Regular"), local("Symbola"),
-    url(/font/Symbola.ttf) format("truetype"),
-    url(/font/Symbola.otf) format("opentype"),
-    url(/font/Symbola.svg#webfont7MzkO3xs) format("svg");
-}
 .mathquill-toolbar-panes {
   background: #ccc url(/images/tinybg.png) repeat-x top left;
 }
@@ -528,3 +520,5 @@
 .mathquill-editable .textarea textarea {
   z-index: inherit; /* so that jquery modal dialogs don't cancel its events */
 }
+
+/* the @font-face for symbola is in instructure_equation/editor_plugin.js */