mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
chore: simplify memo editor component (#1079)
This commit is contained in:
boojack
GitHub
@ -17,7 +17,6 @@ import "../less/memo-editor.less";
|
||||
|
||||
const listItemSymbolList = ["- [ ] ", "- [x] ", "- [X] ", "* ", "- "];
|
||||
const emptyOlReg = /^(\d+)\. $/;
|
||||
const pairSymbols = ["[]", "()", '""', "''", "{}", "``", "”“", "‘‘", "【】", "（）", "《》"];
|
||||
|
||||
const getEditorContentCache = (): string => {
|
||||
return storage.get(["editorContentCache"]).editorContentCache ?? "";
|
||||
@ -29,12 +28,6 @@ const setEditorContentCache = (content: string) => {
|
||||
});
|
||||
};
|
||||
|
||||
const setEditingMemoVisibilityCache = (visibility: Visibility) => {
|
||||
storage.set({
|
||||
editingMemoVisibilityCache: visibility,
|
||||
});
|
||||
};
|
||||
|
||||
interface State {
|
||||
fullscreen: boolean;
|
||||
isUploadingResource: boolean;
|
||||
@ -51,8 +44,8 @@ const MemoEditor = () => {
|
||||
const resourceStore = useResourceStore();
|
||||
|
||||
const [state, setState] = useState<State>({
|
||||
isUploadingResource: false,
|
||||
fullscreen: false,
|
||||
isUploadingResource: false,
|
||||
isRequesting: false,
|
||||
});
|
||||
const [allowSave, setAllowSave] = useState<boolean>(false);
|
||||
@ -62,7 +55,6 @@ const MemoEditor = () => {
|
||||
const tagSelectorRef = useRef<HTMLDivElement>(null);
|
||||
const user = userStore.state.user as User;
|
||||
const setting = user.setting;
|
||||
const localSetting = user.localSetting;
|
||||
const tags = tagStore.state.tags;
|
||||
const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
|
||||
return {
|
||||
@ -72,12 +64,9 @@ const MemoEditor = () => {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const { editingMemoIdCache, editingMemoVisibilityCache } = storage.get(["editingMemoIdCache", "editingMemoVisibilityCache"]);
|
||||
const { editingMemoIdCache } = storage.get(["editingMemoIdCache"]);
|
||||
if (editingMemoIdCache) {
|
||||
editorStore.setEditMemoWithId(editingMemoIdCache);
|
||||
}
|
||||
if (editingMemoVisibilityCache) {
|
||||
editorStore.setMemoVisibility(editingMemoVisibilityCache as "PUBLIC" | "PROTECTED" | "PRIVATE");
|
||||
} else {
|
||||
editorStore.setMemoVisibility(setting.memoVisibility);
|
||||
}
|
||||
@ -109,8 +98,7 @@ const MemoEditor = () => {
|
||||
}
|
||||
|
||||
const isMetaKey = event.ctrlKey || event.metaKey;
|
||||
const isShiftKey = event.shiftKey;
|
||||
if (!isShiftKey && isMetaKey) {
|
||||
if (isMetaKey) {
|
||||
if (event.key === "Enter") {
|
||||
handleSaveBtnClick();
|
||||
return;
|
||||
@ -141,8 +129,7 @@ const MemoEditor = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!isShiftKey && event.key === "Enter") {
|
||||
if (event.key === "Enter") {
|
||||
const cursorPosition = editorRef.current.getCursorPosition();
|
||||
const contentBeforeCursor = editorRef.current.getContent().slice(0, cursorPosition);
|
||||
const rowValue = last(contentBeforeCursor.split("\n"));
|
||||
@ -179,7 +166,7 @@ const MemoEditor = () => {
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!isShiftKey && event.key === "Escape") {
|
||||
if (event.key === "Escape") {
|
||||
if (state.fullscreen) {
|
||||
handleFullscreenBtnClick();
|
||||
}
|
||||
@ -190,57 +177,37 @@ const MemoEditor = () => {
|
||||
const tabSpace = " ".repeat(TAB_SPACE_WIDTH);
|
||||
const cursorPosition = editorRef.current.getCursorPosition();
|
||||
const selectedContent = editorRef.current.getSelectedContent();
|
||||
if (isShiftKey) {
|
||||
const beforeContent = editorRef.current.getContent().slice(0, cursorPosition);
|
||||
for (let i = beforeContent.length - 1; i >= 0; i--) {
|
||||
if (beforeContent[i] !== "\n") {
|
||||
continue;
|
||||
}
|
||||
const rowStart = i + 1;
|
||||
const isTabSpace = beforeContent.substring(rowStart, i + TAB_SPACE_WIDTH + 1) === tabSpace;
|
||||
const isSpace = beforeContent.substring(rowStart, i + 2) === " ";
|
||||
if (!isTabSpace && !isSpace) {
|
||||
break;
|
||||
}
|
||||
const removeLength = isTabSpace ? TAB_SPACE_WIDTH : 1;
|
||||
editorRef.current.removeText(rowStart, removeLength);
|
||||
const startPos = cursorPosition - removeLength;
|
||||
let endPos = startPos;
|
||||
if (selectedContent) {
|
||||
endPos += selectedContent.length;
|
||||
}
|
||||
editorRef.current.setCursorPosition(startPos, endPos);
|
||||
}
|
||||
return;
|
||||
} else {
|
||||
editorRef.current.insertText(tabSpace);
|
||||
if (selectedContent) {
|
||||
editorRef.current.setCursorPosition(cursorPosition + TAB_SPACE_WIDTH);
|
||||
}
|
||||
return;
|
||||
editorRef.current.insertText(tabSpace);
|
||||
if (selectedContent) {
|
||||
editorRef.current.setCursorPosition(cursorPosition + TAB_SPACE_WIDTH);
|
||||
}
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadResource = async (file: File) => {
|
||||
setState((state) => {
|
||||
return {
|
||||
...state,
|
||||
isUploadingResource: true,
|
||||
};
|
||||
});
|
||||
|
||||
let resource = undefined;
|
||||
try {
|
||||
resource = await resourceStore.createResourceWithBlob(file);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
}
|
||||
|
||||
if (localSetting.enablePowerfulEditor) {
|
||||
for (const symbol of pairSymbols) {
|
||||
if (event.key === symbol[0]) {
|
||||
event.preventDefault();
|
||||
editorRef.current.insertText("", symbol[0], symbol[1]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (event.key === "Backspace") {
|
||||
const cursor = editorRef.current.getCursorPosition();
|
||||
const content = editorRef.current.getContent();
|
||||
const deleteChar = content?.slice(cursor - 1, cursor);
|
||||
const nextChar = content?.slice(cursor, cursor + 1);
|
||||
if (pairSymbols.includes(`${deleteChar}${nextChar}`)) {
|
||||
event.preventDefault();
|
||||
editorRef.current.removeText(cursor - 1, 2);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
setState((state) => {
|
||||
return {
|
||||
...state,
|
||||
isUploadingResource: false,
|
||||
};
|
||||
});
|
||||
return resource;
|
||||
};
|
||||
|
||||
const uploadMultiFiles = async (files: FileList) => {
|
||||
@ -274,32 +241,6 @@ const MemoEditor = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadResource = async (file: File) => {
|
||||
setState((state) => {
|
||||
return {
|
||||
...state,
|
||||
isUploadingResource: true,
|
||||
};
|
||||
});
|
||||
|
||||
let resource = undefined;
|
||||
|
||||
try {
|
||||
resource = await resourceStore.createResourceWithBlob(file);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
}
|
||||
|
||||
setState((state) => {
|
||||
return {
|
||||
...state,
|
||||
isUploadingResource: false,
|
||||
};
|
||||
});
|
||||
return resource;
|
||||
};
|
||||
|
||||
const scrollToEditingMemo = useCallback(() => {
|
||||
if (editorState.editMemoId) {
|
||||
const memoElements = document.getElementsByClassName(`memos-${editorState.editMemoId}`);
|
||||
@ -369,9 +310,7 @@ const MemoEditor = () => {
|
||||
});
|
||||
editorStore.clearResourceList();
|
||||
setEditorContentCache("");
|
||||
storage.remove(["editingMemoVisibilityCache"]);
|
||||
editorRef.current?.setContent("");
|
||||
|
||||
scrollToEditingMemo();
|
||||
};
|
||||
|
||||
@ -381,10 +320,8 @@ const MemoEditor = () => {
|
||||
editorStore.clearResourceList();
|
||||
editorRef.current?.setContent("");
|
||||
setEditorContentCache("");
|
||||
storage.remove(["editingMemoVisibilityCache"]);
|
||||
scrollToEditingMemo();
|
||||
}
|
||||
|
||||
scrollToEditingMemo();
|
||||
};
|
||||
|
||||
const handleContentChange = (content: string) => {
|
||||
@ -439,11 +376,8 @@ 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} ` ?? "");
|
||||
editorRef.current?.scrollToCursor();
|
||||
}
|
||||
const handleTagSelectorClick = useCallback((tag: string) => {
|
||||
editorRef.current?.insertText(`#${tag} `);
|
||||
}, []);
|
||||
|
||||
const handleDeleteResource = async (resourceId: ResourceId) => {
|
||||
@ -456,7 +390,6 @@ const MemoEditor = () => {
|
||||
const handleMemoVisibilityOptionChanged = async (value: string) => {
|
||||
const visibilityValue = value as Visibility;
|
||||
editorStore.setMemoVisibility(visibilityValue);
|
||||
setEditingMemoVisibilityCache(visibilityValue);
|
||||
};
|
||||
|
||||
const handleEditorFocus = () => {
|
||||
@ -495,12 +428,12 @@ const MemoEditor = () => {
|
||||
<div className="common-tools-container">
|
||||
<div className="action-btn tag-action">
|
||||
<Icon.Hash className="icon-img" />
|
||||
<div ref={tagSelectorRef} className="tag-list" onClick={handleTagSelectorClick}>
|
||||
<div ref={tagSelectorRef} className="tag-list">
|
||||
{tags.length > 0 ? (
|
||||
tags.map((tag) => {
|
||||
return (
|
||||
<span className="item-container" key={tag}>
|
||||
{tag}
|
||||
<span className="item-container" onClick={() => handleTagSelectorClick(tag)} key={tag}>
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user