Update ACE Editor to version 1.2.9
The new ACE editor introduces full support for emojis (and, thereby, UTF-16 characters with high- and low-surrogates). Hence, we can remove our custom fix. Further, this update will allow emojis to be used in pair programming sessions.
This commit is contained in:
Sebastian Serth
239
vendor/assets/javascripts/ace/ext-searchbox.js
vendored
239
vendor/assets/javascripts/ace/ext-searchbox.js
vendored
@@ -7,16 +7,14 @@ var event = require("../lib/event");
|
||||
var searchboxCss = "\
|
||||
.ace_search {\
|
||||
background-color: #ddd;\
|
||||
color: #666;\
|
||||
border: 1px solid #cbcbcb;\
|
||||
border-top: 0 none;\
|
||||
max-width: 325px;\
|
||||
overflow: hidden;\
|
||||
margin: 0;\
|
||||
padding: 4px;\
|
||||
padding-right: 6px;\
|
||||
padding-bottom: 0;\
|
||||
padding: 4px 6px 0 4px;\
|
||||
position: absolute;\
|
||||
top: 0px;\
|
||||
top: 0;\
|
||||
z-index: 99;\
|
||||
white-space: normal;\
|
||||
}\
|
||||
@@ -31,60 +29,71 @@ border-right: 0 none;\
|
||||
right: 0;\
|
||||
}\
|
||||
.ace_search_form, .ace_replace_form {\
|
||||
border-radius: 3px;\
|
||||
border: 1px solid #cbcbcb;\
|
||||
float: left;\
|
||||
margin-bottom: 4px;\
|
||||
margin: 0 20px 4px 0;\
|
||||
overflow: hidden;\
|
||||
line-height: 1.9;\
|
||||
}\
|
||||
.ace_replace_form {\
|
||||
margin-right: 0;\
|
||||
}\
|
||||
.ace_search_form.ace_nomatch {\
|
||||
outline: 1px solid red;\
|
||||
}\
|
||||
.ace_search_field {\
|
||||
border-radius: 3px 0 0 3px;\
|
||||
background-color: white;\
|
||||
border-right: 1px solid #cbcbcb;\
|
||||
border: 0 none;\
|
||||
-webkit-box-sizing: border-box;\
|
||||
-moz-box-sizing: border-box;\
|
||||
box-sizing: border-box;\
|
||||
float: left;\
|
||||
height: 22px;\
|
||||
color: black;\
|
||||
border: 1px solid #cbcbcb;\
|
||||
border-right: 0 none;\
|
||||
box-sizing: border-box!important;\
|
||||
outline: 0;\
|
||||
padding: 0 7px;\
|
||||
width: 214px;\
|
||||
padding: 0;\
|
||||
font-size: inherit;\
|
||||
margin: 0;\
|
||||
line-height: inherit;\
|
||||
padding: 0 6px;\
|
||||
min-width: 17em;\
|
||||
vertical-align: top;\
|
||||
}\
|
||||
.ace_searchbtn,\
|
||||
.ace_replacebtn {\
|
||||
.ace_searchbtn {\
|
||||
border: 1px solid #cbcbcb;\
|
||||
line-height: inherit;\
|
||||
display: inline-block;\
|
||||
padding: 0 6px;\
|
||||
background: #fff;\
|
||||
border: 0 none;\
|
||||
border-right: 0 none;\
|
||||
border-left: 1px solid #dcdcdc;\
|
||||
cursor: pointer;\
|
||||
float: left;\
|
||||
height: 22px;\
|
||||
margin: 0;\
|
||||
padding: 0;\
|
||||
position: relative;\
|
||||
box-sizing: content-box!important;\
|
||||
color: #666;\
|
||||
}\
|
||||
.ace_searchbtn:last-child,\
|
||||
.ace_replacebtn:last-child {\
|
||||
border-top-right-radius: 3px;\
|
||||
border-bottom-right-radius: 3px;\
|
||||
.ace_searchbtn:last-child {\
|
||||
border-radius: 0 3px 3px 0;\
|
||||
border-right: 1px solid #cbcbcb;\
|
||||
}\
|
||||
.ace_searchbtn:disabled {\
|
||||
background: none;\
|
||||
cursor: default;\
|
||||
}\
|
||||
.ace_searchbtn {\
|
||||
background-position: 50% 50%;\
|
||||
background-repeat: no-repeat;\
|
||||
width: 27px;\
|
||||
.ace_searchbtn:hover {\
|
||||
background-color: #eef1f6;\
|
||||
}\
|
||||
.ace_searchbtn.prev {\
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADFJREFUeNpiSU1NZUAC/6E0I0yACYskCpsJiySKIiY0SUZk40FyTEgCjGgKwTRAgAEAQJUIPCE+qfkAAAAASUVORK5CYII=); \
|
||||
.ace_searchbtn.prev, .ace_searchbtn.next {\
|
||||
padding: 0px 0.7em\
|
||||
}\
|
||||
.ace_searchbtn.next {\
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNpiTE1NZQCC/0DMyIAKwGJMUAYDEo3M/s+EpvM/mkKwCQxYjIeLMaELoLMBAgwAU7UJObTKsvAAAAAASUVORK5CYII=); \
|
||||
.ace_searchbtn.prev:after, .ace_searchbtn.next:after {\
|
||||
content: \"\";\
|
||||
border: solid 2px #888;\
|
||||
width: 0.5em;\
|
||||
height: 0.5em;\
|
||||
border-width: 2px 0 0 2px;\
|
||||
display:inline-block;\
|
||||
transform: rotate(-45deg);\
|
||||
}\
|
||||
.ace_searchbtn.next:after {\
|
||||
border-width: 0 2px 2px 0 ;\
|
||||
}\
|
||||
.ace_searchbtn_close {\
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==) no-repeat 50% 0;\
|
||||
@@ -92,25 +101,19 @@ border-radius: 50%;\
|
||||
border: 0 none;\
|
||||
color: #656565;\
|
||||
cursor: pointer;\
|
||||
float: right;\
|
||||
font: 16px/16px Arial;\
|
||||
height: 14px;\
|
||||
margin: 5px 1px 9px 5px;\
|
||||
padding: 0;\
|
||||
text-align: center;\
|
||||
height: 14px;\
|
||||
width: 14px;\
|
||||
top: 9px;\
|
||||
right: 7px;\
|
||||
position: absolute;\
|
||||
}\
|
||||
.ace_searchbtn_close:hover {\
|
||||
background-color: #656565;\
|
||||
background-position: 50% 100%;\
|
||||
color: white;\
|
||||
}\
|
||||
.ace_replacebtn.prev {\
|
||||
width: 54px\
|
||||
}\
|
||||
.ace_replacebtn.next {\
|
||||
width: 27px\
|
||||
}\
|
||||
.ace_button {\
|
||||
margin-left: 2px;\
|
||||
cursor: pointer;\
|
||||
@@ -123,8 +126,7 @@ overflow: hidden;\
|
||||
opacity: 0.7;\
|
||||
border: 1px solid rgba(100,100,100,0.23);\
|
||||
padding: 1px;\
|
||||
-moz-box-sizing: border-box;\
|
||||
box-sizing: border-box;\
|
||||
box-sizing: border-box!important;\
|
||||
color: black;\
|
||||
}\
|
||||
.ace_button:hover {\
|
||||
@@ -146,36 +148,50 @@ text-align: right;\
|
||||
-o-user-select: none;\
|
||||
-ms-user-select: none;\
|
||||
user-select: none;\
|
||||
clear: both;\
|
||||
}\
|
||||
.ace_search_counter {\
|
||||
float: left;\
|
||||
font-family: arial;\
|
||||
padding: 0 8px;\
|
||||
}";
|
||||
var HashHandler = require("../keyboard/hash_handler").HashHandler;
|
||||
var keyUtil = require("../lib/keys");
|
||||
|
||||
var MAX_COUNT = 999;
|
||||
|
||||
dom.importCssString(searchboxCss, "ace_searchbox");
|
||||
|
||||
var html = '<div class="ace_search right">\
|
||||
<button type="button" action="hide" class="ace_searchbtn_close"></button>\
|
||||
<span action="hide" class="ace_searchbtn_close"></span>\
|
||||
<div class="ace_search_form">\
|
||||
<input class="ace_search_field" placeholder="Search for" spellcheck="false"></input>\
|
||||
<button type="button" action="findNext" class="ace_searchbtn next"></button>\
|
||||
<button type="button" action="findPrev" class="ace_searchbtn prev"></button>\
|
||||
<button type="button" action="findAll" class="ace_searchbtn" title="Alt-Enter">All</button>\
|
||||
<span action="findPrev" class="ace_searchbtn prev"></span>\
|
||||
<span action="findNext" class="ace_searchbtn next"></span>\
|
||||
<span action="findAll" class="ace_searchbtn" title="Alt-Enter">All</span>\
|
||||
</div>\
|
||||
<div class="ace_replace_form">\
|
||||
<input class="ace_search_field" placeholder="Replace with" spellcheck="false"></input>\
|
||||
<button type="button" action="replaceAndFindNext" class="ace_replacebtn">Replace</button>\
|
||||
<button type="button" action="replaceAll" class="ace_replacebtn">All</button>\
|
||||
<span action="replaceAndFindNext" class="ace_searchbtn">Replace</span>\
|
||||
<span action="replaceAll" class="ace_searchbtn">All</span>\
|
||||
</div>\
|
||||
<div class="ace_search_options">\
|
||||
<span action="toggleReplace" class="ace_button" title="Toggel Replace mode"\
|
||||
style="float:left;margin-top:-2px;padding:0 5px;">+</span>\
|
||||
<span class="ace_search_counter"></span>\
|
||||
<span action="toggleRegexpMode" class="ace_button" title="RegExp Search">.*</span>\
|
||||
<span action="toggleCaseSensitive" class="ace_button" title="CaseSensitive Search">Aa</span>\
|
||||
<span action="toggleWholeWords" class="ace_button" title="Whole Word Search">\\b</span>\
|
||||
<span action="searchInSelection" class="ace_button" title="Search In Selection">S</span>\
|
||||
</div>\
|
||||
</div>'.replace(/>\s+/g, ">");
|
||||
</div>'.replace(/> +/g, ">");
|
||||
|
||||
var SearchBox = function(editor, range, showReplaceForm) {
|
||||
var div = dom.createElement("div");
|
||||
div.innerHTML = html;
|
||||
this.element = div.firstChild;
|
||||
|
||||
this.setSession = this.setSession.bind(this);
|
||||
|
||||
this.$init();
|
||||
this.setEditor(editor);
|
||||
@@ -184,19 +200,26 @@ var SearchBox = function(editor, range, showReplaceForm) {
|
||||
(function() {
|
||||
this.setEditor = function(editor) {
|
||||
editor.searchBox = this;
|
||||
editor.container.appendChild(this.element);
|
||||
editor.renderer.scroller.appendChild(this.element);
|
||||
this.editor = editor;
|
||||
};
|
||||
|
||||
this.setSession = function(e) {
|
||||
this.searchRange = null;
|
||||
this.$syncOptions(true);
|
||||
};
|
||||
|
||||
this.$initElements = function(sb) {
|
||||
this.searchBox = sb.querySelector(".ace_search_form");
|
||||
this.replaceBox = sb.querySelector(".ace_replace_form");
|
||||
this.searchOptions = sb.querySelector(".ace_search_options");
|
||||
this.searchOption = sb.querySelector("[action=searchInSelection]");
|
||||
this.replaceOption = sb.querySelector("[action=toggleReplace]");
|
||||
this.regExpOption = sb.querySelector("[action=toggleRegexpMode]");
|
||||
this.caseSensitiveOption = sb.querySelector("[action=toggleCaseSensitive]");
|
||||
this.wholeWordOption = sb.querySelector("[action=toggleWholeWords]");
|
||||
this.searchInput = this.searchBox.querySelector(".ace_search_field");
|
||||
this.replaceInput = this.replaceBox.querySelector(".ace_search_field");
|
||||
this.searchCounter = sb.querySelector(".ace_search_counter");
|
||||
};
|
||||
|
||||
this.$init = function() {
|
||||
@@ -255,10 +278,17 @@ var SearchBox = function(editor, range, showReplaceForm) {
|
||||
}]);
|
||||
this.$searchBarKb = new HashHandler();
|
||||
this.$searchBarKb.bindKeys({
|
||||
"Ctrl-f|Command-f|Ctrl-H|Command-Option-F": function(sb) {
|
||||
"Ctrl-f|Command-f": function(sb) {
|
||||
var isReplace = sb.isReplace = !sb.isReplace;
|
||||
sb.replaceBox.style.display = isReplace ? "" : "none";
|
||||
sb[isReplace ? "replaceInput" : "searchInput"].focus();
|
||||
sb.replaceOption.checked = false;
|
||||
sb.$syncOptions();
|
||||
sb.searchInput.focus();
|
||||
},
|
||||
"Ctrl-H|Command-Option-F": function(sb) {
|
||||
sb.replaceOption.checked = true;
|
||||
sb.$syncOptions();
|
||||
sb.replaceInput.focus();
|
||||
},
|
||||
"Ctrl-G|Command-G": function(sb) {
|
||||
sb.findNext();
|
||||
@@ -310,32 +340,94 @@ var SearchBox = function(editor, range, showReplaceForm) {
|
||||
sb.wholeWordOption.checked = !sb.wholeWordOption.checked;
|
||||
sb.$syncOptions();
|
||||
}
|
||||
}, {
|
||||
name: "toggleReplace",
|
||||
exec: function(sb) {
|
||||
sb.replaceOption.checked = !sb.replaceOption.checked;
|
||||
sb.$syncOptions();
|
||||
}
|
||||
}, {
|
||||
name: "searchInSelection",
|
||||
exec: function(sb) {
|
||||
sb.searchOption.checked = !sb.searchRange;
|
||||
sb.setSearchRange(sb.searchOption.checked && sb.editor.getSelectionRange());
|
||||
sb.$syncOptions();
|
||||
}
|
||||
}]);
|
||||
|
||||
this.setSearchRange = function(range) {
|
||||
this.searchRange = range;
|
||||
if (range) {
|
||||
this.searchRangeMarker = this.editor.session.addMarker(range, "ace_active-line");
|
||||
} else if (this.searchRangeMarker) {
|
||||
this.editor.session.removeMarker(this.searchRangeMarker);
|
||||
this.searchRangeMarker = null;
|
||||
}
|
||||
};
|
||||
|
||||
this.$syncOptions = function() {
|
||||
this.$syncOptions = function(preventScroll) {
|
||||
dom.setCssClass(this.replaceOption, "checked", this.searchRange);
|
||||
dom.setCssClass(this.searchOption, "checked", this.searchOption.checked);
|
||||
this.replaceOption.textContent = this.replaceOption.checked ? "-" : "+";
|
||||
dom.setCssClass(this.regExpOption, "checked", this.regExpOption.checked);
|
||||
dom.setCssClass(this.wholeWordOption, "checked", this.wholeWordOption.checked);
|
||||
dom.setCssClass(this.caseSensitiveOption, "checked", this.caseSensitiveOption.checked);
|
||||
this.find(false, false);
|
||||
this.replaceBox.style.display = this.replaceOption.checked ? "" : "none";
|
||||
this.find(false, false, preventScroll);
|
||||
};
|
||||
|
||||
this.highlight = function(re) {
|
||||
this.editor.session.highlight(re || this.editor.$search.$options.re);
|
||||
this.editor.renderer.updateBackMarkers()
|
||||
this.editor.renderer.updateBackMarkers();
|
||||
};
|
||||
this.find = function(skipCurrent, backwards) {
|
||||
this.find = function(skipCurrent, backwards, preventScroll) {
|
||||
var range = this.editor.find(this.searchInput.value, {
|
||||
skipCurrent: skipCurrent,
|
||||
backwards: backwards,
|
||||
wrap: true,
|
||||
regExp: this.regExpOption.checked,
|
||||
caseSensitive: this.caseSensitiveOption.checked,
|
||||
wholeWord: this.wholeWordOption.checked
|
||||
wholeWord: this.wholeWordOption.checked,
|
||||
preventScroll: preventScroll,
|
||||
range: this.searchRange
|
||||
});
|
||||
var noMatch = !range && this.searchInput.value;
|
||||
dom.setCssClass(this.searchBox, "ace_nomatch", noMatch);
|
||||
this.editor._emit("findSearchBox", { match: !noMatch });
|
||||
this.highlight();
|
||||
this.updateCounter();
|
||||
};
|
||||
this.updateCounter = function() {
|
||||
var editor = this.editor;
|
||||
var regex = editor.$search.$options.re;
|
||||
var all = 0;
|
||||
var before = 0;
|
||||
if (regex) {
|
||||
var value = this.searchRange
|
||||
? editor.session.getTextRange(this.searchRange)
|
||||
: editor.getValue();
|
||||
|
||||
var offset = editor.session.doc.positionToIndex(editor.selection.anchor);
|
||||
if (this.searchRange)
|
||||
offset -= editor.session.doc.positionToIndex(this.searchRange.start);
|
||||
|
||||
var last = regex.lastIndex = 0;
|
||||
var m;
|
||||
while ((m = regex.exec(value))) {
|
||||
all++;
|
||||
last = m.index;
|
||||
if (last <= offset)
|
||||
before++;
|
||||
if (all > MAX_COUNT)
|
||||
break;
|
||||
if (!m[0]) {
|
||||
regex.lastIndex = last += 1;
|
||||
if (last >= value.length)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.searchCounter.textContent = before + " of " + (all > MAX_COUNT ? MAX_COUNT + "+" : all);
|
||||
};
|
||||
this.findNext = function() {
|
||||
this.find(true, false);
|
||||
@@ -362,7 +454,7 @@ var SearchBox = function(editor, range, showReplaceForm) {
|
||||
this.replaceAndFindNext = function() {
|
||||
if (!this.editor.getReadOnly()) {
|
||||
this.editor.replace(this.replaceInput.value);
|
||||
this.findNext()
|
||||
this.findNext();
|
||||
}
|
||||
};
|
||||
this.replaceAll = function() {
|
||||
@@ -371,28 +463,35 @@ var SearchBox = function(editor, range, showReplaceForm) {
|
||||
};
|
||||
|
||||
this.hide = function() {
|
||||
this.active = false;
|
||||
this.setSearchRange(null);
|
||||
this.editor.off("changeSession", this.setSession);
|
||||
|
||||
this.element.style.display = "none";
|
||||
this.editor.keyBinding.removeKeyboardHandler(this.$closeSearchBarKb);
|
||||
this.editor.focus();
|
||||
};
|
||||
this.show = function(value, isReplace) {
|
||||
this.active = true;
|
||||
this.editor.on("changeSession", this.setSession);
|
||||
this.element.style.display = "";
|
||||
this.replaceBox.style.display = isReplace ? "" : "none";
|
||||
|
||||
this.isReplace = isReplace;
|
||||
|
||||
this.replaceOption.checked = isReplace;
|
||||
|
||||
if (value)
|
||||
this.searchInput.value = value;
|
||||
|
||||
this.searchInput.focus();
|
||||
this.searchInput.select();
|
||||
|
||||
this.editor.keyBinding.addKeyboardHandler(this.$closeSearchBarKb);
|
||||
|
||||
this.$syncOptions(true);
|
||||
};
|
||||
|
||||
this.isFocused = function() {
|
||||
var el = document.activeElement;
|
||||
return el == this.searchInput || el == this.replaceInput;
|
||||
}
|
||||
};
|
||||
}).call(SearchBox.prototype);
|
||||
|
||||
exports.SearchBox = SearchBox;
|
||||
|
||||
Reference in New Issue
Block a user