Skip to content

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

License

Notifications You must be signed in to change notification settings

dwachss/bililiteRange

Repository files navigation

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 bililiteRange.find.js, an extension to bililiteRange.prototype.bounds() that allows searching with regular expressions. Depends on bililiteRange.js.
  • lines.md: documentation of bililiteRange.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 bililiteRange.undo.js, that adds bililiteRange.prototype.undo() and bililiteRange.prototype.redo(). Depends on bililiteRange.js and my historystack.
  • ex.md: documentation of bililiteRange.ex.js that implements (sort of) the ex line editor.
  • evim.md: documentation of bililiteRange.evim.js that creates a sort of evim (easy VIM editor).

Distribution versions

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.

Upgrade guide

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:

  • 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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published