admin/twenty
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

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>
);
};