diff --git a/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation-data.ts b/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation-data.ts new file mode 100644 index 000000000..7bbd889d9 --- /dev/null +++ b/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation-data.ts @@ -0,0 +1,297 @@ +export const data = [ + { + author: { + id: 1, + uid: 'user1', + display_name: 'Developer On1e', + email: 'developer1@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + created: 1737724536265, + edited: 1737724536265, + id: 66, + kind: 'change-comment', + order: 1, + parent_id: null, + payload: { + id: 66, + created: 1737724536265, + updated: 1737733066705, + edited: 1737724536265, + parent_id: null, + repo_id: 2, + pullreq_id: 11, + order: 1, + sub_order: 0, + type: 'code-comment', + kind: 'change-comment', + text: 'Added import for tailwindcss-animate and PluginAPI configuration', + payload: { + title: '@@ -0,0 +1,4 @@', + lines: [ + "+import tailwindcssAnimate from 'tailwindcss-animate'", + "+import { PluginAPI } from 'tailwindcss/types/config'", + '+', + '+export default {' + ], + line_start_new: true, + line_end_new: true + }, + resolved: 1737733066705, + author: { + id: 1, + uid: 'user1', + display_name: 'Developer One', + email: 'developer1@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + resolver: { + id: 1, + uid: 'user1', + display_name: 'Developer One', + email: 'developer1@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + code_comment: { + outdated: false, + merge_base_sha: '12421f51a7cca90376cba8de0fe9b3289eb6e218', + source_sha: '34f4d7bbfeda153e4965395ac6a20e80dec63e57', + path: 'packages/canary/configs/tailwind.ts', + line_new: 2, + span_new: 1, + line_old: 0, + span_old: 0 + } + }, + pullreq_id: 11, + repo_id: 2, + resolved: 1737733066705, + resolver: { + id: 1, + uid: 'user1', + display_name: 'Developer One', + email: 'developer1@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + sub_order: 0, + text: 'Added import for tailwindcss-animate and PluginAPI configuration', + type: 'code-comment', + updated: 1737733066705 + }, + { + author: { + id: 2, + uid: 'user2', + display_name: 'Developer Two', + email: 'developer2@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + created: 1737726929298, + edited: 1737726929298, + id: 67, + kind: 'change-comment', + order: 1, + parent_id: 66, + payload: { + id: 67, + created: 1737726929298, + updated: 1737726929298, + edited: 1737726929298, + parent_id: 66, + repo_id: 2, + pullreq_id: 11, + order: 1, + sub_order: 1, + type: 'comment', + kind: 'change-comment', + text: 'This import will help with animation configurations', + payload: {}, + author: { + id: 2, + uid: 'user2', + display_name: 'Developer Two', + email: 'developer2@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + } + }, + pullreq_id: 11, + repo_id: 2, + sub_order: 1, + text: 'This import will help with animation configurations', + type: 'comment', + updated: 1737726929298 + }, + { + author: { + id: 3, + uid: 'user3', + display_name: 'Developer Three', + email: 'developer3@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + created: 1737727497246, + edited: 1737727497246, + id: 68, + kind: 'comment', + order: 2, + parent_id: null, + payload: { + id: 68, + created: 1737727497246, + updated: 1737737257708, + edited: 1737727497246, + parent_id: null, + repo_id: 2, + pullreq_id: 11, + order: 2, + sub_order: 0, + type: 'comment', + kind: 'comment', + text: "Let's discuss the plugin configuration approach", + payload: {}, + resolved: 1737737257708, + author: { + id: 3, + uid: 'user3', + display_name: 'Developer Three', + email: 'developer3@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + resolver: { + id: 3, + uid: 'user3', + display_name: 'Developer Three', + email: 'developer3@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + } + }, + pullreq_id: 11, + repo_id: 2, + resolved: 1737737257708, + resolver: { + id: 3, + uid: 'user3', + display_name: 'Developer Three', + email: 'developer3@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + sub_order: 0, + text: "Let's discuss the plugin configuration approach", + type: 'comment', + updated: 1737737257708 + }, + { + author: { + id: 4, + uid: 'user4', + display_name: 'Developer Four', + email: 'developer4@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + created: 1737735053391, + edited: 1737735053391, + id: 69, + kind: 'comment', + order: 2, + parent_id: 68, + payload: { + id: 69, + created: 1737735053391, + updated: 1737735053391, + edited: 1737735053391, + parent_id: 68, + repo_id: 2, + pullreq_id: 11, + order: 2, + sub_order: 1, + type: 'comment', + kind: 'comment', + text: 'We should consider adding type definitions', + payload: {}, + author: { + id: 4, + uid: 'user4', + display_name: 'Developer Four', + email: 'developer4@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + } + }, + pullreq_id: 11, + repo_id: 2, + sub_order: 1, + text: 'We should consider adding type definitions', + type: 'comment', + updated: 1737735053391 + }, + { + author: { + id: 5, + uid: 'user5', + display_name: 'Developer Five', + email: 'developer5@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + }, + created: 1737735323065, + edited: 1737735323065, + id: 70, + kind: 'comment', + order: 2, + parent_id: 68, + payload: { + id: 70, + created: 1737735323065, + updated: 1737735323065, + edited: 1737735323065, + parent_id: 68, + repo_id: 2, + pullreq_id: 11, + order: 2, + sub_order: 2, + type: 'comment', + kind: 'comment', + text: 'I suggest we also include documentation for the animation options', + payload: {}, + author: { + id: 5, + uid: 'user5', + display_name: 'Developer Five', + email: 'developer5@example.com', + type: 'user', + created: 1736953478893, + updated: 1736953614668 + } + }, + pullreq_id: 11, + repo_id: 2, + sub_order: 2, + text: 'I suggest we also include documentation for the animation options', + type: 'comment', + updated: 1737735323065 + } +] diff --git a/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx b/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx index 163c96e23..1032a3357 100644 --- a/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx +++ b/apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx @@ -16,9 +16,11 @@ import { SandboxLayout, TypesCodeOwnerEvaluation, TypesCodeOwnerEvaluationEntry, + TypesPullReqActivity, TypesPullReqReviewer } from '@harnessio/ui/views' +import { data } from './pull-request-conversation-data' import { changesInfoData, mockPullRequestActions, prPanelInfo } from './pull-request-panelData' const PullRequestConversationWrapper: FC = () => { @@ -157,14 +159,13 @@ const PullRequestConversationWrapper: FC = () => { repoId={repoRef} refetchActivities={noop} commentStatusPullReq={commentStatusPullReq} - data={undefined} + data={data as TypesPullReqActivity[]} pullReqMetadata={pullReqMetadata ? pullReqMetadata : undefined} activityFilter={activityFilter} dateOrderSort={dateOrderSort} handleSaveComment={noop} currentUser={{ display_name: currentUserData?.display_name, uid: currentUserData?.uid }} onCopyClick={noop} - onCommentSaveAndStatusChange={noop} toggleConversationStatus={noop} onCommitSuggestion={noop} addSuggestionToBatch={noop} diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx index 9db67d3c5..cc8c88195 100644 --- a/packages/ui/src/components/badge.tsx +++ b/packages/ui/src/components/badge.tsx @@ -29,12 +29,12 @@ const badgeVariants = cva( outline: 'text-foreground' }, size: { - default: 'px-2.5 py-0.5 text-xs font-semibold leading-none', - xl: 'h-[18px] px-2 text-12 leading-none', - lg: 'px-3 py-1 text-xs font-normal leading-none', - md: 'h-6 px-2.5 leading-none', - sm: 'h-5 px-1 text-12 leading-none', - xs: 'px-1.5 py-0 text-11 font-light leading-none' + default: 'px-2.5 py-0.5 text-xs font-semibold', + xl: 'h-[18px] px-2 text-12', + lg: 'px-3 py-1 text-xs font-normal', + md: 'h-6 px-2.5', + sm: 'h-5 px-1 text-12', + xs: 'h-[18px] px-1.5 text-11 font-light' }, borderRadius: { default: 'rounded-md', diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx index 43cb9f19d..20a9cb096 100644 --- a/packages/ui/src/components/button.tsx +++ b/packages/ui/src/components/button.tsx @@ -6,7 +6,7 @@ import { cn } from '@utils/cn' import { cva, type VariantProps } from 'class-variance-authority' const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors disabled:pointer-events-none disabled:cursor-not-allowed', + 'inline-flex items-center justify-center whitespace-nowrap rounded text-14 font-medium transition-colors disabled:pointer-events-none disabled:cursor-not-allowed', { variants: { variant: { diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx index add23db45..2d3eefe08 100644 --- a/packages/ui/src/components/icon.tsx +++ b/packages/ui/src/components/icon.tsx @@ -9,6 +9,7 @@ import AppleShortcut from '../icons/apple-shortcut.svg' import ArrowLong from '../icons/arrow-long.svg' import ArtifactsGradient from '../icons/artifacts-gradient.svg' import Artifacts from '../icons/artifacts-icon.svg' +import AttachmentImage from '../icons/attachment-image.svg' import Attachment from '../icons/attachment.svg' import BitrisePlugin from '../icons/bitrise-plugin.svg' import Bold from '../icons/bold.svg' @@ -45,6 +46,7 @@ import CloudCosts from '../icons/cloud-costs-icon.svg' import CodeBrackets from '../icons/code-brackets.svg' import Code from '../icons/code.svg' import Cog6 from '../icons/cog-6.svg' +import CollapseComment from '../icons/collapse-comment.svg' import CollapseDiff from '../icons/collapse-diff.svg' import Comments from '../icons/comments.svg' import Compare from '../icons/compare.svg' @@ -66,6 +68,7 @@ import Edit from '../icons/edit-icon.svg' import Environment from '../icons/environment-icon.svg' import ExecutionGradient from '../icons/execution-gradient.svg' import Execution from '../icons/execution-icon.svg' +import ExpandComment from '../icons/expand-comment.svg' import ExpandDiff from '../icons/expand-diff.svg' import Eye from '../icons/eye-icon.svg' import Fail from '../icons/fail.svg' @@ -157,6 +160,7 @@ import Stack from '../icons/stack-icon.svg' import Star from '../icons/star-icon.svg' import SubMenuEllipse from '../icons/sub-menu-ellipse.svg' import Success from '../icons/success.svg' +import Suggestion from '../icons/suggestion.svg' import SupplyChainGradient from '../icons/supply-chain-gradient.svg' import SupplyChain from '../icons/supply-chain-icon.svg' import Tag from '../icons/tag.svg' @@ -355,7 +359,11 @@ const IconNameMap = { 'collapse-diff': CollapseDiff, 'expand-diff': ExpandDiff, 'circle-plus': CirclePlus, - 'code-brackets': CodeBrackets + 'code-brackets': CodeBrackets, + 'attachment-image': AttachmentImage, + 'collapse-comment': CollapseComment, + 'expand-comment': ExpandComment, + suggestion: Suggestion } satisfies Record>> export interface IconProps { diff --git a/packages/ui/src/components/node-group.tsx b/packages/ui/src/components/node-group.tsx index dabd6c196..b587479f8 100644 --- a/packages/ui/src/components/node-group.tsx +++ b/packages/ui/src/components/node-group.tsx @@ -59,12 +59,8 @@ function Content({ children }: { children: ReactNode }) { function Connector({ first, last, className }: { first?: boolean; last?: boolean; className?: string }) { return (
diff --git a/packages/ui/src/icons/attachment-image.svg b/packages/ui/src/icons/attachment-image.svg new file mode 100644 index 000000000..adc55501d --- /dev/null +++ b/packages/ui/src/icons/attachment-image.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/ui/src/icons/attachment.svg b/packages/ui/src/icons/attachment.svg index da66fdcf2..0f8d07b6f 100644 --- a/packages/ui/src/icons/attachment.svg +++ b/packages/ui/src/icons/attachment.svg @@ -1,10 +1,10 @@ - - - + + + - - + + diff --git a/packages/ui/src/icons/bold.svg b/packages/ui/src/icons/bold.svg index 4f972d6a2..6d773b8af 100644 --- a/packages/ui/src/icons/bold.svg +++ b/packages/ui/src/icons/bold.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/packages/ui/src/icons/code.svg b/packages/ui/src/icons/code.svg index 71d93961e..9e13fb000 100644 --- a/packages/ui/src/icons/code.svg +++ b/packages/ui/src/icons/code.svg @@ -1,11 +1,11 @@ - - - - + + + + - - + + diff --git a/packages/ui/src/icons/collapse-comment.svg b/packages/ui/src/icons/collapse-comment.svg new file mode 100644 index 000000000..0a8c44f47 --- /dev/null +++ b/packages/ui/src/icons/collapse-comment.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/icons/expand-comment.svg b/packages/ui/src/icons/expand-comment.svg new file mode 100644 index 000000000..d83db819f --- /dev/null +++ b/packages/ui/src/icons/expand-comment.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/icons/suggestion.svg b/packages/ui/src/icons/suggestion.svg new file mode 100644 index 000000000..c2c132f21 --- /dev/null +++ b/packages/ui/src/icons/suggestion.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/ui/src/views/layouts/PullRequestLayout.tsx b/packages/ui/src/views/layouts/PullRequestLayout.tsx index e5545e8c0..e03025414 100644 --- a/packages/ui/src/views/layouts/PullRequestLayout.tsx +++ b/packages/ui/src/views/layouts/PullRequestLayout.tsx @@ -62,28 +62,29 @@ const PullRequestLayout: React.FC = ({ {({ isActive }) => ( - - {t('views:pullRequests.conversation')} - - {pullRequest?.stats?.conversations || 0} - +
+ + {t('views:pullRequests.conversation')} +
)} {({ isActive }) => ( - - {t('views:repos.commits')} - +
+ + {t('views:repos.commits')} +
+ {pullRequest?.stats?.commits} @@ -92,13 +93,15 @@ const PullRequestLayout: React.FC = ({ {({ isActive }) => ( - - {t('views:pullRequests.changes')} - +
+ + {t('views:pullRequests.changes')} +
+ {pullRequest?.stats?.files_changed} diff --git a/packages/ui/src/views/repo/pull-request/compare/components/pull-request-compare-tab-trigger-item.tsx b/packages/ui/src/views/repo/pull-request/compare/components/pull-request-compare-tab-trigger-item.tsx index 6a0ac2c50..7caa92f4d 100644 --- a/packages/ui/src/views/repo/pull-request/compare/components/pull-request-compare-tab-trigger-item.tsx +++ b/packages/ui/src/views/repo/pull-request/compare/components/pull-request-compare-tab-trigger-item.tsx @@ -3,8 +3,6 @@ import { FC } from 'react' import { Badge } from '@components/badge' import { Icon, IconProps } from '@components/icon' import { TabsTrigger } from '@components/tabs' -import { Text } from '@components/text' -import { Layout } from '@views/layouts/layout' interface TabTriggerItemProps { value: string @@ -15,18 +13,16 @@ interface TabTriggerItemProps { const TabTriggerItem: FC = ({ value, icon, label, badgeCount }) => { return ( - - -
- -
- {label} - {badgeCount !== undefined && ( - - {badgeCount} - - )} - + +
+ + {label} +
+ {badgeCount !== undefined && ( + + {badgeCount} + + )} ) } diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx index f2753aba8..838e418f9 100644 --- a/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx +++ b/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx @@ -8,7 +8,7 @@ import { TranslationStore, TypesPullReqActivity } from '@/views' -import { Avatar, AvatarFallback, Layout, Text } from '@components/index' +import { Avatar, AvatarFallback, Layout } from '@components/index' import { DiffFile, DiffModeEnum, DiffView, DiffViewProps, SplitSide } from '@git-diff-view/react' import { getInitials, timeAgo } from '@utils/utils' import { DiffBlock } from 'diff2html/lib/types' @@ -49,7 +49,6 @@ interface PullRequestDiffviewerProps { useTranslationStore: () => TranslationStore commentId?: string onCopyClick?: (commentId?: number) => void - onCommentSaveAndStatusChange?: (comment: string, status: string, parentId?: number) => void suggestionsBatch?: CommitSuggestion[] onCommitSuggestion?: (suggestion: CommitSuggestion) => void addSuggestionToBatch?: (suggestion: CommitSuggestion) => void @@ -79,7 +78,6 @@ const PullRequestDiffViewer = ({ useTranslationStore, commentId, onCopyClick, - onCommentSaveAndStatusChange, suggestionsBatch, onCommitSuggestion, addSuggestionToBatch, @@ -342,7 +340,7 @@ const PullRequestDiffViewer = ({ if (!threads) return <> return ( -
+
{threads.map(thread => { const parent = thread.parent const componentId = `activity-code-${parent?.id}` @@ -356,20 +354,28 @@ const PullRequestDiffViewer = ({ parentCommentId={parent.id} handleSaveComment={handleSaveComment} isLast={true} - contentClassName="px-4 py-2 w-[calc(100%-38px)]" + contentClassName="w-[calc(100%-38px)]" header={[]} currentUser={currentUser} isComment - replyBoxClassName="py-4" + replyBoxClassName="p-4" hideReplyHere={hideReplyHeres[parent?.id]} setHideReplyHere={state => toggleReplyBox(state, parent?.id)} isResolved={!!parent.payload?.resolved} toggleConversationStatus={toggleConversationStatus} - onCommentSaveAndStatusChange={onCommentSaveAndStatusChange} onQuoteReply={handleQuoteReply} quoteReplyText={quoteReplies[parent.id]?.text || ''} + contentHeader={ + !!parent.payload?.resolved && ( +
+ {/* TODO: need to identify the author who resolved the conversation */} + {parent.author} + marked this conversation as resolved +
+ ) + } content={ -
+
- - {parentInitials} - + {parentInitials} } @@ -399,12 +403,12 @@ const PullRequestDiffViewer = ({ { name: parent.author, description: ( - - {timeAgo(parent?.created as number)} + + {timeAgo(parent?.created as number)} {parent?.deleted ? ( <> -  |  - {t('views:pullRequests.deleted')} +  |  + {t('views:pullRequests.deleted')} ) : null} @@ -474,9 +478,7 @@ const PullRequestDiffViewer = ({ icon={ - - {replyInitials} - + {replyInitials} } @@ -484,12 +486,12 @@ const PullRequestDiffViewer = ({ { name: reply.author, description: ( - - {timeAgo(reply?.created as number)} + + {timeAgo(reply?.created as number)} {reply?.deleted ? ( <> -  |  - {t('views:pullRequests.deleted')} +  |  + {t('views:pullRequests.deleted')} ) : null} @@ -505,7 +507,6 @@ const PullRequestDiffViewer = ({ { if (reply?.id) { updateComment?.(reply?.id, editComments[replyComponentId]) @@ -520,7 +521,6 @@ const PullRequestDiffViewer = ({ setComment={text => setEditComments(prev => ({ ...prev, [replyComponentId]: text })) } - onCommentSaveAndStatusChange={onCommentSaveAndStatusChange} /> ) : ( void +} + interface PullRequestCommentBoxProps { onSaveComment: (comment: string) => void comment: string @@ -36,11 +39,7 @@ interface PullRequestCommentBoxProps { onCommentSubmit?: () => void inReplyMode?: boolean isEditMode?: boolean - hideAvatar?: boolean onCancelClick?: () => void - isResolved?: boolean - onCommentSaveAndStatusChange?: (comment: string, status: string, parentId?: number) => void - parentCommentId?: number handleUpload?: (blob: File, setMarkdownContent: (data: string) => void) => void } @@ -53,13 +52,12 @@ const PullRequestCommentBox = ({ comment, setComment, isEditMode, - hideAvatar, - isResolved, - onCommentSaveAndStatusChange, - parentCommentId, handleUpload }: PullRequestCommentBoxProps) => { const [__file, setFile] = useState() + const fileInputRef = useRef(null) + const [isDragging, setIsDragging] = useState(false) + const dropZoneRef = useRef(null) const handleSaveComment = () => { if (comment.trim()) { @@ -71,7 +69,6 @@ const PullRequestCommentBox = ({ const avatar = useMemo(() => { return ( - {/* */} {getInitials(currentUser || '')} @@ -79,64 +76,108 @@ const PullRequestCommentBox = ({ ) }, [currentUser]) - // TODO: add back when functionality is added - // const toolbar: ToolbarItem[] = useMemo(() => { - // const initial: ToolbarItem[] = [] - // return [ - // ...initial, - // { icon: 'header', action: ToolbarAction.HEADER }, - // { icon: 'bold', action: ToolbarAction.BOLD }, - // { icon: 'italicize', action: ToolbarAction.ITALIC }, - // { icon: 'attachment', action: ToolbarAction.UPLOAD }, - // { icon: 'list', action: ToolbarAction.UNORDER_LIST }, - // { icon: 'checklist', action: ToolbarAction.CHECK_LIST }, - // { icon: 'code', action: ToolbarAction.CODE_BLOCK } - // ] - // }, []) const handleUploadCallback = (file: File) => { setFile(file) handleUpload?.(file, setComment) } + + const handleFileSelect = () => { + fileInputRef.current?.click() + } + + const handleFileChange = (event: React.ChangeEvent) => { + const file = event.target.files?.[0] + if (file) { + handleUploadCallback(file) + } + } + + const handleDragEnter = (e: React.DragEvent) => { + e.preventDefault() + e.stopPropagation() + + if (e.currentTarget === dropZoneRef.current) { + setIsDragging(true) + } + } + + const handleDragLeave = (e: React.DragEvent) => { + e.preventDefault() + e.stopPropagation() + + if (e.currentTarget === dropZoneRef.current && !e.currentTarget.contains(e.relatedTarget as Node)) { + setIsDragging(false) + } + } + + const handleDrop = (e: React.DragEvent) => { + e.preventDefault() + e.stopPropagation() + setIsDragging(false) + handleDropForUpload(e) + } + // eslint-disable-next-line @typescript-eslint/no-explicit-any const handleDropForUpload = async (event: any) => { handleFileDrop(event, handleUploadCallback) } - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const handlePasteForUpload = (event: { preventDefault: () => void; clipboardData: any }) => { + + const handlePasteForUpload = (event: React.ClipboardEvent) => { handlePaste(event, handleUploadCallback) } + // TODO: add the remaining required logic for the toolbar + const toolbar: ToolbarItem[] = useMemo(() => { + const initial: ToolbarItem[] = [] + return [ + ...initial, + { icon: 'suggestion', action: ToolbarAction.SUGGESTION }, + { icon: 'header', action: ToolbarAction.HEADER }, + { icon: 'bold', action: ToolbarAction.BOLD }, + { icon: 'italicize', action: ToolbarAction.ITALIC }, + { icon: 'attachment', action: ToolbarAction.UPLOAD, onClick: handleFileSelect }, + { icon: 'list', action: ToolbarAction.UNORDER_LIST }, + { icon: 'checklist', action: ToolbarAction.CHECK_LIST }, + { icon: 'code', action: ToolbarAction.CODE_BLOCK } + ] + }, []) + return ( -
- {(!isEditMode || !hideAvatar) && avatar} +
+ {!inReplyMode && avatar} +
- Write - Preview + + Write + + + Preview +
{ - handleDropForUpload(e) - }} - onPaste={handlePasteForUpload} - className="relative gap-y-1" - onDragOver={event => { - event.preventDefault() - }} + className="relative" + onDrop={handleDrop} + onDragOver={e => e.preventDefault()} + onDragEnter={handleDragEnter} + onDragLeave={handleDragLeave} + ref={dropZoneRef} >