Highlighter

1"use client";
2 
3import { useInView } from "framer-motion";
4import * as React from "react";
5import { annotate } from "rough-notation";
6import type { RoughAnnotation } from "rough-notation/lib/model";
7 
8export type HighlighterAction =
9  | "highlight"
10  | "underline"
11  | "box"
12  | "circle"
13  | "strike-through"
14  | "crossed-off"
15  | "bracket";
16 
17export type HighlighterProps = React.HTMLAttributes<HTMLSpanElement> & {
18  children: React.ReactNode;
19  /** Annotation style drawn over the text */
20  action?: HighlighterAction;
21  /** Annotation color (any CSS color string) */
22  color?: string;
23  /** Stroke width of the sketch annotation */
24  strokeWidth?: number;
25  /** Duration of the draw-in animation in milliseconds */
26  animationDuration?: number;
27  /** Number of sketch passes (higher looks more hand-drawn) */
28  iterations?: number;
29  /** Padding between the text and the annotation */
30  padding?: number;
31  /** Allow the annotation to wrap across multiple lines */
32  multiline?: boolean;
33  /** Only draw the annotation once the element scrolls into view */
34  isView?: boolean;
35};
36 
37const Highlighter = React.forwardRef<HTMLSpanElement, HighlighterProps>(
38  (
39    {
40      children,
41      className,
42      action = "highlight",
43      color = "#ffd1dc",
44      strokeWidth = 1.5,
45      animationDuration = 600,
46      iterations = 2,
47      padding = 2,
48      multiline = true,
49      isView = false,
50      ...props
51    },
52    ref,
53  ) => {
54    const elementRef = React.useRef<HTMLSpanElement>(null);
55    const mergedRef = React.useCallback(
56      (node: HTMLSpanElement | null) => {
57        elementRef.current = node;
58        if (typeof ref === "function") {
59          ref(node);
60        } else if (ref) {
61          ref.current = node;
62        }
63      },
64      [ref],
65    );
66 
67    const isInView = useInView(elementRef, {
68      once: true,
69      margin: "-10%",
70    });
71 
72    const shouldShow = !isView || isInView;
73 
74    React.useLayoutEffect(() => {
75      const element = elementRef.current;
76      let annotation: RoughAnnotation | null = null;
77      let resizeObserver: ResizeObserver | null = null;
78 
79      if (shouldShow && element) {
80        const currentAnnotation = annotate(element, {
81          type: action,
82          color,
83          strokeWidth,
84          animationDuration,
85          iterations,
86          padding,
87          multiline,
88        });
89        annotation = currentAnnotation;
90        currentAnnotation.show();
91 
92        resizeObserver = new ResizeObserver(() => {
93// … truncated