Merge pull request #305 from RaenonX-DL/dev

v2.14.3 Release
RaenonX-DL · Sep 15, 2021 · 04114d7 · 04114d7
2 parents 182dea6 + c7e95b9
commit 04114d7
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 50 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -72,7 +72,7 @@ const NextApp = ({Component, pageProps}: AppProps<PageProps>) => {
       {/* New Relic EUM header */}
       {
         isProduction() &&
-        <Script strategy="lazyOnload" type="text/javascript" src="/js/newRelicEum.js"/>
+        <Script strategy="beforeInteractive" type="text/javascript" src="/js/newRelicEum.js"/>
       }
       <AppReactContext.Provider value={{...pageProps}}>
         <ReduxProvider>

diff --git a/src/components/elements/markdown/components/table.tsx b/src/components/elements/markdown/components/table.tsx
@@ -1,47 +1,31 @@
 import React from 'react';
 
-import {TableCellComponent, TableRowComponent, Element, Text as AstText} from 'react-markdown/src/ast-to-react';
+import {TableCellComponent, TableRowComponent} from 'react-markdown/src/ast-to-react';
 
 import styles from '../main.module.css';
-import {Text, TextChildren} from '../transformers/text/main';
+import {TextChildren} from '../transformers/text/main';
 import {MarkdownComponentProps} from '../types';
 
 
-let headers: Array<string>;
+const headers: Array<Array<React.ReactNode>> = [] as Array<Array<React.ReactNode>>;
 let idxCounter = 0;
 
-const checkInTableHeaders = (node: Element) => {
-  const tableHead = node.children
-    .find((child) => child.type === 'element' && child.tagName === 'thead');
-  if (!tableHead || tableHead.type !== 'element') {
-    return;
-  }
-
-  const tableHeaderRow = tableHead.children
-    .find((child) => child.type === 'element' && child.tagName === 'tr');
-  if (!tableHeaderRow || tableHeaderRow.type !== 'element') {
-    return;
-  }
-
-  headers = tableHeaderRow.children
-    .filter((child) => child.type === 'element' && child.tagName === 'th')
-    .map((cell) => ((cell as Element).children[0] as AstText).value as string);
-};
+export const renderTable = ({children}: MarkdownComponentProps) => (
+  <table>{children}</table>
+);
 
-export const renderTable = ({children, node}: MarkdownComponentProps) => {
-  checkInTableHeaders(node);
+export const renderTableHeader = ({children}: MarkdownComponentProps) => {
+  headers.push(children);
 
-  return <table>{children}</table>;
+  return (
+    <th>
+      <TextChildren>
+        {children}
+      </TextChildren>
+    </th>
+  );
 };
 
-export const renderTableHeader = ({children}: MarkdownComponentProps) => (
-  <th>
-    <TextChildren>
-      {children}
-    </TextChildren>
-  </th>
-);
-
 export const renderTableRow: TableRowComponent = ({children}) => {
   idxCounter = 0;
 
@@ -52,9 +36,7 @@ export const renderTableCell: TableCellComponent = ({children}) => {
   return (
     <td>
       <span className={styles.responsiveHeader}>
-        <Text>
-          {headers[idxCounter++]}
-        </Text>
+        {headers[idxCounter++]}
       </span>
       <TextChildren>
         {children}

diff --git a/src/components/elements/markdown/main.test.tsx b/src/components/elements/markdown/main.test.tsx
@@ -20,6 +20,19 @@ describe('Markdown', () => {
       expect(linkElement).toHaveAttribute('href', '/link');
       expect(linkElement).toHaveAttribute('target', '_blank');
     });
+
+    it('renders referenced link in responsive table header', async () => {
+      const text = `[RefLink]: https://dl.raenonx.cc/analysis/48\n[RefLink] | Header\n:---: | :---:\nData 1 | Data 2`;
+
+      renderReact(() => <Markdown>{text}</Markdown>);
+
+      const linkElement = screen.getAllByText('RefLink')[0];
+      expect(linkElement).toHaveAttribute('href', 'https://dl.raenonx.cc/analysis/48');
+      expect(linkElement).toHaveAttribute('target', '_blank');
+      expect(screen.getByText('Data 1')).toBeInTheDocument();
+      expect(screen.getByText('Data 2')).toBeInTheDocument();
+      expect(screen.getAllByText('Header')).toHaveLength(2);
+    });
   });
 
   describe('Markdown - Syntax Nesting', () => {

diff --git a/src/components/elements/markdown/transformers/text/main.tsx b/src/components/elements/markdown/transformers/text/main.tsx
@@ -56,22 +56,20 @@ export const TextChildren = ({children}: TextChildrenProps) => {
 
   return (
     <>
-      {
-        children.map((child, idx) => {
-          if (typeof child === 'string') {
-            const injected = injectMarkdownToText(
-              lang, child,
-              {
-                afflictions: context?.resources.afflictions.status || [],
-              },
-            );
+      {children.map((child, idx) => {
+        if (typeof child === 'string') {
+          const injected = injectMarkdownToText(
+            lang, child,
+            {
+              afflictions: context?.resources.afflictions.status || [],
+            },
+          );
 
-            return <Text key={idx}>{injected}</Text>;
-          }
+          return <Text key={idx}>{injected}</Text>;
+        }
 
-          return <React.Fragment key={idx}>{child}</React.Fragment>;
-        })
-      }
+        return <React.Fragment key={idx}>{child}</React.Fragment>;
+      })}
     </>
   );
 };
diff --git a/src/components/pages/posts/analysis/output/charaSkill.tsx b/src/components/pages/posts/analysis/output/charaSkill.tsx
@@ -35,7 +35,7 @@ export const AnalysisSkillOutput = ({name, info, rotations, tips}: AnalysisSkill
         </Col>
         {
           hasAdditionalInfo &&
-          <Col lg={6}>
+          <Col lg={6} className="mt-2 mt-lg-0">
             {
               rotations &&
               <>