Add text counter (#86)

Author: ryan331913

frontend/public/locales/en/translation.json

@@ -30,6 +30,10 @@
       "acceptAiSuggestion": "Accept and create",
       "rejectAiSuggestion": "Reject and reprompt"
     },
+    "editorTextCounter": {
+      "title": "Characters Limitation",
+      "description": "Exceed the maximum characters"
+    },
     "practiceComplete": {
       "cardsCorrect": "You got {{correct}} out of {{total}} cards correct",
       "title": "Practice Complete"

frontend/public/locales/es/translation.json

@@ -30,6 +30,10 @@
       "acceptAiSuggestion": "Aceptar y crear",
       "rejectAiSuggestion": "Rechazar y reintentar prompt"
     },
+    "editorTextCounter": {
+      "title": "Limitación de caracteres",
+      "description": "Superar el máximo de caracteres"
+    },
     "practiceComplete": {
       "cardsCorrect": "Has acertado {{correct}} de {{total}} tarjetas",
       "title": "Práctica Completa"

frontend/public/locales/nl/translation.json

@@ -30,6 +30,10 @@
       "acceptAiSuggestion": "Accepteren en aanmaken",
       "rejectAiSuggestion": "Afwijzen en opnieuw vragen"
     },
+    "editorTextCounter": {
+      "title": "Beperking van tekens",
+      "description": "Overschrijd het maximum aantal tekens"
+    },
     "practiceComplete": {
       "cardsCorrect": "Je hebt {{correct}} van de {{total}} kaarten goed",
       "title": "Oefening Voltooid"

frontend/src/components/cards/CardEditor.tsx

@@ -1,6 +1,9 @@
 import RichTextEditor from '@/components/commonUI/RichText/RichTextEditor'
+import useTextCounter from '@/hooks/useTextCounter'
 import { Box } from '@chakra-ui/react'
 import type { Editor } from '@tiptap/react'
+import { useCallback, useMemo, useState } from 'react'
+import TextCounter from '../commonUI/TextCounter'
 
 export interface CardEditorProps {
   side: 'front' | 'back'
@@ -10,16 +13,40 @@ export interface CardEditorProps {
 }
 
 export default function CardEditor({ side, isFlipped, frontEditor, backEditor }: CardEditorProps) {
-  const commonBoxStyles = {
-    position: 'absolute' as const,
-    width: '100%',
-    height: '100%',
-    backfaceVisibility: 'hidden' as const,
-    borderRadius: 'lg',
-    borderWidth: '1px',
-    borderColor: 'bg.200',
-    cursor: 'text',
-  }
+  const commonBoxStyles = useMemo(
+    () => ({
+      position: 'absolute' as const,
+      width: '100%',
+      height: '100%',
+      backfaceVisibility: 'hidden' as const,
+      borderRadius: 'lg',
+      borderWidth: '1px',
+      borderColor: 'bg.200',
+      cursor: 'text',
+    }),
+    [],
+  )
+
+  const [frontTextLength, setFrontTextLength] = useState(0)
+  const [backTextLength, setBackTextLength] = useState(0)
+
+  const memoizedSetFrontTextLength = useCallback(setFrontTextLength, [])
+  const memoizedSetBackTextLength = useCallback(setBackTextLength, [])
+  const noopSetter = useCallback(() => {}, [])
+
+  useTextCounter(
+    side === 'front' ? frontEditor : null,
+    side === 'front' ? memoizedSetFrontTextLength : noopSetter,
+  )
+  useTextCounter(
+    side === 'back' ? backEditor : null,
+    side === 'back' ? memoizedSetBackTextLength : noopSetter,
+  )
+
+  const currentTextLength = useMemo(
+    () => (side === 'front' ? frontTextLength : backTextLength),
+    [side, frontTextLength, backTextLength],
+  )
 
   return (
     <Box
@@ -33,6 +60,7 @@ export default function CardEditor({ side, isFlipped, frontEditor, backEditor }:
     >
       <Box {...commonBoxStyles} bg="bg.50">
         {side === 'front' && frontEditor && <RichTextEditor editor={frontEditor} />}
+        {side === 'front' && <TextCounter textLength={currentTextLength} />}
       </Box>
 
       <Box
@@ -42,6 +70,7 @@ export default function CardEditor({ side, isFlipped, frontEditor, backEditor }:
         visibility={isFlipped ? 'visible' : 'hidden'}
       >
         {side === 'back' && backEditor && <RichTextEditor editor={backEditor} />}
+        {side === 'back' && <TextCounter textLength={currentTextLength} />}
       </Box>
     </Box>
   )

frontend/src/components/commonUI/TextCounter.tsx

@@ -0,0 +1,24 @@
+import { MAX_CHARACTERS, WARNING_THRESHOLD } from '@/utils/text'
+import { Text } from '@chakra-ui/react'
+
+interface TextCounterProps {
+  textLength: number
+}
+
+const getTextColor = (currentLength: number) => {
+  const warningLimit = MAX_CHARACTERS - WARNING_THRESHOLD
+  if (currentLength > warningLimit) {
+    return 'red.500'
+  }
+  return 'gray.500'
+}
+
+function TextCounter({ textLength }: TextCounterProps) {
+  return (
+    <Text position="absolute" bottom="2" right="2" fontSize="sm" color={getTextColor(textLength)}>
+      {textLength}/{MAX_CHARACTERS}
+    </Text>
+  )
+}
+
+export default TextCounter

frontend/src/hooks/useTextCounter.tsx

@@ -0,0 +1,79 @@
+import { toaster } from '@/components/ui/toaster'
+import { MAX_CHARACTERS } from '@/utils/text'
+import type { Editor } from '@tiptap/react'
+import { useCallback, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+function useTextCounter(editor: Editor | null, setTextLength: (length: number) => void) {
+  const { t } = useTranslation()
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const hasShownToastRef = useRef(false)
+
+  const handleTextChange = useCallback(
+    (currentEditor: Editor) => {
+      const currentText = currentEditor.getText()
+      const textLength = currentText.length
+
+      if (textLength > MAX_CHARACTERS) {
+        const truncatedText = currentText.substring(0, MAX_CHARACTERS)
+        currentEditor.chain().focus().setContent(truncatedText).run()
+        if (!hasShownToastRef.current) {
+          hasShownToastRef.current = true
+          toaster.create({
+            title: t('components.editorTextCounter.title'),
+            description: t('components.editorTextCounter.description'),
+            type: 'info',
+          })
+
+          timeoutRef.current = setTimeout(() => {
+            hasShownToastRef.current = false
+          }, 3000)
+        }
+
+        setTextLength(MAX_CHARACTERS)
+      } else {
+        hasShownToastRef.current = false
+        setTextLength(textLength)
+      }
+    },
+    [setTextLength, t],
+  )
+
+  useEffect(() => {
+    if (!editor) {
+      setTextLength(0)
+      return
+    }
+
+    const handleUpdate = ({ editor: currentEditor }: { editor: Editor }) => {
+      if (currentEditor && !currentEditor.isDestroyed) {
+        handleTextChange(currentEditor)
+      }
+    }
+
+    editor.on('update', handleUpdate)
+
+    handleTextChange(editor)
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = null
+      }
+
+      if (editor && !editor.isDestroyed) {
+        editor.off('update', handleUpdate)
+      }
+    }
+  }, [editor, handleTextChange, setTextLength])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+}
+
+export default useTextCounter

frontend/src/utils/text.ts

@@ -2,3 +2,6 @@ export function stripHtml(html: string) {
   const doc = new DOMParser().parseFromString(html, 'text/html')
   return doc.body.textContent || ''
 }
+
+export const MAX_CHARACTERS = 3000
+export const WARNING_THRESHOLD = 20