Middle Truncation

1"use client"
2 
3import React, { useLayoutEffect, useRef, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7let cachedCanvas: HTMLCanvasElement | null = null
8let cachedCtx: CanvasRenderingContext2D | null = null
9 
10/**
11 * Returns a singleton canvas 2D context for text measurement.
12 * Creates the canvas on first call and reuses it for all subsequent calls.
13 *
14 * @throws {Error} If canvas 2D context creation fails.
15 */
16function getCanvas(): CanvasRenderingContext2D {
17  if (!cachedCtx) {
18    cachedCanvas = document.createElement("canvas")
19    const ctx = cachedCanvas.getContext("2d")
20    if (!ctx) {
21      throw new Error("Failed to get 2d context from canvas")
22    }
23    cachedCtx = ctx
24  }
25  return cachedCtx
26}
27 
28function measureText(text: string, font: string) {
29  const ctx = getCanvas()
30  ctx.font = font
31  return ctx.measureText(text).width
32}
33 
34function getComputedFont(el: HTMLElement) {
35  const cs = window.getComputedStyle(el)
36  return `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`
37}
38 
39/**
40 * Creates a debounced version of a function that syncs execution with the browser's paint cycle.
41 *
42 * Combines debouncing (waits for inactivity) with requestAnimationFrame (syncs with browser rendering)
43 * to ensure smooth UI updates without jank.
44 *
45 * @template Args - The argument types of the function.
46 * @template Return - The return type of the function (ignored in debounced version).
47 * @param fn - The function to debounce.
48 * @param delay - Milliseconds to wait before executing after the last call.
49 * @returns A debounced version that executes on the next animation frame after the delay.
50 *
51 * @example
52 * const debouncedScroll = debounceWithRAF(handleScroll, 150)
53 * window.addEventListener('scroll', debouncedScroll)
54 */
55function debounceWithRAF<Args extends unknown[], Return = void>(
56  fn: (...args: Args) => Return,
57  delay: number
58): (...args: Args) => void {
59  let timeoutId: ReturnType<typeof setTimeout> | undefined
60  let rafId: number | undefined
61 
62  return (...args: Args): void => {
63    if (timeoutId !== undefined) {
64      clearTimeout(timeoutId)
65    }
66    if (rafId !== undefined) {
67      cancelAnimationFrame(rafId)
68    }
69 
70    timeoutId = setTimeout(() => {
71      rafId = requestAnimationFrame(() => {
72        fn(...args)
73      })
74    }, delay)
75  }
76}
77 
78/**
79 * Truncates text in the middle, preserving the start and end portions.
80 *
81 * Uses binary search to find the optimal truncation point based on pixel width,
82// … truncated