sahin / bililiteRange

Library for manipulating text ranges and selections, and assorted other programs that use that

bililiteRange is a javascript library that abstracts text selection and replacement.

The basic function is in bililiteRange.js, with the documentation at http://github.bililite.com/bililiteRange.

Examples

Replace the first character of an element: bililiteRange(element).bounds([0,1]).text('X')

Select all of an element: bililiteRange(element).bounds('all').select()

Implement a "backspace" key on an editable element (assuming the element is focused and the selection has been made by the user):

var rng = bililiteRange(element).bounds('selection');
var bounds = rng.bounds();
if (bounds[0] == bounds[1]){
  // no characters selected; it's just an insertion point. Remove the previous character
  rng.bounds([bounds[0]-1, bounds[1]]);
}
rng.text('', 'end'); // delete the characters and replace the selection

Implement a "left arrow" key on an editable element:

var rng = bililiteRange(element).bounds('selection');
var bounds = rng.bounds();
if (bounds[0] == bounds[1]){
  // no characters selected; it's just an insertion point. Move to the left
  rng.bounds([bounds[0]-1, bounds[0]-1]);
}else{
  // move the insertion point to the left of the selection
  rng.bounds([bounds[0], bounds[0]]);
}
rng.select();

Demos

I use it for the Kavanot editor. There is a simple demo in the test folder.

Documentation

Look in the docs folder. The documents are:

• index.md: documentation of bililiteRange.js
• bounds.md: details of the bililiteRange.prototype.bounds() function.
• data.md: details of bililiteRange.prototype.data and bililiteRange.createOption().
• sendkeys.md: details of the bililiteRange.prototype.sendkeys() function.
• jquery.sendkeys.md: documentation of jquery.sendkeys.js, a simple jQuery plugin that uses bililiteRange.prototype.sendkeys(). Depends on bililiteRange.js.
• find.md: documentation of bililite.find.js, an extension to bililiteRange.prototype.bounds() that allows searching with regular expressions. Depends on bililiteRange.js.
• lines.md: documentation of bililite.lines.js, with extension to bililiteRange.prototype.bounds() and other methods for dealing with line-oriented text. Depends on bililiteRange.js.
• undo.md: documentation of bililite.undo.js, that adds bililiteRange.prototype.undo() and bililiteRange.prototype.redo(). Depends on bililiteRange.js.
• ex.md: documentation of bililite.ex.js that implements (sort of) the ex line editor.
• jquery.ex.md: documentation of jquery.ex.js that integrates ex with jQuery. Creates a sort of evim (easy VIM editor).

Upgrade guide

Some people used verson 2 of bililiteRange; that is still available as the 2.5.2 release.

The new version no longer supports Internet Explorer or even Edge Legacy (only the chromium-based Edge). I am testing it in Chrome, Firefox, and Edge.

Major breaking changes include:

• The plugins have been re-organized, with bililiteRange.util.js split into bililiteRange.find.js and bililiteRange.lines.js, and the live() function moved to bililiteRange.js itself.
• find is gone, incorporated into bounds(RegExp, flags).
• element, length and data are now have accessor descriptor (get functions) and are therefore accessed as fields rather than as functions (range.element, not range.element()).
• bililiteRange.data() is now the more descriptive bililiteRange.createOption().
• ex is very different. Read the manual.

Obsolete files

They are all in the 2.5.2 release but no longer are part of bililiteRange.

jquery.jsvk.js is a jQuery wrapper for Ilya Lebedev's JavaScript VirtualKeyboard (http://www.allanguages.info/), which is apparently now dead. Depends on bililiteRange for character insertion. Documentation

jquery.vi.js is the beginning of an implementation of the vi editor which I never completed and never ended up using.

bililiteRange.fancytext.js and bililiteRange.fancytextasync.js were adapters between the Prism syntax highlighter and bililiteRange. It's much simpler now, just

range.listen('input', evt => {
	rng.bounds('selection');
	Prism.highlightElement(editor);
	rng.select();
});

Doesn't need a whole plugin for that.

jquery.keymap.js and jquery.status.js have their own repositories : keymap and status.

jquery.livesearch.js and jquery.savemonitor.js were fun and cute, but not very useful.