From 401d8d7dec22c275362b510fc0dfb7eb12e89d9e Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Wed, 10 Apr 2024 21:33:03 +0530 Subject: [PATCH 1/7] fix: disable long press when scrolling on mobile app --- .../features/chat-space/ChatInterface.tsx | 1 + .../chat-space/chat-view/MessageBlock.tsx | 21 ++++++++++++++----- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/mobile/src/components/features/chat-space/ChatInterface.tsx b/mobile/src/components/features/chat-space/ChatInterface.tsx index af69ae2d6..d545cfd81 100644 --- a/mobile/src/components/features/chat-space/ChatInterface.tsx +++ b/mobile/src/components/features/chat-space/ChatInterface.tsx @@ -144,6 +144,7 @@ export const ChatInterface = ({ channel }: { channel: ChannelListItem | DMChanne setIsScrolling(true)} + scrollEvents onIonScrollEnd={() => setIsScrolling(false)} fullscreen ref={conRef}> diff --git a/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx b/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx index 2716d271e..cd2309724 100644 --- a/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx +++ b/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx @@ -1,4 +1,4 @@ -import { memo, useContext, useEffect, useMemo, useState } from 'react' +import { memo, useContext, useEffect, useMemo, useRef, useState } from 'react' import { FileMessage, ImageMessage, Message, TextMessage, PollMessage } from '../../../../../../types/Messaging/Message' import { IonIcon, IonSkeletonText, IonText } from '@ionic/react' import { MarkdownRenderer } from '@/components/common/MarkdownRenderer' @@ -82,8 +82,13 @@ export const NonContinuationMessageBlock = ({ message, onMessageSelect, isScroll const { user, isActive } = useGetUserDetails(message.is_bot_message && message.bot ? message.bot : message.owner) const [disableLongPress, setDisableLongPress] = useState(false) + + const scrollingRef = useRef(isScrolling) + + scrollingRef.current = isScrolling + const longPressEvent = useLongPress((e) => { - if (isScrolling) return + if (scrollingRef.current) return if (disableLongPress) return Haptics.impact({ style: ImpactStyle.Medium @@ -95,7 +100,8 @@ export const NonContinuationMessageBlock = ({ message, onMessageSelect, isScroll // const color = useMemo(() => generateAvatarColor(user?.full_name ?? userID), [user?.full_name, userID]) return
+ isHighlighted ? 'bg-yellow-300/20 dark:bg-yellow-300/20' : '', + isScrolling ? `focus:bg-transparent active:bg-transparent` : '')} {...longPressEvent}>
@@ -157,8 +163,12 @@ interface ContinuationMessageBlockProps { const ContinuationMessageBlock = ({ message, onMessageSelect, isScrolling, isHighlighted, onReplyMessageClick }: ContinuationMessageBlockProps) => { const [disableLongPress, setDisableLongPress] = useState(false) + + const scrollingRef = useRef(isScrolling) + + scrollingRef.current = isScrolling const longPressEvent = useLongPress((e) => { - if (isScrolling) return + if (scrollingRef.current) return if (disableLongPress) return Haptics.impact({ style: ImpactStyle.Medium @@ -168,7 +178,8 @@ const ContinuationMessageBlock = ({ message, onMessageSelect, isScrolling, isHig return
+ isHighlighted ? 'bg-yellow-300/20 dark:bg-yellow-300/20' : '', + isScrolling ? `focus:bg-transparent active:bg-transparent` : '')} {...longPressEvent}>
From 21197b68a703157637ab69e9e5118e11bc44260c Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Wed, 10 Apr 2024 22:35:40 +0530 Subject: [PATCH 2/7] fix: consistent font sizes and icon alignment --- .../feature/channels/ChannelList.tsx | 2 +- .../feature/channels/CreateChannelModal.tsx | 4 +-- .../feature/chat/ChatInput/Tiptap.tsx | 4 +-- .../feature/chat/ChatMessage/MessageItem.tsx | 2 +- .../TiptapRenderer/TiptapRenderer.tsx | 4 +-- .../direct-messages/DirectMessageList.tsx | 6 ++--- .../components/layout/Sidebar/SidebarComp.tsx | 27 +++++++++---------- 7 files changed, 23 insertions(+), 26 deletions(-) diff --git a/raven-app/src/components/feature/channels/ChannelList.tsx b/raven-app/src/components/feature/channels/ChannelList.tsx index 9ad79059e..0cf7fc98d 100644 --- a/raven-app/src/components/feature/channels/ChannelList.tsx +++ b/raven-app/src/components/feature/channels/ChannelList.tsx @@ -19,7 +19,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData } return ( - + diff --git a/raven-app/src/components/feature/channels/CreateChannelModal.tsx b/raven-app/src/components/feature/channels/CreateChannelModal.tsx index 69e100b66..aba3ce2c6 100644 --- a/raven-app/src/components/feature/channels/CreateChannelModal.tsx +++ b/raven-app/src/components/feature/channels/CreateChannelModal.tsx @@ -100,8 +100,8 @@ export const CreateChannelButton = ({ updateChannelList }: { updateChannelList: return - - + + diff --git a/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx b/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx index ccaf68fa4..f6cd2c3d9 100644 --- a/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx +++ b/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx @@ -249,12 +249,12 @@ const Tiptap = ({ slotBefore, fileProps, onMessageSend, replyMessage, clearReply codeBlock: false, listItem: { HTMLAttributes: { - class: 'rt-Text' + class: 'rt-Text text-sm' } }, paragraph: { HTMLAttributes: { - class: 'rt-Text' + class: 'rt-Text text-sm' } } }), diff --git a/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx b/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx index 5de3998fc..cabef7d28 100644 --- a/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx +++ b/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx @@ -111,7 +111,7 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM + /> {message.link_doctype && message.link_document && diff --git a/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx b/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx index ded1b1498..827983453 100644 --- a/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx +++ b/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx @@ -57,12 +57,12 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated italic: false, listItem: { HTMLAttributes: { - class: 'ml-5 rt-Text rt-r-size-2' + class: 'ml-5 rt-Text text-sm' } }, paragraph: { HTMLAttributes: { - class: 'rt-Text rt-r-size-2' + class: 'rt-Text text-sm' } } }), diff --git a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx index ce1f96021..34d88f923 100644 --- a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx +++ b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx @@ -21,12 +21,10 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount return ( - + - - Direct Messages - + Direct Messages {!showData && unread_count && unread_count?.total_unread_count_in_dms > 0 && {unread_count.total_unread_count_in_dms} diff --git a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx index d5b37c1cf..72ab28c89 100644 --- a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx +++ b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx @@ -1,12 +1,12 @@ import React, { ReactNode, useState } from 'react' import { NavLink } from 'react-router-dom' -import { Flex, IconButton, Text, Badge } from '@radix-ui/themes'; +import { Flex, IconButton, Text, Theme } from '@radix-ui/themes'; import { FlexProps } from '@radix-ui/themes/dist/cjs/components/flex'; import { TextProps } from '@radix-ui/themes/dist/cjs/components/text'; import { IconButtonProps } from '@radix-ui/themes/dist/cjs/components/icon-button'; import { BadgeProps } from '@radix-ui/themes/dist/cjs/components/badge'; import { clsx } from 'clsx'; -import { BsCaretDownFill, BsCaretRightFill } from 'react-icons/bs'; +import { FaCaretDown, FaCaretRight } from 'react-icons/fa'; interface SidebarGroupProps extends FlexProps { children: ReactNode; @@ -145,14 +145,14 @@ export const SidebarViewMoreButton = ({ onClick, ...props }: SidebarViewMoreButt title='View' variant='ghost' size='1' - className='cursor-pointer text-slate-12 bg-transparent hover:text-gray-12' + className='cursor-pointer pb-[4px] text-slate-12 bg-transparent hover:text-gray-12' highContrast onClick={() => { setIsViewMore(!isViewMore) onClick() }} {...props}> - {isViewMore ? : } + {isViewMore ? : } ) } @@ -160,15 +160,14 @@ export const SidebarViewMoreButton = ({ onClick, ...props }: SidebarViewMoreButt export const SidebarBadge = ({ children, ...props }: BadgeProps) => { return ( - - {children} - + +
+ {children} +
+ + + ) } From 42a3cf91e45179c5aeacbf2314b974df0f425737 Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Wed, 10 Apr 2024 22:41:07 +0530 Subject: [PATCH 3/7] fix: colors in dark mode --- raven-app/src/components/layout/Sidebar/SidebarComp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx index 72ab28c89..e69332687 100644 --- a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx +++ b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx @@ -67,7 +67,7 @@ interface SidebarItemProps extends FlexProps { export const SidebarItem = ({ to, children, end, active = false, activeStyles, className, ...props }: SidebarItemProps) => { - const activeClass = 'bg-[#EBEBEB] dark:bg-gray-6 text-gray-12' + const activeClass = 'bg-[#EBEBEB] dark:bg-gray-4 text-gray-12' return ( {children} @@ -161,7 +161,7 @@ export const SidebarBadge = ({ children, ...props }: BadgeProps) => { return ( -
{children} From 7de4177c8807aefbd056255256333bddb18dc699 Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Wed, 10 Apr 2024 22:46:54 +0530 Subject: [PATCH 4/7] fix: alignment --- raven-app/src/components/feature/channels/ChannelList.tsx | 2 +- .../components/feature/direct-messages/DirectMessageList.tsx | 2 +- raven-app/src/components/layout/Sidebar/SidebarComp.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/raven-app/src/components/feature/channels/ChannelList.tsx b/raven-app/src/components/feature/channels/ChannelList.tsx index 0cf7fc98d..59dd2fba4 100644 --- a/raven-app/src/components/feature/channels/ChannelList.tsx +++ b/raven-app/src/components/feature/channels/ChannelList.tsx @@ -19,7 +19,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData } return ( - + diff --git a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx index 34d88f923..ae5c510ed 100644 --- a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx +++ b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx @@ -21,7 +21,7 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount return ( - + Direct Messages diff --git a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx index e69332687..69003a3fc 100644 --- a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx +++ b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx @@ -39,7 +39,7 @@ type SidebarGroupLabelProps = TextProps & { export const SidebarGroupLabel = ({ children, ...props }: SidebarGroupLabelProps) => { return ( - + {children} ) From 0d99e055ef01173576bd0b49ea73ee860913ff68 Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Wed, 10 Apr 2024 23:02:10 +0530 Subject: [PATCH 5/7] fix: DM sorting by last message on mobile --- mobile/src/pages/direct-messages/DirectMessageList.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/mobile/src/pages/direct-messages/DirectMessageList.tsx b/mobile/src/pages/direct-messages/DirectMessageList.tsx index b7a787ac1..882dfbac4 100644 --- a/mobile/src/pages/direct-messages/DirectMessageList.tsx +++ b/mobile/src/pages/direct-messages/DirectMessageList.tsx @@ -76,12 +76,9 @@ const useMessageUsersList = () => { }) return usersWithChannels.sort((a, b) => { - if (a.channel && b.channel) { - const bTimestamp = b.channel.last_message_timestamp ? new Date(b.channel.last_message_timestamp).getTime() : 0 - const aTimestamp = a.channel.last_message_timestamp ? new Date(a.channel.last_message_timestamp).getTime() : 0 - return new Date(bTimestamp).getTime() - new Date(aTimestamp).getTime() - } - return 0 + const bTimestamp = b.channel?.last_message_timestamp ? new Date(b.channel.last_message_timestamp).getTime() : 0 + const aTimestamp = a.channel?.last_message_timestamp ? new Date(a.channel.last_message_timestamp).getTime() : 0 + return bTimestamp - aTimestamp }) }, [users, dm_channels]) From 2c370cf56f1a56946b504cf67b8c42e7f09f911e Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Wed, 10 Apr 2024 23:39:09 +0530 Subject: [PATCH 6/7] fix: use tiptap renderer on mobile app --- mobile/package.json | 1 + .../chat-space/chat-view/MessageBlock.tsx | 7 +- .../components/TiptapRenderer/Blockquote.tsx | 19 +++ .../components/TiptapRenderer/Bold.tsx | 14 ++ .../components/TiptapRenderer/Link.tsx | 127 ++++++++++++++++++ .../components/TiptapRenderer/Mention.tsx | 75 +++++++++++ .../TiptapRenderer/TiptapRenderer.tsx | 105 +++++++++++++++ .../components/TiptapRenderer/Underline.tsx | 15 +++ mobile/yarn.lock | 5 + .../Renderers/TiptapRenderer/List.tsx | 0 10 files changed, 363 insertions(+), 5 deletions(-) create mode 100644 mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Blockquote.tsx create mode 100644 mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Bold.tsx create mode 100644 mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Link.tsx create mode 100644 mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Mention.tsx create mode 100644 mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx create mode 100644 mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Underline.tsx delete mode 100644 raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/List.tsx diff --git a/mobile/package.json b/mobile/package.json index 08778f3d8..eb0af0657 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -21,6 +21,7 @@ "@radix-ui/themes": "^3.0.2", "@tiptap/extension-code-block-lowlight": "^2.2.3", "@tiptap/extension-highlight": "^2.2.3", + "@tiptap/extension-image": "^2.2.3", "@tiptap/extension-link": "^2.2.3", "@tiptap/extension-mention": "^2.2.3", "@tiptap/extension-placeholder": "^2.2.3", diff --git a/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx b/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx index cd2309724..df57a323a 100644 --- a/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx +++ b/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx @@ -1,7 +1,6 @@ import { memo, useContext, useEffect, useMemo, useRef, useState } from 'react' import { FileMessage, ImageMessage, Message, TextMessage, PollMessage } from '../../../../../../types/Messaging/Message' import { IonIcon, IonSkeletonText, IonText } from '@ionic/react' -import { MarkdownRenderer } from '@/components/common/MarkdownRenderer' import { UserFields } from '@/utils/users/UserListProvider' import { DateObjectToFormattedDateStringWithoutYear, DateObjectToTimeString } from '@/utils/operations/operations' import { ChannelMembersContext } from '../ChatInterface' @@ -22,6 +21,7 @@ import { RavenPoll } from '@/types/RavenMessaging/RavenPoll' import { RavenPollOption } from '@/types/RavenMessaging/RavenPollOption' import { MdOutlineBarChart } from 'react-icons/md' import { ViewPollVotes } from '../../polls/ViewPollVotes' +import { TiptapRenderer } from './components/TiptapRenderer/TiptapRenderer' type Props = { message: Message, @@ -232,10 +232,7 @@ const MessageContent = ({ message, onReplyMessageClick, onLongPressDisabled, onL const TextMessageBlock = ({ message, truncate = false }: { message: TextMessage, truncate?: boolean }) => { - - return
- -
+ return } const options = { root: null, diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Blockquote.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Blockquote.tsx new file mode 100644 index 000000000..b579d247d --- /dev/null +++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Blockquote.tsx @@ -0,0 +1,19 @@ +import { Blockquote } from '@radix-ui/themes'; +import TiptapBlockquote from '@tiptap/extension-blockquote' +import { NodeViewRendererProps, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"; + +export const CustomBlockquote = TiptapBlockquote.extend({ + addNodeView() { + return ReactNodeViewRenderer(BlockquoteRenderer) + } +}) + +const BlockquoteRenderer = ({ node }: NodeViewRendererProps) => { + return ( + +
+ {node.textContent} +
+ + ); +}; \ No newline at end of file diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Bold.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Bold.tsx new file mode 100644 index 000000000..120721f45 --- /dev/null +++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Bold.tsx @@ -0,0 +1,14 @@ +import TiptapBold from '@tiptap/extension-bold' +import { mergeAttributes } from "@tiptap/react"; + +export const CustomBold = TiptapBold.extend({ + renderHTML({ HTMLAttributes }) { + return [ + "strong", + mergeAttributes(HTMLAttributes, { + class: 'rt-Strong' + }), // mergeAttributes is a exported function from @tiptap/core + 0, + ]; + }, +}) \ No newline at end of file diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Link.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Link.tsx new file mode 100644 index 000000000..6258607dd --- /dev/null +++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Link.tsx @@ -0,0 +1,127 @@ +// import { Skeleton } from '@/components/common/Skeleton'; +// import { Box, Flex, Text } from '@radix-ui/themes'; +import TiptapLink from '@tiptap/extension-link' +import { mergeAttributes, useCurrentEditor } from "@tiptap/react"; +// import { useFrappeGetCall } from 'frappe-react-sdk'; +// import { memo, useMemo } from 'react'; + +export const CustomLink = TiptapLink.extend({ + renderHTML({ HTMLAttributes }) { + return [ + "a", + mergeAttributes(HTMLAttributes, { + class: 'rt-Text rt-reset rt-Link rt-underline-auto break-all' + }), // mergeAttributes is a exported function from @tiptap/core + 0, + ]; + }, +}).configure({ + protocols: ['mailto', 'https', 'http'], + openOnClick: false, +}) + +export type LinkPreviewDetails = { + title: string, + description: string, + image: string, + force_title: string, + absolute_image: string, + site_name: string +} + +// export const LinkPreview = memo(({ isScrolling }: { isScrolling?: boolean }) => { + +// const { editor } = useCurrentEditor() + +// // We need to find the first mark of type link in a message and extract the href. + +// const json = editor?.getJSON() + +// const href = useMemo(() => { +// if (!json) return null + +// let firstLink = '' + +// // At every level of the json, we need to find the first mark of type link and extract the href. +// // Once we find the first link, we can stop searching. +// const findFirstLink = (json: any) => { +// if (firstLink) return firstLink + +// if (Array.isArray(json)) { +// for (const item of json) { +// if (typeof item === 'object') { +// findFirstLink(item) +// } +// } +// } else { +// if (json?.type === 'link') { +// const link = json?.attrs?.href +// if (link?.startsWith('mailto')) { +// } else { +// firstLink = json?.attrs?.href +// } +// } else { +// for (const key in json) { +// if (typeof json?.[key] === 'object') { +// findFirstLink(json?.[key]) +// } +// } +// } +// } +// } + +// findFirstLink(json) + +// return firstLink +// }, [json]) + +// // const href = editor?.getAttributes('link').href + + +// const { data, isLoading } = useFrappeGetCall<{ message: LinkPreviewDetails[] }>('raven.api.preview_links.get_preview_link', { +// urls: JSON.stringify([href]) +// }, href ? undefined : null, { +// revalidateIfStale: false, +// revalidateOnFocus: false, +// revalidateOnReconnect: false, +// shouldRetryOnError: false, +// }) + +// if (!href) return null + +// const linkPreview = data?.message?.[0] + +// return +// +// {linkPreview ? linkPreview.site_name && linkPreview.description ? +// {(linkPreview.absolute_image || linkPreview.image) && +// +// {/* Absolute positioned skeleton loader */} +// +// + +// +// + +// {linkPreview.title} + +// +// } +// +// +// {linkPreview.title} +// {linkPreview.site_name} +// +// {linkPreview.description} +// +// : null : + +// null} +// +// + +// }) \ No newline at end of file diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Mention.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Mention.tsx new file mode 100644 index 000000000..76a110dae --- /dev/null +++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Mention.tsx @@ -0,0 +1,75 @@ +import { UserAvatar } from '@/components/common/UserAvatar'; +import { useGetUser } from '@/hooks/useGetUser'; +import { useIsUserActive } from '@/hooks/useIsUserActive'; +import { Flex, HoverCard, Link, Text } from '@radix-ui/themes'; +import Mention from '@tiptap/extension-mention' +import { NodeViewRendererProps, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"; +import { BsFillCircleFill } from 'react-icons/bs'; +import { Link as RouterLink } from 'react-router-dom'; + +export const CustomUserMention = Mention.extend({ + name: 'userMention', + addNodeView() { + return ReactNodeViewRenderer(UserMentionRenderer) + } +}) + +export const CustomChannelMention = Mention.extend({ + name: 'channelMention', + addNodeView() { + return ReactNodeViewRenderer(ChannelMentionRenderer) + } +}) + +const UserMentionRenderer = ({ node }: NodeViewRendererProps) => { + + const user = useGetUser(node.attrs.id) + const isActive = useIsUserActive(node.attrs.id) + + return ( + + + + + @{user?.full_name ?? node.attrs.label} + + + + + + + + {user?.full_name ?? node.attrs.label} + {isActive && + + Online + } + + {user && {user?.name}} + + + + + + {/* + @{node.attrs.label} + */} + + ); +}; + + + +const ChannelMentionRenderer = ({ node }: NodeViewRendererProps) => { + + + return ( + + + + @{node.attrs.label} + + + + ); +}; \ No newline at end of file diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx new file mode 100644 index 000000000..d8e85123d --- /dev/null +++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx @@ -0,0 +1,105 @@ +import { EditorContent, EditorContext, useEditor } from '@tiptap/react' +import { TextMessage } from '../../../../../../../../types/Messaging/Message' +import { UserFields } from '@/utils/users/UserListProvider' +import { Box, BoxProps } from '@radix-ui/themes' +import Highlight from '@tiptap/extension-highlight' +import StarterKit from '@tiptap/starter-kit' +import css from 'highlight.js/lib/languages/css' +import js from 'highlight.js/lib/languages/javascript' +import ts from 'highlight.js/lib/languages/typescript' +import html from 'highlight.js/lib/languages/xml' +import json from 'highlight.js/lib/languages/json' +import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight' +import { common, createLowlight } from 'lowlight' +import python from 'highlight.js/lib/languages/python' +import { CustomBlockquote } from './Blockquote' +import { CustomBold } from './Bold' +import { CustomUserMention } from './Mention' +import { CustomLink } from './Link' +import { CustomUnderline } from './Underline' +import { Image } from '@tiptap/extension-image' +import { clsx } from 'clsx' +import Italic from '@tiptap/extension-italic'; +const lowlight = createLowlight(common) + +lowlight.register('html', html) +lowlight.register('css', css) +lowlight.register('js', js) +lowlight.register('ts', ts) +lowlight.register('json', json) +lowlight.register('python', python) +type TiptapRendererProps = BoxProps & { + message: TextMessage, + user?: UserFields, + showLinkPreview?: boolean, + isScrolling?: boolean, + isTruncated?: boolean +} + +export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated = false, showLinkPreview = true, ...props }: TiptapRendererProps) => { + + const editor = useEditor({ + content: message.text, + editable: false, + editorProps: { + attributes: { + class: isTruncated ? 'line-clamp-3' : '' + } + }, + enableCoreExtensions: true, + extensions: [ + StarterKit.configure({ + heading: false, + codeBlock: false, + bold: false, + blockquote: false, + italic: false, + listItem: { + HTMLAttributes: { + class: 'ml-5 rt-Text text-base' + } + }, + paragraph: { + HTMLAttributes: { + class: 'rt-Text text-base' + } + } + }), + Highlight.configure({ + multicolor: true, + HTMLAttributes: { + class: 'bg-[var(--yellow-6)] dark:bg-[var(--yellow-11)] px-2 py-1' + } + }), + CustomUnderline, + CodeBlockLowlight.configure({ + lowlight + }), + CustomBlockquote, + CustomBold, + CustomUserMention, + CustomLink, + Italic, + Image.configure({ + HTMLAttributes: { + class: 'mt-2 object-cover max-w-[280px]' + }, + inline: true + }), + // TODO: Add channel mention + // CustomChannelMention + ] + }) + + return ( + + + + {/* {showLinkPreview && } */} + + + ) +} \ No newline at end of file diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Underline.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Underline.tsx new file mode 100644 index 000000000..a4da9fa7e --- /dev/null +++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Underline.tsx @@ -0,0 +1,15 @@ +import TiptapUnderline from '@tiptap/extension-underline' +import { mergeAttributes } from "@tiptap/react"; + +export const CustomUnderline = TiptapUnderline.extend({ + renderHTML({ HTMLAttributes }) { + return [ + "span", + mergeAttributes(HTMLAttributes, { + class: 'rt-Text rt-reset rt-Link rt-underline-always text-gray-12', + 'data-accent-color': 'gray', + }), // mergeAttributes is a exported function from @tiptap/core + 0, + ]; + }, +}) \ No newline at end of file diff --git a/mobile/yarn.lock b/mobile/yarn.lock index bc2a55aed..56609c796 100644 --- a/mobile/yarn.lock +++ b/mobile/yarn.lock @@ -2627,6 +2627,11 @@ resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.3.0.tgz#e4934b32c005b1cf0f03fab5f4caff8cacbf4c7e" integrity sha512-4DB8GU3uuDzzyqUmONIb3CHXcQ6Nuy4mHHkFSmUyEjg1i5eMQU5H7S6mNvZbltcJB2ImgCSwSMlj1kVN3MLIPg== +"@tiptap/extension-image@^2.2.3": + version "2.3.0" + resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.3.0.tgz#914c4c5030fa4278f53e808c03819f7422da4497" + integrity sha512-v1fLEEzrfXWavsLFUEkTiYYxwm1WDNrjuUriU5tG2Jv22NL1BL4BLVbZbGdkAk+qHWy8QWszrDJbcgGh2VNCoQ== + "@tiptap/extension-italic@^2.3.0": version "2.3.0" resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.3.0.tgz#72279632a2652642abed2078a920e2e05aff030e" diff --git a/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/List.tsx b/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/List.tsx deleted file mode 100644 index e69de29bb..000000000 From 6e16e9423f7e49933805edc5eaf2c8feba072484 Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Wed, 10 Apr 2024 23:41:31 +0530 Subject: [PATCH 7/7] chore: bumped version to v1.5.1 --- mobile/package.json | 2 +- mobile/src/pages/profile/Profile.tsx | 2 +- package.json | 2 +- raven-app/package.json | 2 +- raven/__init__.py | 2 +- raven/package.json | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/mobile/package.json b/mobile/package.json index eb0af0657..3c542a00a 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -1,7 +1,7 @@ { "name": "mobile", "private": true, - "version": "1.5.0", + "version": "1.5.1", "type": "module", "scripts": { "dev": "vite", diff --git a/mobile/src/pages/profile/Profile.tsx b/mobile/src/pages/profile/Profile.tsx index 851232911..32bbf27ed 100644 --- a/mobile/src/pages/profile/Profile.tsx +++ b/mobile/src/pages/profile/Profile.tsx @@ -62,7 +62,7 @@ export const Profile = () => {
- raven v1.5.0 + raven v1.5.1
Made by The Commit Company
diff --git a/package.json b/package.json index a9fee4059..47db4c594 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "raven", - "version": "1.5.0", + "version": "1.5.1", "description": "Messaging Application", "main": "index.js", "scripts": { diff --git a/raven-app/package.json b/raven-app/package.json index 605166334..73aa33f9b 100644 --- a/raven-app/package.json +++ b/raven-app/package.json @@ -1,7 +1,7 @@ { "name": "raven-app", "private": true, - "version": "1.5.0", + "version": "1.5.1", "type": "module", "scripts": { "dev": "vite", diff --git a/raven/__init__.py b/raven/__init__.py index 5b6018861..0f228f258 100644 --- a/raven/__init__.py +++ b/raven/__init__.py @@ -1 +1 @@ -__version__ = "1.5.0" +__version__ = "1.5.1" diff --git a/raven/package.json b/raven/package.json index e1e2b57f0..c6ae1aa72 100644 --- a/raven/package.json +++ b/raven/package.json @@ -1,6 +1,6 @@ { "name": "raven", - "version": "1.5.0", + "version": "1.5.1", "description": "", "main": "index.js", "scripts": {