From b7faf2d8919ec95409dddf8241ce1306e1d9d885 Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Tue, 2 Jun 2026 11:08:25 +0500
Subject: [PATCH] add diaposine

---
 .../product-form/ui/ProductFormFields.tsx     | 19 ++++++++++++++-----
 client/src/pages/product/ui/ProductPage.tsx   |  5 +++--
 .../src/shared/ui/RichTextMessageContent.tsx  | 17 +++++++++++------
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/client/src/features/product-form/ui/ProductFormFields.tsx b/client/src/features/product-form/ui/ProductFormFields.tsx
index ecb22d3..2bc21ea 100644
--- a/client/src/features/product-form/ui/ProductFormFields.tsx
+++ b/client/src/features/product-form/ui/ProductFormFields.tsx
@@ -13,6 +13,7 @@ import Typography from '@mui/material/Typography'
 import { Controller, type UseFormReturn } from 'react-hook-form'
 import type { Category } from '@/entities/product/model/types'
 import { OptimizedImage } from '@/shared/ui/OptimizedImage'
+import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
 import { isValidProductPriceRub, isValidProductQuantity } from '../lib/use-product-form-helpers'
 import type { FormState } from '../model/types'
 
@@ -63,11 +64,19 @@ export function ProductFormFields({
           <TextField label="Краткое описание (для каталога)" fullWidth multiline minRows={2} {...field} />
         )}
       />
-      <Controller
-        control={form.control}
-        name="description"
-        render={({ field }) => <TextField label="Описание" fullWidth multiline minRows={2} {...field} />}
-      />
+      <Box>
+        <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
+          Описание
+        </Typography>
+        <FormHelperText sx={{ mt: 0, mb: 1 }}>Стилизованный текст: жирный, курсив, список</FormHelperText>
+        <Controller
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <RichTextMessageEditor value={field.value} onChange={field.onChange} placeholder="Описание товара" />
+          )}
+        />
+      </Box>
       <Controller
         control={form.control}
         name="materials"
diff --git a/client/src/pages/product/ui/ProductPage.tsx b/client/src/pages/product/ui/ProductPage.tsx
index f67c07d..f42370b 100644
--- a/client/src/pages/product/ui/ProductPage.tsx
+++ b/client/src/pages/product/ui/ProductPage.tsx
@@ -26,6 +26,7 @@ import { reviewsCountRu } from '@/shared/lib/reviews-count-ru'
 import { usePageTitle } from '@/shared/lib/use-page-title'
 import { $user } from '@/shared/model/auth'
 import { OptimizedImage } from '@/shared/ui/OptimizedImage'
+import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
 
 export function ProductPage() {
   const user = useUnit($user)
@@ -166,8 +167,8 @@ export function ProductPage() {
 
           {!isAdmin && p.quantity > 0 ? <ToggleCartIcon productId={p.id} size="medium" /> : null}
 
-          {p.description || p.shortDescription ? (
-            <Typography sx={{ whiteSpace: 'pre-wrap' }}>{p.description}</Typography>
+          {p.description ? (
+            <RichTextMessageContent value={p.description ?? ''} tone="product" />
           ) : (
             <Typography color="text.secondary">Описание появится позже.</Typography>
           )}
diff --git a/client/src/shared/ui/RichTextMessageContent.tsx b/client/src/shared/ui/RichTextMessageContent.tsx
index 5cc6f8c..a488316 100644
--- a/client/src/shared/ui/RichTextMessageContent.tsx
+++ b/client/src/shared/ui/RichTextMessageContent.tsx
@@ -5,7 +5,7 @@ import TiptapStarterKit from '@tiptap/starter-kit'
 
 type RichTextMessageContentProps = {
   value: string
-  tone?: 'default' | 'review' | 'chat'
+  tone?: 'default' | 'review' | 'chat' | 'product'
 }
 
 export function RichTextMessageContent({ value, tone = 'default' }: RichTextMessageContentProps) {
@@ -32,7 +32,7 @@ export function RichTextMessageContent({ value, tone = 'default' }: RichTextMess
   return (
     <Box
       sx={{
-        ...(tone === 'chat' ? { color: 'text.primary' } : {}),
+        ...(tone === 'chat' || tone === 'product' ? { color: 'text.primary' } : {}),
         '& .ProseMirror': {
           outline: 'none',
           whiteSpace: 'pre-wrap',
@@ -48,20 +48,25 @@ export function RichTextMessageContent({ value, tone = 'default' }: RichTextMess
                   fontSize: '0.95rem',
                   lineHeight: 1.45,
                 }
-              : {}),
+              : tone === 'product'
+                ? {
+                    fontSize: '1rem',
+                    lineHeight: 1.6,
+                  }
+                : {}),
         },
         '& .ProseMirror p': {
           m: 0,
         },
         '& .ProseMirror p + p': {
-          mt: tone === 'review' ? 0.75 : tone === 'chat' ? 0.5 : 0.5,
+          mt: tone === 'review' ? 0.75 : tone === 'chat' ? 0.5 : 0.6,
         },
         '& .ProseMirror ul, & .ProseMirror ol': {
-          my: tone === 'review' ? 0.75 : tone === 'chat' ? 0.25 : 0,
+          my: tone === 'review' ? 0.75 : tone === 'chat' ? 0.25 : 0.5,
           pl: 3,
         },
         '& .ProseMirror li + li': {
-          mt: tone === 'review' ? 0.25 : tone === 'chat' ? 0.15 : 0,
+          mt: tone === 'review' ? 0.25 : tone === 'chat' ? 0.15 : 0.15,
         },
       }}
     >