🕵️‍♀️ Select using a DOM ID not just an element

PR: #10
Commits:

• 🕵️‍♀️ Select using a DOM ID not just an element
• 🏓 Toggle disableNextDeselectSidenote
• 1️⃣ Only deselect if necessary
• 📖 Update readme with new functionality
• 🍁 Fallback to other anchors if element is not defined

Actions

It is common to put a click handler on the body (or similar) to deselect any sidenotes. This can be difficult to stop in some cases, but can be anticipated with a onClickCapture that fires the
disableNextDeselectSidenote action. This intercepts the redux action and stops it from happening for one time.

Simple Javascript

You can also use sidenotes from vanilla javascript, this is done by first connecting the ID.

// First dispatch the action to connect to any ID in the dom
store.dispatch(actions.connectAnchor(docId, sidenoteId, anchorId));

// Then setup your handlers to select that anchor on click
<span
  id={anchorId}
  onClickCapture={(event) => {
    event.stopPropagation();
    store.dispatch(actions.selectAnchor(docId, anchorId));
  }}
>
  Select a Sidenote with JavaScript! 🚀
</span>;

// To clean up later, disconnect the anchor
store.dispatch(actions.disconnectAnchor(docId, anchorId));

Disconnecting sidenotes

A bug fix in the reducer such that disconnecting the sidenotes triggers a re-render.