Use Curvenote

curvenote.dev - logo

NPM Version MIT License GitHub Stars Twitter Follow

@curvenote/sidenotes

Position floating sidenotes/comments next to a document with inline references.

Goals

Use Cases

Choices

Constraints

Demo

The demo is pretty basic, and not nearly as pretty as the gif above, just blue, green and red divs floating around. See index.tsx for full the code/setup.

yarn install yarn start Sidenotes

Getting Started:

yarn add sidenotes

React Setup:

<article id={docId} onClick={deselect}> <AnchorBase anchor={baseId}> Content with <InlineAnchor sidenote={sidenoteId}>inline reference</InlineAnchor> </AnchorBase> <div className="sidenotes"> <Sidenote sidenote={sidenoteId} base={baseId}> Your custom UI, e.g. a comment </Sidenote> </div> </article>

The sidenotes class is the only CSS that is recommended. You can import it directly, or look at it and change it (~30 lines of scss). To import from javascript (assuming your bundler works with CSS):

import 'sidenotes/dist/sidenotes.css';

Redux State

Once you create your own store, add a sidenotes.reducer, it must be called sidenotes. Then pass the store to setup with options of padding between sidenotes.

import { combineReducers, applyMiddleware, createStore } from 'redux'; import thunkMiddleware from 'redux-thunk'; import * as sidenotes from 'sidenotes'; const reducer = combineReducers({ yourStuff: yourReducers, sidenotes: sidenotes.reducer, // Add this to your reducers }); // Create your store as normal, must have thunkMiddleware const store = createStore(reducer, applyMiddleware(thunkMiddleware)); // Then ensure that you pass the `store` to setup the sidenotes sidenotes.setup(store as sidenotes.Store, { padding: 10 })

Redux State

The sidenotes.ui state has the following structure:

sidenotes: ui: docs: [docId]: anchors: [anchorId]: { id: string, sidenote: string, element: [span] } sidenotes: [sidenoteId]: { inlineAnchors: string[], top: number, id: string, baseAnchors: string[] } id: string selectedAnchor: string selectedNote: string

Roadmap


Made with love by Curvenote
Last updated February 19th, 2021