Added editor placeholder and auto set mode by content existence

Author: jackycute

public/css/html.min.css

@@ -19,6 +19,9 @@ body {
     overflow-y: hidden !important;
     -webkit-overflow-scrolling: touch;
 }
+.CodeMirror-placeholder {
+    color: #777 !important;
+}
 .CodeMirror-scroll {
     overflow-x: hidden !important;
     overflow-y: auto !important;

public/css/index.css

@@ -236,7 +236,8 @@ var editor = CodeMirror.fromTextArea(textit, {
     extraKeys: defaultExtraKeys,
     flattenSpans: true,
     addModeClass: true,
-    readOnly: true
+    readOnly: true,
+    placeholder: "← Start by enter title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)"
 });
 var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor);
 defaultTextHeight = parseInt($(".CodeMirror").css('line-height'));
@@ -1214,7 +1215,18 @@ socket.on('refresh', function (data) {
     updateLastChange();
     updateLastChangeUser(data);
     if (!loaded) {
+        var nocontent = editor.getValue().length <= 0;
+        if (nocontent) {
+            if (visibleXS)
+                currentMode = modeType.edit;
+            else
+                currentMode = modeType.both;
+        }
         changeMode(currentMode);
+        if (nocontent) {
+            editor.focus();
+            editor.refresh();
+        }
         loaded = true;
         emitUserStatus(); //send first user status
         updateOnlineStatus(); //update first online status

public/js/index.js

@@ -11,6 +11,7 @@ addon/search/match-highlighter.js \
 addon/scroll/simplescrollbars.js \
 addon/scroll/annotatescrollbar.js \
 addon/display/panel.js \
+addon/display/placeholder.js \
 addon/dialog/dialog.js \
 addon/edit/matchbrackets.js \
 addon/edit/closebrackets.js \