mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
Activity Editor hot key scope management (#3568)
* 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:
parent
1afe8aecd0
commit
0d41023edd
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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%;
|
||||
`;
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -73,7 +73,6 @@ export const ActivityTargetInlineCellEditMode = ({
|
||||
|
||||
const handleSubmit = async (selectedRecords: ObjectRecordForSelect[]) => {
|
||||
closeEditableField();
|
||||
|
||||
const activityTargetRecordsToDelete = activityTargetObjectRecords.filter(
|
||||
(activityTargetObjectRecord) =>
|
||||
!selectedRecords.some(
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -0,0 +1,5 @@
|
||||
export enum ActivityEditorHotkeyScope {
|
||||
ActivityTitle = 'activity-title',
|
||||
ActivityBody = 'activity-body',
|
||||
ActivityTargets = 'activity-targets',
|
||||
}
|
@ -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"
|
||||
/>
|
||||
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user