handwritten-highlights
Version:
Beautiful & animated text highliter for your Next/React project. Enhance your text with colorful visuals and animations that resembles real writing.
1 lines • 19 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../src/providers/HighlightProvider.tsx","../src/hooks/useHighlightMarkerVariation.tsx","../src/components/HighlightMarker.tsx","../src/hooks/useHighlightUnderlineVariant.tsx","../src/components/HighlightUnderline.tsx","../src/index.ts"],"sourcesContent":["import React, { createContext, useEffect, useRef } from \"react\";\n\ninterface HighlightContextValue {\n registerCallback: (callback: () => void) => () => void;\n}\nexport const HighlightContext = createContext<HighlightContextValue | null>(null);\n\ninterface HighlightProviderProps {\n children: React.ReactNode;\n}\nexport const HighlightProvider = ({ children }: HighlightProviderProps) => {\n const callbackRefs = useRef<Set<() => void>>(new Set());\n\n const registerCallback = (callback: () => void) => {\n callbackRefs.current.add(callback);\n return () => callbackRefs.current.delete(callback); // cleanup\n };\n\n useEffect(() => {\n const handleResize = () => {\n for (const callback of callbackRefs.current ?? []) {\n callback();\n }\n };\n\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, []);\n\n return (\n <HighlightContext.Provider value={{ registerCallback }}>\n {children}\n </HighlightContext.Provider>\n );\n};\n","import React, { useMemo } from \"react\";\n\nexport default function useHighlightMarkerVariant(variant: \"1\" | \"2\" | \"3\" | \"random\") {\n const resolvedVariant = useMemo(() => {\n return variant === \"random\"\n ? ((Math.floor(Math.random() * 3) + 1).toString() as \"1\" | \"2\" | \"3\")\n : variant;\n }, [variant]);\n\n const variantComponent = useMemo(() => {\n switch (resolvedVariant) {\n case \"1\":\n return Variant1;\n case \"2\":\n return Variant2;\n case \"3\":\n return Variant3;\n default:\n return null;\n }\n }, [resolvedVariant]);\n\n return { variantComponent };\n}\n\nconst Variant1 = (\n <defs>\n <filter id=\"highlightFilter\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"0.02\"\n numOctaves=\"2\"\n result=\"noise\"\n seed=\"1\"\n />\n <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale=\"7\" />\n </filter>\n </defs>\n);\n\nconst Variant2 = (\n <defs>\n <filter id=\"highlightFilter\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"0.1 0.05\"\n numOctaves=\"5\"\n result=\"noise\"\n seed=\"2\"\n />\n <feDisplacementMap\n in=\"SourceGraphic\"\n in2=\"noise\"\n scale=\"10\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\"\n />\n </filter>\n </defs>\n);\n\nconst Variant3 = (\n <defs>\n <filter id=\"highlightFilter\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"0.01 0.05\"\n numOctaves=\"1\"\n result=\"turbulence\"\n />\n <feDisplacementMap in=\"SourceGraphic\" in2=\"turbulence\" scale=\"3\" />\n </filter>\n\n <clipPath id=\"highlightShape\">\n <path d=\"M0,14 C10,5 40,5 60,8 C75,10 90,5 100,6 L100,20 L0,20 Z\" />\n </clipPath>\n </defs>\n);\n","import React, { useContext, useEffect, useId, useRef, useState } from \"react\";\nimport { AnimationSpline, CSSColor } from \"../index\";\nimport useHighlightMarkerVariant from \"../hooks/useHighlightMarkerVariation\";\nimport { HighlightContext } from \"../providers/HighlightProvider\";\n\ninterface HighlightMarkerProps {\n children: React.ReactNode;\n highlightVariant?: \"1\" | \"2\" | \"3\" | \"random\";\n highlightColor?: CSSColor;\n animationOffset?: number;\n animationDirection?: \"left\" | \"right\" | \"center\";\n animationDuration?: number;\n animationEffect?: keyof typeof AnimationSpline;\n}\n\nexport const HighlightMarker = ({\n children,\n highlightVariant = \"2\",\n highlightColor = \"hsla(120, 60%, 50%, 0.3)\",\n animationDirection = \"left\",\n animationDuration = 400,\n animationOffset = 0,\n animationEffect = \"none\",\n}: HighlightMarkerProps) => {\n const ctx = useContext(HighlightContext);\n const id = useId();\n const randomClass = `highlight-${id.replace(/:/g, \"-\")}`;\n\n const { variantComponent } = useHighlightMarkerVariant(highlightVariant);\n\n const textRef = useRef<HTMLSpanElement>(null);\n\n const [linesOfText, setLinesOfText] = useState<DOMRect[]>();\n\n useEffect(() => {\n if (!ctx) return;\n\n const onResize = () => {\n if (!textRef.current) return;\n const _lines = Array.from(textRef.current.getClientRects());\n setLinesOfText(_lines);\n };\n\n onResize();\n const unregister = ctx.registerCallback(onResize);\n return () => {\n unregister();\n };\n }, [ctx]);\n\n return (\n <span ref={textRef} className={randomClass} style={{ position: \"relative\" }}>\n {children}\n {linesOfText?.map((line, index) => (\n <svg\n key={index}\n viewBox={`0 0 100 ${line.height}`}\n preserveAspectRatio=\"none\"\n style={{\n pointerEvents: \"none\",\n position: \"absolute\",\n top: -(linesOfText[0]!.top - line.top),\n left: -(linesOfText[0]!.left - line.left),\n width: line.width,\n height: line.height,\n zIndex: 1,\n }}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {variantComponent}\n <rect\n x=\"0\"\n y=\"0\"\n width={animationEffect != \"none\" ? 0 : 100}\n height=\"20\"\n fill={highlightColor}\n clipPath=\"url(#highlightShape)\"\n filter=\"url(#highlightFilter)\"\n >\n {animationEffect != \"none\" && (\n <animate\n attributeName=\"width\"\n values={animationDirection == \"left\" ? \"0;100\" : \"100;0\"}\n dur={`${animationDuration}ms`}\n begin={`${\n animationOffset * (index + 1) + animationDuration * (index > 0 ? 1 : 0)\n }ms`}\n repeatCount=\"1\"\n {...AnimationSpline[animationEffect]}\n fill=\"freeze\"\n />\n )}\n </rect>\n </svg>\n ))}\n </span>\n );\n};\n","import React, { useMemo } from \"react\";\n\nexport default function useHighlightUnderlineVariant(variant: \"1\" | \"2\" | \"3\" | \"random\") {\n const resolvedVariant = useMemo(() => {\n return variant === \"random\"\n ? ((Math.floor(Math.random() * 3) + 1).toString() as \"1\" | \"2\" | \"3\")\n : variant;\n }, [variant]);\n\n const variantPath = useMemo(() => {\n switch (resolvedVariant) {\n case \"1\":\n return variantPath1;\n case \"2\":\n return variantPath2;\n // case \"3\":\n // return Variant3;\n default:\n return variantPath1;\n }\n }, [resolvedVariant]);\n\n return { variantPath };\n}\n\nconst variantPath1 = (line: DOMRect): string => {\n return `M0 ${line.height - 1}Q1.966 ${line.height + 1} 8.533 ${line.height - 1} T${\n line.width / 3 - 1\n } ${line.height - 1.2} ${line.width / 2 + 10} ${line.height - 1} ${\n line.width - line.width / 5\n } ${line.height - 2} ${line.width - 5} ${line.height} ${line.width} ${line.height + 2}`;\n};\n\nconst variantPath2 = (line: DOMRect): string => {\n // M-.2 18.025 54.981 11.283 98.932 12.942 5.032 14.783 21.862 13.302 106.411 15.456\n return `M0 ${line.height + 4} ${line.width / 2} ${line.height} ${line.width + 4} ${\n line.height - 0.65\n } ${line.width / 9} ${line.height + 1} ${line.width / 6} ${line.height + 2} ${\n line.width + 5\n } ${line.height + 3}`;\n};\n","import React, { useContext, useEffect, useId, useRef, useState } from \"react\";\nimport { AnimationSpline, CSSColor } from \"../index\";\nimport { HighlightContext } from \"../providers/HighlightProvider\";\nimport useHighlightUnderlineVariant from \"../hooks/useHighlightUnderlineVariant\";\n\ninterface HighlightUnderlineProps {\n children: React.ReactNode;\n highlightVariant?: \"1\" | \"2\" | \"3\" | \"random\";\n highlightColor?: CSSColor;\n animationOffset?: number;\n animationDirection?: \"left\" | \"right\" | \"center\";\n animationDuration?: number;\n animationEffect?: keyof typeof AnimationSpline;\n}\n\nexport const HighlightUnderline = ({\n children,\n highlightVariant = \"2\",\n highlightColor = \"hsla(120, 60%, 50%, 0.5)\",\n animationDirection = \"left\",\n animationDuration = 400,\n animationOffset = 0,\n animationEffect = \"none\",\n}: HighlightUnderlineProps) => {\n const ctx = useContext(HighlightContext);\n const id = useId();\n const randomClass = `highlight-${id.replace(/:/g, \"-\")}`;\n\n const { variantPath } = useHighlightUnderlineVariant(highlightVariant);\n\n const textRef = useRef<HTMLSpanElement>(null);\n\n const [linesOfText, setLinesOfText] = useState<DOMRect[]>();\n\n useEffect(() => {\n if (!ctx) return;\n\n const onResize = () => {\n if (!textRef.current) return;\n const _lines = Array.from(textRef.current.getClientRects());\n setLinesOfText(_lines);\n };\n\n onResize();\n const unregister = ctx.registerCallback(onResize);\n return () => {\n unregister();\n };\n }, [ctx]);\n\n return (\n <span ref={textRef} className={randomClass} style={{ position: \"relative\" }}>\n {children}\n {linesOfText?.map((line, index) => {\n return (\n <svg\n key={index}\n viewBox={`0 0 ${line.width} ${line.height + 4}`}\n preserveAspectRatio=\"none\"\n style={{\n pointerEvents: \"none\",\n position: \"absolute\",\n top: -(linesOfText[0]!.top - line.top) + 2,\n left: -(linesOfText[0]!.left - line.left),\n width: line.width,\n height: line.height,\n zIndex: 1,\n }}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {/* {variantComponent} */}\n <path\n d={variantPath(line)}\n fill=\"transparent\"\n stroke={highlightColor}\n strokeWidth=\"1\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeDasharray={line.width * 3}\n strokeDashoffset={animationEffect !== \"none\" ? line.width * 3 : 0}\n >\n {animationEffect != \"none\" && (\n <animate\n attributeName=\"stroke-dashoffset\"\n from={animationDirection === \"left\" ? line.width * 3 : 0}\n to={animationDirection === \"left\" ? 0 : line.width * 3}\n dur={`${animationDuration}ms`}\n begin={`${\n animationOffset * (index + 1) + animationDuration * (index > 0 ? 1 : 0)\n }ms`}\n repeatCount=\"1\"\n {...AnimationSpline[animationEffect]}\n fill=\"freeze\"\n />\n )}\n </path>\n </svg>\n );\n })}\n </span>\n );\n};\n","type RGB = `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${number})`;\ntype RGBA =\n | `rgba(${number}, ${number}, ${number}, ${number})`\n | `rgba(${number},${number},${number},${number})`;\ntype HEX = `#${string}`;\ntype HSLA =\n | `hsla(${number}, ${number}%, ${number}%, ${number})`\n | `hsla(${number},${number}%,${number}%,${number})`;\nexport type CSSColor = RGB | RGBA | HEX | HSLA;\n\ntype AnimationEasing = \"none\" | \"ease\" | \"ease-in\" | \"ease-out\" | \"ease-in-out\";\n\nexport const AnimationSpline: {\n none: { [K in never]: never };\n} & Record<\n Exclude<AnimationEasing, \"none\">,\n {\n keyTimes: string;\n keySplines: string;\n calcMode: string;\n }\n> = {\n none: {},\n ease: {\n keyTimes: \"0;1\",\n keySplines: \"0.42 0 0.58 1\",\n calcMode: \"spline\",\n },\n \"ease-in\": {\n keyTimes: \"0;1\",\n keySplines: \"0.42 0 1 1\",\n calcMode: \"spline\",\n },\n \"ease-out\": {\n keyTimes: \"0;1\",\n keySplines: \"0 0 0.58 1\",\n calcMode: \"spline\",\n },\n \"ease-in-out\": {\n keyTimes: \"0;1\",\n keySplines: \"0.42 0 0.58 1\",\n calcMode: \"spline\",\n },\n} as const;\n\nexport { HighlightProvider } from \"./providers/HighlightProvider\";\nexport { HighlightMarker } from \"./components/HighlightMarker\";\nexport { HighlightUnderline } from \"./components/HighlightUnderline\";\n"],"names":["HighlightContext","createContext","HighlightProvider","children","callbackRefs","useRef","Set","useEffect","handleResize","callback","current","window","addEventListener","removeEventListener","_jsx","Provider","value","registerCallback","add","delete","Variant1","_jsxs","id","x","y","width","height","type","baseFrequency","numOctaves","result","seed","in","in2","scale","Variant2","xChannelSelector","yChannelSelector","Variant3","d","HighlightMarker","highlightVariant","highlightColor","animationDirection","animationDuration","animationOffset","animationEffect","ctx","useContext","randomClass","useId","replace","variantComponent","variant","resolvedVariant","useMemo","Math","floor","random","toString","useHighlightMarkerVariant","textRef","linesOfText","setLinesOfText","useState","onResize","_lines","Array","from","getClientRects","unregister","ref","className","style","position","map","line","index","viewBox","preserveAspectRatio","pointerEvents","top","left","zIndex","xmlns","fill","clipPath","filter","attributeName","values","dur","begin","repeatCount","AnimationSpline","variantPath1","variantPath2","HighlightUnderline","variantPath","useHighlightUnderlineVariant","stroke","strokeWidth","strokeLinecap","strokeLinejoin","strokeDasharray","strokeDashoffset","to","none","ease","keyTimes","keySplines","calcMode"],"mappings":"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"}