[WEB-5520] fix: comments UI in space app #8189

This commit is contained in:
Aaryan Khandelwal 2025-11-27 15:58:10 +05:30 committed by GitHub
parent eddf80aaed
commit a0da806a79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 26 additions and 21 deletions

View file

@ -79,21 +79,23 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
// overriding the containerClassName to add relative class passed // overriding the containerClassName to add relative class passed
containerClassName={cn(containerClassName, "relative")} containerClassName={cn(containerClassName, "relative")}
/> />
<IssueCommentToolbar {editable && (
executeCommand={(item) => { <IssueCommentToolbar
// TODO: update this while toolbar homogenization executeCommand={(item) => {
// @ts-expect-error type mismatch here // TODO: update this while toolbar homogenization
editorRef?.executeMenuItemCommand({ // @ts-expect-error type mismatch here
itemKey: item.itemKey, editorRef?.executeMenuItemCommand({
...item.extraProps, itemKey: item.itemKey,
}); ...item.extraProps,
}} });
isSubmitting={isSubmitting} }}
showSubmitButton={showSubmitButton} isSubmitting={isSubmitting}
handleSubmit={(e) => rest.onEnterKeyPress?.(e)} showSubmitButton={showSubmitButton}
isCommentEmpty={isEmpty} handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
editorRef={editorRef} isCommentEmpty={isEmpty}
/> editorRef={editorRef}
/>
)}
</div> </div>
); );
}); });

View file

@ -96,6 +96,9 @@ export const AddComment = observer(function AddComment(props: Props) {
setUploadAssetIds((prev) => [...prev, asset_id]); setUploadAssetIds((prev) => [...prev, asset_id]);
return asset_id; return asset_id;
}} }}
displayConfig={{
fontSize: "small-font",
}}
/> />
)} )}
/> />

View file

@ -42,7 +42,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
control, control,
formState: { isSubmitting }, formState: { isSubmitting },
handleSubmit, handleSubmit,
} = useForm<any>({ } = useForm<TIssuePublicComment>({
defaultValues: { comment_html: comment.comment_html }, defaultValues: { comment_html: comment.comment_html },
}); });
@ -120,6 +120,9 @@ export const CommentCard = observer(function CommentCard(props: Props) {
const { asset_id } = await uploadCommentAsset(file, anchor, comment.id); const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
return asset_id; return asset_id;
}} }}
displayConfig={{
fontSize: "small-font",
}}
/> />
)} )}
/> />

View file

@ -1,10 +1,9 @@
import type { FC, ReactNode } from "react"; import type { ReactNode } from "react";
import { useRef } from "react"; import { useRef } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import type { TIssueComment } from "@plane/types"; import type { TIssueComment } from "@plane/types";
import { EIssueCommentAccessSpecifier } from "@plane/types";
import { Avatar, Tooltip } from "@plane/ui"; import { Avatar, Tooltip } from "@plane/ui";
import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils"; import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
// hooks // hooks
@ -56,9 +55,7 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock)
<div className="flex w-full gap-2"> <div className="flex w-full gap-2">
<div className="flex-1 flex flex-wrap items-center gap-1"> <div className="flex-1 flex flex-wrap items-center gap-1">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="text-xs font-medium"> <span className="text-xs font-medium">{displayName}</span>
{`${displayName}${comment.access === EIssueCommentAccessSpecifier.EXTERNAL ? " (External User)" : ""}`}
</span>
</div> </div>
<div className="text-xs text-custom-text-300"> <div className="text-xs text-custom-text-300">
commented{" "} commented{" "}