fix: copy behaviour

This commit is contained in:
gosangam
2026-05-11 16:58:15 +05:30
parent 8cd1d2e724
commit cc94296b46
3 changed files with 42 additions and 29 deletions
+2 -26
View File
@@ -1,10 +1,9 @@
"use client"; "use client";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { useCopyFeedback, type Position } from "./shared"; import { useCopyFeedback, type Position } from "./shared";
import { buildShortHighlightUrl } from "@/lib/text-highlight"; import { Bookmark, FolderPlus, AtSign } from "lucide-react";
import { Bookmark, FolderPlus, AtSign, Link2, Check } from "lucide-react";
import { import {
Drawer, Drawer,
DrawerClose, DrawerClose,
@@ -34,18 +33,6 @@ export function MorePopover({
}) { }) {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const { copied, copy } = useCopyFeedback(); const { copied, copy } = useCopyFeedback();
const [generatingLink, setGeneratingLink] = useState(false);
async function handleCopyLink() {
if (generatingLink) return;
setGeneratingLink(true);
try {
const url = await buildShortHighlightUrl(selectedText);
await copy(url);
} finally {
setGeneratingLink(false);
}
}
useEffect(() => { useEffect(() => {
if (!open || isMobile) return; if (!open || isMobile) return;
@@ -80,17 +67,6 @@ export function MorePopover({
icon: <FolderPlus className="size-5" />, icon: <FolderPlus className="size-5" />,
onClick: onSaveToCollection, onClick: onSaveToCollection,
}, },
{
key: "copy-link",
label: copied
? "Link Copied!"
: generatingLink
? "Generating link…"
: "Copy Link",
description: "Copy a shareable link to this quote",
icon: copied ? <Check className="size-5" /> : <Link2 className="size-5" />,
onClick: handleCopyLink,
},
{ {
key: "mention", key: "mention",
label: "Mention", label: "Mention",
+1 -1
View File
@@ -51,7 +51,7 @@ export function ShareModal({
}, },
{ {
key: "link", key: "link",
label: "Share Link", label: "Copy Link",
icon: <ExternalLink className="size-4" />, icon: <ExternalLink className="size-4" />,
description: "Copy a shareable link", description: "Copy a shareable link",
onClick: handleCopyShareLink, onClick: handleCopyShareLink,
+39 -2
View File
@@ -1,6 +1,7 @@
"use client"; "use client";
import { useState, useEffect, useRef, useCallback, type ReactNode } from "react"; import { useState, useEffect, useRef, useCallback, type ReactNode } from "react";
import { createShortLink } from "@/lib/share";
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Kautilya Icon // Kautilya Icon
@@ -61,20 +62,56 @@ export function useMediaQuery(query: string): boolean {
// Hook: copy to clipboard with success feedback // Hook: copy to clipboard with success feedback
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Match a URL inside the copy payload that carries a `?hl=` highlight
// fragment. Used by useCopyFeedback to transparently swap such URLs for the
// short `/share/<code>` form before writing to the clipboard. The native
// ⌘C / Ctrl+C path goes through a different (synchronous) handler in
// text-selection-toolbar.tsx and is intentionally not affected.
//
// The regex stops at whitespace or trailing punctuation that wouldn't appear
// in a real URL (`>`, `]`, etc.), so it works against multi-line copy
// payloads like the source-attribution block produced by formatCopyText().
const HL_URL_RE = /https?:\/\/[^\s<>"'`)\]]+\?hl=[^\s<>"'`)\]]+/g;
async function shortenHighlightUrlsIn(text: string): Promise<string> {
// Cheap pre-check — most text passed to copy() has no `?hl=` URL.
if (!text.includes("?hl=")) return text;
const matches = Array.from(text.matchAll(HL_URL_RE));
if (matches.length === 0) return text;
let result = text;
for (const m of matches) {
const longUrl = m[0];
try {
const u = new URL(longUrl);
const relativePath = u.pathname + u.search + u.hash;
const code = await createShortLink(relativePath);
if (!code) continue; // BFF failed — leave the long URL alone.
const shortUrl = new URL(`/share/${code}`, u.origin).toString();
result = result.replace(longUrl, shortUrl);
} catch {
// Malformed URL or unexpected error — fall through with the original.
}
}
return result;
}
export function useCopyFeedback() { export function useCopyFeedback() {
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null); const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const copy = useCallback(async (text: string) => { const copy = useCallback(async (text: string) => {
let success = false; let success = false;
const finalText = await shortenHighlightUrlsIn(text);
try { try {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(finalText);
success = true; success = true;
} catch { } catch {
// Fallback for iOS Safari and older browsers // Fallback for iOS Safari and older browsers
const ta = document.createElement("textarea"); const ta = document.createElement("textarea");
ta.value = text; ta.value = finalText;
ta.style.position = "fixed"; ta.style.position = "fixed";
ta.style.top = "0"; ta.style.top = "0";
ta.style.left = "0"; ta.style.left = "0";