chore: handle tag click

web/src/components/MemoContent/Tag.tsx

@@ -1,10 +1,32 @@
+import { useContext } from "react";
+import { useFilterStore } from "@/store/module";
+import { RendererContext } from "./types";
+
 interface Props {
   content: string;
 }
 
 const Tag: React.FC<Props> = ({ content }: Props) => {
+  const context = useContext(RendererContext);
+  const filterStore = useFilterStore();
+
+  const handleTagClick = () => {
+    if (context.readonly) {
+      return;
+    }
+
+    const currTagQuery = filterStore.getState().tag;
+    if (currTagQuery === content) {
+      filterStore.setTagFilter(undefined);
+    } else {
+      filterStore.setTagFilter(content);
+    }
+  };
+
   return (
-    <span className="tag-container cursor-pointer inline-block w-auto text-blue-600 dark:text-blue-400 hover:opacity-80">#{content}</span>
+    <span className="cursor-pointer inline-block w-auto text-blue-600 dark:text-blue-400 hover:opacity-80" onClick={handleTagClick}>
+      #{content}
+    </span>
   );
 };
 

web/src/components/MemoContent/index.tsx

@@ -10,19 +10,19 @@ interface Props {
   memoId?: number;
   readonly?: boolean;
   className?: string;
-  onMemoContentClick?: (e: React.MouseEvent) => void;
+  onClick?: (e: React.MouseEvent) => void;
 }
 
 const MemoContent: React.FC<Props> = (props: Props) => {
-  const { className, memoId, nodes, onMemoContentClick } = props;
+  const { className, memoId, nodes, onClick } = props;
   const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
   const allowEdit = !props.readonly && memoId && currentUser?.id === memoStore.getMemoById(memoId)?.creatorId;
 
   const handleMemoContentClick = async (e: React.MouseEvent) => {
-    if (onMemoContentClick) {
-      onMemoContentClick(e);
+    if (onClick) {
+      onClick(e);
     }
   };
 

web/src/components/MemoView.tsx

@@ -8,7 +8,6 @@ import { UNKNOWN_ID } from "@/helpers/consts";
 import { getRelativeTimeString, getTimeStampByDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useFilterStore } from "@/store/module";
 import { useUserStore, extractUsernameFromName, useMemoStore } from "@/store/v1";
 import { RowStatus } from "@/types/proto/api/v2/common";
 import { MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
@@ -41,7 +40,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const { i18n } = useTranslation();
-  const filterStore = useFilterStore();
   const memoStore = useMemoStore();
   const userStore = useUserStore();
   const user = useCurrentUser();
@@ -157,15 +155,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     const targetEl = e.target as HTMLElement;
 
-    if (targetEl.classList.contains("tag-container")) {
-      const tagName = targetEl.innerText.slice(1);
-      const currTagQuery = filterStore.getState().tag;
-      if (currTagQuery === tagName) {
-        filterStore.setTagFilter(undefined);
-      } else {
-        filterStore.setTagFilter(tagName);
-      }
-    } else if (targetEl.tagName === "IMG") {
+    if (targetEl.tagName === "IMG") {
       const imgUrl = targetEl.getAttribute("src");
       if (imgUrl) {
         showPreviewImageDialog([imgUrl], 0);
@@ -263,7 +253,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           )}
         </div>
       </div>
-      <MemoContent memoId={memo.id} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
+      <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={readonly} onClick={handleMemoContentClick} />
       <MemoResourceListView resourceList={memo.resources} />
       <MemoRelationListView memo={memo} relationList={referenceRelations} />
     </div>