Merge pull request #1439 from yann300/errorannotation

Mix - code highlighting

mix/qml/html/cm/codemirror.css

@@ -304,12 +304,12 @@ div.CodeMirror-cursors {
 @media print {
   /* Hide the cursor when printing */
   .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
+	visibility: hidden;
   }
 }
 
 /* See issue #2901 */
 .cm-tab-wrap-hack:after { content: ''; }
 
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
+/* Help users use markselection to safely style text background
+span.CodeMirror-selectedtext { color: #586e75; } */

mix/qml/html/cm/mark-selection.js

@@ -0,0 +1,118 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+// Because sometimes you need to mark the selected *text*.
+//
+// Adds an option 'styleSelectedText' which, when enabled, gives
+// selected text the CSS class given as option value, or
+// "CodeMirror-selectedtext" when the value is not a string.
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+	mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+	define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+	mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+
+  CodeMirror.defineOption("styleSelectedText", false, function(cm, val, old) {
+	var prev = old && old != CodeMirror.Init;
+	if (val && !prev) {
+	  cm.state.markedSelection = [];
+	  cm.state.markedSelectionStyle = typeof val == "string" ? val : "CodeMirror-selectedtext";
+	  reset(cm);
+	  cm.on("cursorActivity", onCursorActivity);
+	  cm.on("change", onChange);
+	} else if (!val && prev) {
+	  cm.off("cursorActivity", onCursorActivity);
+	  cm.off("change", onChange);
+	  clear(cm);
+	  cm.state.markedSelection = cm.state.markedSelectionStyle = null;
+	}
+  });
+
+  function onCursorActivity(cm) {
+	cm.operation(function() { update(cm); });
+  }
+
+  function onChange(cm) {
+	if (cm.state.markedSelection.length)
+	  cm.operation(function() { clear(cm); });
+  }
+
+  var CHUNK_SIZE = 8;
+  var Pos = CodeMirror.Pos;
+  var cmp = CodeMirror.cmpPos;
+
+  function coverRange(cm, from, to, addAt) {
+	if (cmp(from, to) == 0) return;
+	var array = cm.state.markedSelection;
+	var cls = cm.state.markedSelectionStyle;
+	for (var line = from.line;;) {
+	  var start = line == from.line ? from : Pos(line, 0);
+	  var endLine = line + CHUNK_SIZE, atEnd = endLine >= to.line;
+	  var end = atEnd ? to : Pos(endLine, 0);
+	  var mark = cm.markText(start, end, {className: cls});
+	  if (addAt == null) array.push(mark);
+	  else array.splice(addAt++, 0, mark);
+	  if (atEnd) break;
+	  line = endLine;
+	}
+  }
+
+  function clear(cm) {
+	var array = cm.state.markedSelection;
+	for (var i = 0; i < array.length; ++i) array[i].clear();
+	array.length = 0;
+  }
+
+  function reset(cm) {
+	clear(cm);
+	var ranges = cm.listSelections();
+	for (var i = 0; i < ranges.length; i++)
+	  coverRange(cm, ranges[i].from(), ranges[i].to());
+  }
+
+  function update(cm) {
+	if (!cm.somethingSelected()) return clear(cm);
+	if (cm.listSelections().length > 1) return reset(cm);
+
+	var from = cm.getCursor("start"), to = cm.getCursor("end");
+
+	var array = cm.state.markedSelection;
+	if (!array.length) return coverRange(cm, from, to);
+
+	var coverStart = array[0].find(), coverEnd = array[array.length - 1].find();
+	if (!coverStart || !coverEnd || to.line - from.line < CHUNK_SIZE ||
+		cmp(from, coverEnd.to) >= 0 || cmp(to, coverStart.from) <= 0)
+	  return reset(cm);
+
+	while (cmp(from, coverStart.from) > 0) {
+	  array.shift().clear();
+	  coverStart = array[0].find();
+	}
+	if (cmp(from, coverStart.from) < 0) {
+	  if (coverStart.to.line - from.line < CHUNK_SIZE) {
+		array.shift().clear();
+		coverRange(cm, from, coverStart.to, 0);
+	  } else {
+		coverRange(cm, from, coverStart.from, 0);
+	  }
+	}
+
+	while (cmp(to, coverEnd.to) < 0) {
+	  array.pop().clear();
+	  coverEnd = array[array.length - 1].find();
+	}
+	if (cmp(to, coverEnd.to) > 0) {
+	  if (to.line - coverEnd.from.line < CHUNK_SIZE) {
+		array.pop().clear();
+		coverRange(cm, coverEnd.from, to);
+	  } else {
+		coverRange(cm, coverEnd.to, to);
+	  }
+	}
+  }
+});

mix/qml/html/cm/solarized.css

@@ -166,7 +166,7 @@ view-port
 
 /* Code execution */
 .CodeMirror-exechighlight {
-	background: rgba(255, 255, 255, 0.10);
+	background: #eee8d5;
 }
 
 /* Error annotation */
@@ -182,3 +182,4 @@ view-port
 	padding: 2px;
 }
 
+span.CodeMirror-selectedtext { color: #586e75 !important; }

mix/qml/html/codeeditor.html

@@ -22,6 +22,7 @@
 <script src="cm/javascript-hint.js"></script>
 <script src="cm/anyword-hint.js"></script>
 <script src="cm/closebrackets.js"></script>
+<script src="cm/mark-selection.js"></script>
 <script src="cm/errorannotation.js"></script>
 <script src="cm/tern.js"></script>
 <script src="cm/acorn.js"></script>

mix/qml/html/codeeditor.js

@@ -4,7 +4,8 @@ var editor = CodeMirror(document.body, {
 							matchBrackets: true,
 							autofocus: true,
 							gutters: ["CodeMirror-linenumbers", "breakpoints"],
-							autoCloseBrackets: true
+							autoCloseBrackets: true,
+							styleSelectedText: true
 						});
 var ternServer;
 

mix/web.qrc

@@ -39,5 +39,6 @@
         <file>qml/html/cm/acorn.js</file>
         <file>qml/html/cm/acorn_loose.js</file>
         <file>qml/html/cm/walk.js</file>
+        <file>qml/html/cm/mark-selection.js</file>
     </qresource>
 </RCC>