https://github.com/funktechno/texthighlighter

a no dependency typescript npm package for highlighting user selected text
https://github.com/funktechno/texthighlighter

annotation color dom hacktoberfest highlight html mobile range serialized-highlights text texthighlighter typescript user-selections

Last synced: 6 days ago
JSON representation

a no dependency typescript npm package for highlighting user selected text

• Host: GitHub
• URL: https://github.com/funktechno/texthighlighter
• Owner: funktechno
• License: mit
• Created: 2020-07-12T01:03:43.000Z (over 4 years ago)
• Default Branch: dev
• Last Pushed: 2024-07-19T21:52:34.000Z (7 months ago)
• Last Synced: 2024-12-29T02:25:42.994Z (about 1 month ago)
• Topics: annotation, color, dom, hacktoberfest, highlight, html, mobile, range, serialized-highlights, text, texthighlighter, typescript, user-selections
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@funktechno/texthighlighter
• Size: 1.41 MB
• Stars: 32
• Watchers: 4
• Forks: 4
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# texthighlighter

* a **no dependency** typescript supported tool for highlighting user selected content, removing highlights, serializing existing highlights, and applying serialized highlights. Works on mobile device.

* a no dependency typescript port of https://github.com/mir3z/texthighlighter because typescript is amazing. Some bugs were even fixed by just converting to typescript. Functions were converted to not need class instantiation. Followed article https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c on setting up a typescript package after testing my port on my own project. Pull requests are welcome!

## Usage

* `npm install @funktechno/texthighlighter`

* in code

```js

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

```html



```


vue script

```js

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

* [Simple demo](http://funktechno.github.io/texthighlighter/demos/simple.html)

* [Callbacks](http://funktechno.github.io/texthighlighter/demos/callbacks.html)

* [Serialization](http://funktechno.github.io/texthighlighter/demos/serialization.html)

## 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

* [x] convert library to typescript

  * works where it's being used (in a vue ts project)

* [x] bring over demos and examples

* [ ] improve unit tests

  * [x] pipeline

  * [ ] bring over previous unit tests

* [ ] extend highlights for more options

  * [ ] whole element selection for comment support, or keeprange disabled