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

web: recover single global memo editor

Browse Source
This commit is contained in:
steven
2021-12-12 12:59:58 +08:00
parent 5e84a57759
commit 9db1f57307
3 changed files with 21 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,36 +7,31 @@ import toastHelper from "./Toast";
import Editor, { EditorRefActions } from "./Editor/Editor"; import Editor, { EditorRefActions } from "./Editor/Editor";
import "../less/memo-editor.less"; import "../less/memo-editor.less";
interface Props { interface Props {}
className?: string;
editMemoId?: string;
}
const MemoEditor: React.FC<Props> = (props: Props) => { const MemoEditor: React.FC<Props> = () => {
const { className, editMemoId } = props;
const { globalState } = useContext(appContext); const { globalState } = useContext(appContext);
const editorRef = useRef<EditorRefActions>(null); const editorRef = useRef<EditorRefActions>(null);
const prevGlobalStateRef = useRef(globalState);
useEffect(() => { useEffect(() => {
if (globalState.markMemoId) { if (globalState.markMemoId) {
if (editMemoId === globalState.editMemoId || (!editMemoId && !globalState.editMemoId)) { const editorCurrentValue = editorRef.current?.getContent();
const editorCurrentValue = editorRef.current?.getContent(); const memoLinkText = `${editorCurrentValue ? "\n" : ""}Mark: [@MEMO](${globalState.markMemoId})`;
const memoLinkText = `${editorCurrentValue ? "\n" : ""}Mark: [@MEMO](${globalState.markMemoId})`; editorRef.current?.insertText(memoLinkText);
editorRef.current?.insertText(memoLinkText); globalStateService.setMarkMemoId("");
globalStateService.setMarkMemoId("");
}
} }
}, [globalState.markMemoId]);
useEffect(() => { if (globalState.editMemoId && globalState.editMemoId !== prevGlobalStateRef.current.editMemoId) {
if (editMemoId) { const editMemo = memoService.getMemoById(globalState.editMemoId);
const editMemo = memoService.getMemoById(editMemoId);
if (editMemo) { if (editMemo) {
editorRef.current?.setContent(editMemo.content ?? ""); editorRef.current?.setContent(editMemo.content ?? "");
editorRef.current?.focus(); editorRef.current?.focus();
} }
} }
}, [editMemoId]);
prevGlobalStateRef.current = globalState;
}, [globalState.markMemoId, globalState.editMemoId]);
const handleSaveBtnClick = useCallback(async (content: string) => { const handleSaveBtnClick = useCallback(async (content: string) => {
if (content === "") { if (content === "") {
@ -44,6 +39,8 @@ const MemoEditor: React.FC<Props> = (props: Props) => {
return; return;
} }
const { editMemoId } = globalStateService.getState();
content = content.replaceAll("&nbsp;", " "); content = content.replaceAll("&nbsp;", " ");
try { try {
@ -83,7 +80,7 @@ const MemoEditor: React.FC<Props> = (props: Props) => {
setEditorContentCache(content); setEditorContentCache(content);
}, []); }, []);
const showEditStatus = Boolean(editMemoId); const showEditStatus = Boolean(globalState.editMemoId);
const editorConfig = useMemo( const editorConfig = useMemo(
() => ({ () => ({
@ -97,12 +94,12 @@ const MemoEditor: React.FC<Props> = (props: Props) => {
onCancelBtnClick: handleCancelBtnClick, onCancelBtnClick: handleCancelBtnClick,
onContentChange: handleContentChange, onContentChange: handleContentChange,
}), }),
[editMemoId] [showEditStatus]
); );
return ( return (
<div className={`memo-editor-wrapper ${className} ${editMemoId ? "edit-ing" : ""}`}> <div className={"memo-editor-wrapper " + (showEditStatus ? "edit-ing" : "")}>
<p className={"tip-text " + (editMemoId ? "" : "hidden")}>正在修改中...</p> <p className={"tip-text " + (showEditStatus ? "" : "hidden")}>正在修改中...</p>
<Editor ref={editorRef} {...editorConfig} /> <Editor ref={editorRef} {...editorConfig} />
</div> </div>
); );

11
web/src/components/MemoList.tsx
View File

@ -6,7 +6,6 @@ import utils from "../helpers/utils";
import { checkShouldShowMemoWithFilters } from "../helpers/filter"; import { checkShouldShowMemoWithFilters } from "../helpers/filter";
import Memo from "./Memo"; import Memo from "./Memo";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import MemoEditor from "./MemoEditor";
import "../less/memolist.less"; import "../less/memolist.less";
interface Props {} interface Props {}
@ -95,13 +94,9 @@ const MemoList: React.FC<Props> = () => {
return ( return (
<div className={`memolist-wrapper ${isFetching ? "" : "completed"}`} onClick={handleMemoListClick} ref={wrapperElement}> <div className={`memolist-wrapper ${isFetching ? "" : "completed"}`} onClick={handleMemoListClick} ref={wrapperElement}>
{shownMemos.map((memo) => {shownMemos.map((memo) => (
globalState.editMemoId === memo.id ? ( <Memo key={`${memo.id}-${memo.updatedAt}`} memo={memo} />
<MemoEditor key={memo.id} className="memo-edit" editMemoId={memo.id} /> ))}
) : (
<Memo key={`${memo.id}-${memo.updatedAt}`} memo={memo} />
)
)}
<div className="status-text-container"> <div className="status-text-container">
<p className="status-text"> <p className="status-text">
{isFetching ? "努力请求数据中..." : shownMemos.length === 0 ? "空空如也" : showMemoFilter ? "" : "所有数据加载完啦 🎉"} {isFetching ? "努力请求数据中..." : shownMemos.length === 0 ? "空空如也" : showMemoFilter ? "" : "所有数据加载完啦 🎉"}

5
web/src/less/memolist.less
View File

@ -7,11 +7,6 @@
overflow-y: scroll; overflow-y: scroll;
.hide-scroll-bar(); .hide-scroll-bar();
> .memo-edit {
margin-top: 8px;
width: 100%;
}
> .status-text-container { > .status-text-container {
.flex(column, flex-start, center); .flex(column, flex-start, center);
width: 100%; width: 100%;