Ace Editor API: How to select line 2? - javascript

I want to select line 2 for copy & paste in ACE. There is a method selectLine(), which is documented here: http://ace.c9.io/#nav=api&api=selection but i don't understand how to use it. Unfortunately its also nothing to find on stackoverflow.com about selection, only about highlighting, which is not the same.
// ACE Editor Setup
var editor = ace.edit("editor");
editor.setTheme("ace/theme/crimson_editor");
editor.getSession().setMode("ace/mode/html");
editor.setValue("textline1\n textline2\n textline3");
var select = new Selection(editor.getSession()); // Uncaught TypeError: Illegal constructor
select.selectLine(2);

Once ace is initialized, it creates a Selection object instance therefore you don't need to recreate it. To access Selection just use editor.selection.
Another important point is selectLine selects the current line (it doesn't accept any parameters). So to move the cursor and select the line you have to first use moveCursorToPosition function.
Here is an example:
editor.selection.moveCursorToPosition({row: 1, column: 0});
editor.selection.selectLine();

Related

Get indentation used in specific line in CodeMirror

I am using CodeMirror and I want to provide some simple code transformation capabilities.
What I need though is to know the placed indentation of the line I am on, for instance:
function test() {
var x = 0; //I need to get that this line has 2 spaces.
var y = function() {
return true; //And that this one has 4 spaces -or a tab.
}
}
Is there a standard way of getting this via the CodeMirror API, or any relevant hack to get it?
As CodeMirror mainly works with syntax analysis (tokens etc) I attempted to analyze the line tokens and combine it with the cursor data, but I thought to ask for something more thorough and clear.
A token's state contains the indented property, which provides such information for the token's indentation:
var token = editor.getTokenAt(editor.getCursor());
console.log(token.state.indented);

Reset Key Bindings - Ace Editor

OK, I'm doing a few experiments with Ace editor and I'm trying to control what keys/shortcuts have been bound.
The best way I could think of would be to totally eliminate/reset all keybinding, and re-set only the ones I need.
How is that doable?
Any ideas?
P.S. I've had a look into the the whole documentation (and the list of "default" Key Bindings) but I'm still not sure. I've also played with the JS console and editor.keyBinding.getKeyboardHandler() but I still cannot find any suitable way/method/property to unset a specific keybinding.
Trying this approach (Ace Editor - Change CTRL+H keybinding), I tried editor.commands.findnext={} in order - for instance - to eliminate the Cmd+G binding to the "Find Next" command. However, the shortcut is still there... :S
To remove all commands do
var allCommands = editor.commands.byName;
editor.commands.removeCommands(allCommands)
// now you can add commands as you wish
allCommands.findnext.bindKey = {win: "Ctrl-H", mac: "Cmd-H"}
editor.commands.addCommand(allCommands.findnext)
But if you want to only remove particular binding, call
editor.commands.bindKey("Cmd-G", null)

Ace Editor Javascript: How to disable all extra commands that aren't default in textarea?

I want to use Ace Editor for event handling purposes, but do not want the extra functionality and commands (toggle lines, multiple cursors, etc.), but only the default commands. Is there a quick way to do this?
My current approach is to create an array of the standardCommands in a textarea (not sure yet how to do that) and then to remove them from all commands like this:
//Returns the set difference of this array and arr array
Array.prototype.diff = function(arr) {
return this.filter(function(i) {return arr.indexOf(i) < 0;});
};
//Removes all Ace Editor commands which are not in the standardCommands array
function removeSpecialCommands(editor) {
var commands = Object.keys(editor.commands.commands); //gets all commands
var specialCommands = commands.diff(standardCommands); //gets extra ace cmnds
editor.commands.removeCommands(specialCommands); //removes those commands
}
However going through every command is not easy as many can't be called directly on the editor. So I'm not sure which commands are the standard ones. Is there a simpler way to get just the standard textarea commands (tab, insert, delete, movecursor with home, pgup, arrow keys, etc.)?
This depends a lot on what you consider to be a standard command. E.g. you mention tab, but textareas do not handle tab.
If your goal is to simply disable some commands that override default browser keys you might be interested in https://github.com/ajaxorg/ace/blob/master/lib/ace/keyboard/textarea.js
To also disable creating multiple selections with mouse use editor.setOption("enableMultiselect", false)
going through every command is not easy as many can't be called directly on the editor
all the editor commands can be called using editor.execCommand(commandName|commandObject)

getSelection won't find selected text for me in custom text input

I'm using the new Firepad realtime text collaboration service.
I would like to use the JavaScript getSelection method on text in the box that the user selects.
However, my code isn't working for whatever reason.
My JavaScript:
function myFunction()
{
alert(window.getSelection());
}
HTML:
<button onclick="myFunction();">Get Selected Text in Firepad</button>
My test site
After looking at the plug-in it seems FirePad is using a textarea.
According to another SO post's answer it seems that textareas don't use the same selection ranges as other nodes.
The accepted answer explains it like this:
There is extra bizarreness going on with textarea nodes. If I remember
correctly they behave as any other nodes when you select them in IE,
but in other browsers they have an independent selection range which
is exposed via the .selectionEnd and .selectionStart properties on the
node.
The highest voted answer shows a solution.
The solution uses the reference to the textarea node directly and gets the selected range from there using the element's selectionEnd and selectionStart properties, similar to this:
function myFunction() {
var e = document.getElementById('thearea');
//Mozilla and DOM 3.0
if ('selectionStart' in e) {
var l = e.selectionEnd - e.selectionStart;
var start = e.selectionStart,
end = e.selectionEnd,
length = l,
text = e.value.substr(e.selectionStart, l);
alert(text);
}
}
DEMO - Using selectionStart and selectionEnd for textarea
I'm not sure if this is the same across all browsers these days but the above code and the additional information in the linked SO should hopefully help you in getting the desired result.
Firepad is based on CodeMirror. Rather than grabbing the selection directly from the DOM, you should use the functions that CodeMirror exposes to do this.
Check out getSelection() here:
http://codemirror.net/doc/manual.html
you can use the functions
firepad.getHtmlFromSelection();
firepad.insertTextAtCursor(textPieces);
firepad.getHtml();
firepad.getText();
firepad.insertText(index,textPieces);

How to know in which file that defined a js global var in chrome console?

How to find out which file and line a variable was defined in using google chrome console?
For example, the variable Native (from MooTools) has been defined in global scope. I want to know in which file that defined this variable using google chrome console.
Using chrome :
Open the Web Inspector
Show the console and check if the var you're searching for exists (ex : Native Enter)
Click on the Resources panel
Enter Native=, var Native or Native = in the top right search field
You've got your result !
Here, there's only one result for the Native= search. The result is automatically highlighted, and the corresponding file opened. In my example, you can see the Native declaration was in mootools.core.js, line 12.
EDIT: March 2015 (thanks to TML)
The top right search field doesn't exist anymore, in latest Chrome versions.
Instead of, click on Show drawer in the top right corner (or hit Esc), and select the Search tab that just appeared in the bottom of your screen:
EDIT: November 2015 (thanks tzvi)
You now need to use the three-dot button in the top right corner to find a Search all files option.
You may search for "var Native" in "Resources" (2nd) tab.
Function definition may be found from "Scope variables" block, from context menu, but
there's no such feature as "Find where this variable come from / was defined" in Chrome's WebInspector.
Native is defined in core.js line 437
var Native = this.Native = function(properties){
return new Type(properties.name, properties.initialize);
};
Native.type = Type.type;
Native.implement = function(objects, methods){
for (var i = 0; i < objects.length; i++) objects[i].implement(methods);
return Native;
};
https://github.com/mootools/mootools-core/blob/master/Source/Core/Core.js#L437
a quick file search for a = assignment is almost always the way to go

Categories