YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02: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
2 changed files with 12 additions and 2 deletions
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 { export interface EditorRefActions {
focus: FunctionType; focus: FunctionType;
scrollToCursor: FunctionType;
insertText: (text: string, prefix?: string, suffix?: string) => void; insertText: (text: string, prefix?: string, suffix?: string) => void;
removeText: (start: number, length: number) => void; removeText: (start: number, length: number) => void;
setContent: (text: string) => void; setContent: (text: string) => void;
@ -52,6 +53,10 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
focus: () => { focus: () => {
editorRef.current?.focus(); editorRef.current?.focus();
}, },
scrollToCursor: () => {
editorRef.current?.blur();
editorRef.current?.focus();
},
insertText: (content = "", prefix = "", suffix = "") => { insertText: (content = "", prefix = "", suffix = "") => {
if (!editorRef.current) { if (!editorRef.current) {
return; return;

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

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