studio - synced LMS common content styles with HTML component display/edit rendering styles

cms/static/css/tiny-mce.css

@@ -1,4 +1,5 @@
-body {
+.mceContentBody {
+  padding: 10px;
   background-color: #fff;
   font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;

cms/static/sass/_unit.scss

@@ -553,82 +553,4 @@ body.unit {
       padding-top: 0;
     }
   }
-}
-
-// HTML component display: 
-.xmodule_HtmlModule {
-  line-height: 1.4em;
-
-  h1 {
-    color: $baseFontColor;
-    font: normal 2em/1.4em $sans-serif;
-    letter-spacing: 1px;
-  }
-
-  h2 {
-    color: #646464;
-    font: normal 1.2em/1.2em $sans-serif;
-    letter-spacing: 1px;
-    margin-bottom: 15px;
-    text-transform: uppercase;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  h3 {
-    font-size: 1.2em;
-    font-weight: 600;
-  }
-
-  p {
-    margin-bottom: 1.416em;
-    font-size: 1em;
-    line-height: 1.6em !important;
-    color: $baseFontColor;
-  }
-
-  em, i {
-    font-style: italic;
-  }
-
-  strong, b {
-    font-style: bold;
-  }
-
-  p + p, ul + p, ol + p {
-    margin-top: 20px;
-  }
-
-  ol, ul {
-    margin: 1em 0;
-    padding: 0 0 0 1em;
-    color: $baseFontColor;
-
-    li {
-      margin-bottom: 0.708em;
-    }
-  }
-
-  ol {
-    list-style: decimal outside none;
-  }
-
-  ul {
-    list-style: disc outside none;
-  }
-
-  a {
-    &:link, &:visited, &:hover, &:active {
-      color: #1d9dd9;
-    } 
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  code {
-    color: $baseFontColor;
-    font-family: monospace, serif;
-    background: none;
-  }
 }

common/lib/xmodule/xmodule/css/html/display.scss

@@ -1,4 +1,77 @@
 // HTML component display: 
-.xmodule_HtmlModule {
+* {
+  line-height: 1.4em;
+}
 
+h1 {
+    color: $baseFontColor;
+    font: normal 2em/1.4em $sans-serif;
+    letter-spacing: 1px;
+  }
+
+h2 {
+  color: #646464;
+  font: normal 1.2em/1.2em $sans-serif;
+  letter-spacing: 1px;
+  margin-bottom: 15px;
+  text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
+}
+
+h3 {
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+p {
+  margin-bottom: 1.416em;
+  font-size: 1em;
+  line-height: 1.6em !important;
+  color: $baseFontColor;
+}
+
+em, i {
+  font-style: italic;
+}
+
+strong, b {
+  font-style: bold;
+}
+
+p + p, ul + p, ol + p {
+  margin-top: 20px;
+}
+
+ol, ul {
+  margin: 1em 0;
+  padding: 0 0 0 1em;
+  color: $baseFontColor;
+
+  li {
+    margin-bottom: 0.708em;
+  }
+}
+
+ol {
+  list-style: decimal outside none;
+}
+
+ul {
+  list-style: disc outside none;
+}
+
+a {
+  &:link, &:visited, &:hover, &:active {
+    color: #1d9dd9;
+  } 
+}
+
+img {
+  max-width: 100%;
+}
+
+code {
+  color: $baseFontColor;
+  font-family: monospace, serif;
+  background: none;
 }

common/lib/xmodule/xmodule/js/src/html/edit.coffee

@@ -12,6 +12,9 @@ class @HTMLEditingDescriptor
 
     $(@advanced_editor.getWrapperElement()).addClass(HTMLEditingDescriptor.isInactiveClass)
 
+#   This is a workaround for the fact that tinyMCE's baseURL property is not getting correctly set on AWS
+#   instances (like sandbox). It is not necessary to explicitly set baseURL when running locally.
+    tinyMCE.baseURL = '/static/js/vendor/tiny_mce'
     @tiny_mce_textarea = $(".tiny-mce", @element).tinymce({
       script_url : '/static/js/vendor/tiny_mce/tiny_mce.js',
       theme : "advanced",