mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Activity Editor hot key scope management (#3568)

Browse Source 
* on click focus on activity body editor

* acitivity editor hot key scope added

* classname prop added escape hot key scope call back added

* passing containerClassName prop for activity editor

* hot key scope added

* console log cleanup

* activity target escape hot key listener added

* tasks filter hot key scope refactor

* scope renaming refactor

* imports order linting refactor

* imports order linting refactor

* acitivity editor field focus state and body editor text listener added

* logic refactor removed state for activity editor fields focus

* removed conflicting click handler of inline cell creating new scope

* linting and formatting

* acitivity editor field focus state and body editor text listener added

* adding text at the end of line

* fix duplicate imports

* styling: gap fix activity editor

* format fix

* Added comments

* Fixes

* Remove useListenClickOutside, state, onFocus and onBlur

* Keep simplifying

* Complete review

* Fix lint

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Muralidhar
2024-02-14 02:08:53 +05:30
committed by GitHub
parent 1afe8aecd0
commit 0d41023edd
10 changed files with 231 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
View File

@ -2,17 +2,24 @@ import { useCallback, useEffect, useState } from 'react';
import { BlockNoteEditor } from '@blocknote/core';
import { useBlockNote } from '@blocknote/react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { isArray, isNonEmptyString } from '@sniptt/guards';
import { useRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { useDebouncedCallback } from 'use-debounce';
import { v4 } from 'uuid';
import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity';
import { activityTitleHasBeenSetFamilyState } from '@/activities/states/activityTitleHasBeenSetFamilyState';
import { Activity } from '@/activities/types/Activity';
import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useModifyRecordFromCache } from '@/object-record/cache/hooks/useModifyRecordFromCache';
import { BlockEditor } from '@/ui/input/editor/components/BlockEditor';
import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
@ -53,6 +60,10 @@ export const ActivityBodyEditor = ({
const modifyActivityFromCache = useModifyRecordFromCache({
objectMetadataItem: objectMetadataItemActivity,
});
const {
goBackToPreviousHotkeyScope,
setHotkeyScopeAndMemorizePreviousScope,
} = usePreviousHotkeyScope();
const { upsertActivity } = useUpsertActivity();
@ -212,9 +223,93 @@ export const ActivityBodyEditor = ({
}
};
useScopedHotkeys(
Key.Escape,
() => {
editor.domElement?.blur();
},
ActivityEditorHotkeyScope.ActivityBody,
);
useScopedHotkeys(
'*',
(keyboardEvent) => {
if (keyboardEvent.key === Key.Escape) {
return;
}
const isWritingText =
!isNonTextWritingKey(keyboardEvent.key) &&
!keyboardEvent.ctrlKey &&
!keyboardEvent.metaKey;
if (!isWritingText) {
return;
}
keyboardEvent.preventDefault();
keyboardEvent.stopPropagation();
keyboardEvent.stopImmediatePropagation();
const blockIdentifier = editor.getTextCursorPosition().block;
const currentBlockContent = blockIdentifier?.content;
if (
currentBlockContent &&
isArray(currentBlockContent) &&
currentBlockContent.length === 0
) {
// Empty block case
editor.updateBlock(blockIdentifier, {
content: keyboardEvent.key,
});
return;
}
if (
currentBlockContent &&
isArray(currentBlockContent) &&
currentBlockContent[0] &&
currentBlockContent[0].type === 'text'
) {
// Text block case
editor.updateBlock(blockIdentifier, {
content: currentBlockContent[0].text + keyboardEvent.key,
});
return;
}
const newBlockId = v4();
const newBlock = {
id: newBlockId,
type: 'paragraph',
content: keyboardEvent.key,
};
editor.insertBlocks([newBlock], blockIdentifier, 'after');
editor.setTextCursorPosition(newBlockId, 'end');
editor.focus();
},
RightDrawerHotkeyScope.RightDrawer,
);
const handleBlockEditorFocus = () => {
setHotkeyScopeAndMemorizePreviousScope(
ActivityEditorHotkeyScope.ActivityBody,
);
};
const handlerBlockEditorBlur = () => {
goBackToPreviousHotkeyScope();
};
return (
<StyledBlockNoteStyledContainer>
<BlockEditor editor={editor} />
<StyledBlockNoteStyledContainer onClick={() => editor.focus()}>
<BlockEditor
onFocus={handleBlockEditorFocus}
onBlur={handlerBlockEditorBlur}
editor={editor}
/>
</StyledBlockNoteStyledContainer>
);
};

1
packages/twenty-front/src/modules/activities/components/ActivityComments.tsx
View File

@ -28,7 +28,6 @@ const StyledThreadItemListContainer = styled.div`
justify-content: flex-start;
padding: ${({ theme }) => theme.spacing(8)};
padding-bottom: ${({ theme }) => theme.spacing(32)};
padding-left: ${({ theme }) => theme.spacing(12)};
width: 100%;
`;

26
packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx
View File

@ -33,6 +33,7 @@ const StyledContainer = styled.div`
height: 100%;
justify-content: space-between;
overflow-y: auto;
gap: ${({ theme }) => theme.spacing(4)};
`;
const StyledUpperPartContainer = styled.div`
@ -41,7 +42,6 @@ const StyledUpperPartContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(4)};
justify-content: flex-start;
`;
@ -104,12 +104,18 @@ export const ActivityEditor = ({
customUseUpdateOneObjectHook: useUpsertOneActivityMutation,
});
const { FieldContextProvider: ActivityTargetsContextProvider } =
useFieldContext({
objectNameSingular: CoreObjectNameSingular.Activity,
objectRecordId: activity?.id ?? '',
fieldMetadataName: 'activityTargets',
fieldPosition: 2,
});
const [isCreatingActivity, setIsCreatingActivity] = useRecoilState(
isCreatingActivityState,
);
// TODO: remove
useRegisterClickOutsideListenerCallback({
callbackId: 'activity-editor',
callbackFunction: () => {
@ -143,14 +149,18 @@ export const ActivityEditor = ({
</AssigneeFieldContextProvider>
</>
)}
<ActivityTargetsInlineCell activity={activity} />
{ActivityTargetsContextProvider && (
<ActivityTargetsContextProvider>
<ActivityTargetsInlineCell activity={activity} />
</ActivityTargetsContextProvider>
)}
</PropertyBox>
</StyledTopContainer>
<ActivityBodyEditor
activity={activity}
fillTitleFromBody={fillTitleFromBody}
/>
</StyledUpperPartContainer>
<ActivityBodyEditor
activity={activity}
fillTitleFromBody={fillTitleFromBody}
/>
{showComment && (
<ActivityComments
activity={activity}

33
packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx
View File

@ -1,11 +1,14 @@
import { useRef } from 'react';
import { useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { useDebouncedCallback } from 'use-debounce';
import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity';
import { activityTitleHasBeenSetFamilyState } from '@/activities/states/activityTitleHasBeenSetFamilyState';
import { Activity } from '@/activities/types/Activity';
import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useModifyRecordFromCache } from '@/object-record/cache/hooks/useModifyRecordFromCache';
@ -14,6 +17,8 @@ import {
CheckboxShape,
CheckboxSize,
} from '@/ui/input/components/Checkbox';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isDefined } from '~/utils/isDefined';
const StyledEditableTitleInput = styled.input<{
@ -56,6 +61,31 @@ export const ActivityTitle = ({ activity }: ActivityTitleProps) => {
const { upsertActivity } = useUpsertActivity();
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const titleInputRef = useRef<HTMLInputElement>(null);
useScopedHotkeys(
Key.Escape,
() => {
handleBlur();
},
ActivityEditorHotkeyScope.ActivityTitle,
);
const handleBlur = () => {
goBackToPreviousHotkeyScope();
titleInputRef.current?.blur();
};
const handleFocus = () => {
setHotkeyScopeAndMemorizePreviousScope(
ActivityEditorHotkeyScope.ActivityTitle,
);
};
const [activityTitleHasBeenSet, setActivityTitleHasBeenSet] = useRecoilState(
activityTitleHasBeenSetFamilyState({
activityId: activity.id,
@ -120,10 +150,13 @@ export const ActivityTitle = ({ activity }: ActivityTitleProps) => {
<StyledEditableTitleInput
autoComplete="off"
autoFocus
ref={titleInputRef}
placeholder={`${activity.type} title`}
onChange={(event) => handleTitleChange(event.target.value)}
value={internalTitle}
completed={completed}
onBlur={handleBlur}
onFocus={handleFocus}
/>
</StyledContainer>
);

1
packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
View File

@ -73,7 +73,6 @@ export const ActivityTargetInlineCellEditMode = ({
const handleSubmit = async (selectedRecords: ObjectRecordForSelect[]) => {
closeEditableField();
const activityTargetRecordsToDelete = activityTargetObjectRecords.filter(
(activityTargetObjectRecord) =>
!selectedRecords.some(

66
packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
View File

@ -1,13 +1,15 @@
import { Key } from 'ts-key-enum';
import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
import { Activity } from '@/activities/types/Activity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFieldContext } from '@/object-record/hooks/useFieldContext';
import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { IconArrowUpRight, IconPencil } from '@/ui/display/icon';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
type ActivityTargetsInlineCellProps = {
activity: Activity;
@ -19,40 +21,38 @@ export const ActivityTargetsInlineCell = ({
const { activityTargetObjectRecords } = useActivityTargetObjectRecords({
activityId: activity?.id ?? '',
});
const { closeInlineCell } = useInlineCell();
const { FieldContextProvider } = useFieldContext({
objectNameSingular: CoreObjectNameSingular.Activity,
objectRecordId: activity?.id ?? '',
fieldMetadataName: 'activityTargets',
fieldPosition: 2,
});
if (!FieldContextProvider) return null;
useScopedHotkeys(
Key.Escape,
() => {
closeInlineCell();
},
ActivityEditorHotkeyScope.ActivityTargets,
);
return (
<RecordFieldInputScope recordFieldInputScopeId={activity?.id ?? ''}>
<FieldContextProvider>
<RecordInlineCellContainer
buttonIcon={IconPencil}
customEditHotkeyScope={{
scope: RelationPickerHotkeyScope.RelationPicker,
}}
IconLabel={IconArrowUpRight}
editModeContent={
<ActivityTargetInlineCellEditMode
activity={activity}
activityTargetObjectRecords={activityTargetObjectRecords}
/>
}
label="Relations"
displayModeContent={
<ActivityTargetChips
activityTargetObjectRecords={activityTargetObjectRecords}
/>
}
isDisplayModeContentEmpty={activityTargetObjectRecords.length === 0}
/>
</FieldContextProvider>
<RecordInlineCellContainer
buttonIcon={IconPencil}
customEditHotkeyScope={{
scope: ActivityEditorHotkeyScope.ActivityTargets,
}}
IconLabel={IconArrowUpRight}
editModeContent={
<ActivityTargetInlineCellEditMode
activity={activity}
activityTargetObjectRecords={activityTargetObjectRecords}
/>
}
label="Relations"
displayModeContent={
<ActivityTargetChips
activityTargetObjectRecords={activityTargetObjectRecords}
/>
}
isDisplayModeContentEmpty={activityTargetObjectRecords.length === 0}
/>
</RecordFieldInputScope>
);
};

5
packages/twenty-front/src/modules/activities/types/ActivityEditorHotkeyScope.ts Normal file
View File

@ -0,0 +1,5 @@
export enum ActivityEditorHotkeyScope {
ActivityTitle = 'activity-title',
ActivityBody = 'activity-body',
ActivityTargets = 'activity-targets',
}

9
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
View File

@ -1,19 +1,10 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
import { useInlineCell } from '../hooks/useInlineCell';
export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
const { openInlineCell } = useInlineCell();
const handleClick = () => {
openInlineCell();
};
return (
<FloatingIconButton
size="small"
onClick={handleClick}
Icon={Icon}
data-testid="inline-cell-edit-mode-container"
/>

33
packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useRef, useState } from 'react';
import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
import TextareaAutosize from 'react-textarea-autosize';
import styled from '@emotion/styled';
@ -7,6 +7,7 @@ import { Key } from 'ts-key-enum';
import { IconArrowRight } from '@/ui/display/icon/index';
import { Button } from '@/ui/input/button/components/Button';
import { RoundedIconButton } from '@/ui/input/button/components/RoundedIconButton';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { InputHotkeyScope } from '../types/InputHotkeyScope';
@ -28,6 +29,7 @@ type AutosizeTextInputProps = {
buttonTitle?: string;
value?: string;
className?: string;
onBlur?: () => void;
};
const StyledContainer = styled.div`
@ -120,13 +122,18 @@ export const AutosizeTextInput = ({
buttonTitle,
value = '',
className,
onBlur,
}: AutosizeTextInputProps) => {
const [isFocused, setIsFocused] = useState(false);
const [isHidden, setIsHidden] = useState(
variant === AutosizeTextInputVariant.Button,
);
const [text, setText] = useState(value);
const textInputRef = useRef<HTMLTextAreaElement>(null);
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const isSendButtonDisabled = !text;
const words = text.split(/\s|\n/).filter((word) => word).length;
@ -161,6 +168,8 @@ export const AutosizeTextInput = ({
event.preventDefault();
setText('');
goBackToPreviousHotkeyScope();
textInputRef.current?.blur();
},
InputHotkeyScope.TextInput,
[onValidate, setText, isFocused],
@ -182,6 +191,18 @@ export const AutosizeTextInput = ({
setText('');
};
const handleFocus = () => {
onFocus?.();
setIsFocused(true);
setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
};
const handleBlur = () => {
onBlur?.();
setIsFocused(false);
goBackToPreviousHotkeyScope();
};
const computedMinRows = minRows > MAX_ROWS ? MAX_ROWS : minRows;
return (
@ -190,17 +211,15 @@ export const AutosizeTextInput = ({
<StyledInputContainer>
{!isHidden && (
<StyledTextArea
ref={textInputRef}
autoFocus={variant === AutosizeTextInputVariant.Button}
placeholder={placeholder ?? 'Write a comment'}
maxRows={MAX_ROWS}
minRows={computedMinRows}
onChange={handleInputChange}
value={text}
onFocus={() => {
onFocus?.();
setIsFocused(true);
}}
onBlur={() => setIsFocused(false)}
onFocus={handleFocus}
onBlur={handleBlur}
variant={variant}
/>
)}

21
packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx
View File

@ -5,10 +5,11 @@ import styled from '@emotion/styled';
interface BlockEditorProps {
editor: BlockNoteEditor;
onFocus?: () => void;
onBlur?: () => void;
}
const StyledEditor = styled.div`
min-height: 200px;
width: 100%;
& .editor {
background: ${({ theme }) => theme.background.primary};
@ -21,12 +22,26 @@ const StyledEditor = styled.div`
}
`;
export const BlockEditor = ({ editor }: BlockEditorProps) => {
export const BlockEditor = ({ editor, onFocus, onBlur }: BlockEditorProps) => {
const theme = useTheme();
const blockNoteTheme = theme.name === 'light' ? 'light' : 'dark';
const handleFocus = () => {
onFocus?.();
};
const handleBlur = () => {
onBlur?.();
};
return (
<StyledEditor>
<BlockNoteView editor={editor} theme={blockNoteTheme} />
<BlockNoteView
onFocus={handleFocus}
onBlur={handleBlur}
editor={editor}
theme={blockNoteTheme}
/>
</StyledEditor>
);
};