Merge pull request #1283 from logto-io/charles-log-3269-add-support-to-image-in-connector-readme

refactor(console): add support to image display in connector readme

packages/console/src/components/Markdown/components/GithubRawImage/index.tsx

@@ -0,0 +1,34 @@
+import React, { HTMLProps, useRef, useState } from 'react';
+
+const githubRawUrlPrefix = 'https://raw.githubusercontent.com/logto-io/logto/master';
+
+const GithubRawImage = ({ src, alt }: HTMLProps<HTMLImageElement>) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [width, setWidth] = useState(0);
+
+  const onLoad = () => {
+    if (imgRef.current) {
+      const { naturalWidth, parentElement } = imgRef.current;
+      const parentClientWidth = parentElement?.clientWidth ?? 0;
+      const preferredWidth = Math.min(parentClientWidth, naturalWidth / 2);
+
+      setWidth(preferredWidth);
+    }
+  };
+
+  if (!src) {
+    return null;
+  }
+
+  return (
+    <img
+      ref={imgRef}
+      src={`${githubRawUrlPrefix}${src}`}
+      alt={alt}
+      width={`${width}px`}
+      onLoad={onLoad}
+    />
+  );
+};
+
+export default GithubRawImage;

packages/console/src/components/Markdown/index.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import CodeEditor from '../CodeEditor';
+import GithubRawImage from './components/GithubRawImage';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -27,6 +28,9 @@ const Markdown = ({ className, children }: Props) => (
           <CodeEditor isReadonly language={codeBlockType} value={String(children)} />
         );
       },
+      img: ({ src, alt }) => {
+        return <GithubRawImage src={src} alt={alt} />;
+      },
     }}
   >
     {children}