Refactor TaskFormPage to split learning material into blocks of 30 lines for improved readability. Each block is displayed with a label indicating its order. This enhances the user experience by organizing content more effectively.

src/pages/tasks/TaskFormPage.tsx

@@ -26,6 +26,20 @@ import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { ErrorAlert } from '../../components/ErrorAlert'
 import { toaster } from '../../components/ui/toaster'
 
+// Функция для разбиения текста на блоки по 30 строк
+const splitTextIntoBlocks = (text: string, linesPerBlock: number = 30): string[] => {
+  if (!text) return []
+  const lines = text.split('\n')
+  const blocks: string[] = []
+  
+  for (let i = 0; i < lines.length; i += linesPerBlock) {
+    const block = lines.slice(i, i + linesPerBlock).join('\n')
+    blocks.push(block)
+  }
+  
+  return blocks
+}
+
 export const TaskFormPage: React.FC = () => {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -394,21 +408,46 @@ export const TaskFormPage: React.FC = () => {
                     overflowY="auto"
                   >
                     {learningMaterial ? (
-                      <Box
+                      <VStack align="stretch" gap={4}>
-                        className="markdown-preview"
+                        {splitTextIntoBlocks(learningMaterial, 30).map((block, index) => (
-                        css={{
+                          <Box
-                          '& a': {
+                            key={index}
-                            color: '#0f766e',
+                            p={4}
-                            textDecoration: 'underline',
+                            borderWidth="2px"
-                            cursor: 'pointer',
+                            borderColor="teal.200"
-                            '&:hover': {
+                            borderRadius="md"
-                              color: '#115e59',
+                            bg="white"
-                            }
+                            position="relative"
-                          }
+                            className="markdown-preview"
-                        }}
+                            css={{
-                      >
+                              '& a': {
-                        <ReactMarkdown>{learningMaterial}</ReactMarkdown>
+                                color: '#0f766e',
-                      </Box>
+                                textDecoration: 'underline',
+                                cursor: 'pointer',
+                                '&:hover': {
+                                  color: '#115e59',
+                                }
+                              }
+                            }}
+                          >
+                            <Box
+                              position="absolute"
+                              top="-10px"
+                              left="10px"
+                              bg="teal.500"
+                              color="white"
+                              px={2}
+                              py={1}
+                              borderRadius="md"
+                              fontSize="xs"
+                              fontWeight="bold"
+                            >
+                              Блок {index + 1} (30 строк)
+                            </Box>
+                            <ReactMarkdown>{block}</ReactMarkdown>
+                          </Box>
+                        ))}
+                      </VStack>
                     ) : (
                       <Text color="gray.400" fontStyle="italic">
                         {t('challenge.admin.tasks.preview.empty')}
@@ -455,21 +494,46 @@ export const TaskFormPage: React.FC = () => {
                   height="100%"
                 >
                   {learningMaterial ? (
-                    <Box
+                    <VStack align="stretch" gap={4}>
-                      className="markdown-preview"
+                      {splitTextIntoBlocks(learningMaterial, 30).map((block, index) => (
-                      css={{
+                        <Box
-                        '& a': {
+                          key={index}
-                          color: '#0f766e',
+                          p={4}
-                          textDecoration: 'underline',
+                          borderWidth="2px"
-                          cursor: 'pointer',
+                          borderColor="teal.200"
-                          '&:hover': {
+                          borderRadius="md"
-                            color: '#115e59',
+                          bg="white"
-                          }
+                          position="relative"
-                        }
+                          className="markdown-preview"
-                      }}
+                          css={{
-                    >
+                            '& a': {
-                      <ReactMarkdown>{learningMaterial}</ReactMarkdown>
+                              color: '#0f766e',
-                    </Box>
+                              textDecoration: 'underline',
+                              cursor: 'pointer',
+                              '&:hover': {
+                                color: '#115e59',
+                              }
+                            }
+                          }}
+                        >
+                          <Box
+                            position="absolute"
+                            top="-10px"
+                            left="10px"
+                            bg="teal.500"
+                            color="white"
+                            px={2}
+                            py={1}
+                            borderRadius="md"
+                            fontSize="xs"
+                            fontWeight="bold"
+                          >
+                            Блок {index + 1} (30 строк)
+                          </Box>
+                          <ReactMarkdown>{block}</ReactMarkdown>
+                        </Box>
+                      ))}
+                    </VStack>
                   ) : (
                     <Text color="gray.400" fontStyle="italic">
                       {t('challenge.admin.tasks.preview.empty')}