luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(core): comment action button bg color (#13250)

Browse Source 
fix BS-3623

Also use enter instead of enter+CMD/CTRL to commit comment/reply

#### PR Dependency Tree


* **PR #13250** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Updated comment editor so comments are now submitted by pressing Enter
(without CMD or CTRL).
* **Style**
* Improved visual styling for action buttons in the comment sidebar for
a more consistent appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Peng Xiao
2025-07-17 15:23:40 +08:00
committed by GitHub
parent ea21de8311
commit 38107910f9
3 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/core/src/components/comment/comment-editor/index.tsx
View File

@@ -514,7 +514,7 @@ export const CommentEditor = forwardRef<CommentEditorRef, CommentEditorProps>(
return; return;
}, [doc, onChange, snapshotHelper]); }, [doc, onChange, snapshotHelper]);
// Add keydown handler to commit on CMD/CTRL + Enter key // Add keydown handler to commit on Enter key
const handleKeyDown = useCallback( const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => { (e: React.KeyboardEvent) => {
if (readonly) return; if (readonly) return;
@@ -523,8 +523,8 @@ export const CommentEditor = forwardRef<CommentEditorRef, CommentEditorProps>(
const activeElement = document.activeElement; const activeElement = document.activeElement;
if (!editorRef.current?.contains(activeElement)) return; if (!editorRef.current?.contains(activeElement)) return;
// If Enter is pressed with CMD/CTRL key, commit the comment // If Enter is pressed without CMD/CTRL key, commit the comment
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { if (e.key === 'Enter' && !(e.metaKey || e.ctrlKey)) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
handleCommit(); handleCommit();

2
packages/frontend/core/src/components/comment/sidebar/index.tsx
View File

@@ -157,6 +157,7 @@ const ActionMenu = ({
} }
> >
<IconButton <IconButton
className={styles.actionButton}
variant="solid" variant="solid"
icon={<MoreHorizontalIcon />} icon={<MoreHorizontalIcon />}
disabled={disabled} disabled={disabled}
@@ -491,6 +492,7 @@ const CommentItem = ({
> >
{canResolveComment && ( {canResolveComment && (
<IconButton <IconButton
className={styles.actionButton}
variant="solid" variant="solid"
onClick={handleResolve} onClick={handleResolve}
icon={<DoneIcon />} icon={<DoneIcon />}

4
packages/frontend/core/src/components/comment/sidebar/style.css.ts
View File

@@ -163,6 +163,10 @@ export const commentActions = style({
}, },
}); });
export const actionButton = style({
backgroundColor: cssVarV2('button/buttonOverHover'),
});
export const readonlyCommentContainer = style({ export const readonlyCommentContainer = style({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',