Function EditableH1

packages/components/src/components/ui/heading.tsx:18–99

(props: {
  text: string;
  className?: string;
  onUpdated: (text: string) => void;
})

}

export function EditableH1(props: {
  text: string;
  className?: string;
  onUpdated: (text: string) => void;
}) {
  const ref = useRef<HTMLHeadingElement>(null);
  const timeoutRef = useRef<number | null>(null);

  const [error, _setError] = useState<string | null>(null);

  function clearError() {
    _setError(null);
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }

  function setError(error: string) {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    _setError(error);
    timeoutRef.current = setTimeout(() => {
      _setError(null);
    }, 3000) as unknown as number;
  }

  return (
    <div>
      <h1
        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role -- messy fix should be reworked
        role="textbox"
        aria-multiline="true"
        tabIndex={0}
        className={cn(className, props.className)}
        ref={ref}
        contentEditable
        suppressContentEditableWarning={true}
        onBlur={(e) => {
          const result = TitleCellUpdateAttrsSchema.safeParse({ text: e.currentTarget.innerHTML });

          if (result.success) {
            props.onUpdated(result.data.text);
          } else {
            setError(result.error.errors[0]?.message ?? 'Unknown error');
            if (ref.current) {
              ref.current.innerText = props.text;
            }
          }
        }}
        onKeyDown={(e) => {
          if (!ref.current) {
            return;
          }

          if (isCharacterKey(e)) {
            const result = TitleCellUpdateAttrsSchema.safeParse({
              text: ref.current.innerText + e.key,