feat: gatsby support

Is there any way we could get support for frameworks such as Gatsby? Using this module worked locally, but when building pages for production, document was not found, assuming because of the way the DOM/HTML is built and not having document used by rough-notation

[ncthbrt]

@eric-hc: I created my own bindings for gatsby in an internal project. Had to modify it a little, so could share, but my implementation looked something like this:

function AnnotatedSpan({ annotationConfig, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & { annotationConfig: RoughAnnotationConfig }) {
    const ref = useRef<HTMLSpanElement>(null);
    React.useLayoutEffect(() => {
        if (ref.current) {
            let annotation: RoughAnnotation | null = null;


                function annotateThis() {
                    annotation?.hide();
                    annotation = annotate(ref.current!, { animate: false, ...(annotationConfig ?? {}) });
                    annotation.show();
                }
                if (ref.current) {
                    annotateThis();
                    ref.current.addEventListener('onresize ', annotateThis);
                }

            return () => {
                annotation?.hide();

            }
        } else {
            return () => { };
        }
    }, [ref.current, annotationConfig]);

    return <span ref={ref} {...props} style={{ ...(props.style ?? {}), whiteSpace: 'nowrap' }} />;
}

This looks like what I did with this wrapper, did you do something to use annotationGroup? Is in my TODO list and I’m looking how to do it with a cool API or syntax

I didn’t need animation, but if I did, I would probably have take a look at the react context API.

My approach would be to create a wrapper around an annotation group context provider.

Can have the annotation component use the annotation context and add to the group if the context is non null.

[linkstrifer]

This will be supported in v0.1.1