A simple and fast zero-dependencies-library to transform text-selections into serializable markings.
marklib can be installed with npm
or bower
.
npm install --save-dev marklib
bower install marklib --save
The API is quite limited right now, and supports only rendering either a range or a serialized result.
// obtain a selection from document
var selection = document.getSelection();
// create a new rendering based on the current document
var renderer = new Marklib.Rendering(document)
renderer.setId('myRenderId') // if an ID is not provided, a autogenerated one will be used
// renders the given selection and returns a serializable result.
var result = renderer.renderWithRange(selection.getRangeAt(0));
-
HTMLDocument
document -> the document instance used
-
string
[cssClass], optional -> a class that is applied on each marking container (for styling)
-
HTMLElement
[context], optional -> the context used to serialize / deserialize the rendering, if not given the document instance
A Serialized results consist of 2 strings (start end end) in the following form
'body>section;0;1'`
-▲------------▲-▲
- ▲ The first part defines a css-selector (queryable with document.querySelector).
- ▲ The second part defines the text-node inside the given selector
- ▲ The third part defines the string-offset inside this text-node
// This is the result we get from the renderWithRange method
var result = {
startContainerPath: 'body>section;0',
endContainerPath: 'body>section;1',
startOffset: 2,
endOffset: 5
}
var rendering = new Marklib.Rendering(document);
rendering.renderWithResult(result);
- Annotations
- Collaboration tools
- Inline-Commenting (I actually started a project that will do something like this: https://github.com/BowlingX/commentp)
The MIT License (MIT)
Copyright (c) 2015 David Heidrich
Any contribution is welcome, just issue a pull-request or bug/feature if you found something :)