Studio: syncing up font-based styling between TinyMCE editing view and Studio HTML xmodule preview

Separating and documenting tinyMCE font imports from customized vendor code and customized render styling css files (because font must load first in iframe).

Add the TinyMCE font file to the CMS pipeline.

cms/envs/common.py

@@ -316,6 +316,7 @@ PIPELINE_CSS = {
     },
     'style-vendor-tinymce-content': {
         'source_filenames': [
+            'css/tinymce-studio-content-fonts.css',
             'js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css',
             'css/tinymce-studio-content.css'
         ],

common/static/css/tinymce-studio-content-fonts.css

+/* NOTE: This file, which loads all necessary fonts for rendering Studio UI, is 1 of 3 CSS files compiled in our production pipeline  */
+@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);

common/static/css/tinymce-studio-content.css

-@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
-
+/* NOTE: This file, which customizes mid-editing styling to match xmodule preview rendering, is 3 of 3 CSS files compiled in our production pipeline  */
 .mce-content-body {
     padding: 10px;
     background-color: #fff;
     font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 1.6;
     color: #3c3c3c;
     scrollbar-3dlight-color: #F0F0EE;
@@ -28,7 +27,7 @@
 
 .mce-content-body h2 {
     color: #646464;
-    font-weight: normal;
+    font-weight: 300;
     font-size: 1.2em;
     line-height: 1.2em;
     letter-spacing: 1px;

common/static/js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css

+/* NOTE: This file, which based off of TinyMCE's vendor content styling (but customized to help with scoping), is 2 of 3 CSS files compiled in our production pipeline  */
 .mce-content-body{background-color:#fff;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;scrollbar-3dlight-color:#f0f0ee;scrollbar-arrow-color:#676662;scrollbar-base-color:#f0f0ee;scrollbar-darkshadow-color:#ddd;scrollbar-face-color:#e0e0dd;scrollbar-highlight-color:#f0f0ee;scrollbar-shadow-color:#f0f0ee;scrollbar-track-color:#f5f5f5}.mce-content-body td,.mce-content-body th{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px}.mce-content-body .mce-object{border:1px dotted #3a3a3a;background:#d5d5d5 url(img/object.gif) no-repeat center}.mce-content-body .mce-pagebreak{cursor:default;display:block;width:100%;height:5px;border:1px dashed #666;margin-top:15px}.mce-content-body .mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px!important;height:9px!important;border:1px dotted #3a3a3a;background:#d5d5d5 url(img/anchor.gif) no-repeat center}.mce-content-body .mce-nbsp{background:#AAA}.mce-content-body hr{cursor:default}.mce-content-body .mce-match-marker{background:#AAA;color:#fff}.mce-content-body .mce-match-marker-selected{background:#39f;color:#fff}.mce-content-body .mce-spellchecker-word{background:url(img/wline.gif) repeat-x bottom left;cursor:default}.mce-content-body .mce-item-table,.mce-content-body .mce-item-table caption,.mce-content-body .mce-item-table td,.mce-content-body .mce-item-table th{border:1px dashed #BBB}.mce-content-body td.mce-item-selected,.mce-content-body th.mce-item-selected{background-color:#39f!important}.mce-content-body .mce-edit-focus{outline:1px dotted #333}