Add mongo forward read. Fix markdown code block. (#2174)

* perf: read from mongo forward node

* fix: code block ui

* perf: markdown code css

projects/app/src/components/Markdown/CodeLight.tsx

@@ -287,18 +287,18 @@ const codeLight: { [key: string]: React.CSSProperties } = {
 const CodeLight = ({
   children,
   className,
-  inline,
+  codeBlock,
   match
 }: {
   children: React.ReactNode & React.ReactNode[];
   className?: string;
-  inline?: boolean;
+  codeBlock?: boolean;
   match: RegExpExecArray | null;
 }) => {
   const { t } = useTranslation();
   const { copyData } = useCopyData();
 
-  if (!inline) {
+  if (codeBlock) {
     const codeBoxName = useMemo(() => {
       const input = match?.['input'] || '';
       if (!input) return match?.[1];
@@ -312,7 +312,6 @@ const CodeLight = ({
         my={3}
         borderRadius={'md'}
         overflow={'overlay'}
-        bg={'myGray.900'}
         boxShadow={
           '0px 0px 1px 0px rgba(19, 51, 107, 0.08), 0px 1px 2px 0px rgba(19, 51, 107, 0.05)'
         }

projects/app/src/components/Markdown/index.module.scss

@@ -336,7 +336,7 @@
 }
 .markdown pre code,
 .markdown pre tt {
-  background-color: transparent;
+  background-color: transparent !important;
   border: medium none;
 }
 .markdown hr {
@@ -360,13 +360,12 @@
     margin: 0;
     border: none;
     border-radius: 0;
-    background-color: #292b33 !important;
+    background-color: var(--chakra-colors-gray-900) !important;
     overflow-x: auto;
     color: #fff;
   }
 
   pre code {
-    background-color: #292b33 !important;
     width: 100%;
   }
 

projects/app/src/components/Markdown/index.tsx

@@ -36,7 +36,7 @@ const Markdown = ({
   const components = useMemo<any>(
     () => ({
       img: Image,
-      pre: 'div',
+      pre: RewritePre,
       p: (pProps: any) => <p {...pProps} dir="auto" />,
       code: Code,
       a: A
@@ -70,8 +70,7 @@ export default React.memo(Markdown);
 
 /* Custom dom */
 const Code = React.memo(function Code(e: any) {
-  const { inline, className, children } = e;
-
+  const { className, codeBlock, children } = e;
   const match = /language-(\w+)/.exec(className || '');
   const codeType = match?.[1];
 
@@ -92,11 +91,11 @@ const Code = React.memo(function Code(e: any) {
     }
 
     return (
-      <CodeLight className={className} inline={inline} match={match}>
+      <CodeLight className={className} codeBlock={codeBlock} match={match}>
         {children}
       </CodeLight>
     );
-  }, [codeType, className, inline, match, children, strChildren]);
+  }, [codeType, className, codeBlock, match, children, strChildren]);
 
   return Component;
 });
@@ -149,3 +148,15 @@ const A = React.memo(function A({ children, ...props }: any) {
 
   return <Link {...props}>{children}</Link>;
 });
+
+function RewritePre({ children }: any) {
+  const modifiedChildren = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      // @ts-ignore
+      return React.cloneElement(child, { codeBlock: true });
+    }
+    return child;
+  });
+
+  return <>{modifiedChildren}</>;
+}