ace/src/ext/whitespaces_in_selection.js at ada20b74159445c75d29f48ba0b83251d816ff5a · ajaxorg/ace · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
 * ## Show whitespaces in the current selection
 *
 * This extension adds a configuration option `showWhitespacesInSelection` to the editor
 * that highlights whitespaces within the current selection. When enabled, it adds a
 * marker to the selection that makes whitespaces visible.
 */

"use strict";

require("../layer/text_markers");
var Editor = require("../editor").Editor;
var config = require("../config");
var dom = require("../lib/dom");

dom.importCssString(`
.ace_whitespaces_in_selection {
    color: rgba(0,0,0,0.29) !important;
}

.ace_dark .ace_whitespaces_in_selection {
    color: rgba(187, 181, 181, 0.5) !important;
}
`, "ace_whitespaces_in_selection", false);

config.defineOptions(Editor.prototype, "editor", {
    showWhitespacesInSelection: {
        set: function(val) {
            this.$showWhitespacesInSelection = val;

            if (val) {
                if (!this.$boundChangeSelectionForWhitespace) {
                    this.$boundChangeSelectionForWhitespace = $onChangeSelectionForWhitespace.bind(this);
                }
                this.on("changeSelection", this.$boundChangeSelectionForWhitespace);
                $setRenderWhitespaceMarkers(this, true);
            } else {
                this.off("changeSelection", this.$boundChangeSelectionForWhitespace);

                $removeWhitespaceMarkers(this.session);

                this.$boundChangeSelectionForWhitespace = null;
                $setRenderWhitespaceMarkers(this, false);
            }
        },
        get: function() {
            return this.$showWhitespacesInSelection;
        },
        initialValue: false
    }
});

function $setRenderWhitespaceMarkers(editor, render) {
    var textLayer = editor.renderer && editor.renderer.$textLayer;
    if (!textLayer || typeof textLayer.setRenderWhitespaceMarkers !== "function")
        return;

    textLayer.setRenderWhitespaceMarkers(render);
    editor.renderer.updateText();
}

function $removeWhitespaceMarkers(session) {
    if (!session) return;

    var invisibleMarkerIds = session.$invisibleMarkerIds || [];
    for (var i = 0; i < invisibleMarkerIds.length; i++) {
        session.removeTextMarker(invisibleMarkerIds[i]);
    }
    session.$invisibleMarkerIds = [];
}

function $onChangeSelectionForWhitespace() {
    $removeWhitespaceMarkers(this.session);

    var ranges = typeof this.selection.getAllRanges === "function" ? this.selection.getAllRanges()
        : [this.selection.getRange()];

    for (var j = 0; j < ranges.length; j++) {
        if (!ranges[j].isEmpty()) {
            this.session.$invisibleMarkerIds.push(
                this.session.addTextMarker(ranges[j], "ace_whitespaces_in_selection", "invisible"));
        }
    }
}