Merge 057a899549 into b8029c70ef

web/src/components/MemoContent/index.tsx

@@ -35,7 +35,7 @@ const MemoContent = (props: MemoContentProps) => {
   const compactLabel = useCompactLabel(showCompactMode, t as (key: string) => string);
 
   return (
-    <div className={`w-full flex flex-col justify-start items-start text-foreground ${className || ""}`}>
+    <div className={`w-full flex flex-col justify-start items-start text-foreground cursor-default ${className || ""}`}>
       <div
         ref={memoContentContainerRef}
         className={cn(

web/src/components/MemoReactionListView/ReactionSelector.tsx

@@ -40,7 +40,7 @@ const ReactionSelector = (props: Props) => {
         </span>
       </PopoverTrigger>
       <PopoverContent align="center" className="max-w-[90vw] sm:max-w-md">
-        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1 max-h-64 overflow-y-auto">
+        <div className="no-goto grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1 max-h-64 overflow-y-auto">
           {memoRelatedSetting.reactions.map((reactionType) => (
             <button
               type="button"

web/src/components/MemoView/MemoView.tsx

@@ -38,6 +38,35 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
     openEditor,
     openPreview,
   });
+  // handle onClick to go to details page
+  const handleArticleClick = (e: React.MouseEvent) => {
+    if (e.defaultPrevented) {return}; // prevent if other onClick events are triggered first
+   let target = e.target as HTMLElement | null;
+   // Handle for interactive elements
+   if (target && target.closest && target.closest("a, th, td, span, .no-goto")) {
+     return;
+   }
+   let el = target;
+  while (el) {
+    const cls = el.classList;
+     //Handle for img class items inside memo content
+    if (cls && cls.contains("grid")&& cls.contains("grid-cols-2")) {
+      return;
+    }
+     // Handle map inside memo content
+    if (cls && cls.contains("leaflet-container")) {
+      return;
+    }
+    el = el.parentElement;
+  }
+  // Handle for menuitems(Pin, Edit, Copy, Archive, Delete), dialog and buttons types
+  let role = target?.getAttribute("role");
+  let type = target?.getAttribute("type");
+  if (role === "menuitem"|| type==="dialog" || type === "button") {
+    return;
+  }
+   handleGotoMemoDetailPage();
+ };
 
   const contextValue = useMemo(
     () => ({
@@ -68,7 +97,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
 
   return (
     <MemoViewContext.Provider value={contextValue}>
-      <article className={cn(MEMO_CARD_BASE_CLASSES, className)} ref={cardRef} tabIndex={readonly ? -1 : 0}>
+      <article onClick={handleArticleClick} className={cn(MEMO_CARD_BASE_CLASSES, className)} ref={cardRef} tabIndex={readonly ? -1 : 0}>
         <MemoHeader
           showCreator={props.showCreator}
           showVisibility={props.showVisibility}

web/src/components/MemoView/components/metadata/AttachmentList.tsx

@@ -114,7 +114,7 @@ const AttachmentList = ({ attachments }: AttachmentListProps) => {
 
   return (
     <>
-      <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
+      <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden no-goto">
         <SectionHeader icon={PaperclipIcon} title="Attachments" count={attachments.length} />
 
         <div className="p-2 flex flex-col gap-1">

web/src/components/MemoView/components/metadata/RelationList.tsx

@@ -41,7 +41,7 @@ function RelationList({ relations, currentMemoName, parentPage, className }: Rel
   const activeRelations = isReferencing ? referencingRelations : referencedRelations;
 
   return (
-    <div className={cn("w-full rounded-lg border border-border bg-muted/20 overflow-hidden", className)}>
+    <div className={cn("w-full rounded-lg border border-border bg-muted/20 overflow-hidden no-goto", className)}>
       <SectionHeader
         icon={icon}
         title={isReferencing ? t("common.referencing") : t("common.referenced-by")}

web/src/components/PreviewImageDialog.tsx

@@ -55,7 +55,7 @@ function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: P
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="!w-[100vw] !h-[100vh] !max-w-[100vw] !max-h-[100vw] p-0 border-0 shadow-none bg-transparent [&>button]:hidden"
+        className="!w-[100vw] !h-[100vh] !max-w-[100vw] !max-h-[100vw] p-0 border-0 shadow-none bg-transparent [&>button]:hidden no-goto"
         aria-describedby="image-preview-description"
       >
         {/* Close button */}