How to use css-selector-generator - 3 common examples

import { connect } from 'react-redux';

import Highlighter from 'components/Highlighter';
import Sidebar from 'components/Sidebar';
import {
  selectElement as _selectElement,
  setExpanded as _setExpanded,
} from 'redux/proxyActions';
import {
  currentAnnotationSelector,
  currentFieldTypeSelector,
} from 'redux/selectors';

import styles from './style.scss';

const selectorGenerator = new CssSelectorGenerator({
  // TODO(jrbotros): Exclude specific classes (e.g., `tether-*`) but allow others
  selectors: ['id', 'tag', 'nthchild'],
});

class Main extends React.Component {
  state = {
    highlightTarget: null,
  };

  componentWillReceiveProps({ currentAnnotation }) {
    if (currentAnnotation !== this.props.currentAnnotation) {
      this.setState({ highlightTarget: null });
    }
  }

  getWrappedText(node) {

function getPosition(selection) {
    const gen = new CssSelectorGenerator();
    const path = gen.getSelector(selection.baseNode.parentElement);
    const offset = [selection.baseOffset, selection.extentOffset];
    const pos = {
        url: window.location.href,
        path,
        offset
    };

    return pos;
}

import Selector from 'css-selector-generator'

const selector = new Selector()

class EventRecorder {
  start () {
    const typeableElements = document.querySelectorAll('input, textarea')
    const clickableElements = document.querySelectorAll('a, button')

    for (let i = 0; i < typeableElements.length; i++) {
      typeableElements[i].addEventListener('keydown', this.handleKeydown)
    }

    for (let i = 0; i < clickableElements.length; i++) {
      clickableElements[i].addEventListener('click', this.handleClick)
    }
  }

  handleKeydown (e) {