Inject rich text variable to conditionally show rich text styles

services/web/Gruntfile.coffee

@@ -1,5 +1,6 @@
 fs = require "fs"
 PackageVersions = require "./app/coffee/infrastructure/PackageVersions"
+Settings = require "settings-sharelatex"
 require('es6-promise').polyfill()
 
 module.exports = (grunt) ->
@@ -153,6 +154,7 @@ module.exports = (grunt) ->
 					sourceMapBasepath: "public/stylesheets"
 					globalVars:
 						'is-overleaf': false
+						'show-rich-text': Settings.showRichText
 				files:
 					"public/stylesheets/style.css": "public/stylesheets/style.less"
 			ol:
@@ -162,6 +164,7 @@ module.exports = (grunt) ->
 					sourceMapBasepath: "public/stylesheets"
 					globalVars:
 						'is-overleaf': true
+						'show-rich-text': Settings.showRichText
 				files:
 					"public/stylesheets/ol-style.css": "public/stylesheets/ol-style.less"
 

services/web/public/stylesheets/_style_includes.less

@@ -48,9 +48,6 @@
 @import "components/popovers.less";
 @import "components/carousel.less";
 
-// CodeMirror
-@import "vendor/codemirror.css";
-
 // ngTagsInput
 @import "components/tags-input.less";
 
@@ -83,6 +80,12 @@
 @import "app/error-pages.less";
 @import "app/v1-badge.less";
 
+// Vendor CSS
 @import	"../js/libs/pdfListView/TextLayer.css";
 @import	"../js/libs/pdfListView/AnnotationsLayer.css";
 @import	"../js/libs/pdfListView/HighlightsLayer.css";
+
+// CodeMirror
+& when (@show-rich-text) {
+  @import "vendor/codemirror.css";
+}

services/web/public/stylesheets/app/editor.less

@@ -77,6 +77,12 @@
 
 #editor, #editor-rich-text {
 	.full-size;
+}
+
+#editor when (@show-rich-text = true) {
+	top: 40px; // TODO: replace with toolbar height var
+}
+#editor-rich-text when (@show-rich-text = true) {
 	top: 40px; // TODO: replace with toolbar height var
 }