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.
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();
I use it for the Kavanot editor. There is a simple demo in the test folder.
Look in the docs folder. The documents are:
bililiteRange.js
bililiteRange.prototype.bounds()
function.bililiteRange.prototype.data
and bililiteRange.createOption()
.bililiteRange.prototype.sendkeys()
function.jquery.sendkeys.js
, a simple jQuery plugin that
uses bililiteRange.prototype.sendkeys()
. Depends on bililiteRange.js
.bililiteRange.find.js
, an extension to bililiteRange.prototype.bounds()
that allows searching with regular expressions. Depends on bililiteRange.js
.bililiteRange.lines.js
, with extension to bililiteRange.prototype.bounds()
and other methods for dealing with line-oriented text. Depends on bililiteRange.js
.bililiteRange.undo.js
, that adds bililiteRange.prototype.undo()
and
bililiteRange.prototype.redo()
. Depends on bililiteRange.js
and my historystack
.bililiteRange.ex.js
that implements (sort of) the
ex line editor.bililiteRange.evim.js
that creates a sort
of evim (easy VIM editor).The dist/
folder has files that concatenate useful sets of this project with their dependences.
dist/bililiteRange.js
combines the basic bililiteRange.js
with bililiteRange.find.js
.dist/editor.js
combines everything in the project except for jquery.sendkeys.js
, along with the projects it depends on.package.ps1
is a simple Powershell script that creates those files, and .github\workflows\package.yml
] is the github action that runs it.
The version 3 release used jQuery,
and the visual editor was jquery.ex.js
instead of bililiteRange.evim.js
.
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:
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.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.