@funktechno/texthighlighter

a no dependency typescript supported tool for highlighting user selected content


Keywords
typescript, highlight, text, mobile, dom, html, color, annotation, selection, range, hacktoberfest, serialized-highlights, texthighlighter, user-selections
License
ISC
Install
npm install @funktechno/texthighlighter@2.0.2

Documentation

texthighlighter

Usage

  • npm install @funktechno/texthighlighter
  • in code
import { doHighlight, deserializeHighlights, serializeHighlights, removeHighlights, optionsImpl } from "@/../node_modules/@funktechno/texthighlighter/lib/index";
const domEle = document.getElementById("sandbox");
const options: optionsImpl = {};
if (this.color) options.color = this.color;
if (domEle) doHighlight(domEle, true, options);

In project need to set up own mouseup and touchend events. touchend is for mobile

vue example

<div
    id="sandbox"
    @mouseup="runHighlight($event)"
    @touchend="runMobileHighlight($event)"
    v-html="content"
></div>

vue script

var methods = {
  runMobileHighlight(:any){
    const selection = document.getSelection();
      if (selection) {
        const domEle = document.getElementById("sandbox");
        const options: optionsImpl = {};
        if (domEle) {
            const highlightMade = doHighlight(domEle, true, options);
        }
    }

  },
  runHighlight(:any){
    // run mobile a bit different
    if (this.isMobile()) return;
    const domEle = document.getElementById("sandbox");
    const options: optionsImpl = {};
    if (domEle) {
        const highlightMade = doHighlight(domEle, true, options);
    }
  }
}

Demos

development

  • npm install or yarn import
  • npm run build
  • npm run build:client
  • npm run lint:fix
  • yarn run live-server

deploy

  • npm publish --access public

todo

  • convert library to typescript
    • works where it's being used (in a vue ts project)
  • bring over demos and examples
  • improve unit tests
    • pipeline
    • bring over previous unit tests
  • extend highlights for more options
    • whole element selection for comment support, or keeprange disabled