feat: prevent copy when the answer is hidden

src/components/Codesplit.js

@@ -23,11 +23,18 @@ const Codesplit = (props) => {
   const [isAnswerVisible, setIsAnswerVisible] = React.useState(false);
   const [isCopied, setIsCopied] = React.useState(false);
 
+  const containsBlank = !!props['data-contains-blank'];
+
+  // Prevent copy feature when:
+  // the snippet contains blanks and the answer is not visible
+  const preventCopy = containsBlank && !isAnswerVisible;
+
   const toggleAnswerHiddenStatus = () => {
     setIsAnswerVisible((lastState) => !lastState);
   };
 
   const copyRaw = () => {
+    if (preventCopy) return;
     if (isCopied) return;
     if (!navigator.clipboard || !navigator.clipboard.writeText) return;
 
@@ -38,8 +45,6 @@ const Codesplit = (props) => {
     }, 1000);
   };
 
-  const containsBlank = !!props['data-contains-blank'];
-
   return (
     <div
       className={`pt-0 ${props.className} ${isAnswerVisible ? 'is-answer-visible' : ''}`}
@@ -68,7 +73,8 @@ const Codesplit = (props) => {
           )}
 
           <button
-            className="relative flex items-center rounded px-2.5 py-1.5 text-xs font-semibold hover:bg-gray-300"
+            className={`first-letter relative flex items-center rounded px-2.5 py-1.5 text-xs font-semibold 
+              ${preventCopy ? 'cursor-not-allowed text-gray-400' : 'hover:bg-gray-300'}`}
             onClick={copyRaw}
           >
             <div