fix: open native context menu when select text in social media item, f…

…ixed #1454 Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Dec 4, 2024 · e7b8f66 · e7b8f66
1 parent 495b29e
commit e7b8f66
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 12 deletions.
diff --git a/apps/renderer/src/modules/entry-column/Items/article-item.tsx b/apps/renderer/src/modules/entry-column/Items/article-item.tsx
@@ -16,7 +16,7 @@ export function ArticleItem({ entryId, entryPreview, translation }: UniversalIte
 
 export function ArticleItemStateLess({ entry, feed }: EntryItemStatelessProps) {
   return (
-    <div className="relative rounded-md text-zinc-700 transition-colors dark:text-neutral-400">
+    <div className="relative select-none rounded-md text-zinc-700 transition-colors dark:text-neutral-400">
       <div className="relative">
         <div className="group relative flex py-4 pl-3 pr-2">
           <FeedIcon className="mr-2 size-5 rounded-sm" feed={feed} fallback />

diff --git a/apps/renderer/src/modules/entry-column/Items/audio-item.tsx b/apps/renderer/src/modules/entry-column/Items/audio-item.tsx
@@ -15,7 +15,7 @@ export function AudioItem({ entryId, entryPreview, translation }: UniversalItemP
 
 export function AudioItemStateLess({ entry, feed }: EntryItemStatelessProps) {
   return (
-    <div className="relative mx-auto w-full max-w-lg rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
+    <div className="relative mx-auto w-full max-w-lg select-none rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
       <div className="relative">
         <div className="group relative flex py-4 pl-3 pr-2">
           <div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">
@@ -57,7 +57,7 @@ export function AudioItemStateLess({ entry, feed }: EntryItemStatelessProps) {
 }
 
 export const AudioItemSkeleton = (
-  <div className="relative mx-auto w-full max-w-lg rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
+  <div className="relative mx-auto w-full max-w-lg select-none rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
     <div className="relative">
       <div className="group relative flex py-4 pl-3 pr-2">
         <div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">

diff --git a/apps/renderer/src/modules/entry-column/Items/notification-item.tsx b/apps/renderer/src/modules/entry-column/Items/notification-item.tsx
@@ -13,7 +13,7 @@ export function NotificationItem({ entryId, entryPreview, translation }: Univers
 
 export function NotificationItemStateLess({ entry, feed }: EntryItemStatelessProps) {
   return (
-    <div className="relative w-full max-w-lg">
+    <div className="relative w-full max-w-lg select-none">
       <div className="group relative flex py-4 pl-3 pr-2">
         <FeedIcon feed={feed} fallback />
 
@@ -31,7 +31,7 @@ export function NotificationItemStateLess({ entry, feed }: EntryItemStatelessPro
 }
 
 export const NotificationItemSkeleton = (
-  <div className="relative w-full max-w-lg">
+  <div className="relative w-full max-w-lg select-none">
     <div className="group relative flex py-4 pl-3 pr-2">
       <Skeleton className="mr-2 size-5 shrink-0 overflow-hidden rounded-sm" />
       <div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">

diff --git a/apps/renderer/src/modules/entry-column/Items/picture-item-stateless.tsx b/apps/renderer/src/modules/entry-column/Items/picture-item-stateless.tsx
@@ -10,7 +10,7 @@ import type { EntryItemStatelessProps } from "../types"
 
 export function PictureItemStateLess({ entry, feed }: EntryItemStatelessProps) {
   return (
-    <div className="relative mx-auto max-w-md rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
+    <div className="relative mx-auto max-w-md select-none rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
       <div className="relative">
         <div className="p-1.5">
           <div className="relative flex gap-2 overflow-x-auto">

diff --git a/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx b/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx
@@ -74,7 +74,7 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
       <FeedIcon fallback feed={feed} entry={entry.entries} size={32} className="mt-1" />
       <div ref={ref} className="ml-2 min-w-0 flex-1">
         <div className="-mt-0.5 flex-1 text-sm">
-          <div className="space-x-1 leading-6">
+          <div className="select-none space-x-1 leading-6">
             <span className="inline-flex items-center gap-1 text-base font-semibold">
               <FeedTitle
                 feed={feed}
@@ -151,7 +151,7 @@ const ActionBar = ({ entryId }: { entryId: string }) => {
 
 export function SocialMediaItemStateLess({ entry, feed }: EntryItemStatelessProps) {
   return (
-    <div className="relative m-auto rounded-md text-zinc-700 transition-colors dark:text-neutral-400">
+    <div className="relative m-auto select-none rounded-md text-zinc-700 transition-colors dark:text-neutral-400">
       <div className="relative">
         <div className="group relative flex px-8 py-6">
           <FeedIcon className="mr-2 size-9" feed={feed} fallback />
@@ -386,7 +386,7 @@ const CollapsedSocialMediaItem: Component<{
         {children}
       </div>
       {isOverflow && !isShowMore && (
-        <div className="absolute inset-x-0 -bottom-2 flex justify-center py-2 duration-200">
+        <div className="absolute inset-x-0 -bottom-2 flex select-none justify-center py-2 duration-200">
           <button
             type="button"
             onClick={(e) => {

diff --git a/apps/renderer/src/modules/entry-column/components/DateItem.tsx b/apps/renderer/src/modules/entry-column/components/DateItem.tsx
@@ -175,7 +175,7 @@ const SocialMediaDateItem = ({
       // @ts-expect-error
       Wrapper={useCallback(
         ({ children }) => (
-          <div className="m-auto flex w-[645px] max-w-full gap-3 pl-5 text-base lg:text-lg">
+          <div className="m-auto flex w-[645px] max-w-full select-none gap-3 pl-5 text-base lg:text-lg">
             {children}
           </div>
         ),

diff --git a/apps/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx b/apps/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
@@ -77,6 +77,17 @@ export const EntryItemWrapper: FC<
 
   const contextMenuProps = useContextMenu({
     onContextMenu: async (e) => {
+      const $target = e.target as HTMLElement
+      const selection = window.getSelection()
+      if (selection) {
+        const targetHasSelection =
+          selection?.toString().length > 0 && $target.contains(selection?.anchorNode)
+        if (targetHasSelection) {
+          e.stopPropagation()
+          return
+        }
+      }
+
       e.preventDefault()
       setIsContextMenuOpen(true)
       await showContextMenu(

diff --git a/apps/renderer/src/modules/entry-column/list.tsx b/apps/renderer/src/modules/entry-column/list.tsx
@@ -206,7 +206,7 @@ export const EntryList: FC<EntryListProps> = memo(
       <>
         <div
           onKeyDown={handleKeyDown}
-          className={"relative w-full"}
+          className={"relative w-full select-text"}
           style={{
             height: `${rowVirtualizer.getTotalSize()}px`,
           }}

diff --git a/apps/renderer/src/modules/feed/feed-title.tsx b/apps/renderer/src/modules/feed/feed-title.tsx
@@ -22,7 +22,7 @@ export const FeedTitle = ({
   if (!feed) return null
 
   return (
-    <div className={cn("flex items-center truncate", className)}>
+    <div className={cn("flex select-none items-center truncate", className)}>
       <div className={cn("truncate", titleClassName)}>{getPreferredTitle(feed) || title}</div>
       {!hideExtraBadge && (
         <>