making the markodown more modular

Author: idanidan29

components/StyledMarkdown.tsx

@@ -0,0 +1,78 @@
+import getFindResultsByGlobalRegExp from '~/lib/getFindResultsByGlobalRegExp';
+
+const REGEX_TAB_GROUPS =
+  /\[tabs-start\s*"(?<label>.*)"\]((?!\[tabs-start).|\n)*\[tabs-end\]/gm;
+
+export type Element = {
+  type: 'markdown' | 'tabs-group';
+  markdown: string;
+};
+
+export function transformMarkdownLinks(markdown: string): string {
+  const linkDefinitions: Record<string, string> = {};
+
+  // Extract and remove link definitions
+  markdown = markdown.replace(
+    /^\[([^\]]+)\]:\s*(.+)$/gm,
+    (_, key: string, value: string) => {
+      linkDefinitions[key.toLowerCase()] = value;
+      return '';
+    },
+  );
+
+  // Replace reference-style links with inline links
+  return markdown.replace(
+    /\[([^\]]+)\]\[([^\]]*)\]/g,
+    (_, text: string, id: string) => {
+      const link = linkDefinitions[id.toLowerCase()];
+      if (link) {
+        return `[${text}](${link})`;
+      }
+      return _; // Return the original string if no link is found
+    },
+  );
+}
+
+export function parseMarkdown(markdown: string): Element[] {
+  markdown = transformMarkdownLinks(markdown);
+
+  const sortedTabGroups = (
+    getFindResultsByGlobalRegExp(markdown, REGEX_TAB_GROUPS) || []
+  ).sort((a, b) => (a.index < b.index ? -1 : 1));
+
+  let textCuts = sortedTabGroups.map((tabGroup) => ({
+    index: tabGroup.index,
+    length: tabGroup.match.length,
+  }));
+
+  let elements: Element[] = [];
+  let startIndex = 0;
+  let sliceMore = true;
+
+  do {
+    const endIndex = textCuts[0]?.index || Infinity;
+    const length = endIndex - startIndex;
+    const slicedMarkdown = markdown.substr(startIndex, length);
+    if (slicedMarkdown.length > 0) {
+      const markdownElement: Element = {
+        type: 'markdown',
+        markdown: slicedMarkdown,
+      };
+      elements = [...elements, markdownElement];
+    }
+
+    if (textCuts[0]) {
+      const tabsGroupElement: Element = {
+        type: 'tabs-group',
+        markdown: markdown.substr(textCuts[0].index, textCuts[0].length),
+      };
+      elements = [...elements, tabsGroupElement];
+      startIndex = textCuts[0].index + textCuts[0].length;
+      textCuts = textCuts.slice(1);
+    } else {
+      sliceMore = false;
+    }
+  } while (sliceMore);
+
+  return elements;
+}

components/markdown/MarkdownParser.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import { FullMarkdownContext } from '~/context';
+import { textOverrides } from './overrides/TextElements';
+import { listOverrides } from './overrides/ListElements';
+import { tableOverrides } from './overrides/TableElements';
+import { codeOverrides } from './overrides/CodeElements';
+import { infoBoxOverrides } from './overrides/InfoBoxes';
+import { customOverrides } from './overrides/CustomElements';
+import { headlineOverrides } from './overrides/HeadlineElements';
+import { TableOfContentsWrapper } from './TableOfContents';
+
+// Combine all overrides
+const allOverrides = {
+  ...headlineOverrides,
+  ...textOverrides,
+  ...listOverrides,
+  ...tableOverrides,
+  ...codeOverrides,
+  ...infoBoxOverrides,
+  ...customOverrides,
+  tableofcontent: { component: TableOfContentsWrapper },
+};
+
+export function MarkdownRenderer({ markdown }: { markdown: string }) {
+  return (
+    <FullMarkdownContext.Provider value={markdown}>
+      <Markdown
+        options={{
+          forceBlock: true,
+          overrides: allOverrides,
+        }}
+      >
+        {markdown}
+      </Markdown>
+    </FullMarkdownContext.Provider>
+  );
+}

components/markdown/MarkdownRenderer.tsx

@@ -0,0 +1,185 @@
+import React, { useContext, useEffect, useState } from 'react';
+import Markdown from 'markdown-to-jsx';
+import Image from 'next/image';
+import slugifyMarkdownHeadline from '~/lib/slugifyMarkdownHeadline';
+import { FullMarkdownContext } from '~/context';
+
+const hiddenElements = (...elements: string[]) => {
+  return elements.reduce((acc, element) => {
+    return {
+      ...acc,
+      [element]: { component: () => null },
+    };
+  }, {});
+};
+
+export function TableOfContents({
+  markdown,
+  depth = 2,
+}: {
+  markdown: string;
+  depth?: number;
+}) {
+  return (
+    <Markdown
+      options={{
+        overrides: {
+          h1: {
+            component: ({ children }) => {
+              const slug = slugifyMarkdownHeadline(children);
+              return (
+                <a
+                  href={`#${slug}`}
+                  className='flex cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-6  font-medium'
+                >
+                  {children}
+                </a>
+              );
+            },
+          },
+
+          /* eslint-disable */
+          h2:
+            depth === 0
+              ? {
+                  component: ({ children }) => {
+                    const slug = slugifyMarkdownHeadline(children);
+                    return (
+                      <a
+                        href={`#${slug}`}
+                        className='block cursor-pointer mb-3 text-slate-600  dark:text-slate-300 leading-5 font-medium ml-4'
+                      >
+                        {children}
+                      </a>
+                    );
+                  },
+                }
+              : depth >= 2
+                ? {
+                    component: ({ children }) => {
+                      const slug = slugifyMarkdownHeadline(children);
+                      const [isChrome, setIsChrome] = useState(false);
+
+                      useEffect(() => {
+                        const chromeCheck =
+                          /Chrome/.test(navigator.userAgent) &&
+                          /Google Inc/.test(navigator.vendor);
+                        setIsChrome(chromeCheck);
+                      }, []);
+
+                      return (
+                        // chromeClass
+                        <a
+                          href={`#${slug}`}
+                          className={`block cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ] max-sm:-ml-[6px] font-medium ${isChrome ? '-ml-[4.8px]' : '-ml-[6.5px]'}`}
+                        >
+                          <span className='mr-1 text-blue-400 text-[0.7em]'>
+                            &#9679;
+                          </span>
+                          {children}
+                        </a>
+                      );
+                    },
+                  }
+                : { component: () => null },
+          h3:
+            depth >= 3
+              ? {
+                  component: ({ children }) => {
+                    const slug = slugifyMarkdownHeadline(children);
+                    return (
+                      <a
+                        href={`#${slug}`}
+                        className='flex flex-row items-center cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ml-[-0.25rem]'
+                      >
+                        <span className='text-blue-400/40 font-extrabold text-[0.8em] max-sm:text-[1.2em] ml-1'>
+                          &mdash;&mdash;
+                        </span>
+                        <span className='mr-1 text-blue-400/90 text-[0.7em] flex justify-center items-center'>
+                          &#9679;
+                        </span>
+
+                        {children}
+                      </a>
+                    );
+                  },
+                }
+              : { component: () => null },
+          h4:
+            depth >= 4
+              ? {
+                  component: ({ children }) => {
+                    const slug = slugifyMarkdownHeadline(children);
+                    return (
+                      <a
+                        href={`#${slug}`}
+                        className='flex flex-row items-center cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ml-[-0.25rem] '
+                      >
+                        <span className='text-blue-400/40 font-extrabold text-[0.8em] ml-1 max-sm:text-[1.2em]'>
+                          &mdash;&mdash;&mdash;&mdash;
+                        </span>
+                        <span className='mr-1 text-blue-400/90 text-[0.7em] flex justify-center items-center'>
+                          &#9679;
+                        </span>
+
+                        {children}
+                      </a>
+                    );
+                  },
+                }
+              : { component: () => null },
+          ...hiddenElements(
+            'strong',
+            'p',
+            'a',
+            'ul',
+            'li',
+            'table',
+            'code',
+            'pre',
+            'blockquote',
+            'span',
+            'div',
+            'figure',
+            'Bigquote',
+            'Regularquote',
+            'specialBox',
+            'Infobox',
+            'Danger',
+            'Warning',
+            'Tip',
+          ),
+        },
+      }}
+    >
+      {markdown}
+    </Markdown>
+  );
+}
+
+export const TableOfContentsWrapper = ({ depth }: { depth?: number }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const fullMarkdown = useContext(FullMarkdownContext);
+  if (!fullMarkdown) return null;
+  
+  return (
+    <>
+      <div className='flex flex-row gap-2 text-slate-600 dark:text-slate-300 text-h5 max-sm:text-[1rem]  items-center'>
+        <Image
+          src={'/icons/toc-menu.svg'}
+          height={'15'}
+          width={'15'}
+          alt='menu-icon'
+          className='max-sm:w-3 max-sm:h-3'
+        />
+        <span>Table of Contents</span>
+      </div>
+      <div className='mt-2 bg-slate-50 dark:bg-slate-900 pt-6 pb-3 pr-3 border border-r-0 border-y-0 border-l-blue-400/40 border-l-[2.5px]'>
+        <TableOfContents
+          markdown={fullMarkdown}
+          depth={depth}
+        />
+      </div>
+    </>
+  );
+}; 

components/markdown/TableOfContents.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import getFindResultsByGlobalRegExp from '~/lib/getFindResultsByGlobalRegExp';
+import { MarkdownRenderer } from './MarkdownRenderer';
+
+const REGEX_TAB_GROUPS =
+  /\[tabs-start\s*"(?<label>.*)"\]((?!\[tabs-start).|\n)*\[tabs-end\]/gm;
+
+const TAB_REGEX = /(?<=\[tab )\s*"(?<label>.*)"\](?<markdown>(.|\n)*?)\[tab/gm;
+
+export const TabsGroup = ({ markdown }: { markdown: string }) => {
+  const groupLabel: string | null =
+    getFindResultsByGlobalRegExp(markdown, REGEX_TAB_GROUPS)?.[0]?.groups?.find(
+      (g) => g.name === 'label',
+    )?.match || null;
+
+  const tabs = getFindResultsByGlobalRegExp(markdown, TAB_REGEX).map((tab) => {
+    const label = tab.groups?.find((g) => g.name === 'label')?.match || '';
+    const markdown = (
+      tab.groups?.find((g) => g.name === 'markdown')?.match || ''
+    ).trim();
+    return { label, markdown };
+  });
+
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+  const activeTab = tabs[activeTabIndex];
+
+  return (
+    <div>
+      <div className='flex flex-row items-end mt-4'>
+        {groupLabel && (
+          <div className='p-4 text-slate-400 mr-4 text-sm'>{groupLabel}:</div>
+        )}
+        <div className='flex flex-row'>
+          {tabs.map((tab, index) => {
+            const isActive = index === activeTabIndex;
+            return (
+              <div
+                key={index}
+                onClick={() => setActiveTabIndex(index)}
+                className={classnames(
+                  'p-4 px-6 text-slate-700 font-medium border-b-2 rounded-t-lg',
+                  {
+                    'border-blue-400 text-blue-500 bg-blue-50 dark:bg-slate-900 dark:text-white':
+                      isActive,
+                    'border-white/0 cursor-pointer dark:text-white text-slate-700 hover:border-blue-50  hover:bg-blue-50/20':
+                      !isActive,
+                  },
+                )}
+              >
+                {tab.label}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className='border-slate-100 mb-4 p-6 from-slate-50/50 to-slate-50/100 rounded-xl bg-gradient-to-b dark:from-slate-700/50 dark:to-slate-900/50'>
+        <MarkdownRenderer markdown={activeTab.markdown} />
+      </div>
+    </div>
+  );
+};

components/markdown/TabsGroup.tsx

@@ -0,0 +1,17 @@
+export {
+  parseMarkdown,
+  transformMarkdownLinks,
+  type Element,
+} from './MarkdownParser';
+export { MarkdownRenderer } from './MarkdownRenderer';
+export { TabsGroup } from './TabsGroup';
+export { TableOfContents, TableOfContentsWrapper } from './TableOfContents';
+
+// Export overrides for potential customization
+export { textOverrides } from './overrides/TextElements';
+export { listOverrides } from './overrides/ListElements';
+export { tableOverrides } from './overrides/TableElements';
+export { codeOverrides } from './overrides/CodeElements';
+export { infoBoxOverrides } from './overrides/InfoBoxes';
+export { customOverrides } from './overrides/CustomElements';
+export { headlineOverrides } from './overrides/HeadlineElements';