Merge pull request #890 from The-Commit-Company/876-message-has-a-int…

…ernal-scroll-when-character-count-is-around-380-in-the-mobile-app fix: tiptap styles on mobile
The-Commit-Company · Apr 26, 2024 · fc6e0b9 · fc6e0b9
2 parents 30ae852 + 941380f
commit fc6e0b9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/mobile/src/components/features/chat-input/tiptap.styles.css b/mobile/src/components/features/chat-input/tiptap.styles.css
@@ -1,4 +1,4 @@
-.tiptap p.is-editor-empty:first-child::before {
+.tiptap-editor p.is-editor-empty:first-child::before {
     color: var(--gray-8);
     content: attr(data-placeholder);
     float: left;
@@ -9,7 +9,7 @@
     pointer-events: none;
 }
 
-.tiptap.ProseMirror {
+.tiptap-editor.ProseMirror {
     max-height: 240px;
     overflow: auto;
 }

diff --git a/...ponents/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.styles.css b/...ponents/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.styles.css
@@ -0,0 +1,9 @@
+.tiptap-renderer blockquote {
+    border-left: 3px solid var(--gray-11);
+    padding-left: 0.8rem;
+    margin: 1rem;
+}
+
+.tiptap-renderer a {
+    color: var(--accent-11);
+}
diff --git a/...src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx b/...src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx
@@ -19,6 +19,8 @@ import { CustomUnderline } from './Underline'
 import { Image } from '@tiptap/extension-image'
 import { clsx } from 'clsx'
 import Italic from '@tiptap/extension-italic';
+import './TiptapRenderer.styles.css'
+
 const lowlight = createLowlight(common)
 
 lowlight.register('html', html)
@@ -42,7 +44,7 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated
     editable: false,
     editorProps: {
       attributes: {
-        class: isTruncated ? 'line-clamp-3' : ''
+        class: isTruncated ? 'tiptap-renderer line-clamp-3' : 'tiptap-renderer '
       }
     },
     enableCoreExtensions: true,

diff --git a/mobile/src/index.css b/mobile/src/index.css
@@ -2,7 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
+
+  ul,
+  ol {
+    list-style: revert;
+  }
+
+
   :root {
     --background: 0 0% 100%;
     --foreground: 224 71.4% 4.1%;

diff --git a/...n-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx b/...n-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx
@@ -54,6 +54,11 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated
         codeBlock: false,
         bold: false,
         italic: false,
+        orderedList: {
+          HTMLAttributes: {
+            class: 'list-decimal'
+          }
+        },
         listItem: {
           HTMLAttributes: {
             class: 'ml-5 rt-Text text-sm'