{"id":3187,"date":"2014-04-03T15:40:55","date_gmt":"2014-04-03T21:40:55","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3187"},"modified":"2014-04-10T23:34:55","modified_gmt":"2014-04-11T05:34:55","slug":"new-bililiterange-plugin-ex","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2014\/04\/03\/new-bililiterange-plugin-ex\/","title":{"rendered":"New bililiteRange plugin, ex<\/code>"},"content":{"rendered":"

There have been lots of times that I've wanted to be able to keep my hand on the keyboard when editing, rather than running off to the mouse all the time. There's an implementation of VIM in Javascript<\/a> but I figured I would learn something by doing it myself. My goal is vi<\/a>, not vim<\/a>, since I don't need anything that sophisticated.<\/p>\r\n

The first step is implementing the line-oriented part of vi, called ex, based on the manual<\/a> from the sourceforge project<\/a>. My version is based on bililiteRange<\/a>, and depends on the bililiteRange utilities<\/a> and undo plugin<\/a>.<\/p>\r\n\r\n

Use it simply as bililiteRange(textarea).ex('%s\/foo\/bar\/');<\/code>, passing the ex command to the ex()<\/code> function. The biggest difference from real ex is that this uses javascript regular expressions, rather than the original ex ones. Thus s\/\\w\/x\/<\/code> rather than s\/[:class:]\/x\/<\/code>, and use ?\/...\/<\/code> rather than ?...?<\/code> to search backwards (the question mark is used in Javascript regular expressions so I don't want to use it as a delimiter).<\/p>\r\n\r\n

See a demo<\/a>.<\/p>\r\n

See the code on github<\/a>.<\/p>\r\n\r\n\r\n\r\n

Command Syntax<\/h3>\r\n

The syntax of the function is trivial: bililiteRange(someelement).ex(excommand {String} [, defaultAddress {String}])<\/code>, where excommand<\/code> is described below, and defaultAddress<\/code> is the address of the line to use if no address is given in the command string; the default is '.'<\/code>.<\/p>\r\n\r\n

Ex commands are in the form of addressrange command variant parameter<\/code>; all parts are optional. White space can separate the parts but are not necessary if it is unambiguous. Multiple commands can be entered in one string, separated by |<\/code>. To include |<\/code> or other special characters in the parameter<\/code> (that's the only place it would be relevant), enclose in double quotes, as a JSON string.Thus ex('a hello | a bye')<\/code> appends two lines, hello<\/code> and bye<\/code>, while ex('a \"hello | a bye\"')<\/code> appends one line, hello | a bye<\/code>.<\/p>\r\n

The parser tries to imitate ex's too-clever-by-half automatic closing of regular expressions (and by extension, strings). This means that an address or a parameter that contains an unmatched \/<\/code> or \"<\/code> will have that delimiter added at the end. So ex('a his\/hers')<\/code> will in fact append his\/hers\/<\/code>. Use JSON strings to avoid that problem. So ex('a \"his\/hers\"')<\/code> or ex('a \"his\\\"hers\"')<\/code>.<\/p>\r\n

Syntax errors or undefined commands are thrown as throw new Error(errormessage)<\/code>.<\/p>\r\n

Non-error messages (like the list of options from set<\/code>) are returned in a field in the range called exMessage<\/code>. Thus console.log( bililiteRange(element).ex('set').exMessage )<\/code>.<\/p>\r\n\r\n

variant<\/code> simply means optionally appending a !<\/code> to the command name. For many commands, this changes the behavior slightly. E.g., append text<\/code> respects the value of the autoindent<\/code> option, but append! text<\/code> does the opposite<\/em> of the autoindent<\/code> option.<\/p>\r\n\r\n

Command Completion<\/h2>\r\n

The parser first looks up the command in the object bililiteRange.ex.commands<\/code>. If it is defined as a function, executes it. If it is defined as a string, looks that<\/em> value up in bililiteRange.ex.commands<\/code> with this algorithm (so infinite loops are possible!). If it not defined at all, treats it as a abbreviation and returns the first member of bililiteRange.ex.commands<\/code> for which the command is a prefix.<\/p>\r\n

So if bililiteRange.ex.commands<\/code> were:<\/p>\r\n

{\r\n  c: 'cut',\r\n  copy: function(){...}\r\n  cut: function(){...}\r\n}<\/code><\/pre>\r\n
Then c<\/code> would execute the cut<\/code> function and co<\/code> would execute the copy function.<\/p>\r\n\r\n
Addresses<\/h3>\r\n
Ex is line oriented; every command works on one or more complete lines, which are delimited by '|'<\/code>. Address ranges are of the form x ([,;] x)*<\/code> meaning one or more address parts separated by commas or semicolons. Each address part (described below) may be followed by a positive or negative offset. Each address part evaluates to a line number, then the offset is added or subtracted to get the \"current line\". This is pushed onto a stack of lines numbers. The final range that the command operates on is the range of lines between the top two lines on that stack (inclusive). If only one address  part is given, then the range is that line alone. If there is no address, then the default address passed to ex()<\/code> is used. The default for that<\/em> is '.'<\/code>.<\/p>\r\n\r\n
The \"starting line\" is the first line of the range passed in. Separating address parts with a semicolon instead of a comma resets the \"starting line\" to the \"current line\". Thus if the current line is line 4, '1,.+1'<\/code> means lines 1 through 5 but '1;.+1'<\/code> means lines 1 through 2.<\/p>\r\n\r\n
Address parts can be any of the following:<\/p>\r\n
\r\n
%%<\/dt>\r\n
This is my own extension. Pushes both the starting and ending line of the original range onto the stack. If this is the only address, then does not change the range at all (useful for creating commands that are not line-oriented).<\/p>\r\n\r\n
. (a single period)<\/dt>\r\n
Pushes the current line.<\/dd>\r\n\r\n
$<\/dt>\r\n
Pushes the last line of the text.<\/dd>\r\n\r\n
Any number<\/dt>\r\n
Pushes that number<\/dd>\r\n\r\n
'x (a single quote mark followed by a lower-case letter)<\/dt>\r\n
Pushes the value of the corresponding mark (see the mark command)<\/dd>\r\n\r\n
'' (two single quote marks)<\/dt>\r\n
Pushes the current line of the previous command (so you can go back).<\/dd>\r\n\r\n
%<\/dt>\r\n
Equivalent to 0,$<\/code>; all the lines.<\/dd>\r\n\r\n
\/re\/flags<\/dt>\r\n
Searches for the regular expression \/re\/<\/code> from the current line. Pushes the first line found that matches, or the current line if not found. An empty regular expression (\/\/<\/code>, or, since the parser closes regular expressions, just \/<\/code>) uses the previous regular expression.<\/dd>\r\n
The following flags are valid (this is an extension of real Javascript regular expressions):\r\n\r\n