/markee

Visual text selection

Primary LanguageTypeScriptMIT LicenseMIT

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.
})