add diaposine

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} />
         )}
       />
+      <Box>
+        <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
+          Описание
+        </Typography>
+        <FormHelperText sx={{ mt: 0, mb: 1 }}>Стилизованный текст: жирный, курсив, список</FormHelperText>
         <Controller
           control={form.control}
           name="description"
-        render={({ field }) => <TextField label="Описание" fullWidth multiline minRows={2} {...field} />}
+          render={({ field }) => (
+            <RichTextMessageEditor value={field.value} onChange={field.onChange} placeholder="Описание товара" />
+          )}
         />
+      </Box>
       <Controller
         control={form.control}
         name="materials"

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>
           )}

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,
         },
       }}
     >