Client web/7416 disable image pasting when hide image options flag is…

… true (#7428)

* fix organization verified sign font size by simone's ask

* disable image pasting if hideImageOptions flag is true

* optimize paste handler

* resolve pr comment

* Extract the isImageOrHtmlWithImage and call it once per item.

---------

Co-authored-by: Bobby Kolev <[email protected]>

src/core/ui/forms/MarkdownInput/MarkdownInput.tsx

@@ -108,75 +108,94 @@ export const MarkdownInput = memo(
         },
       });
 
+      const isImageOrHtmlWithImage = (item: DataTransferItem, clipboardData: DataTransfer | null) => {
+        if (item.kind === 'file' && item.type.startsWith('image/')) {
+          return true; // Image
+        }
+
+        if (item.kind === 'string' && item.type === 'text/html') {
+          const htmlContent = clipboardData?.getData('text/html');
+          return htmlContent?.includes('<img') ?? false; // HTML tag with image
+        }
+
+        return false; // Not an image or HTML with images
+      };
+
       const storageConfig = useStorageConfigContext();
 
       const editorOptions: Partial<EditorOptions> = useMemo(
         () => ({
           extensions: [StarterKit, ImageExtension, Link, Highlight, Iframe],
           editorProps: {
-            handlePaste: (_view: EditorView, event: ClipboardEvent) => {
+            /**
+             * Handles the paste event in the editor.
+             *
+             * @param _view - The editor view instance.
+             * @param event - The clipboard event triggered by pasting.
+             * @returns {boolean} - Returns true if the paste event is handled, otherwise false - continue execution of the default.
+             */
+            handlePaste: (_view: EditorView, event: ClipboardEvent): boolean => {
               const clipboardData = event.clipboardData;
               const items = clipboardData?.items;
 
               if (!items) {
-                return false; // Allow default behavior if no items are found.
+                return false;
               }
 
               const storageBucketId = storageConfig?.storageBucketId;
 
               if (!storageBucketId) {
-                return false; // Stop custom handling if storageBucketId is missing.
+                return false;
               }
 
               let imageProcessed = false;
 
               for (const item of items) {
-                // Handle images first
-                if (!imageProcessed && item.kind === 'file' && item.type.startsWith('image/')) {
-                  const file = item.getAsFile();
-
-                  if (file) {
-                    const reader = new FileReader();
-
-                    reader.onload = () => {
-                      uploadFile({
-                        variables: {
-                          file,
-                          uploadData: {
-                            storageBucketId,
-                            temporaryLocation,
-                          },
-                        },
-                      });
-                    };
+                const isImage = isImageOrHtmlWithImage(item, clipboardData);
 
-                    reader.readAsDataURL(file);
-                    imageProcessed = true;
-                  }
+                if (hideImageOptions && isImage) {
+                  event.preventDefault();
+
+                  return true; // Block paste of images or HTML with images
                 }
 
-                // Check for HTML content containing <img> tags
-                if (!imageProcessed && item.kind === 'string' && item.type === 'text/html') {
-                  const htmlContent = clipboardData.getData('text/html');
+                if (!imageProcessed && isImage) {
+                  if (item.kind === 'file' && item.type.startsWith('image/')) {
+                    const file = item.getAsFile();
 
-                  if (htmlContent.includes('<img')) {
-                    imageProcessed = true; // Mark as processed to avoid duplicates.
+                    if (file) {
+                      const reader = new FileReader();
+
+                      reader.onload = () => {
+                        uploadFile({
+                          variables: {
+                            file,
+                            uploadData: { storageBucketId, temporaryLocation },
+                          },
+                        });
+                      };
+
+                      reader.readAsDataURL(file);
+                      imageProcessed = true;
+                    }
+                  } else if (item.kind === 'string' && item.type === 'text/html') {
+                    imageProcessed = true; // HTML with images
                   }
                 }
 
-                // Break the loop once an image or relevant HTML is handled.
                 if (imageProcessed) {
+                  // Stop if we have already processed an image
                   break;
                 }
               }
 
-              // Prevent default behavior only if we processed an image or relevant HTML.
               if (imageProcessed) {
                 event.preventDefault();
-                return true; // Block default behavior in the editor.
+
+                return true; // Block default behavior for images
               }
 
-              return false; // Allow default behavior for non-image content.
+              return false; // Allow default behavior for text
             },
           },
         }),

src/domain/community/contributor/organization/OrganizationVerifiedStatus.tsx

@@ -13,7 +13,7 @@ export const OrganizationVerifiedStatus = ({ verified, helpText }: VerifiedStatu
   const { t } = useTranslation();
 
   return (
-    <BlockTitle sx={{ display: 'flex', alignItems: 'center', columnGap: 0.5 }}>
+    <BlockTitle variant="caption" sx={{ display: 'flex', alignItems: 'center', columnGap: 0.5 }}>
       {helpText && verified && (
         <Tooltip title={helpText} arrow placement="right">
           <BeenhereOutlined fontSize="small" color="primary" />