mirror of
https://github.com/usememos/memos.git
synced 2025-04-27 23:58:51 +02:00
399 lines
13 KiB
TypeScript
399 lines
13 KiB
TypeScript
import { IEmojiData } from "emoji-picker-react";
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
|
|
import { UNKNOWN_ID } from "../helpers/consts";
|
|
import { editorStateService, locationService, memoService, resourceService } from "../services";
|
|
import { useAppSelector } from "../store";
|
|
import * as storage from "../helpers/storage";
|
|
import Icon from "./Icon";
|
|
import toastHelper from "./Toast";
|
|
import Editor, { EditorRefActions } from "./Editor/Editor";
|
|
import EmojiPicker from "./Editor/EmojiPicker";
|
|
import "../less/memo-editor.less";
|
|
|
|
const getEditorContentCache = (): string => {
|
|
return storage.get(["editorContentCache"]).editorContentCache ?? "";
|
|
};
|
|
|
|
const setEditorContentCache = (content: string) => {
|
|
storage.set({
|
|
editorContentCache: content,
|
|
});
|
|
};
|
|
|
|
interface State {
|
|
fullscreen: boolean;
|
|
isUploadingResource: boolean;
|
|
shouldShowEmojiPicker: boolean;
|
|
resourceList: Resource[];
|
|
}
|
|
|
|
const MemoEditor: React.FC = () => {
|
|
const { t, i18n } = useTranslation();
|
|
const user = useAppSelector((state) => state.user.user);
|
|
const editorState = useAppSelector((state) => state.editor);
|
|
const tags = useAppSelector((state) => state.memo.tags);
|
|
const [state, setState] = useState<State>({
|
|
isUploadingResource: false,
|
|
fullscreen: false,
|
|
shouldShowEmojiPicker: false,
|
|
resourceList: [],
|
|
});
|
|
const [allowSave, setAllowSave] = useState<boolean>(false);
|
|
const prevGlobalStateRef = useRef(editorState);
|
|
const editorRef = useRef<EditorRefActions>(null);
|
|
const tagSeletorRef = useRef<HTMLDivElement>(null);
|
|
const editorFontStyle = user?.setting.editorFontStyle || "normal";
|
|
const mobileEditorStyle = user?.setting.mobileEditorStyle || "normal";
|
|
|
|
useEffect(() => {
|
|
if (editorState.markMemoId && editorState.markMemoId !== UNKNOWN_ID) {
|
|
const editorCurrentValue = editorRef.current?.getContent();
|
|
const memoLinkText = `${editorCurrentValue ? "\n" : ""}Mark: @[MEMO](${editorState.markMemoId})`;
|
|
editorRef.current?.insertText(memoLinkText);
|
|
editorStateService.clearMarkMemo();
|
|
}
|
|
}, [editorState.markMemoId]);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
editorState.editMemoId &&
|
|
editorState.editMemoId !== UNKNOWN_ID &&
|
|
editorState.editMemoId !== prevGlobalStateRef.current.editMemoId
|
|
) {
|
|
const memo = memoService.getMemoById(editorState.editMemoId ?? UNKNOWN_ID);
|
|
if (memo) {
|
|
setState({
|
|
...state,
|
|
resourceList: memo.resourceList,
|
|
});
|
|
editorRef.current?.setContent(memo.content ?? "");
|
|
editorRef.current?.focus();
|
|
}
|
|
}
|
|
|
|
prevGlobalStateRef.current = editorState;
|
|
}, [state, editorState.editMemoId]);
|
|
|
|
const handleKeyDown = (event: React.KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
if (state.fullscreen) {
|
|
handleFullscreenBtnClick();
|
|
}
|
|
} else if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
|
|
handleSaveBtnClick();
|
|
}
|
|
};
|
|
|
|
const handleDropEvent = async (event: React.DragEvent) => {
|
|
if (event.dataTransfer && event.dataTransfer.files.length > 0) {
|
|
event.preventDefault();
|
|
const resourceList: Resource[] = [];
|
|
for (const file of event.dataTransfer.files) {
|
|
const resource = await handleUploadResource(file);
|
|
if (resource) {
|
|
resourceList.push(resource);
|
|
if (editorState.editMemoId) {
|
|
await upsertMemoResource(editorState.editMemoId, resource.id);
|
|
}
|
|
}
|
|
}
|
|
setState({
|
|
...state,
|
|
resourceList: [...state.resourceList, ...resourceList],
|
|
});
|
|
}
|
|
};
|
|
|
|
const handlePasteEvent = async (event: React.ClipboardEvent) => {
|
|
if (event.clipboardData && event.clipboardData.files.length > 0) {
|
|
event.preventDefault();
|
|
const file = event.clipboardData.files[0];
|
|
const resource = await handleUploadResource(file);
|
|
if (resource) {
|
|
setState({
|
|
...state,
|
|
resourceList: [...state.resourceList, resource],
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleUploadResource = async (file: File) => {
|
|
setState({
|
|
...state,
|
|
isUploadingResource: true,
|
|
});
|
|
|
|
let resource = undefined;
|
|
|
|
try {
|
|
resource = await resourceService.upload(file);
|
|
} catch (error: any) {
|
|
console.error(error);
|
|
toastHelper.error(error.response.data.message);
|
|
}
|
|
|
|
setState({
|
|
...state,
|
|
isUploadingResource: false,
|
|
});
|
|
return resource;
|
|
};
|
|
|
|
const handleSaveBtnClick = async () => {
|
|
const content = editorRef.current?.getContent();
|
|
if (!content) {
|
|
toastHelper.error(t("editor.cant-empty"));
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const { editMemoId } = editorStateService.getState();
|
|
if (editMemoId && editMemoId !== UNKNOWN_ID) {
|
|
const prevMemo = memoService.getMemoById(editMemoId ?? UNKNOWN_ID);
|
|
|
|
if (prevMemo) {
|
|
await memoService.patchMemo({
|
|
id: prevMemo.id,
|
|
content,
|
|
});
|
|
}
|
|
editorStateService.clearEditMemo();
|
|
} else {
|
|
await memoService.createMemo({
|
|
content,
|
|
resourceIdList: state.resourceList.map((resource) => resource.id),
|
|
});
|
|
locationService.clearQuery();
|
|
}
|
|
} catch (error: any) {
|
|
console.error(error);
|
|
toastHelper.error(error.response.data.message);
|
|
}
|
|
|
|
setState({
|
|
...state,
|
|
fullscreen: false,
|
|
resourceList: [],
|
|
});
|
|
setEditorContentCache("");
|
|
editorRef.current?.setContent("");
|
|
};
|
|
|
|
const handleCancelEditing = () => {
|
|
setState({
|
|
...state,
|
|
resourceList: [],
|
|
});
|
|
editorStateService.clearEditMemo();
|
|
editorRef.current?.setContent("");
|
|
setEditorContentCache("");
|
|
};
|
|
|
|
const handleContentChange = (content: string) => {
|
|
setAllowSave(content !== "");
|
|
setEditorContentCache(content);
|
|
};
|
|
|
|
const handleEmojiPickerBtnClick = () => {
|
|
handleChangeShouldShowEmojiPicker(!state.shouldShowEmojiPicker);
|
|
};
|
|
|
|
const handleCheckBoxBtnClick = () => {
|
|
if (!editorRef.current) {
|
|
return;
|
|
}
|
|
|
|
const cursorPosition = editorRef.current.getCursorPosition();
|
|
const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
|
|
if (prevValue === "" || prevValue.endsWith("\n")) {
|
|
editorRef.current?.insertText("- [ ] ");
|
|
} else {
|
|
editorRef.current?.insertText("\n- [ ] ");
|
|
}
|
|
};
|
|
|
|
const handleCodeBlockBtnClick = () => {
|
|
if (!editorRef.current) {
|
|
return;
|
|
}
|
|
|
|
const cursorPosition = editorRef.current.getCursorPosition();
|
|
const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
|
|
if (prevValue === "" || prevValue.endsWith("\n")) {
|
|
editorRef.current?.insertText("```\n\n```");
|
|
} else {
|
|
editorRef.current?.insertText("\n```\n\n```");
|
|
}
|
|
};
|
|
|
|
const handleUploadFileBtnClick = () => {
|
|
const inputEl = document.createElement("input");
|
|
inputEl.style.position = "fixed";
|
|
inputEl.style.top = "-100vh";
|
|
inputEl.style.left = "-100vw";
|
|
document.body.appendChild(inputEl);
|
|
inputEl.type = "file";
|
|
inputEl.multiple = true;
|
|
inputEl.accept = "*";
|
|
inputEl.onchange = async () => {
|
|
if (!inputEl.files || inputEl.files.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const resourceList: Resource[] = [];
|
|
for (const file of inputEl.files) {
|
|
const resource = await handleUploadResource(file);
|
|
if (resource) {
|
|
resourceList.push(resource);
|
|
if (editorState.editMemoId) {
|
|
await upsertMemoResource(editorState.editMemoId, resource.id);
|
|
}
|
|
}
|
|
}
|
|
setState({
|
|
...state,
|
|
resourceList: [...state.resourceList, ...resourceList],
|
|
});
|
|
document.body.removeChild(inputEl);
|
|
};
|
|
inputEl.click();
|
|
};
|
|
|
|
const handleFullscreenBtnClick = () => {
|
|
setState({
|
|
...state,
|
|
fullscreen: !state.fullscreen,
|
|
});
|
|
};
|
|
|
|
const handleTagSeletorClick = useCallback((event: React.MouseEvent) => {
|
|
if (tagSeletorRef.current !== event.target && tagSeletorRef.current?.contains(event.target as Node)) {
|
|
editorRef.current?.insertText(`#${(event.target as HTMLElement).textContent} ` ?? "");
|
|
editorRef.current?.focus();
|
|
}
|
|
}, []);
|
|
|
|
const handleChangeShouldShowEmojiPicker = (status: boolean) => {
|
|
setState({
|
|
...state,
|
|
shouldShowEmojiPicker: status,
|
|
});
|
|
};
|
|
|
|
const handleEmojiClick = (_: any, emojiObject: IEmojiData) => {
|
|
if (!editorRef.current) {
|
|
return;
|
|
}
|
|
|
|
editorRef.current.insertText(`${emojiObject.emoji}`);
|
|
handleChangeShouldShowEmojiPicker(false);
|
|
};
|
|
|
|
const handleDeleteResource = async (resourceId: ResourceId) => {
|
|
setState({
|
|
...state,
|
|
resourceList: state.resourceList.filter((resource) => resource.id !== resourceId),
|
|
});
|
|
|
|
if (editorState.editMemoId) {
|
|
await deleteMemoResource(editorState.editMemoId, resourceId);
|
|
}
|
|
};
|
|
|
|
const isEditing = Boolean(editorState.editMemoId && editorState.editMemoId !== UNKNOWN_ID);
|
|
|
|
const editorConfig = useMemo(
|
|
() => ({
|
|
className: `memo-editor ${editorFontStyle}`,
|
|
initialContent: getEditorContentCache(),
|
|
placeholder: t("editor.placeholder"),
|
|
fullscreen: state.fullscreen,
|
|
onContentChange: handleContentChange,
|
|
}),
|
|
[state.fullscreen, i18n.language, editorFontStyle]
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={`memo-editor-container ${mobileEditorStyle} ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}
|
|
onKeyDown={handleKeyDown}
|
|
onDrop={handleDropEvent}
|
|
>
|
|
<div className={`tip-container ${isEditing ? "" : "!hidden"}`}>
|
|
<span className="tip-text">{t("editor.editing")}</span>
|
|
<button className="cancel-btn" onClick={handleCancelEditing}>
|
|
{t("common.cancel")}
|
|
</button>
|
|
</div>
|
|
<Editor ref={editorRef} {...editorConfig} onPaste={handlePasteEvent} />
|
|
<div className="common-tools-wrapper">
|
|
<div className="common-tools-container">
|
|
<div className="action-btn tag-action">
|
|
<Icon.Hash className="icon-img" />
|
|
<div ref={tagSeletorRef} className="tag-list" onClick={handleTagSeletorClick}>
|
|
{tags.length > 0 ? (
|
|
tags.map((tag) => {
|
|
return (
|
|
<span className="item-container" key={tag}>
|
|
{tag}
|
|
</span>
|
|
);
|
|
})
|
|
) : (
|
|
<p className="tip-text" onClick={(e) => e.stopPropagation()}>
|
|
{t("common.null")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button className="action-btn">
|
|
<Icon.Smile className="icon-img" onClick={handleEmojiPickerBtnClick} />
|
|
</button>
|
|
<button className="action-btn">
|
|
<Icon.CheckSquare className="icon-img" onClick={handleCheckBoxBtnClick} />
|
|
</button>
|
|
<button className="action-btn">
|
|
<Icon.Code className="icon-img" onClick={handleCodeBlockBtnClick} />
|
|
</button>
|
|
<button className="action-btn">
|
|
<Icon.FileText className="icon-img" onClick={handleUploadFileBtnClick} />
|
|
<span className={`tip-text ${state.isUploadingResource ? "!block" : ""}`}>Uploading</span>
|
|
</button>
|
|
<button className="action-btn" onClick={handleFullscreenBtnClick}>
|
|
{state.fullscreen ? <Icon.Minimize className="icon-img" /> : <Icon.Maximize className="icon-img" />}
|
|
</button>
|
|
<EmojiPicker
|
|
shouldShow={state.shouldShowEmojiPicker}
|
|
onEmojiClick={handleEmojiClick}
|
|
onShouldShowEmojiPickerChange={handleChangeShouldShowEmojiPicker}
|
|
/>
|
|
</div>
|
|
<div className="btns-container">
|
|
<button className="action-btn confirm-btn" disabled={!allowSave} onClick={handleSaveBtnClick}>
|
|
{t("editor.save")}
|
|
<img className="icon-img" src="/logo.webp" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{state.resourceList.length > 0 && (
|
|
<div className="resource-list-wrapper">
|
|
{state.resourceList.map((resource) => {
|
|
return (
|
|
<div key={resource.id} className="resource-container">
|
|
{resource.type.includes("image") ? <Icon.Image className="icon-img" /> : <Icon.FileText className="icon-img" />}
|
|
<span className="name-text">{resource.filename}</span>
|
|
<Icon.X className="close-icon" onClick={() => handleDeleteResource(resource.id)} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MemoEditor;
|