YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-19 12:50:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: editor cursor not in view after smart editing (#1043)

Browse Source
This commit is contained in:
Stephen Zhou 2023-02-07 23:31:43 +08:00 committed by GitHub
parent 7cd474dbb7
commit 8b92021b1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/Editor/Editor.tsx
View File

@ -3,6 +3,7 @@ import "../../less/editor.less";
export interface EditorRefActions {
focus: FunctionType;
scrollToCursor: FunctionType;
insertText: (text: string, prefix?: string, suffix?: string) => void;
removeText: (start: number, length: number) => void;
setContent: (text: string) => void;
@ -52,6 +53,10 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
focus: () => {
editorRef.current?.focus();
},
scrollToCursor: () => {
editorRef.current?.blur();
editorRef.current?.focus();
},
insertText: (content = "", prefix = "", suffix = "") => {
if (!editorRef.current) {
return;

9
web/src/components/MemoEditor.tsx
View File

@ -402,6 +402,7 @@ const MemoEditor = () => {
} else {
editorRef.current?.insertText("", "\n- [ ] ");
}
editorRef.current?.scrollToCursor();
};
const handleCodeBlockBtnClick = () => {
@ -416,6 +417,7 @@ const MemoEditor = () => {
} else {
editorRef.current?.insertText("", "\n```\n", "\n```");
}
editorRef.current?.scrollToCursor();
};
const handleUploadFileBtnClick = () => {
@ -438,7 +440,7 @@ const MemoEditor = () => {
const handleTagSelectorClick = useCallback((event: React.MouseEvent) => {
if (tagSelectorRef.current !== event.target && tagSelectorRef.current?.contains(event.target as Node)) {
editorRef.current?.insertText(`#${(event.target as HTMLElement).textContent} ` ?? "");
handleEditorFocus();
editorRef.current?.scrollToCursor();
}
}, []);
@ -481,7 +483,10 @@ const MemoEditor = () => {
<div
className={`memo-editor-container ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}
tabIndex={0}
onKeyDown={handleKeyDown}
onKeyDown={(e) => {
handleKeyDown(e);
editorRef.current?.scrollToCursor();
}}
onDrop={handleDropEvent}
onFocus={handleEditorFocus}
onBlur={handleEditorBlur}