From 03f606bbde4f066fd2332a46dc52e76c34afbfa1 Mon Sep 17 00:00:00 2001 From: Ahmed Al-Taiar Date: Tue, 15 Oct 2024 14:21:52 -0400 Subject: [PATCH] Improve color picker paste logic --- web/src/components/ColorPicker/ColorPicker.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/src/components/ColorPicker/ColorPicker.tsx b/web/src/components/ColorPicker/ColorPicker.tsx index f479241..8f9d494 100644 --- a/web/src/components/ColorPicker/ColorPicker.tsx +++ b/web/src/components/ColorPicker/ColorPicker.tsx @@ -40,7 +40,13 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => { className="btn btn-square btn-sm " onClick={async () => { try { - setColor(await navigator.clipboard.readText()) + const clipboardText = await navigator.clipboard.readText() + const hexColorRegex = + /^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i + + if (!hexColorRegex.test(clipboardText)) + toast.error(`Text is not a valid hex color`) + else setColor(clipboardText) } catch { toast.error(`Failed to paste, please try again`) }