web-marker

A web page highlighter that features

accurate serialization and deserialization which makes it possible to correctly restore the highlights, even if part of the web page has changed
nested highlighting
no runtime-dependency

How to run

git clone https://github.com/notelix/web-marker
cd web-marker
npm i
npm start

How to use

npm install @notelix/web-marker

import {Marker} from "@notelix/web-marker"

const marker = new Marker({
    rootElement: document.body,
    eventHandler: {
        onHighlightClick: (context, element) => {
            marker.unpaint(context.serializedRange);
        },
        onHighlightHoverStateChange: (context, element, hovering) => {
            if (hovering) {
                element.style.backgroundColor = "#f0d8ff";
            } else {
                element.style.backgroundColor = "";
            }
        }
    },
    highlightPainter: {
        paintHighlight: (context, element) => {
            element.style.color = "red";
        }
    }
});

marker.addEventListeners();

document.addEventListener('mouseup', (e) => {
    const selection = window.getSelection();
    if (!selection.rangeCount) {
        return null;
    }
    const serialized = marker.serializeRange(selection.getRangeAt(0));
    console.log(JSON.stringify(serialized));
    marker.paint(serialized);
})

How to build library

npm run build-lib
npm pack

Built with web-marker

notelix/notelix: An open source web note taking / highlighter software (chrome extension with backend)