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,7 +408,16 @@ export const TaskFormPage: React.FC = () => {
                     overflowY="auto"
                   >
                     {learningMaterial ? (
+                      <VStack align="stretch" gap={4}>
+                        {splitTextIntoBlocks(learningMaterial, 30).map((block, index) => (
                           <Box
+                            key={index}
+                            p={4}
+                            borderWidth="2px"
+                            borderColor="teal.200"
+                            borderRadius="md"
+                            bg="white"
+                            position="relative"
                             className="markdown-preview"
                             css={{
                               '& a': {
@@ -407,8 +430,24 @@ export const TaskFormPage: React.FC = () => {
                               }
                             }}
                           >
-                        <ReactMarkdown>{learningMaterial}</ReactMarkdown>
+                            <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,7 +494,16 @@ export const TaskFormPage: React.FC = () => {
                   height="100%"
                 >
                   {learningMaterial ? (
+                    <VStack align="stretch" gap={4}>
+                      {splitTextIntoBlocks(learningMaterial, 30).map((block, index) => (
                         <Box
+                          key={index}
+                          p={4}
+                          borderWidth="2px"
+                          borderColor="teal.200"
+                          borderRadius="md"
+                          bg="white"
+                          position="relative"
                           className="markdown-preview"
                           css={{
                             '& a': {
@@ -468,8 +516,24 @@ export const TaskFormPage: React.FC = () => {
                             }
                           }}
                         >
-                      <ReactMarkdown>{learningMaterial}</ReactMarkdown>
+                          <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')}