mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
chore: refactor memo module
This commit is contained in:
Steven
@ -2,26 +2,26 @@ import { Button } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { getNormalizedTimeString, getUnixTime } from "@/helpers/datetime";
|
||||
import { useMemoStore } from "@/store/module";
|
||||
import { useMemoV1Store } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import Icon from "./Icon";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
memoId: MemoId;
|
||||
memoId: number;
|
||||
}
|
||||
|
||||
const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
|
||||
const t = useTranslate();
|
||||
const { destroy, memoId } = props;
|
||||
const memoStore = useMemoStore();
|
||||
const memoStore = useMemoV1Store();
|
||||
const [createdAt, setCreatedAt] = useState("");
|
||||
const maxDatetimeValue = getNormalizedTimeString();
|
||||
|
||||
useEffect(() => {
|
||||
memoStore.getMemoById(memoId).then((memo) => {
|
||||
memoStore.getOrFetchMemoById(memoId).then((memo) => {
|
||||
if (memo) {
|
||||
const datetime = getNormalizedTimeString(memo.createdTs);
|
||||
const datetime = getNormalizedTimeString(memo.createTime);
|
||||
setCreatedAt(datetime);
|
||||
} else {
|
||||
toast.error(t("message.memo-not-found"));
|
||||
@ -41,18 +41,19 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
|
||||
|
||||
const handleSaveBtnClick = async () => {
|
||||
const nowTs = getUnixTime();
|
||||
const createdTs = getUnixTime(createdAt);
|
||||
|
||||
if (createdTs > nowTs) {
|
||||
if (getUnixTime(createdAt) > nowTs) {
|
||||
toast.error(t("message.invalid-created-datetime"));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await memoStore.patchMemo({
|
||||
id: memoId,
|
||||
createdTs,
|
||||
});
|
||||
await memoStore.updateMemo(
|
||||
{
|
||||
id: memoId,
|
||||
createTime: new Date(createdAt),
|
||||
},
|
||||
["created_ts"]
|
||||
);
|
||||
toast.success(t("message.memo-updated-datetime"));
|
||||
handleCloseBtnClick();
|
||||
} catch (error: any) {
|
||||
@ -90,7 +91,7 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
|
||||
);
|
||||
};
|
||||
|
||||
function showChangeMemoCreatedTsDialog(memoId: MemoId) {
|
||||
function showChangeMemoCreatedTsDialog(memoId: number) {
|
||||
generateDialog(
|
||||
{
|
||||
className: "change-memo-created-ts-dialog",
|
||||
|
||||
@ -1,324 +0,0 @@
|
||||
import { Divider, Tooltip } from "@mui/joy";
|
||||
import { memo, useEffect, useRef, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { UNKNOWN_ID } from "@/helpers/consts";
|
||||
import { getRelativeTimeString } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useFilterStore, useMemoStore } from "@/store/module";
|
||||
import { useUserV1Store, extractUsernameFromName } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
|
||||
import { showCommonDialog } from "./Dialog/CommonDialog";
|
||||
import Icon from "./Icon";
|
||||
import MemoContentV1 from "./MemoContentV1";
|
||||
import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
|
||||
import MemoRelationListView from "./MemoRelationListView";
|
||||
import MemoResourceListView from "./MemoResourceListView";
|
||||
import showPreviewImageDialog from "./PreviewImageDialog";
|
||||
import showShareMemoDialog from "./ShareMemoDialog";
|
||||
import UserAvatar from "./UserAvatar";
|
||||
import VisibilityIcon from "./VisibilityIcon";
|
||||
import "@/less/memo.less";
|
||||
|
||||
interface Props {
|
||||
memo: Memo;
|
||||
showCreator?: boolean;
|
||||
showParent?: boolean;
|
||||
showVisibility?: boolean;
|
||||
showPinnedStyle?: boolean;
|
||||
lazyRendering?: boolean;
|
||||
}
|
||||
|
||||
const Memo: React.FC<Props> = (props: Props) => {
|
||||
const { memo, lazyRendering } = props;
|
||||
const t = useTranslate();
|
||||
const navigateTo = useNavigateTo();
|
||||
const { i18n } = useTranslation();
|
||||
const filterStore = useFilterStore();
|
||||
const memoStore = useMemoStore();
|
||||
const userV1Store = useUserV1Store();
|
||||
const user = useCurrentUser();
|
||||
const [shouldRender, setShouldRender] = useState<boolean>(lazyRendering ? false : true);
|
||||
const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(memo.displayTs));
|
||||
const memoContainerRef = useRef<HTMLDivElement>(null);
|
||||
const readonly = memo.creatorUsername !== extractUsernameFromName(user?.name);
|
||||
const [creator, setCreator] = useState(userV1Store.getUserByUsername(memo.creatorUsername));
|
||||
const referenceRelations = memo.relationList.filter((relation) => relation.type === "REFERENCE");
|
||||
|
||||
// Prepare memo creator.
|
||||
useEffect(() => {
|
||||
if (creator) return;
|
||||
|
||||
const fn = async () => {
|
||||
const user = await userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
|
||||
setCreator(user);
|
||||
};
|
||||
|
||||
fn();
|
||||
}, [memo.creatorUsername]);
|
||||
|
||||
// Update display time string.
|
||||
useEffect(() => {
|
||||
let intervalFlag: any = -1;
|
||||
if (Date.now() - memo.displayTs < 1000 * 60 * 60 * 24) {
|
||||
intervalFlag = setInterval(() => {
|
||||
setDisplayTime(getRelativeTimeString(memo.displayTs));
|
||||
}, 1000 * 1);
|
||||
}
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalFlag);
|
||||
};
|
||||
}, [i18n.language]);
|
||||
|
||||
// Lazy rendering.
|
||||
useEffect(() => {
|
||||
if (shouldRender) return;
|
||||
if (!memoContainerRef.current) return;
|
||||
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
observer.disconnect();
|
||||
|
||||
setShouldRender(true);
|
||||
});
|
||||
observer.observe(memoContainerRef.current);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [lazyRendering, filterStore.state]);
|
||||
|
||||
if (!shouldRender) {
|
||||
// Render a placeholder to occupy the space.
|
||||
return <div className={`w-full h-32 !bg-transparent ${"memos-" + memo.id}`} ref={memoContainerRef} />;
|
||||
}
|
||||
|
||||
const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (event.altKey) {
|
||||
showChangeMemoCreatedTsDialog(memo.id);
|
||||
} else {
|
||||
navigateTo(`/m/${memo.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTogglePinMemoBtnClick = async () => {
|
||||
try {
|
||||
if (memo.pinned) {
|
||||
await memoStore.unpinMemo(memo.id);
|
||||
} else {
|
||||
await memoStore.pinMemo(memo.id);
|
||||
}
|
||||
} catch (error) {
|
||||
// do nth
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditMemoClick = () => {
|
||||
showMemoEditorDialog({
|
||||
memoId: memo.id,
|
||||
});
|
||||
};
|
||||
|
||||
const handleMarkMemoClick = () => {
|
||||
showMemoEditorDialog({
|
||||
relationList: [
|
||||
{
|
||||
memoId: UNKNOWN_ID,
|
||||
relatedMemoId: memo.id,
|
||||
type: "REFERENCE",
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
const handleArchiveMemoClick = async () => {
|
||||
try {
|
||||
await memoStore.patchMemo({
|
||||
id: memo.id,
|
||||
rowStatus: "ARCHIVED",
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteMemoClick = async () => {
|
||||
showCommonDialog({
|
||||
title: t("memo.delete-memo"),
|
||||
content: t("memo.delete-confirm"),
|
||||
style: "danger",
|
||||
dialogName: "delete-memo-dialog",
|
||||
onConfirm: async () => {
|
||||
await memoStore.deleteMemoById(memo.id);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleMemoContentClick = async (e: React.MouseEvent) => {
|
||||
const targetEl = e.target as HTMLElement;
|
||||
|
||||
if (targetEl.className === "tag-span") {
|
||||
const tagName = targetEl.innerText.slice(1);
|
||||
const currTagQuery = filterStore.getState().tag;
|
||||
if (currTagQuery === tagName) {
|
||||
filterStore.setTagFilter(undefined);
|
||||
} else {
|
||||
filterStore.setTagFilter(tagName);
|
||||
}
|
||||
} else if (targetEl.classList.contains("todo-block")) {
|
||||
if (readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const status = targetEl.dataset?.value;
|
||||
const todoElementList = [...(memoContainerRef.current?.querySelectorAll(`span.todo-block[data-value=${status}]`) ?? [])];
|
||||
for (const element of todoElementList) {
|
||||
if (element === targetEl) {
|
||||
const index = todoElementList.indexOf(element);
|
||||
const tempList = memo.content.split(status === "DONE" ? /- \[x\] / : /- \[ \] /);
|
||||
let finalContent = "";
|
||||
|
||||
for (let i = 0; i < tempList.length; i++) {
|
||||
if (i === 0) {
|
||||
finalContent += `${tempList[i]}`;
|
||||
} else {
|
||||
if (i === index + 1) {
|
||||
finalContent += status === "DONE" ? "- [ ] " : "- [x] ";
|
||||
} else {
|
||||
finalContent += status === "DONE" ? "- [x] " : "- [ ] ";
|
||||
}
|
||||
finalContent += `${tempList[i]}`;
|
||||
}
|
||||
}
|
||||
await memoStore.patchMemo({
|
||||
id: memo.id,
|
||||
content: finalContent,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (targetEl.tagName === "IMG") {
|
||||
const imgUrl = targetEl.getAttribute("src");
|
||||
if (imgUrl) {
|
||||
showPreviewImageDialog([imgUrl], 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group memo-wrapper ${"memos-" + memo.id} ${memo.pinned && props.showPinnedStyle ? "pinned" : ""}`}
|
||||
ref={memoContainerRef}
|
||||
>
|
||||
<div className="memo-top-wrapper mb-1">
|
||||
<div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
|
||||
{props.showCreator && creator && (
|
||||
<>
|
||||
<Link to={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
|
||||
<Tooltip title={"Creator"} placement="top">
|
||||
<span className="flex flex-row justify-start items-center">
|
||||
<UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator.avatarUrl} />
|
||||
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">
|
||||
{creator.nickname || extractUsernameFromName(creator.name)}
|
||||
</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Link>
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
</>
|
||||
)}
|
||||
<span className="text-sm text-gray-400 select-none" onClick={handleGotoMemoDetailPage}>
|
||||
{displayTime}
|
||||
</span>
|
||||
{props.showPinnedStyle && memo.pinned && (
|
||||
<>
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<Tooltip title={"Pinned"} placement="top">
|
||||
<Icon.Bookmark className="w-4 h-auto text-green-600" />
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
<div className="w-auto hidden group-hover:flex flex-row justify-between items-center">
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`}>
|
||||
<Tooltip title={"Identifier"} placement="top">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
|
||||
</Tooltip>
|
||||
</Link>
|
||||
{props.showVisibility && memo.visibility !== "PRIVATE" && (
|
||||
<>
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}` as any)} placement="top">
|
||||
<span>
|
||||
<VisibilityIcon visibility={memo.visibility} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="btns-container space-x-2">
|
||||
{!readonly && (
|
||||
<>
|
||||
<span className="btn more-action-btn">
|
||||
<Icon.MoreVertical className="icon-img" />
|
||||
</span>
|
||||
<div className="more-action-btns-wrapper">
|
||||
<div className="more-action-btns-container min-w-[6em]">
|
||||
{!memo.parent && (
|
||||
<span className="btn" onClick={handleTogglePinMemoBtnClick}>
|
||||
{memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
|
||||
{memo.pinned ? t("common.unpin") : t("common.pin")}
|
||||
</span>
|
||||
)}
|
||||
<span className="btn" onClick={handleEditMemoClick}>
|
||||
<Icon.Edit3 className="w-4 h-auto mr-2" />
|
||||
{t("common.edit")}
|
||||
</span>
|
||||
{!memo.parent && (
|
||||
<span className="btn" onClick={handleMarkMemoClick}>
|
||||
<Icon.Link className="w-4 h-auto mr-2" />
|
||||
{t("common.mark")}
|
||||
</span>
|
||||
)}
|
||||
<span className="btn" onClick={() => showShareMemoDialog(memo)}>
|
||||
<Icon.Share className="w-4 h-auto mr-2" />
|
||||
{t("common.share")}
|
||||
</span>
|
||||
<Divider className="!my-1" />
|
||||
<span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
|
||||
<Icon.Archive className="w-4 h-auto mr-2" />
|
||||
{t("common.archive")}
|
||||
</span>
|
||||
<span className="btn text-red-600" onClick={handleDeleteMemoClick}>
|
||||
<Icon.Trash className="w-4 h-auto mr-2" />
|
||||
{t("common.delete")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{props.showParent && memo.parent && (
|
||||
<div className="w-auto max-w-full mb-1">
|
||||
<Link
|
||||
className="px-2 py-0.5 border rounded-full max-w-xs w-auto text-xs flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
|
||||
to={`/m/${memo.parent.id}`}
|
||||
>
|
||||
<Icon.ArrowUpRightFromCircle className="w-3 h-auto shrink-0 opacity-60" />
|
||||
<span className="mx-1 opacity-60">#{memo.parent.id}</span>
|
||||
<span className="truncate">{memo.parent.content}</span>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<MemoContentV1 content={memo.content} onMemoContentClick={handleMemoContentClick} />
|
||||
<MemoResourceListView resourceList={memo.resourceList} />
|
||||
<MemoRelationListView memo={memo} relationList={referenceRelations} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(Memo);
|
||||
@ -1,52 +0,0 @@
|
||||
import { IconButton } from "@mui/joy";
|
||||
import { useEffect } from "react";
|
||||
import Icon from "@/components/Icon";
|
||||
import OverflowTip from "@/components/kit/OverflowTip";
|
||||
import { useTagStore } from "@/store/module";
|
||||
|
||||
interface Props {
|
||||
onTagSelectorClick: (tag: string) => void;
|
||||
}
|
||||
|
||||
const TagSelector = (props: Props) => {
|
||||
const { onTagSelectorClick } = props;
|
||||
const tagStore = useTagStore();
|
||||
const tags = tagStore.state.tags;
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
await tagStore.fetchTags();
|
||||
} catch (error) {
|
||||
// do nothing.
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<IconButton className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
|
||||
<Icon.Hash className="w-5 h-5 mx-auto" />
|
||||
<div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
|
||||
{tags.length > 0 ? (
|
||||
tags.map((tag) => {
|
||||
return (
|
||||
<div
|
||||
className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
|
||||
onClick={() => onTagSelectorClick(tag)}
|
||||
key={tag}
|
||||
>
|
||||
<OverflowTip>#{tag}</OverflowTip>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="italic text-sm ml-2" onClick={(e) => e.stopPropagation()}>
|
||||
No tags found
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagSelector;
|
||||
@ -1,136 +0,0 @@
|
||||
import classNames from "classnames";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import getCaretCoordinates from "textarea-caret";
|
||||
import OverflowTip from "@/components/kit/OverflowTip";
|
||||
import { useTagStore } from "@/store/module";
|
||||
import { EditorRefActions } from ".";
|
||||
|
||||
type Props = {
|
||||
editorRef: React.RefObject<HTMLTextAreaElement>;
|
||||
editorActions: React.ForwardedRef<EditorRefActions>;
|
||||
};
|
||||
|
||||
type Position = { left: number; top: number; height: number };
|
||||
|
||||
const TagSuggestions = ({ editorRef, editorActions }: Props) => {
|
||||
const [position, setPosition] = useState<Position | null>(null);
|
||||
const hide = () => setPosition(null);
|
||||
|
||||
const { state } = useTagStore();
|
||||
const tagsRef = useRef(state.tags);
|
||||
tagsRef.current = state.tags;
|
||||
|
||||
const [selected, select] = useState(0);
|
||||
const selectedRef = useRef(selected);
|
||||
selectedRef.current = selected;
|
||||
|
||||
const getCurrentWord = (): [word: string, startIndex: number] => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return ["", 0];
|
||||
const cursorPos = editor.selectionEnd;
|
||||
const before = editor.value.slice(0, cursorPos).match(/\S*$/) || { 0: "", index: cursorPos };
|
||||
const after = editor.value.slice(cursorPos).match(/^\S*/) || { 0: "" };
|
||||
return [before[0] + after[0], before.index ?? cursorPos];
|
||||
};
|
||||
|
||||
const suggestionsRef = useRef<string[]>([]);
|
||||
suggestionsRef.current = (() => {
|
||||
const input = getCurrentWord()[0].slice(1).toLowerCase();
|
||||
|
||||
const customMatches = (tag: string, input: string) => {
|
||||
const tagLowerCase = tag.toLowerCase();
|
||||
const inputLowerCase = input.toLowerCase();
|
||||
let inputIndex = 0;
|
||||
|
||||
for (let i = 0; i < tagLowerCase.length; i++) {
|
||||
if (tagLowerCase[i] === inputLowerCase[inputIndex]) {
|
||||
inputIndex++;
|
||||
if (inputIndex === inputLowerCase.length) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const matchedTags = tagsRef.current.filter((tag) => customMatches(tag, input));
|
||||
return matchedTags.slice(0, 5);
|
||||
})();
|
||||
|
||||
const isVisibleRef = useRef(false);
|
||||
isVisibleRef.current = !!(position && suggestionsRef.current.length > 0);
|
||||
|
||||
const autocomplete = (tag: string) => {
|
||||
if (!editorActions || !("current" in editorActions) || !editorActions.current) return;
|
||||
const [word, index] = getCurrentWord();
|
||||
editorActions.current.removeText(index, word.length);
|
||||
editorActions.current.insertText(`#${tag}`);
|
||||
hide();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isVisibleRef.current) return;
|
||||
const suggestions = suggestionsRef.current;
|
||||
const selected = selectedRef.current;
|
||||
if (["Escape", "ArrowLeft", "ArrowRight"].includes(e.code)) hide();
|
||||
if ("ArrowDown" === e.code) {
|
||||
select((selected + 1) % suggestions.length);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
if ("ArrowUp" === e.code) {
|
||||
select((selected - 1 + suggestions.length) % suggestions.length);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
if (["Enter", "Tab"].includes(e.code)) {
|
||||
autocomplete(suggestions[selected]);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
const handleInput = () => {
|
||||
if (!editorRef.current) return;
|
||||
select(0);
|
||||
const [word, index] = getCurrentWord();
|
||||
const isActive = word.startsWith("#") && !word.slice(1).includes("#");
|
||||
isActive ? setPosition(getCaretCoordinates(editorRef.current, index)) : hide();
|
||||
};
|
||||
|
||||
const listenersAreRegisteredRef = useRef(false);
|
||||
const registerListeners = () => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor || listenersAreRegisteredRef.current) return;
|
||||
editor.addEventListener("click", hide);
|
||||
editor.addEventListener("blur", hide);
|
||||
editor.addEventListener("keydown", handleKeyDown);
|
||||
editor.addEventListener("input", handleInput);
|
||||
listenersAreRegisteredRef.current = true;
|
||||
};
|
||||
useEffect(registerListeners, [!!editorRef.current]);
|
||||
|
||||
if (!isVisibleRef.current || !position) return null;
|
||||
return (
|
||||
<div
|
||||
className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-200 dark:bg-zinc-600"
|
||||
style={{ left: position.left, top: position.top + position.height }}
|
||||
>
|
||||
{suggestionsRef.current.map((tag, i) => (
|
||||
<div
|
||||
key={tag}
|
||||
onMouseDown={() => autocomplete(tag)}
|
||||
className={classNames(
|
||||
"rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-700",
|
||||
i === selected ? "bg-zinc-300 dark:bg-zinc-700" : ""
|
||||
)}
|
||||
>
|
||||
<OverflowTip>#{tag}</OverflowTip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagSuggestions;
|
||||
@ -1,162 +0,0 @@
|
||||
import classNames from "classnames";
|
||||
import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef } from "react";
|
||||
import TagSuggestions from "./TagSuggestions";
|
||||
|
||||
export interface EditorRefActions {
|
||||
focus: FunctionType;
|
||||
scrollToCursor: FunctionType;
|
||||
insertText: (text: string, prefix?: string, suffix?: string) => void;
|
||||
removeText: (start: number, length: number) => void;
|
||||
setContent: (text: string) => void;
|
||||
getContent: () => string;
|
||||
getSelectedContent: () => string;
|
||||
getCursorPosition: () => number;
|
||||
setCursorPosition: (startPos: number, endPos?: number) => void;
|
||||
getCursorLineNumber: () => number;
|
||||
getLine: (lineNumber: number) => string;
|
||||
setLine: (lineNumber: number, text: string) => void;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
className: string;
|
||||
initialContent: string;
|
||||
placeholder: string;
|
||||
tools?: ReactNode;
|
||||
onContentChange: (content: string) => void;
|
||||
onPaste: (event: React.ClipboardEvent) => void;
|
||||
}
|
||||
|
||||
const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<EditorRefActions>) {
|
||||
const { className, initialContent, placeholder, onPaste, onContentChange: handleContentChangeCallback } = props;
|
||||
const editorRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (editorRef.current && initialContent) {
|
||||
editorRef.current.value = initialContent;
|
||||
handleContentChangeCallback(initialContent);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (editorRef.current) {
|
||||
updateEditorHeight();
|
||||
}
|
||||
}, [editorRef.current?.value]);
|
||||
|
||||
const updateEditorHeight = () => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.style.height = "auto";
|
||||
editorRef.current.style.height = (editorRef.current.scrollHeight ?? 0) + "px";
|
||||
}
|
||||
};
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
focus: () => {
|
||||
editorRef.current?.focus();
|
||||
},
|
||||
scrollToCursor: () => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.scrollTop = editorRef.current.scrollHeight;
|
||||
}
|
||||
},
|
||||
insertText: (content = "", prefix = "", suffix = "") => {
|
||||
if (!editorRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cursorPosition = editorRef.current.selectionStart;
|
||||
const endPosition = editorRef.current.selectionEnd;
|
||||
const prevValue = editorRef.current.value;
|
||||
const value =
|
||||
prevValue.slice(0, cursorPosition) +
|
||||
prefix +
|
||||
(content || prevValue.slice(cursorPosition, endPosition)) +
|
||||
suffix +
|
||||
prevValue.slice(endPosition);
|
||||
|
||||
editorRef.current.value = value;
|
||||
editorRef.current.focus();
|
||||
editorRef.current.selectionEnd = endPosition + prefix.length + content.length;
|
||||
handleContentChangeCallback(editorRef.current.value);
|
||||
updateEditorHeight();
|
||||
},
|
||||
removeText: (start: number, length: number) => {
|
||||
if (!editorRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const prevValue = editorRef.current.value;
|
||||
const value = prevValue.slice(0, start) + prevValue.slice(start + length);
|
||||
editorRef.current.value = value;
|
||||
editorRef.current.focus();
|
||||
editorRef.current.selectionEnd = start;
|
||||
handleContentChangeCallback(editorRef.current.value);
|
||||
updateEditorHeight();
|
||||
},
|
||||
setContent: (text: string) => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.value = text;
|
||||
handleContentChangeCallback(editorRef.current.value);
|
||||
updateEditorHeight();
|
||||
}
|
||||
},
|
||||
getContent: (): string => {
|
||||
return editorRef.current?.value ?? "";
|
||||
},
|
||||
getCursorPosition: (): number => {
|
||||
return editorRef.current?.selectionStart ?? 0;
|
||||
},
|
||||
getSelectedContent: () => {
|
||||
const start = editorRef.current?.selectionStart;
|
||||
const end = editorRef.current?.selectionEnd;
|
||||
return editorRef.current?.value.slice(start, end) ?? "";
|
||||
},
|
||||
setCursorPosition: (startPos: number, endPos?: number) => {
|
||||
const _endPos = isNaN(endPos as number) ? startPos : (endPos as number);
|
||||
editorRef.current?.setSelectionRange(startPos, _endPos);
|
||||
},
|
||||
getCursorLineNumber: () => {
|
||||
const cursorPosition = editorRef.current?.selectionStart ?? 0;
|
||||
const lines = editorRef.current?.value.slice(0, cursorPosition).split("\n") ?? [];
|
||||
return lines.length - 1;
|
||||
},
|
||||
getLine: (lineNumber: number) => {
|
||||
return editorRef.current?.value.split("\n")[lineNumber] ?? "";
|
||||
},
|
||||
setLine: (lineNumber: number, text: string) => {
|
||||
const lines = editorRef.current?.value.split("\n") ?? [];
|
||||
lines[lineNumber] = text;
|
||||
if (editorRef.current) {
|
||||
editorRef.current.value = lines.join("\n");
|
||||
editorRef.current.focus();
|
||||
handleContentChangeCallback(editorRef.current.value);
|
||||
updateEditorHeight();
|
||||
}
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const handleEditorInput = useCallback(() => {
|
||||
handleContentChangeCallback(editorRef.current?.value ?? "");
|
||||
updateEditorHeight();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200", className)}>
|
||||
<textarea
|
||||
className="w-full h-full max-h-[300px] my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break"
|
||||
rows={1}
|
||||
placeholder={placeholder}
|
||||
ref={editorRef}
|
||||
onPaste={onPaste}
|
||||
onInput={handleEditorInput}
|
||||
></textarea>
|
||||
<TagSuggestions editorRef={editorRef} editorActions={ref} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default Editor;
|
||||
@ -1,59 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { useGlobalStore, useTagStore } from "@/store/module";
|
||||
import MemoEditor from ".";
|
||||
import { generateDialog } from "../Dialog";
|
||||
import Icon from "../Icon";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
memoId?: MemoId;
|
||||
relationList?: MemoRelation[];
|
||||
}
|
||||
|
||||
const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Props) => {
|
||||
const globalStore = useGlobalStore();
|
||||
const tagStore = useTagStore();
|
||||
const { systemStatus } = globalStore.state;
|
||||
|
||||
useEffect(() => {
|
||||
tagStore.fetchTags();
|
||||
}, []);
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<img className="w-5 h-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
|
||||
<p className="ml-1 text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
|
||||
</div>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start items-start max-w-full w-[36rem]">
|
||||
<MemoEditor
|
||||
className="border-none !p-0 -mb-2"
|
||||
cacheKey={`memo-editor-${memoId}`}
|
||||
memoId={memoId}
|
||||
relationList={relationList}
|
||||
onConfirm={handleCloseBtnClick}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function showMemoEditorDialog(props: Pick<Props, "memoId" | "relationList"> = {}): void {
|
||||
generateDialog(
|
||||
{
|
||||
className: "memo-editor-dialog",
|
||||
dialogName: "memo-editor-dialog",
|
||||
containerClassName: "dark:!bg-zinc-700",
|
||||
},
|
||||
MemoEditorDialog,
|
||||
props
|
||||
);
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMemoCacheStore } from "@/store/v1";
|
||||
import Icon from "../Icon";
|
||||
|
||||
interface Props {
|
||||
relationList: MemoRelation[];
|
||||
setRelationList: (relationList: MemoRelation[]) => void;
|
||||
}
|
||||
|
||||
const RelationListView = (props: Props) => {
|
||||
const { relationList, setRelationList } = props;
|
||||
const memoCacheStore = useMemoCacheStore();
|
||||
const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const requests = relationList
|
||||
.filter((relation) => relation.type === "REFERENCE")
|
||||
.map(async (relation) => {
|
||||
return await memoCacheStore.getOrFetchMemoById(relation.relatedMemoId);
|
||||
});
|
||||
const list = await Promise.all(requests);
|
||||
setReferencingMemoList(list);
|
||||
})();
|
||||
}, [relationList]);
|
||||
|
||||
const handleDeleteRelation = async (memo: Memo) => {
|
||||
setRelationList(relationList.filter((relation) => relation.relatedMemoId !== memo.id));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{referencingMemoList.length > 0 && (
|
||||
<div className="w-full flex flex-row gap-2 mt-2 flex-wrap">
|
||||
{referencingMemoList.map((memo) => {
|
||||
return (
|
||||
<div
|
||||
key={memo.id}
|
||||
className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 cursor-pointer hover:line-through"
|
||||
onClick={() => handleDeleteRelation(memo)}
|
||||
>
|
||||
<Icon.Link className="w-4 h-auto shrink-0 opacity-80" />
|
||||
<span className="px-1 shrink-0 opacity-80">#{memo.id}</span>
|
||||
<span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
|
||||
<Icon.X className="w-4 h-auto hover:opacity-80 shrink-0 ml-1" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RelationListView;
|
||||
@ -1,42 +0,0 @@
|
||||
import { Resource } from "@/types/proto/api/v2/resource_service";
|
||||
import Icon from "../Icon";
|
||||
import ResourceIcon from "../ResourceIcon";
|
||||
|
||||
interface Props {
|
||||
resourceList: Resource[];
|
||||
setResourceList: (resourceList: Resource[]) => void;
|
||||
}
|
||||
|
||||
const ResourceListView = (props: Props) => {
|
||||
const { resourceList, setResourceList } = props;
|
||||
|
||||
const handleDeleteResource = async (resourceId: ResourceId) => {
|
||||
setResourceList(resourceList.filter((resource) => resource.id !== resourceId));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{resourceList.length > 0 && (
|
||||
<div className="w-full flex flex-row justify-start flex-wrap gap-2 mt-2">
|
||||
{resourceList.map((resource) => {
|
||||
return (
|
||||
<div
|
||||
key={resource.id}
|
||||
className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-gray-500"
|
||||
>
|
||||
<ResourceIcon resource={resource} className="!w-4 !h-4 !opacity-100" />
|
||||
<span className="text-sm max-w-[8rem] truncate">{resource.filename}</span>
|
||||
<Icon.X
|
||||
className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
|
||||
onClick={() => handleDeleteResource(resource.id)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResourceListView;
|
||||
@ -1,488 +0,0 @@
|
||||
import { Select, Option, Button, IconButton, Divider } from "@mui/joy";
|
||||
import { isNumber, last, uniqBy } from "lodash-es";
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import useLocalStorage from "react-use/lib/useLocalStorage";
|
||||
import { TAB_SPACE_WIDTH, UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import { useGlobalStore, useMemoStore, useResourceStore } from "@/store/module";
|
||||
import { useUserV1Store } from "@/store/v1";
|
||||
import { Resource } from "@/types/proto/api/v2/resource_service";
|
||||
import { UserSetting, User_Role } from "@/types/proto/api/v2/user_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import showCreateMemoRelationDialog from "../CreateMemoRelationDialog";
|
||||
import showCreateResourceDialog from "../CreateResourceDialog";
|
||||
import Icon from "../Icon";
|
||||
import VisibilityIcon from "../VisibilityIcon";
|
||||
import TagSelector from "./ActionButton/TagSelector";
|
||||
import Editor, { EditorRefActions } from "./Editor";
|
||||
import RelationListView from "./RelationListView";
|
||||
import ResourceListView from "./ResourceListView";
|
||||
|
||||
const listItemSymbolList = ["- [ ] ", "- [x] ", "- [X] ", "* ", "- "];
|
||||
const emptyOlReg = /^(\d+)\. $/;
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
editorClassName?: string;
|
||||
cacheKey?: string;
|
||||
memoId?: MemoId;
|
||||
relationList?: MemoRelation[];
|
||||
onConfirm?: () => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
memoVisibility: Visibility;
|
||||
resourceList: Resource[];
|
||||
relationList: MemoRelation[];
|
||||
isUploadingResource: boolean;
|
||||
isRequesting: boolean;
|
||||
}
|
||||
|
||||
const MemoEditor = (props: Props) => {
|
||||
const { className, editorClassName, cacheKey, memoId, onConfirm } = props;
|
||||
const { i18n } = useTranslation();
|
||||
const t = useTranslate();
|
||||
const contentCacheKey = `memo-editor-${cacheKey}`;
|
||||
const [contentCache, setContentCache] = useLocalStorage<string>(contentCacheKey, "");
|
||||
const {
|
||||
state: { systemStatus },
|
||||
} = useGlobalStore();
|
||||
const userV1Store = useUserV1Store();
|
||||
const memoStore = useMemoStore();
|
||||
const resourceStore = useResourceStore();
|
||||
const currentUser = useCurrentUser();
|
||||
const [state, setState] = useState<State>({
|
||||
memoVisibility: "PRIVATE",
|
||||
resourceList: [],
|
||||
relationList: props.relationList ?? [],
|
||||
isUploadingResource: false,
|
||||
isRequesting: false,
|
||||
});
|
||||
const [hasContent, setHasContent] = useState<boolean>(false);
|
||||
const [isInIME, setIsInIME] = useState(false);
|
||||
const editorRef = useRef<EditorRefActions>(null);
|
||||
const userSetting = userV1Store.userSetting as UserSetting;
|
||||
const referenceRelations = memoId
|
||||
? state.relationList.filter(
|
||||
(relation) => relation.memoId === memoId && relation.relatedMemoId !== memoId && relation.type === "REFERENCE"
|
||||
)
|
||||
: state.relationList.filter((relation) => relation.type === "REFERENCE");
|
||||
|
||||
useEffect(() => {
|
||||
editorRef.current?.setContent(contentCache || "");
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let visibility = userSetting.memoVisibility;
|
||||
if (systemStatus.disablePublicMemos && visibility === "PUBLIC") {
|
||||
visibility = "PRIVATE";
|
||||
}
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
memoVisibility: visibility as Visibility,
|
||||
}));
|
||||
}, [userSetting.memoVisibility, systemStatus.disablePublicMemos]);
|
||||
|
||||
useEffect(() => {
|
||||
if (memoId) {
|
||||
memoStore.getMemoById(memoId ?? UNKNOWN_ID).then((memo) => {
|
||||
if (memo) {
|
||||
handleEditorFocus();
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
memoVisibility: memo.visibility,
|
||||
resourceList: memo.resourceList,
|
||||
relationList: memo.relationList,
|
||||
}));
|
||||
if (!contentCache) {
|
||||
editorRef.current?.setContent(memo.content ?? "");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [memoId]);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (!editorRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isMetaKey = event.ctrlKey || event.metaKey;
|
||||
if (isMetaKey) {
|
||||
if (event.key === "Enter") {
|
||||
handleSaveBtnClick();
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (event.key === "Enter" && !isInIME) {
|
||||
const cursorPosition = editorRef.current.getCursorPosition();
|
||||
const contentBeforeCursor = editorRef.current.getContent().slice(0, cursorPosition);
|
||||
const rowValue = last(contentBeforeCursor.split("\n"));
|
||||
if (rowValue) {
|
||||
if (listItemSymbolList.includes(rowValue) || emptyOlReg.test(rowValue)) {
|
||||
event.preventDefault();
|
||||
editorRef.current.removeText(cursorPosition - rowValue.length, rowValue.length);
|
||||
} else {
|
||||
// unordered/todo list
|
||||
let matched = false;
|
||||
for (const listItemSymbol of listItemSymbolList) {
|
||||
if (rowValue.startsWith(listItemSymbol)) {
|
||||
event.preventDefault();
|
||||
editorRef.current.insertText("", `\n${listItemSymbol}`);
|
||||
matched = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!matched) {
|
||||
// ordered list
|
||||
const olMatchRes = /^(\d+)\. /.exec(rowValue);
|
||||
if (olMatchRes) {
|
||||
const order = parseInt(olMatchRes[1]);
|
||||
if (isNumber(order)) {
|
||||
event.preventDefault();
|
||||
editorRef.current.insertText("", `\n${order + 1}. `);
|
||||
}
|
||||
}
|
||||
}
|
||||
editorRef.current?.scrollToCursor();
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (event.key === "Tab") {
|
||||
event.preventDefault();
|
||||
const tabSpace = " ".repeat(TAB_SPACE_WIDTH);
|
||||
const cursorPosition = editorRef.current.getCursorPosition();
|
||||
const selectedContent = editorRef.current.getSelectedContent();
|
||||
editorRef.current.insertText(tabSpace);
|
||||
if (selectedContent) {
|
||||
editorRef.current.setCursorPosition(cursorPosition + TAB_SPACE_WIDTH);
|
||||
}
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMemoVisibilityChange = (visibility: Visibility) => {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
memoVisibility: visibility,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleUploadFileBtnClick = () => {
|
||||
showCreateResourceDialog({
|
||||
onConfirm: (resourceList) => {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
resourceList: [...prevState.resourceList, ...resourceList],
|
||||
}));
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddMemoRelationBtnClick = () => {
|
||||
showCreateMemoRelationDialog({
|
||||
onConfirm: (memoIdList) => {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
relationList: uniqBy(
|
||||
[
|
||||
...memoIdList.map((id) => ({ memoId: memoId || UNKNOWN_ID, relatedMemoId: id, type: "REFERENCE" as MemoRelationType })),
|
||||
...state.relationList,
|
||||
].filter((relation) => relation.relatedMemoId !== (memoId || UNKNOWN_ID)),
|
||||
"relatedMemoId"
|
||||
),
|
||||
}));
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleSetResourceList = (resourceList: Resource[]) => {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
resourceList,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSetRelationList = (relationList: MemoRelation[]) => {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
relationList,
|
||||
}));
|
||||
};
|
||||
|
||||
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);
|
||||
toast.error(typeof error === "string" ? error : error.response.data.message);
|
||||
}
|
||||
|
||||
setState((state) => {
|
||||
return {
|
||||
...state,
|
||||
isUploadingResource: false,
|
||||
};
|
||||
});
|
||||
return resource;
|
||||
};
|
||||
|
||||
const uploadMultiFiles = async (files: FileList) => {
|
||||
const uploadedResourceList: Resource[] = [];
|
||||
for (const file of files) {
|
||||
const resource = await handleUploadResource(file);
|
||||
if (resource) {
|
||||
uploadedResourceList.push(resource);
|
||||
if (memoId) {
|
||||
await resourceStore.updateResource({
|
||||
resource: Resource.fromPartial({
|
||||
id: resource.id,
|
||||
memoId,
|
||||
}),
|
||||
updateMask: ["memo_id"],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (uploadedResourceList.length > 0) {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
resourceList: [...prevState.resourceList, ...uploadedResourceList],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDropEvent = async (event: React.DragEvent) => {
|
||||
if (event.dataTransfer && event.dataTransfer.files.length > 0) {
|
||||
event.preventDefault();
|
||||
await uploadMultiFiles(event.dataTransfer.files);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePasteEvent = async (event: React.ClipboardEvent) => {
|
||||
if (event.clipboardData && event.clipboardData.files.length > 0) {
|
||||
event.preventDefault();
|
||||
await uploadMultiFiles(event.clipboardData.files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleContentChange = (content: string) => {
|
||||
setHasContent(content !== "");
|
||||
if (content !== "") {
|
||||
setContentCache(content);
|
||||
} else {
|
||||
localStorage.removeItem(contentCacheKey);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveBtnClick = async () => {
|
||||
if (state.isRequesting) {
|
||||
return;
|
||||
}
|
||||
|
||||
setState((state) => {
|
||||
return {
|
||||
...state,
|
||||
isRequesting: true,
|
||||
};
|
||||
});
|
||||
const content = editorRef.current?.getContent() ?? "";
|
||||
try {
|
||||
if (memoId && memoId !== UNKNOWN_ID) {
|
||||
const prevMemo = await memoStore.getMemoById(memoId ?? UNKNOWN_ID);
|
||||
|
||||
if (prevMemo) {
|
||||
await memoStore.patchMemo({
|
||||
id: prevMemo.id,
|
||||
content,
|
||||
visibility: state.memoVisibility,
|
||||
resourceIdList: state.resourceList.map((resource) => resource.id),
|
||||
relationList: state.relationList,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
await memoStore.createMemo({
|
||||
content,
|
||||
visibility: state.memoVisibility,
|
||||
resourceIdList: state.resourceList.map((resource) => resource.id),
|
||||
relationList: state.relationList,
|
||||
});
|
||||
}
|
||||
editorRef.current?.setContent("");
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
setState((state) => {
|
||||
return {
|
||||
...state,
|
||||
isRequesting: false,
|
||||
};
|
||||
});
|
||||
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
resourceList: [],
|
||||
}));
|
||||
if (onConfirm) {
|
||||
onConfirm();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckBoxBtnClick = () => {
|
||||
if (!editorRef.current) {
|
||||
return;
|
||||
}
|
||||
const currentPosition = editorRef.current?.getCursorPosition();
|
||||
const currentLineNumber = editorRef.current?.getCursorLineNumber();
|
||||
const currentLine = editorRef.current?.getLine(currentLineNumber);
|
||||
let newLine = "";
|
||||
let cursorChange = 0;
|
||||
if (/^- \[( |x|X)\] /.test(currentLine)) {
|
||||
newLine = currentLine.replace(/^- \[( |x|X)\] /, "");
|
||||
cursorChange = -6;
|
||||
} else if (/^\d+\. |- /.test(currentLine)) {
|
||||
const match = currentLine.match(/^\d+\. |- /) ?? [""];
|
||||
newLine = currentLine.replace(/^\d+\. |- /, "- [ ] ");
|
||||
cursorChange = -match[0].length + 6;
|
||||
} else {
|
||||
newLine = "- [ ] " + currentLine;
|
||||
cursorChange = 6;
|
||||
}
|
||||
editorRef.current?.setLine(currentLineNumber, newLine);
|
||||
editorRef.current.setCursorPosition(currentPosition + cursorChange);
|
||||
editorRef.current?.scrollToCursor();
|
||||
};
|
||||
|
||||
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```");
|
||||
}
|
||||
editorRef.current?.scrollToCursor();
|
||||
};
|
||||
|
||||
const handleTagSelectorClick = useCallback((tag: string) => {
|
||||
editorRef.current?.insertText(`#${tag} `);
|
||||
}, []);
|
||||
|
||||
const handleEditorFocus = () => {
|
||||
editorRef.current?.focus();
|
||||
};
|
||||
|
||||
const editorConfig = useMemo(
|
||||
() => ({
|
||||
className: editorClassName ?? "",
|
||||
initialContent: "",
|
||||
placeholder: t("editor.placeholder"),
|
||||
onContentChange: handleContentChange,
|
||||
onPaste: handlePasteEvent,
|
||||
}),
|
||||
[i18n.language]
|
||||
);
|
||||
|
||||
const allowSave = (hasContent || state.resourceList.length > 0) && !state.isUploadingResource && !state.isRequesting;
|
||||
|
||||
const disableOption = (v: string) => {
|
||||
const isAdminOrHost = currentUser.role === User_Role.ADMIN || currentUser.role === User_Role.HOST;
|
||||
|
||||
if (v === "PUBLIC" && !isAdminOrHost) {
|
||||
return systemStatus.disablePublicMemos;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
className ?? ""
|
||||
} relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 pt-4 rounded-lg border border-gray-200 dark:border-zinc-600`}
|
||||
tabIndex={0}
|
||||
onKeyDown={handleKeyDown}
|
||||
onDrop={handleDropEvent}
|
||||
onFocus={handleEditorFocus}
|
||||
onCompositionStart={() => setIsInIME(true)}
|
||||
onCompositionEnd={() => setIsInIME(false)}
|
||||
>
|
||||
<Editor ref={editorRef} {...editorConfig} />
|
||||
<div className="relative w-full flex flex-row justify-between items-center pt-2">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
|
||||
<IconButton
|
||||
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
|
||||
onClick={handleUploadFileBtnClick}
|
||||
>
|
||||
<Icon.Image className="w-5 h-5 mx-auto" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
|
||||
onClick={handleAddMemoRelationBtnClick}
|
||||
>
|
||||
<Icon.Link className="w-5 h-5 mx-auto" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
|
||||
onClick={handleCheckBoxBtnClick}
|
||||
>
|
||||
<Icon.CheckSquare className="w-5 h-5 mx-auto" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
|
||||
onClick={handleCodeBlockBtnClick}
|
||||
>
|
||||
<Icon.Code className="w-5 h-5 mx-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
<ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
|
||||
<RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
|
||||
<Divider className="!mt-2" />
|
||||
<div className="w-full flex flex-row justify-between items-center py-3 dark:border-t-zinc-500">
|
||||
<div className="relative flex flex-row justify-start items-center" onFocus={(e) => e.stopPropagation()}>
|
||||
<Select
|
||||
variant="plain"
|
||||
value={state.memoVisibility}
|
||||
startDecorator={<VisibilityIcon visibility={state.memoVisibility} />}
|
||||
onChange={(_, visibility) => {
|
||||
if (visibility) {
|
||||
handleMemoVisibilityChange(visibility);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{VISIBILITY_SELECTOR_ITEMS.map((item) => (
|
||||
<Option key={item} value={item} className="whitespace-nowrap" disabled={disableOption(item)}>
|
||||
{t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="shrink-0 flex flex-row justify-end items-center">
|
||||
<Button color="success" disabled={!allowSave} onClick={handleSaveBtnClick}>
|
||||
{t("editor.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemoEditor;
|
||||
@ -6,7 +6,7 @@ import { generateDialog } from "../Dialog";
|
||||
import Icon from "../Icon";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
memoId?: MemoId;
|
||||
memoId?: number;
|
||||
relationList?: MemoRelation[];
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMemoCacheStore } from "@/store/v1";
|
||||
import { useMemoV1Store } from "@/store/v1";
|
||||
import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
|
||||
import { Memo } from "@/types/proto/api/v2/memo_service";
|
||||
import Icon from "../Icon";
|
||||
|
||||
interface Props {
|
||||
@ -10,7 +11,7 @@ interface Props {
|
||||
|
||||
const RelationListView = (props: Props) => {
|
||||
const { relationList, setRelationList } = props;
|
||||
const memoCacheStore = useMemoCacheStore();
|
||||
const memoStore = useMemoV1Store();
|
||||
const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
@ -18,7 +19,7 @@ const RelationListView = (props: Props) => {
|
||||
const requests = relationList
|
||||
.filter((relation) => relation.type === MemoRelation_Type.REFERENCE)
|
||||
.map(async (relation) => {
|
||||
return await memoCacheStore.getOrFetchMemoById(relation.relatedMemoId);
|
||||
return await memoStore.getOrFetchMemoById(relation.relatedMemoId);
|
||||
});
|
||||
const list = await Promise.all(requests);
|
||||
setReferencingMemoList(list);
|
||||
|
||||
@ -1,143 +0,0 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useParams } from "react-router-dom";
|
||||
import MemoFilter from "@/components/MemoFilter";
|
||||
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import { getTimeStampByDate } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import { useFilterStore, useMemoStore } from "@/store/module";
|
||||
import { extractUsernameFromName } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import { TAG_REG } from "@/utils/tag";
|
||||
import Empty from "./Empty";
|
||||
import Memo from "./Memo";
|
||||
|
||||
const MemoList: React.FC = () => {
|
||||
const t = useTranslate();
|
||||
const params = useParams();
|
||||
const memoStore = useMemoStore();
|
||||
const filterStore = useFilterStore();
|
||||
const filter = filterStore.state;
|
||||
const { loadingStatus, memos } = memoStore.state;
|
||||
const user = useCurrentUser();
|
||||
const { tag: tagQuery, duration, text: textQuery, visibility } = filter;
|
||||
const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || textQuery || visibility);
|
||||
const username = params.username || extractUsernameFromName(user.name);
|
||||
|
||||
const fetchMoreRef = useRef<HTMLSpanElement>(null);
|
||||
|
||||
const shownMemos = (
|
||||
showMemoFilter
|
||||
? memos.filter((memo) => {
|
||||
let shouldShow = true;
|
||||
|
||||
if (tagQuery) {
|
||||
const tagsSet = new Set<string>();
|
||||
for (const t of Array.from(memo.content.match(new RegExp(TAG_REG, "gu")) ?? [])) {
|
||||
const tag = t.replace(TAG_REG, "$1").trim();
|
||||
const items = tag.split("/");
|
||||
let temp = "";
|
||||
for (const i of items) {
|
||||
temp += i;
|
||||
tagsSet.add(temp);
|
||||
temp += "/";
|
||||
}
|
||||
}
|
||||
if (!tagsSet.has(tagQuery)) {
|
||||
shouldShow = false;
|
||||
}
|
||||
}
|
||||
if (
|
||||
duration &&
|
||||
duration.from < duration.to &&
|
||||
(getTimeStampByDate(memo.displayTs) < duration.from || getTimeStampByDate(memo.displayTs) > duration.to)
|
||||
) {
|
||||
shouldShow = false;
|
||||
}
|
||||
if (textQuery && !memo.content.toLowerCase().includes(textQuery.toLowerCase())) {
|
||||
shouldShow = false;
|
||||
}
|
||||
if (visibility) {
|
||||
shouldShow = memo.visibility === visibility;
|
||||
}
|
||||
|
||||
return shouldShow;
|
||||
})
|
||||
: memos
|
||||
).filter((memo) => memo.creatorUsername === username && memo.rowStatus === "NORMAL");
|
||||
|
||||
const pinnedMemos = shownMemos.filter((m) => m.pinned);
|
||||
const unpinnedMemos = shownMemos.filter((m) => !m.pinned);
|
||||
const memoSort = (mi: Memo, mj: Memo) => {
|
||||
return mj.displayTs - mi.displayTs;
|
||||
};
|
||||
pinnedMemos.sort(memoSort);
|
||||
unpinnedMemos.sort(memoSort);
|
||||
const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL");
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.body.querySelector("#root");
|
||||
if (root) {
|
||||
root.scrollTo(0, 0);
|
||||
}
|
||||
}, [filter]);
|
||||
|
||||
useEffect(() => {
|
||||
memoStore.setLoadingStatus("incomplete");
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!fetchMoreRef.current) return;
|
||||
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
observer.disconnect();
|
||||
handleFetchMoreClick();
|
||||
});
|
||||
observer.observe(fetchMoreRef.current);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [loadingStatus]);
|
||||
|
||||
const handleFetchMoreClick = async () => {
|
||||
try {
|
||||
await memoStore.fetchMemos(username, DEFAULT_MEMO_LIMIT, memos.length);
|
||||
} catch (error: any) {
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll pb-28 hide-scrollbar">
|
||||
<MemoFilter />
|
||||
{sortedMemos.map((memo) => (
|
||||
<Memo key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
|
||||
))}
|
||||
|
||||
{loadingStatus === "fetching" ? (
|
||||
<div className="flex flex-col justify-start items-center w-full mt-2 mb-1">
|
||||
<p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col justify-start items-center w-full my-6">
|
||||
<div className="text-gray-400 italic">
|
||||
{loadingStatus === "complete" ? (
|
||||
sortedMemos.length === 0 && (
|
||||
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
|
||||
<Empty />
|
||||
<p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<span ref={fetchMoreRef} className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
|
||||
{t("memo.fetch-more")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemoList;
|
||||
@ -1,81 +0,0 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useMemoCacheStore } from "@/store/v1";
|
||||
import Icon from "./Icon";
|
||||
|
||||
interface Props {
|
||||
memo: Memo;
|
||||
relationList: MemoRelation[];
|
||||
}
|
||||
|
||||
const MemoRelationListView = (props: Props) => {
|
||||
const { memo, relationList } = props;
|
||||
const memoCacheStore = useMemoCacheStore();
|
||||
const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
|
||||
const [referencedMemoList, setReferencedMemoList] = useState<Memo[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const referencingMemoList = await Promise.all(
|
||||
relationList
|
||||
.filter((relation) => relation.memoId === memo.id && relation.relatedMemoId !== memo.id)
|
||||
.map((relation) => memoCacheStore.getOrFetchMemoById(relation.relatedMemoId))
|
||||
);
|
||||
setReferencingMemoList(referencingMemoList);
|
||||
const referencedMemoList = await Promise.all(
|
||||
relationList
|
||||
.filter((relation) => relation.memoId !== memo.id && relation.relatedMemoId === memo.id)
|
||||
.map((relation) => memoCacheStore.getOrFetchMemoById(relation.memoId))
|
||||
);
|
||||
setReferencedMemoList(referencedMemoList);
|
||||
})();
|
||||
}, [memo, relationList]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{referencingMemoList.length > 0 && (
|
||||
<div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
|
||||
{referencingMemoList.map((memo) => {
|
||||
return (
|
||||
<div key={memo.id} className="block w-auto max-w-[50%]">
|
||||
<Link
|
||||
className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
|
||||
to={`/m/${memo.id}`}
|
||||
>
|
||||
<Tooltip title="Reference" placement="top">
|
||||
<Icon.Link className="w-4 h-auto shrink-0 opacity-70" />
|
||||
</Tooltip>
|
||||
<span className="opacity-70 mx-1">#{memo.id}</span>
|
||||
<span className="truncate">{memo.content}</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{referencedMemoList.length > 0 && (
|
||||
<div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
|
||||
{referencedMemoList.map((memo) => {
|
||||
return (
|
||||
<div key={memo.id} className="block w-auto max-w-[50%]">
|
||||
<Link
|
||||
className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
|
||||
to={`/m/${memo.id}`}
|
||||
>
|
||||
<Tooltip title="Backlink" placement="top">
|
||||
<Icon.Milestone className="w-4 h-auto shrink-0 opacity-70" />
|
||||
</Tooltip>
|
||||
<span className="opacity-70 mx-1">#{memo.id}</span>
|
||||
<span className="truncate">{memo.content}</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemoRelationListView;
|
||||
@ -19,7 +19,7 @@ import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
|
||||
import { showCommonDialog } from "./Dialog/CommonDialog";
|
||||
import Icon from "./Icon";
|
||||
import MemoContentV1 from "./MemoContentV1";
|
||||
import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
|
||||
import showMemoEditorDialog from "./MemoEditorV1/MemoEditorDialog";
|
||||
import MemoRelationListViewV1 from "./MemoRelationListViewV1";
|
||||
import MemoResourceListView from "./MemoResourceListView";
|
||||
import showPreviewImageDialog from "./PreviewImageDialog";
|
||||
@ -56,23 +56,6 @@ const MemoViewV1: React.FC<Props> = (props: Props) => {
|
||||
const referenceRelations = memoRelations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
|
||||
const readonly = memo.creator !== user?.name;
|
||||
|
||||
useEffect(() => {
|
||||
memoStore.fetchMemoResources(memo.id).then((resources: Resource[]) => {
|
||||
setResources(resources);
|
||||
});
|
||||
memoStore.fetchMemoRelations(memo.id).then((relations: MemoRelation[]) => {
|
||||
setMemoRelations(relations);
|
||||
const parentMemoId = relations.find(
|
||||
(relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT
|
||||
)?.relatedMemoId;
|
||||
if (parentMemoId) {
|
||||
memoStore.getOrFetchMemoById(parentMemoId).then((memo: Memo) => {
|
||||
setParentMemo(memo);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Prepare memo creator.
|
||||
useEffect(() => {
|
||||
if (creator) return;
|
||||
@ -113,6 +96,27 @@ const MemoViewV1: React.FC<Props> = (props: Props) => {
|
||||
return () => observer.disconnect();
|
||||
}, [lazyRendering, filterStore.state]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldRender) {
|
||||
return;
|
||||
}
|
||||
|
||||
memoStore.fetchMemoResources(memo.id).then((resources: Resource[]) => {
|
||||
setResources(resources);
|
||||
});
|
||||
memoStore.fetchMemoRelations(memo.id).then((relations: MemoRelation[]) => {
|
||||
setMemoRelations(relations);
|
||||
const parentMemoId = relations.find(
|
||||
(relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT
|
||||
)?.relatedMemoId;
|
||||
if (parentMemoId) {
|
||||
memoStore.getOrFetchMemoById(parentMemoId).then((memo: Memo) => {
|
||||
setParentMemo(memo);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [shouldRender]);
|
||||
|
||||
if (!shouldRender) {
|
||||
// Render a placeholder to occupy the space.
|
||||
return <div className={`w-full h-32 !bg-transparent ${"memos-" + memo.id}`} ref={memoContainerRef} />;
|
||||
@ -162,7 +166,7 @@ const MemoViewV1: React.FC<Props> = (props: Props) => {
|
||||
{
|
||||
memoId: UNKNOWN_ID,
|
||||
relatedMemoId: memo.id,
|
||||
type: "REFERENCE",
|
||||
type: MemoRelation_Type.REFERENCE,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -1,136 +0,0 @@
|
||||
import { Button } from "@mui/joy";
|
||||
import copy from "copy-to-clipboard";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { getDateTimeString } from "@/helpers/datetime";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import toImage from "@/labs/html2image";
|
||||
import { useUserV1Store, extractUsernameFromName } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import Icon from "./Icon";
|
||||
import MemoContentV1 from "./MemoContentV1";
|
||||
import MemoResourceListView from "./MemoResourceListView";
|
||||
import UserAvatar from "./UserAvatar";
|
||||
import "@/less/share-memo-dialog.less";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
memo: Memo;
|
||||
}
|
||||
|
||||
const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
const { memo: propsMemo, destroy } = props;
|
||||
const t = useTranslate();
|
||||
const userV1Store = useUserV1Store();
|
||||
const downloadingImageState = useLoading(false);
|
||||
const loadingState = useLoading();
|
||||
const memoElRef = useRef<HTMLDivElement>(null);
|
||||
const memo = {
|
||||
...propsMemo,
|
||||
displayTsStr: getDateTimeString(propsMemo.displayTs),
|
||||
};
|
||||
const user = userV1Store.getUserByUsername(memo.creatorUsername);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
await userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
|
||||
loadingState.setFinish();
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
const handleDownloadImageBtnClick = () => {
|
||||
if (!memoElRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
downloadingImageState.setLoading();
|
||||
toImage(memoElRef.current, {
|
||||
pixelRatio: window.devicePixelRatio * 2,
|
||||
})
|
||||
.then((url) => {
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `memos-${getDateTimeString(Date.now())}.png`;
|
||||
a.click();
|
||||
|
||||
downloadingImageState.setFinish();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
const handleCopyLinkBtnClick = () => {
|
||||
copy(`${window.location.origin}/m/${memo.id}`);
|
||||
toast.success(t("message.succeed-copy-link"));
|
||||
};
|
||||
|
||||
if (loadingState.isLoading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container py-3 px-4 !mb-0 rounded-t-lg">
|
||||
<p className="">{t("common.share")} Memo</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="icon-img" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container w-full flex flex-col justify-start items-start relative">
|
||||
<div className="px-4 pb-3 w-full flex flex-row justify-start items-center space-x-2">
|
||||
<Button color="neutral" variant="outlined" disabled={downloadingImageState.isLoading} onClick={handleDownloadImageBtnClick}>
|
||||
{downloadingImageState.isLoading ? (
|
||||
<Icon.Loader className="w-4 h-auto mr-1 animate-spin" />
|
||||
) : (
|
||||
<Icon.Download className="w-4 h-auto mr-1" />
|
||||
)}
|
||||
{t("common.image")}
|
||||
</Button>
|
||||
<Button color="neutral" variant="outlined" onClick={handleCopyLinkBtnClick}>
|
||||
<Icon.Link className="w-4 h-auto mr-1" />
|
||||
{t("common.link")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-full border-t dark:border-zinc-700 overflow-clip">
|
||||
<div
|
||||
className="w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800"
|
||||
ref={memoElRef}
|
||||
>
|
||||
<span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{memo.displayTsStr}</span>
|
||||
<div className="w-full px-6 text-base pb-4">
|
||||
<MemoContentV1 content={memo.content} />
|
||||
<MemoResourceListView resourceList={memo.resourceList} />
|
||||
</div>
|
||||
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
|
||||
<div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
|
||||
<span className="w-full text truncate font-medium text-gray-600 dark:text-gray-300">
|
||||
{user.nickname || extractUsernameFromName(user.name)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-gray-500 dark:text-gray-400">via memos</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function showShareMemoDialog(memo: Memo): void {
|
||||
generateDialog(
|
||||
{
|
||||
className: "share-memo-dialog",
|
||||
dialogName: "share-memo-dialog",
|
||||
},
|
||||
ShareMemoDialog,
|
||||
{ memo }
|
||||
);
|
||||
}
|
||||
@ -5,9 +5,9 @@ import { getDateStampByDate, getDateString, getTimeStampByDate } from "@/helpers
|
||||
import * as utils from "@/helpers/utils";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import { useGlobalStore } from "@/store/module";
|
||||
import { useUserV1Store, extractUsernameFromName } from "@/store/v1";
|
||||
import { useUserV1Store, extractUsernameFromName, useMemoV1Store } from "@/store/v1";
|
||||
import { useTranslate, Translations } from "@/utils/i18n";
|
||||
import { useFilterStore, useMemoStore } from "../store/module";
|
||||
import { useFilterStore } from "../store/module";
|
||||
import "@/less/usage-heat-map.less";
|
||||
|
||||
const tableConfig = {
|
||||
@ -36,7 +36,7 @@ const UsageHeatMap = () => {
|
||||
const filterStore = useFilterStore();
|
||||
const userV1Store = useUserV1Store();
|
||||
const user = useCurrentUser();
|
||||
const memoStore = useMemoStore();
|
||||
const memoStore = useMemoV1Store();
|
||||
const todayTimeStamp = getDateStampByDate(Date.now());
|
||||
const weekDay = new Date(todayTimeStamp).getDay();
|
||||
const weekFromMonday = ["zh-Hans", "ko"].includes(useGlobalStore().state.locale);
|
||||
@ -45,12 +45,12 @@ const UsageHeatMap = () => {
|
||||
const nullCell = new Array(7 - todayDay).fill(0);
|
||||
const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
|
||||
const beginDayTimestamp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
|
||||
const memos = memoStore.state.memos;
|
||||
const [memoAmount, setMemoAmount] = useState(0);
|
||||
const [createdDays, setCreatedDays] = useState(0);
|
||||
const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestamp));
|
||||
const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
|
||||
const containerElRef = useRef<HTMLDivElement>(null);
|
||||
const memos = Array.from(memoStore.getState().memoById.values());
|
||||
|
||||
useEffect(() => {
|
||||
userV1Store.getOrFetchUserByUsername(extractUsernameFromName(user.name)).then((user) => {
|
||||
|
||||
Reference in New Issue
Block a user