chore: update timeline page

web/src/components/MemoEditorV1/ActionButton/TagSelector.tsx

@@ -0,0 +1,52 @@
+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;

web/src/components/MemoEditorV1/Editor/TagSuggestions.tsx

@@ -0,0 +1,136 @@
+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;

web/src/components/MemoEditorV1/Editor/index.tsx

@@ -0,0 +1,162 @@
+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;

web/src/components/MemoEditorV1/MemoEditorDialog.tsx

@@ -0,0 +1,59 @@
+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
+  );
+}

web/src/components/MemoEditorV1/RelationListView.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { useMemoCacheStore } from "@/store/v1";
+import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
+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 === MemoRelation_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;

web/src/components/MemoEditorV1/ResourceListView.tsx

@@ -0,0 +1,42 @@
+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;

web/src/components/MemoEditorV1/index.tsx

@@ -0,0 +1,454 @@
+import { Select, Option, Button, IconButton, Divider } from "@mui/joy";
+import { 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 { memoServiceClient } from "@/grpcweb";
+import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "@/helpers/consts";
+import { useGlobalStore, useResourceStore } from "@/store/module";
+import { useMemoV1Store, useUserV1Store } from "@/store/v1";
+import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
+import { Visibility } from "@/types/proto/api/v2/memo_service";
+import { Resource } from "@/types/proto/api/v2/resource_service";
+import { UserSetting } from "@/types/proto/api/v2/user_service";
+import { useTranslate } from "@/utils/i18n";
+import { convertVisibilityFromString, convertVisibilityToString } from "@/utils/memo";
+import showCreateMemoRelationDialog from "../CreateMemoRelationDialog";
+import showCreateResourceDialog from "../CreateResourceDialog";
+import Icon from "../Icon";
+import VisibilityIconV1 from "../VisibilityIconV1";
+import TagSelector from "./ActionButton/TagSelector";
+import Editor, { EditorRefActions } from "./Editor";
+import RelationListView from "./RelationListView";
+import ResourceListView from "./ResourceListView";
+
+interface Props {
+  className?: string;
+  editorClassName?: string;
+  cacheKey?: string;
+  memoId?: number;
+  relationList?: MemoRelation[];
+  onConfirm?: (memoId: number) => 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 = useMemoV1Store();
+  const resourceStore = useResourceStore();
+  const [state, setState] = useState<State>({
+    memoVisibility: Visibility.PRIVATE,
+    resourceList: [],
+    relationList: props.relationList ?? [],
+    isUploadingResource: false,
+    isRequesting: false,
+  });
+  const [hasContent, setHasContent] = useState<boolean>(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 === MemoRelation_Type.REFERENCE
+      )
+    : state.relationList.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
+
+  useEffect(() => {
+    editorRef.current?.setContent(contentCache || "");
+  }, []);
+
+  useEffect(() => {
+    let visibility = userSetting.memoVisibility;
+    if (systemStatus.disablePublicMemos && visibility === "PUBLIC") {
+      visibility = "PRIVATE";
+    }
+    setState((prevState) => ({
+      ...prevState,
+      memoVisibility: convertVisibilityFromString(visibility),
+    }));
+  }, [userSetting.memoVisibility, systemStatus.disablePublicMemos]);
+
+  useEffect(() => {
+    if (memoId) {
+      memoStore.getOrFetchMemoById(memoId ?? UNKNOWN_ID).then((memo) => {
+        if (memo) {
+          handleEditorFocus();
+          setState((prevState) => ({
+            ...prevState,
+            memoVisibility: memo.visibility,
+          }));
+          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 === "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: MemoRelation_Type.REFERENCE })),
+              ...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.getOrFetchMemoById(memoId ?? UNKNOWN_ID);
+        if (prevMemo) {
+          const memo = await memoStore.updateMemo(
+            {
+              id: prevMemo.id,
+              content,
+              visibility: state.memoVisibility,
+            },
+            ["content", "visibility"]
+          );
+          await memoServiceClient.setMemoResources({
+            id: memo.id,
+            resources: state.resourceList,
+          });
+          await memoServiceClient.setMemoRelations({
+            id: memo.id,
+            relations: state.relationList,
+          });
+          if (onConfirm) {
+            onConfirm(memo.id);
+          }
+        }
+      } else {
+        const memo = await memoStore.createMemo({
+          content,
+          visibility: state.memoVisibility,
+        });
+        await memoServiceClient.setMemoResources({
+          id: memo.id,
+          resources: state.resourceList,
+        });
+        await memoServiceClient.setMemoRelations({
+          id: memo.id,
+          relations: state.relationList,
+        });
+        if (onConfirm) {
+          onConfirm(memo.id);
+        }
+      }
+      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: [],
+    }));
+  };
+
+  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;
+
+  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}
+    >
+      <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={<VisibilityIconV1 visibility={state.memoVisibility} />}
+            onChange={(_, visibility) => {
+              if (visibility) {
+                handleMemoVisibilityChange(visibility);
+              }
+            }}
+          >
+            {[Visibility.PRIVATE, Visibility.PROTECTED, Visibility.PUBLIC].map((item) => (
+              <Option key={item} value={item} className="whitespace-nowrap">
+                {t(`memo.visibility.${convertVisibilityToString(item).toLowerCase()}` as any)}
+              </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;

web/src/components/MemoRelationListViewV1.tsx

@@ -0,0 +1,83 @@
+import { Tooltip } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useMemoV1Store } from "@/store/v1";
+import { MemoRelation } from "@/types/proto/api/v2/memo_relation_service";
+import { Memo } from "@/types/proto/api/v2/memo_service";
+import Icon from "./Icon";
+
+interface Props {
+  memo: Memo;
+  relationList: MemoRelation[];
+}
+
+const MemoRelationListViewV1 = (props: Props) => {
+  const { memo, relationList } = props;
+  const memoStore = useMemoV1Store();
+  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) => memoStore.getOrFetchMemoById(relation.relatedMemoId))
+      );
+      setReferencingMemoList(referencingMemoList);
+      const referencedMemoList = await Promise.all(
+        relationList
+          .filter((relation) => relation.memoId !== memo.id && relation.relatedMemoId === memo.id)
+          .map((relation) => memoStore.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 MemoRelationListViewV1;

web/src/components/TimelineMemo.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import Icon from "@/components/Icon";
+import MemoContentV1 from "@/components/MemoContentV1";
+import MemoResourceListView from "@/components/MemoResourceListView";
+import { getTimeString } from "@/helpers/datetime";
+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 { Resource } from "@/types/proto/api/v2/resource_service";
+import MemoRelationListViewV1 from "./MemoRelationListViewV1";
+
+interface Props {
+  memo: Memo;
+}
+
+const TimelineMemo = (props: Props) => {
+  const { memo } = props;
+  const memoStore = useMemoV1Store();
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [relations, setRelations] = useState<MemoRelation[]>([]);
+
+  useEffect(() => {
+    memoStore.fetchMemoResources(memo.id).then((resources: Resource[]) => {
+      setResources(resources);
+    });
+    memoStore.fetchMemoRelations(memo.id).then((relations: MemoRelation[]) => {
+      setRelations(relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE));
+    });
+  }, [memo.id]);
+
+  return (
+    <div className="relative w-full flex flex-col justify-start items-start">
+      <div className="w-full flex flex-row justify-start items-center mt-0.5 mb-1 text-sm font-mono text-gray-500 dark:text-gray-400">
+        <span className="opacity-80">{getTimeString(memo.displayTime)}</span>
+        <Icon.Dot className="w-5 h-auto opacity-60" />
+        <span className="opacity-60">#{memo.id}</span>
+      </div>
+      <MemoContentV1 content={memo.content} nodes={memo.nodes} />
+      <MemoResourceListView resourceList={resources} />
+      <MemoRelationListViewV1 memo={memo} relationList={relations} />
+    </div>
+  );
+};
+
+export default TimelineMemo;

web/src/components/VisibilityIconV1.tsx

@@ -0,0 +1,27 @@
+import classNames from "classnames";
+import { Visibility } from "@/types/proto/api/v2/memo_service";
+import Icon from "./Icon";
+
+interface Props {
+  visibility: Visibility;
+}
+
+const VisibilityIcon = (props: Props) => {
+  const { visibility } = props;
+
+  let VIcon = null;
+  if (visibility === Visibility.PRIVATE) {
+    VIcon = Icon.Lock;
+  } else if (visibility === Visibility.PROTECTED) {
+    VIcon = Icon.Users;
+  } else if (visibility === Visibility.PUBLIC) {
+    VIcon = Icon.Globe2;
+  }
+  if (!VIcon) {
+    return null;
+  }
+
+  return <VIcon className={classNames("w-4 h-auto text-gray-400")} />;
+};
+
+export default VisibilityIcon;