improve editor

1 files changed, 48 insertions, 7 deletions

diff --git a/enhancers.txt b/enhancers.txt
index 22c684b..d70a5f8 100644
--- a/enhancers.txt
+++ b/enhancers.txt
@@ -23,36 +23,77 @@ X-Thing: Tail
 	tip.innerHTML =
 		'<p>Tip: To set the page title (what appears in the tab '+
 		'name/window bar), put this at the top of the page:</p>\n'+
-		'<pre>---\ntitle: "Your Title Here"\n---\n</pre>'+
-		'<p>I apologize that it looks funny on this page and in the '+
-		'preview.</p>';
+		'<pre>---\ntitle: "Your Title Here"\n---\n</pre>\n'+
+
+		'<p>(I apologize that it looks funny on this page and in the '+
+		'preview.)</p>\n'+
+
+		'<p>Otherwise, the first line will be used as the title.  This means '+
+		'that if you want the title to also appear at the top of the document, '+
+		'you can instead use:<p>\n'+
+		'<pre>Your Title Here\n===============\n</pre>\n'+
+		'<p>which will also include it as a heading at the top of the page.</p>';
+
 	container.appendChild(tip);
 
+	// bug workaround from https://github.com/codemirror/CodeMirror/issues/2143#issuecomment-140100969
+	var updateSectionHeaderStyles = function(cm, change) {
+		var lines = cm.lineCount();
+		for (var i = Math.max(0, change.from.line-1); i <= Math.min(change.to.line+1, lines-1); i++) {
+			var line = cm.getLineHandle(i);
+			cm.removeLineClass(line, 'text', 'cm-header');
+			cm.removeLineClass(line, 'text', 'cm-header-1');
+			cm.removeLineClass(line, 'text', 'cm-header-2');
+			var lineTokens = cm.getLineTokens(i);
+			var tok = lineTokens[0];
+			if (!tok || !tok.type || tok.type.indexOf('header') === -1) {
+				// first token could be some spaces, try 2nd
+				tok = lineTokens[1];
+			}
+			if (tok && tok.type && tok.type.indexOf('header') !== -1
+			    && tok.string !== '#') { // not ATX header style, which starts with #
+				var classes = tok.type.
+				    split(' ').
+				    filter(function(cls) { return cls.indexOf('header') === 0; }).
+				    map(function (cls) { return 'cm-' + cls; }).
+				    join(' ');
+				var prev_line = cm.getLineHandle(i-1);
+				cm.addLineClass(prev_line, 'text', classes);
+			}
+		}
+	};
+
 	var simplemde = new SimpleMDE({
 		autoDownloadFontAwesome: false,
 		element: textarea,
 		promptURLs: true,
-		forceSync: true,
 		showIcons: ['code', 'table'],
 	});
+	var cm = simplemde.codemirror;
+	cm.on("change", function(cm, change) {
+		cm.save(); // this is SimpleMDE forceSync
+		updateSectionHeaderStyles(cm, change);
+	});
+	updateSectionHeaderStyles(cm, {from: {line: 0}, to: {line: cm.lineCount()}});
 })();
 </script>
 --boundary
 X-Thing: Pattern
 
-text/*; */*+xml
+text/*; */*+xml; application/x-ruby
 --boundary
 X-Thing: Head
 
 <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
 <script src="/static/codemirror/lib/codemirror.js"></script>
 
-
 <script src="/static/codemirror/mode/xml/xml.js"></script>
 <script src="/static/codemirror/mode/javascript/javascript.js"></script>
 <script src="/static/codemirror/mode/css/css.js"></script>
 <script src="/static/codemirror/mode/sass/sass.js"></script>
+<script src="/static/codemirror/mode/ruby/ruby.js"></script>
 <script src="/static/codemirror/mode/htmlmixed/htmlmixed.js"></script>
+
 <script src="/static/codemirror/addon/edit/matchbrackets.js"></script>
 <script src="/static/codemirror/addon/edit/trailingspace.js"></script>
 <script src="/static/codemirror/addon/display/rulers.js"></script>
@@ -79,7 +120,7 @@ X-Thing: Tail
 		lineNumbers: true,
 		matchBrackets: true,
 		foldGutter: true,
-		rulers: [{column: 80, lineStyle: "dashed"}],
+		rulers: [{column: 72, color: '#DDDDDD', lineStyle: "dashed"}, {column: 80, color: '#F4DDDD', lineStyle: "dashed"}],
 		showTrailingSpace: true,
 		gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
 	});