From 0308774fc4069e9548b857ed8638ccaa0f4fc712 Mon Sep 17 00:00:00 2001 From: tophf Date: Wed, 27 May 2015 21:01:05 +0300 Subject: [PATCH] Editor: highlight active line --- codemirror/addon/selection/active-line.js | 71 +++++++++++++++++++++++ edit.html | 1 + edit.js | 1 + 3 files changed, 73 insertions(+) create mode 100644 codemirror/addon/selection/active-line.js diff --git a/codemirror/addon/selection/active-line.js b/codemirror/addon/selection/active-line.js new file mode 100644 index 00000000..22da2e0a --- /dev/null +++ b/codemirror/addon/selection/active-line.js @@ -0,0 +1,71 @@ +// CodeMirror, copyright (c) by Marijn Haverbeke and others +// Distributed under an MIT license: http://codemirror.net/LICENSE + +// Because sometimes you need to style the cursor's line. +// +// Adds an option 'styleActiveLine' which, when enabled, gives the +// active line's wrapping
the CSS class "CodeMirror-activeline", +// and gives its background
the class "CodeMirror-activeline-background". + +(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"; + var WRAP_CLASS = "CodeMirror-activeline"; + var BACK_CLASS = "CodeMirror-activeline-background"; + + CodeMirror.defineOption("styleActiveLine", false, function(cm, val, old) { + var prev = old && old != CodeMirror.Init; + if (val && !prev) { + cm.state.activeLines = []; + updateActiveLines(cm, cm.listSelections()); + cm.on("beforeSelectionChange", selectionChange); + } else if (!val && prev) { + cm.off("beforeSelectionChange", selectionChange); + clearActiveLines(cm); + delete cm.state.activeLines; + } + }); + + function clearActiveLines(cm) { + for (var i = 0; i < cm.state.activeLines.length; i++) { + cm.removeLineClass(cm.state.activeLines[i], "wrap", WRAP_CLASS); + cm.removeLineClass(cm.state.activeLines[i], "background", BACK_CLASS); + } + } + + function sameArray(a, b) { + if (a.length != b.length) return false; + for (var i = 0; i < a.length; i++) + if (a[i] != b[i]) return false; + return true; + } + + function updateActiveLines(cm, ranges) { + var active = []; + for (var i = 0; i < ranges.length; i++) { + var range = ranges[i]; + if (!range.empty()) continue; + var line = cm.getLineHandleVisualStart(range.head.line); + if (active[active.length - 1] != line) active.push(line); + } + if (sameArray(cm.state.activeLines, active)) return; + cm.operation(function() { + clearActiveLines(cm); + for (var i = 0; i < active.length; i++) { + cm.addLineClass(active[i], "wrap", WRAP_CLASS); + cm.addLineClass(active[i], "background", BACK_CLASS); + } + cm.state.activeLines = active; + }); + } + + function selectionChange(cm, sel) { + updateActiveLines(cm, sel.ranges); + } +}); diff --git a/edit.html b/edit.html index 3e976788..1d690eb0 100644 --- a/edit.html +++ b/edit.html @@ -11,6 +11,7 @@ + diff --git a/edit.js b/edit.js index 69a9f62c..b5d093be 100644 --- a/edit.js +++ b/edit.js @@ -136,6 +136,7 @@ function initCodeMirror() { gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"], matchBrackets: true, lint: CodeMirror.lint.css, + styleActiveLine: true, theme: "default", keyMap: isWindowsOS ? "sublime" : "default", extraKeys: { // independent of current keyMap