YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-25 15:10:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: ignore "Tab" key down event when is composing in editor(#3026) (#3027)

Browse Source
This commit is contained in:
jjaychen 2024-03-03 13:04:00 +08:00 committed by GitHub
parent 9a8a1d017e
commit 3b089eeae3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/components/MemoEditor/index.tsx
View File

@ -45,6 +45,7 @@ interface State {
relationList: MemoRelation[];
isUploadingResource: boolean;
isRequesting: boolean;
isComposing: boolean;
}
const MemoEditor = (props: Props) => {
@ -65,6 +66,7 @@ const MemoEditor = (props: Props) => {
relationList: props.relationList ?? [],
isUploadingResource: false,
isRequesting: false,
isComposing: false,
});
const [hasContent, setHasContent] = useState<boolean>(false);
const editorRef = useRef<EditorRefActions>(null);
@ -117,6 +119,20 @@ const MemoEditor = (props: Props) => {
}
}, [memoId]);
const handleCompositionStart = () => {
setState((prevState) => ({
...prevState,
isComposing: true,
}));
};
const handleCompositionEnd = () => {
setState((prevState) => ({
...prevState,
isComposing: false,
}));
};
const handleKeyDown = (event: React.KeyboardEvent) => {
if (!editorRef.current) {
return;
@ -131,7 +147,7 @@ const MemoEditor = (props: Props) => {
handleEditorKeydownWithMarkdownShortcuts(event, editorRef.current);
}
if (event.key === "Tab") {
if (event.key === "Tab" && !state.isComposing) {
event.preventDefault();
const tabSpace = " ".repeat(TAB_SPACE_WIDTH);
const cursorPosition = editorRef.current.getCursorPosition();
@ -382,6 +398,8 @@ const MemoEditor = (props: Props) => {
onKeyDown={handleKeyDown}
onDrop={handleDropEvent}
onFocus={handleEditorFocus}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
>
<Editor ref={editorRef} {...editorConfig} />
<ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />