Handle link images in article viewer

Author: moysa

src/components/PrimalMarkdown/PrimalMarkdown.module.scss

@@ -192,6 +192,7 @@
       margin-top: 0;
       margin-bottom: 20px;
       overflow: hidden;
+      border-radius: 12px;
     }
 
     img + sup {

src/components/PrimalMarkdown/PrimalMarkdown.tsx

@@ -230,7 +230,6 @@ const PrimalMarkdown: Component<{
 
   const [html, setHTML] = createSignal<string>();
 
-
   const regexIndexOf = (text: string, regex: RegExp, startpos: number) => {
     var indexOf = text.substring(startpos || 0).search(regex);
     return (indexOf >= 0) ? (indexOf + (startpos || 0)) : indexOf;
@@ -307,6 +306,11 @@ const PrimalMarkdown: Component<{
         continue;
       }
 
+      if (token.value.startsWith('[![')) {
+        tokens.push({ ...token });
+        continue;
+      }
+
       const parsedTokens = tokenizeByRegex(token.value, regex, type, token.index);
 
       tokens.push(...parsedTokens);
@@ -517,6 +521,14 @@ const PrimalMarkdown: Component<{
   const onMouseClick= (e: MouseEvent) => {
     const el = e.target as HTMLElement;
 
+    const parent = el.parentElement;
+
+    if (el.tagName === 'IMG' && parent && parent.tagName === 'A' && !parent.classList.contains('noteimage')) {
+      e.preventDefault();
+      window.open(parent.getAttribute('href') || '', '_blank')
+      return false;
+    }
+
     if (el.tagName === 'A') {
       const href = el.getAttribute('href') || '';
       const highlight = el.getAttribute('data-highlight') || '';
@@ -597,7 +609,6 @@ const PrimalMarkdown: Component<{
         return false;
       }
 
-
       return true;
     }
   };

src/constants.ts

@@ -357,7 +357,7 @@ export const eventRegexG = /(?:\s|^)(nostr:)?((note|nevent|naddr)1[qpzry9x8gf2tv
 export const eventRegexNostrless = /((note|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]+)\b/;
 export const mentionRegexNostrless = /((note|nevent|naddr|nprofile|npub)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]+)\b/;
 
-export const mdImageRegex = /(https?:\/\/.*\.(?:png|jpg))|\!\[(.*?)\]\((https?:\/\/.*\.(?:png|jpg))\)/i;
+export const mdImageRegex = /(https?:\/\/.*\.(?:png|jpg|jpeg|webp|gif|format=png))|\!\[(.*?)\]\((https?:\/\/.*)\)/i;
 
 export const specialCharsRegex = /[^A-Za-z0-9]/;
 export const hashtagCharsRegex = /[^A-Za-z0-9\-\_]/;