work on fixing Markdown component (wip - still crashes Addon Listing pages for some reason)

renderer/src/modules/components/Markdown.jsx

@@ -2,14 +2,14 @@ import { toKebabCase, isUrl, toPlural } from '@vizality/util/string';
 import React, { memo, useState, useEffect, Children } from 'react';
 import { getModule, contextMenu } from '@vizality/webpack';
 import { getMediaDimensions } from '@vizality/util/file';
-import { open as openModal } from '@vizality/modal';
+import { openModal } from '@vizality/modal';
 import { joinClassNames } from '@vizality/util/dom';
-import { Regexes } from '@vizality/constants';
+import { Regexes, Protocols } from '@vizality/constants';
 import { existsSync, promises } from 'fs';
 import Markdown from 'react-markdown';
 import gfm from 'remark-gfm';
 
-import { CodeBlock, Icon, DeferredRender, Spinner, LazyImageZoomable, ImageModal, Anchor, ContextMenu, CheckboxItem, Flex } from '.';
+import { CodeBlock, Icon, DeferredRender, Spinner, LazyImageZoomable, Modal, ImageModal, Anchor, ContextMenu, CheckboxItem, Flex } from '.';
 
 const { readFile } = promises;
 const { openContextMenu, closeContextMenu } = contextMenu;
@@ -74,6 +74,7 @@ export default memo(({ source, type, addonId }) => {
                     try {
                       const href = vizality.api.routes.getLocation()?.href;
                       const protocolUrl = href?.replace(href?.match(new RegExp(`${Regexes.DISCORD}/`))[0], '');
+                      console.log(protocolUrl);
                       DiscordNative?.clipboard?.copy(`<${protocolUrl.replace('vizality', 'vizality:/')}#${slug}>`);
                     } catch (err) {
 
@@ -189,28 +190,28 @@ export default memo(({ source, type, addonId }) => {
     },
 
     img: ({ alt, src }) => {
-      const [ _src, setSrc ] = useState(null);
-      const [ size, setSize ] = useState(null);
+      const [ _src, setSrc ] = useState(src);
+      const [ size, setSize ] = useState({});
 
-      useEffect(() => {
+      useEffect(async () => {
         async function getSize (src) {
           const dimensions = await getMediaDimensions(src);
           setSize(dimensions);
         }
-        let __src;
+        let protocolSrc;
         async function getSrc () {
           if (!isUrl(src)) {
             if (addonId) {
-              __src = `vizality://${toPlural(type)}/${addonId}/${src}`;
-              setSrc(`vizality://${toPlural(type)}/${addonId}/${src}`);
-              await getSize(__src);
+              protocolSrc = `${Protocols[toPlural(type).toUpperCase()]}/${addonId}/${src}`;
+              setSrc(`${Protocols[toPlural(type).toUpperCase()]}/${addonId}/${src}`);
+              await getSize(protocolSrc);
             }
           } else {
-            __src = src;
             setSrc(src);
           }
         }
-        getSrc();
+        await getSrc();
+        await getSize(src);
       }, []);
 
       return (
@@ -218,16 +219,18 @@ export default memo(({ source, type, addonId }) => {
           className={joinClassNames('vz-markdown-image', imageWrapper)}
           src={_src}
           alt={alt}
-          width={size?.width}
-          height={size?.height}
+          width={size.width}
+          height={size.height}
           onClick={evt => {
-            openModal(() => (
-              <ImageModal
-                src={_src}
-                width={size?.width}
-                height={size?.height}
-              />
             evt.preventDefault();
+            openModal(() => props => (
+              <Modal.Root {...props} size='dynamic'>
+                <ImageModal
+                  src={_src}
+                  width={size.width}
+                  height={size.height}
+                />
+              </Modal.Root>
             ));
           }}
         />
@@ -283,10 +286,10 @@ export default memo(({ source, type, addonId }) => {
               <Spinner />
             </div>
           }>
-            <Markdown children={markdown} remarkPlugins={[ gfm ]} />
+            <Markdown children={markdown} remarkPlugins={[ gfm ]} components={renderers} />
           </DeferredRender>
         )
-        : <Markdown children={markdown} remarkPlugins={[ gfm ]} />
+        : <Markdown children={markdown} remarkPlugins={[ gfm ]} components={renderers} />
       }
     </>
   );

renderer/src/styles/components/_markdown.scss

@@ -139,7 +139,7 @@
     height: auto !important;
     max-width: 100%;
     width: fit-content !important;
-    display: inline;
+    display: inline-block;
     img {
       height: auto !important;
       max-width: 100%;