-
-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* wip: tiptap integration * fix: styling for tiptap editor and channel mention * feat: added tiptap on web app * feat: added styling for links in tiptap * feat: blockquote styling in editor * fix: highlight color of mentions * fix: added styles on renderer * fix: blockquote stylesx
- Loading branch information
1 parent
8e328bb
commit 1c39bb5
Showing
29 changed files
with
2,223 additions
and
154 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
|
||
export interface RavenMessage{ | ||
creation: string | ||
name: string | ||
modified: string | ||
owner: string | ||
modified_by: string | ||
docstatus: 0 | 1 | 2 | ||
parent?: string | ||
parentfield?: string | ||
parenttype?: string | ||
idx?: number | ||
/** Channel ID : Link - Raven Channel */ | ||
channel_id: string | ||
/** Text : Long Text */ | ||
text?: string | ||
/** JSON : JSON */ | ||
json?: any | ||
/** File : Attach */ | ||
file?: string | ||
/** File Thumbnail : Attach */ | ||
file_thumbnail?: string | ||
/** Message Type : Select */ | ||
message_type?: "Text" | "Image" | "File" | ||
/** Message Reactions : JSON */ | ||
message_reactions?: any | ||
/** Is Reply : Check */ | ||
is_reply?: 0 | 1 | ||
/** Linked Message : Link - Raven Message */ | ||
linked_message?: string | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
raven-app/src/components/common/EmojiPicker/EmojiPicker.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { createElement, useEffect, useRef } from "react" | ||
import 'emoji-picker-element' | ||
import { useColorModeValue } from "@chakra-ui/react" | ||
import './emojiPicker.styles.css' | ||
|
||
export const EmojiPicker = ({ onSelect }: { onSelect: (emoji: string) => void }) => { | ||
|
||
const className = useColorModeValue('light', 'dark') | ||
const ref = useRef<any>(null) | ||
|
||
useEffect(() => { | ||
|
||
const handler = (event: any) => { | ||
onSelect(event.detail.unicode) | ||
} | ||
ref.current?.addEventListener('emoji-click', handler) | ||
ref.current.skinToneEmoji = '👍' | ||
|
||
return () => { | ||
ref.current?.removeEventListener('emoji-click', handler) | ||
} | ||
}, []) | ||
|
||
return createElement('emoji-picker', { ref, class: className }) | ||
} |
23 changes: 23 additions & 0 deletions
23
raven-app/src/components/common/EmojiPicker/emojiPicker.styles.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
emoji-picker { | ||
--indicator-color: var(--chakra-colors-blue-500); | ||
--input-padding: var(--chakra-space-2); | ||
--input-font-size: var(--chakra-fontSizes-sm); | ||
} | ||
|
||
.picker { | ||
border-radius: 10px; | ||
} | ||
|
||
emoji-picker.light { | ||
--background: var(--chakra-colors-gray-50); | ||
--border-color: var(--chakra-colors-gray-50); | ||
--button-active-background: var(--chakra-colors-gray-200); | ||
--button-hover-background: var(--chakra-colors-gray-200); | ||
} | ||
|
||
emoji-picker.dark { | ||
--background: var(--chakra-colors-gray-800); | ||
--border-color: var(--chakra-colors-gray-900); | ||
--button-active-background: var(--chakra-colors-gray-600); | ||
--button-hover-background: var(--chakra-colors-gray-600); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Button, ButtonProps, IconButton, IconButtonProps } from "@chakra-ui/react"; | ||
import { forwardRef } from "react"; | ||
|
||
export const TooltipButton = forwardRef(({ children, ...rest }: ButtonProps, ref) => ( | ||
<Button ref={ref} {...rest}> | ||
{children} | ||
</Button> | ||
)) | ||
|
||
export const TooltipIconButton = forwardRef(({ children, ...rest }: IconButtonProps, ref) => ( | ||
<IconButton ref={ref} {...rest}> | ||
{children} | ||
</IconButton> | ||
)) |
110 changes: 110 additions & 0 deletions
110
raven-app/src/components/feature/chat/ChatInput/ChannelMentionList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
// import './MentionList.scss' | ||
|
||
import { useIsUserActive } from '@/hooks/useIsUserActive' | ||
import { ChannelListItem } from '@/utils/channel/ChannelListProvider' | ||
import { getChannelIcon } from '@/utils/layout/channelIcon' | ||
import { UserFields } from '@/utils/users/UserListProvider' | ||
import { Avatar, AvatarBadge, Button, HStack, Icon, Stack, StackDivider, Text, useColorModeValue } from '@chakra-ui/react' | ||
import { ReactRendererOptions } from '@tiptap/react' | ||
import { | ||
forwardRef, useEffect, useImperativeHandle, | ||
useState, | ||
} from 'react' | ||
|
||
export default forwardRef((props: ReactRendererOptions['props'], ref) => { | ||
|
||
const buttonGroupBgColor = useColorModeValue('white', 'gray.900') | ||
const [selectedIndex, setSelectedIndex] = useState(0) | ||
|
||
const selectItem = (index: number) => { | ||
const item = props?.items[index] | ||
if (item) { | ||
props.command({ id: item.name, label: item.channel_name }) | ||
} | ||
} | ||
|
||
const upHandler = () => { | ||
setSelectedIndex((selectedIndex + props?.items.length - 1) % props?.items.length) | ||
} | ||
|
||
const downHandler = () => { | ||
setSelectedIndex((selectedIndex + 1) % props?.items.length) | ||
} | ||
|
||
const enterHandler = () => { | ||
selectItem(selectedIndex) | ||
} | ||
|
||
useEffect(() => setSelectedIndex(0), [props?.items]) | ||
|
||
useImperativeHandle(ref, () => ({ | ||
onKeyDown: ({ event }: { event: KeyboardEvent }) => { | ||
if (event.key === 'ArrowUp') { | ||
upHandler() | ||
return true | ||
} | ||
|
||
if (event.key === 'ArrowDown') { | ||
downHandler() | ||
return true | ||
} | ||
|
||
if (event.key === 'Enter') { | ||
enterHandler() | ||
return true | ||
} | ||
|
||
return false | ||
}, | ||
})) | ||
|
||
return ( | ||
<Stack divider={<StackDivider />} spacing='0' rounded='md' shadow='md' bgColor={buttonGroupBgColor}> | ||
{props?.items.length | ||
? props.items.map((item: ChannelListItem, index: number) => ( | ||
<MentionItem | ||
item={item} | ||
index={index} | ||
selectItem={selectItem} | ||
selectedIndex={selectedIndex} | ||
key={item.name} | ||
itemsLength={props.items.length} | ||
/> | ||
)) | ||
: <div className="item">No result</div> | ||
} | ||
</Stack> | ||
) | ||
}) | ||
|
||
const MentionItem = ({ item, index, selectItem, selectedIndex, itemsLength }: { itemsLength: number, selectedIndex: number, index: number, item: ChannelListItem, selectItem: (index: number) => void }) => { | ||
|
||
const { selectedBgColor, selectedColor, textColor, backgroundColor } = useColorModeValue({ | ||
selectedBgColor: 'gray.900', | ||
selectedColor: 'white', | ||
textColor: 'gray.900', | ||
backgroundColor: 'white' | ||
}, { | ||
selectedBgColor: 'gray.100', | ||
selectedColor: 'gray.900', | ||
textColor: 'gray.100', | ||
backgroundColor: 'gray.800' | ||
}) | ||
return <HStack | ||
as={'button'} | ||
rounded='md' | ||
roundedBottom={index === itemsLength - 1 ? 'md' : 'none'} | ||
roundedTop={index === 0 ? 'md' : 'none'} | ||
px='3' | ||
py='1.5' | ||
textAlign={'left'} | ||
// colorScheme='blue' | ||
bgColor={index === selectedIndex ? selectedBgColor : backgroundColor} | ||
color={index === selectedIndex ? selectedColor : textColor} | ||
key={index} | ||
onClick={() => selectItem(index)} | ||
> | ||
<Icon as={getChannelIcon(item.type)} /> | ||
<Text as='span' fontSize='sm'>{item.channel_name}</Text> | ||
</HStack> | ||
} |
82 changes: 82 additions & 0 deletions
82
raven-app/src/components/feature/chat/ChatInput/FileInput/useFileUpload.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import { CustomFile } from '@/components/feature/file-upload/FileDrop' | ||
import { useRef, useState } from 'react' | ||
import { Message } from '../../../../../../../types/Messaging/Message' | ||
import { useFrappeCreateDoc, useFrappeFileUpload, useFrappeUpdateDoc } from 'frappe-react-sdk' | ||
import { getFileExtension } from '@/utils/operations' | ||
|
||
|
||
export const fileExt = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF'] | ||
|
||
export default function useFileUpload(channelID: string, selectedMessage?: Message | null) { | ||
|
||
const fileInputRef = useRef<any>(null) | ||
|
||
const [files, setFiles] = useState<CustomFile[]>([]) | ||
|
||
const { createDoc, loading: creatingDoc, error: errorCreatingDoc, reset: resetCreateDoc } = useFrappeCreateDoc() | ||
const { upload, loading: uploadingFile, progress, error: errorUploadingDoc, reset: resetUploadDoc } = useFrappeFileUpload() | ||
const { updateDoc, loading: updatingDoc, error: errorUpdatingDoc, reset: resetUpdateDoc } = useFrappeUpdateDoc() | ||
|
||
const addFile = (file: File) => { | ||
|
||
const newFile: CustomFile = file as CustomFile | ||
if (newFile) { | ||
newFile.fileID = file.name + Date.now() | ||
newFile.uploadProgress = 0 | ||
setFiles((f: any) => [...f, newFile]) | ||
} | ||
} | ||
const removeFile = (id: string) => { | ||
let newFiles = files.filter(file => file.fileID !== id) | ||
setFiles(newFiles) | ||
} | ||
|
||
const uploadFiles = async () => { | ||
|
||
if (files.length > 0) { | ||
const promises = files.map(async (f: CustomFile) => { | ||
let docname = '' | ||
return createDoc('Raven Message', { | ||
channel_id: channelID | ||
}).then((d) => { | ||
docname = d.name | ||
f.uploading = true | ||
f.uploadProgress = progress | ||
return upload(f, { | ||
isPrivate: true, | ||
doctype: 'Raven Message', | ||
docname: d.name, | ||
fieldname: 'file', | ||
}) | ||
}).then((r) => { | ||
f.uploading = false | ||
return updateDoc("Raven Message", docname, { | ||
file: r.file_url, | ||
message_type: fileExt.includes(getFileExtension(f.name)) ? "Image" : "File", | ||
}) | ||
}) | ||
}) | ||
|
||
return Promise.all(promises) | ||
.then(() => { | ||
setFiles([]) | ||
resetCreateDoc() | ||
resetUploadDoc() | ||
resetUpdateDoc() | ||
}).catch((e) => { | ||
console.log(e) | ||
}) | ||
} else { | ||
return Promise.resolve() | ||
} | ||
} | ||
|
||
return { | ||
fileInputRef, | ||
files, | ||
setFiles, | ||
removeFile, | ||
addFile, | ||
uploadFiles | ||
} | ||
} |
Oops, something went wrong.