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: auto complete in memo editor (#720)

Browse Source
This commit is contained in:
boojack
2022-12-10 12:44:45 +08:00
committed by GitHub
parent 387799b31c
commit ab8c7b9d8a
5 changed files with 59 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { toLower } from "lodash";
import { last, toLower } from "lodash";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
@ -14,6 +14,8 @@ import ResourceIcon from "./ResourceIcon";
import showResourcesSelectorDialog from "./ResourcesSelectorDialog";
import "../less/memo-editor.less";
const listItemSymbolList = ["* ", "- ", "- [ ] ", "- [x] ", "- [X] "];
const getEditorContentCache = (): string => {
return storage.get(["editorContentCache"]).editorContentCache ?? "";
};
@ -48,7 +50,7 @@ const MemoEditor = () => {
shouldShowEmojiPicker: false,
});
const [allowSave, setAllowSave] = useState<boolean>(false);
const prevGlobalStateRef = useRef(editorState);
const prevEditorStateRef = useRef(editorState);
const editorRef = useRef<EditorRefActions>(null);
const tagSelectorRef = useRef<HTMLDivElement>(null);
const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
@ -87,10 +89,14 @@ const MemoEditor = () => {
storage.remove(["editingMemoIdCache"]);
}
prevGlobalStateRef.current = editorState;
prevEditorStateRef.current = editorState;
}, [editorState.editMemoId]);
const handleKeyDown = (event: React.KeyboardEvent) => {
if (!editorRef.current) {
return;
}
if (event.ctrlKey || event.metaKey) {
if (event.key === "Enter") {
handleSaveBtnClick();
@ -98,39 +104,36 @@ const MemoEditor = () => {
}
if (event.key === "b") {
event.preventDefault();
editorRef.current?.insertText("", "**", "**");
editorRef.current.insertText("", "**", "**");
return;
}
if (event.key === "i") {
event.preventDefault();
editorRef.current?.insertText("", "*", "*");
editorRef.current.insertText("", "*", "*");
return;
}
if (event.key === "e") {
event.preventDefault();
editorRef.current?.insertText("", "`", "`");
editorRef.current.insertText("", "`", "`");
return;
}
}
if (event.key === "Enter") {
if (!editorRef.current) {
return;
}
const cursorPosition = editorRef.current.getCursorPosition();
const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
const prevRows = prevValue.split("\n");
const prevRowValue = prevRows[prevRows.length - 1];
if (prevRowValue === "- " || prevRowValue === "- [ ] " || prevRowValue === "- [x] " || prevRowValue === "- [X] ") {
event.preventDefault();
prevRows[prevRows.length - 1] = "";
editorRef.current.setContent(prevRows.join("\n"));
} else {
if (prevRowValue.startsWith("- [ ] ") || prevRowValue.startsWith("- [x] ") || prevRowValue.startsWith("- [X] ")) {
const contentBeforeCursor = editorRef.current.getContent().slice(0, cursorPosition);
const rowValue = last(contentBeforeCursor.split("\n"));
if (rowValue) {
if (listItemSymbolList.includes(rowValue)) {
event.preventDefault();
editorRef.current.insertText("", "\n- [ ] ");
} else if (prevRowValue.startsWith("- ")) {
event.preventDefault();
editorRef.current.insertText("", "\n- ");
editorRef.current.removeText(cursorPosition - rowValue.length, rowValue.length);
} else {
for (const listItemSymbol of listItemSymbolList) {
if (rowValue.startsWith(listItemSymbol)) {
event.preventDefault();
editorRef.current.insertText("", `\n${listItemSymbol}`);
}
}
}
}
return;
@ -138,14 +141,14 @@ const MemoEditor = () => {
if (event.key === "Escape") {
if (state.fullscreen) {
handleFullscreenBtnClick();
} else {
} else if (editorState.editMemoId) {
handleCancelEdit();
}
return;
}
if (event.key === "Tab") {
event.preventDefault();
editorRef.current?.insertText(" ".repeat(TAB_SPACE_WIDTH));
editorRef.current.insertText(" ".repeat(TAB_SPACE_WIDTH));
return;
}
};
@ -251,11 +254,13 @@ const MemoEditor = () => {
};
const handleCancelEdit = () => {
editorStateService.clearEditMemo();
editorStateService.clearResourceList();
editorRef.current?.setContent("");
setEditorContentCache("");
storage.remove(["editingMemoVisibilityCache"]);
if (editorState.editMemoId) {
editorStateService.clearEditMemo();
editorStateService.clearResourceList();
editorRef.current?.setContent("");
setEditorContentCache("");
storage.remove(["editingMemoVisibilityCache"]);
}
};
const handleContentChange = (content: string) => {