init: the first public commit for AFFiNE

2026-07-14 08:36:22 +08:00 · 2022-07-22 15:49:21 +08:00
commit e3e3741393
1451 changed files with 108124 additions and 0 deletions
@@ -0,0 +1,58 @@
+import { useCallback, ChangeEvent, KeyboardEvent } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { useAddComment } from './use-add-comment';
+import { WithEditorSelectionType } from '../menu/inline-menu/types';
+
+type AddCommentInputProps = {
+    comment: string;
+    setComment: React.Dispatch<React.SetStateAction<string>>;
+    createComment: () => Promise<{ commentsId: string }>;
+    handleSubmitCurrentComment: () => Promise<void>;
+};
+
+export const AddCommentInput = (props: AddCommentInputProps) => {
+    const { comment, setComment, handleSubmitCurrentComment } = props;
+
+    const handleTextAreaChange = useCallback(
+        (event: ChangeEvent<HTMLTextAreaElement>) => {
+            setComment(event.currentTarget.value);
+        },
+        [setComment]
+    );
+
+    // 👀 keydown event won't work as expected
+    const handleKeyUp = useCallback(
+        async (e: KeyboardEvent<HTMLTextAreaElement>) => {
+            if (!e.metaKey && !e.shiftKey && e.code === 'Enter' && comment) {
+                await handleSubmitCurrentComment();
+            }
+        },
+        [comment, handleSubmitCurrentComment]
+    );
+
+    return (
+        <StyledContainerForAddCommentInput>
+            {/* <input type="text" placeholder={'Add comment...'} /> */}
+            <StyledTextArea
+                placeholder={'Add comment...'}
+                value={comment || ''}
+                onChange={handleTextAreaChange}
+                onKeyUp={handleKeyUp}
+            />
+        </StyledContainerForAddCommentInput>
+    );
+};
+
+const StyledContainerForAddCommentInput = styled('div')(({ theme }) => {
+    return {
+        marginLeft: theme.affine.spacing.iconPadding,
+    };
+});
+
+const StyledTextArea = styled('textarea')(({ theme }) => {
+    return {
+        minWidth: 252,
+        resize: 'none',
+        // color: theme.affine.palette.primaryText,
+    };
+});