markee
TypeScript icon, indicating that this package has built-in type declarations

0.5.1 • Public • Published

Markee

Build Status npm version

Features

  • Pure Javascript (Uses No JQuery or Frameworks).
    • But can be used with any.
  • Lightweight
  • Typescript (Types included).
  • Fully customizable using CSS.
  • Works in Chrome, Safari, IE, Firefox.

Simple usage

<div id="container"></div>
import Markee from 'markee';
 
let el = document.getElementById('input');
let markee = new Markee(el /* Target element */, {
    initialText: 'You can simply highlight, what you wish using these handles!',
    onMarked: (text, startIdx, endIdx) => {
        // Callback when some one changes the 
        // marked selection.
        console.log(text, startIdx, endIdx);
    }
});

Options

let markee = new Markee(el, {
    initialText: '',  // text to be made markeeable.
    startIdx: 0,      // Start of initial selection.
    endIdx: 1,        // End of initial selection.
    
    /* The callback which is called when a user changes the marked selection. */
    onMarked: (text: string,  // selected text.
        startIdx: number,     // index of the start.
        endIdx: number),      // index of the end.
    
    onDrag: (beginMarker: HTMLElement,
             endMarker: HTMLElement)// Called when a handle is dragged.
    
    markerClass: 'marker',      // CSS class for drag handle.
    tokenClass: 'token',        // CSS class for text token.
    beginClass: 'begin',        // CSS class for the begin marker.
    endClass: 'end',            // CSS class for the end marker.
    selectedClass: 'selected',  // CSS class for the marked selection.
    draggedClass: 'dragged',    // CSS class for the drag handle when being dragged.
})

Package Sidebar

Install

npm i markee

Weekly Downloads

6,216

Version

0.5.1

License

MIT

Unpacked Size

792 kB

Total Files

26

Last publish

Collaborators

  • ashubham