base commit

client/src/shared/ui/RichTextMessageContent.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react'
+import Box from '@mui/material/Box'
+import { EditorContent, useEditor } from '@tiptap/react'
+import TiptapStarterKit from '@tiptap/starter-kit'
+
+type RichTextMessageContentProps = {
+  value: string
+}
+
+export function RichTextMessageContent({ value }: RichTextMessageContentProps) {
+  const editor = useEditor({
+    extensions: [
+      TiptapStarterKit.configure({ heading: false, codeBlock: false, blockquote: false, horizontalRule: false }),
+    ],
+    content: value.trim() ? value : '<p></p>',
+    editable: false,
+  })
+
+  useEffect(() => {
+    if (!editor) return
+    const normalizedValue = value.trim() ? value : '<p></p>'
+    if (editor.getHTML() === normalizedValue) return
+    editor.commands.setContent(normalizedValue, false)
+  }, [editor, value])
+
+  return (
+    <Box
+      sx={{
+        '& .ProseMirror': {
+          outline: 'none',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+        },
+        '& .ProseMirror p': {
+          m: 0,
+        },
+        '& .ProseMirror ul, & .ProseMirror ol': {
+          m: 0,
+          pl: 3,
+        },
+      }}
+    >
+      <EditorContent editor={editor} />
+    </Box>
+  )
+}

client/src/shared/ui/RichTextMessageEditor.tsx

@@ -22,14 +22,19 @@ export function RichTextMessageEditor({
   placeholder = 'Введите сообщение',
   disabled = false,
 }: RichTextMessageEditorProps) {
+  const initialContent = value.trim() ? value : '<p></p>'
+
   const editor = useEditor({
     extensions: [
       TiptapStarterKit.configure({ heading: false, codeBlock: false, blockquote: false, horizontalRule: false }),
       Placeholder.configure({ placeholder }),
     ],
-    content: value,
+    content: initialContent,
     editable: !disabled,
-    onUpdate: ({ editor: tiptap }) => onChange(tiptap.getText()),
+    onUpdate: ({ editor: tiptap }) => {
+      const plainText = tiptap.getText().trim()
+      onChange(plainText ? tiptap.getHTML() : '')
+    },
   })
 
   useEffect(() => {
@@ -39,8 +44,9 @@ export function RichTextMessageEditor({
 
   useEffect(() => {
     if (!editor) return
-    if (editor.getText() === value) return
-    editor.commands.setContent(value, false)
+    const normalizedValue = value.trim() ? value : '<p></p>'
+    if (editor.getHTML() === normalizedValue) return
+    editor.commands.setContent(normalizedValue, false)
   }, [editor, value])
 
   return (