fix: fix image message context menu cannot save image problem

Author: moonrailgun

client/web/plugins/com.msgbyte.bbcode/src/tags/ImgTag.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getPopupContainer } from '@capital/common';
 import { Image } from '@capital/component';
 import type { TagProps } from '../bbcode/type';
 
@@ -44,14 +45,18 @@ export const ImgTag: React.FC<TagProps> = React.memo((props) => {
   const url = node.attrs.url ?? text;
 
   return (
-    <Image
-      style={{
-        ...imageStyle,
-        ...parseImageAttr(node.attrs as any),
-      }}
-      preview={true}
-      src={url}
-    />
+    <div className="inline-block" onContextMenu={(e) => e.stopPropagation()}>
+      <Image
+        style={{
+          ...imageStyle,
+          ...parseImageAttr(node.attrs as any),
+        }}
+        preview={{
+          getContainer: getPopupContainer,
+        }}
+        src={url}
+      />
+    </div>
   );
 });
 ImgTag.displayName = 'ImgTag';

client/web/src/plugin/common/index.ts

@@ -22,6 +22,7 @@ export {
 export { Loadable } from '@/components/Loadable';
 export { useIsMobile } from '@/hooks/useIsMobile';
 export { isMobile } from '@/utils/device-helper';
+export { getPopupContainer } from '@/utils/dom-helper';
 export {
   getGlobalState,
   useGlobalSocketEvent,