0.0.1 • Published 4 years ago
selection-observer v0.0.1
Selection Observer
This is JavaScript library for tracking selection changes in the page, we will using this for create wysiwyg editor or page builder.
For track selection library use
Range API,
Selection API
and listen selectionchange
and pointerdown
events
Installing
npm install selection-observer
Example
Listen all selection changes:
import { SelectionObserver } from './selection-observer';
const observer = new SelectionObserver((entry) => {
console.log(entry);
});
observer.observe(document.body);
API
SelectionObserver interface:
interface SelectionObserver {
constructor(callback: (entry: SelectionObserverEntry) => void);
observe(target: Element, options?: SelectionObserverObserveOptions): void;
disconnect(target: Element): void;
unselectHandler(callback: ({ target: Element, oldTarget: Element }) => void): void;
}
SelectionObserverEntry interface:
interface SelectionObserverEntry {
target: Element;
tag: string;
type: 'layer' | 'title' | 'list' | 'list-item' | 'line' | 'image' | 'paragraph' | 'code' | string;
selection: Selection;
range: Range;
getSelectedNodes: () => Node[];
}
SelectionObserverObserveOptions interface:
interface SelectionObserverObserveOptions {
filter: (item: Element) => boolean;
ignoreMainContainer: boolean;
onlyElements: boolean;
}
0.0.1
4 years ago