Updates

jpmorganchase · Sep 4, 2024 · 8185911 · 8185911
1 parent 6aeef1e
commit 8185911
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 99 deletions.
diff --git a/packages/components/src/FormattedContent.tsx b/packages/components/src/FormattedContent.tsx
@@ -1,79 +1,70 @@
-import React, { ReactElement, useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
+import React from 'react';
+import ReactMarkdown, { Components } from 'react-markdown';
 
-import { getMarkdownElements } from './Markdown';
+import { getMarkdownElements } from './Markdown/markdownElements';
+
+type SupportedComponents = Pick<
+  Components,
+  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'strong' | 'ul' | 'ol' | 'li'
+> & {
+  listItem: SupportedComponents['li'];
+  emphasis: SupportedComponents['em'];
+};
 
 type FormattedContentProps = {
   className?: string;
   children: string;
-  components?: {
-    h1?: () => ReactElement;
-    h2?: () => ReactElement;
-    h3?: () => ReactElement;
-    h4?: () => ReactElement;
-    h5?: () => ReactElement;
-    h6?: () => ReactElement;
-    p?: () => ReactElement;
-    em?: () => ReactElement;
-    strong?: () => ReactElement;
-    ul?: () => ReactElement;
-    ol?: () => ReactElement;
-    li?: () => ReactElement;
-  };
+  components?: SupportedComponents;
+};
+
+const {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  ol: Ol,
+  ul: Ul,
+  li: ListItem,
+  em: Emphasis,
+  p: P,
+  strong: Strong
+} = getMarkdownElements();
+
+const renderers: SupportedComponents = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h1: ({ node, ...props }) => <H1 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h2: ({ node, ...props }) => <H2 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h3: ({ node, ...props }) => <H3 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h4: ({ node, ...props }) => <H4 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h5: ({ node, ...props }) => <H5 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h6: ({ node, ...props }) => <H6 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  p: ({ node, children, ...props }) => <P {...props}>{children}</P>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  emphasis: ({ node, children, ...props }) => <Emphasis {...props}>{children}</Emphasis>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  strong: ({ node, children, ...props }) => <Strong {...props}>{children}</Strong>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ul: ({ node, children, ...props }) => <Ul {...props}>{children}</Ul>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ol: ({ node, children, ...props }) => <Ol {...props}>{children}</Ol>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  listItem: ({ node, children, ...props }) => <ListItem {...props}>{children}</ListItem>
 };
 
 export const FormattedContent: React.FC<React.PropsWithChildren<FormattedContentProps>> = ({
   children,
   components = {},
   ...rest
-}) => {
-  const renderers = useMemo(() => {
-    const {
-      h1: H1,
-      h2: H2,
-      h3: H3,
-      h4: H4,
-      h5: H5,
-      h6: H6,
-      ol: Ol,
-      ul: Ul,
-      li: ListItem,
-      em: Emphasis,
-      p: P,
-      strong: Strong
-    } = getMarkdownElements();
-
-    return {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h1: ({ node, ...props }) => <H1 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h2: ({ node, ...props }) => <H2 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h3: ({ node, ...props }) => <H3 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h4: ({ node, ...props }) => <H4 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h5: ({ node, ...props }) => <H5 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h6: ({ node, ...props }) => <H6 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      p: ({ node, children, ...props }) => <P {...props}>{children}</P>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      emphasis: ({ node, children, ...props }) => <Emphasis {...props}>{children}</Emphasis>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      strong: ({ node, children, ...props }) => <Strong {...props}>{children}</Strong>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ul: ({ node, children, ...props }) => <Ul {...props}>{children}</Ul>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ol: ({ node, children, ...props }) => <Ol {...props}>{children}</Ol>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      listItem: ({ node, children, ...props }) => <ListItem {...props}>{children}</ListItem>
-    };
-  }, []);
-
-  return (
-    <ReactMarkdown {...rest} components={{ ...renderers, ...components }}>
-      {children}
-    </ReactMarkdown>
-  );
-};
+}) => (
+  <ReactMarkdown {...rest} components={{ ...renderers, ...components }}>
+    {children}
+  </ReactMarkdown>
+);
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -45,7 +45,6 @@
     "@jpmorganchase/mosaic-source-local-folder": "^0.1.0-beta.85",
     "@jpmorganchase/mosaic-types": "^0.1.0-beta.85",
     "@types/github-slugger": "^1.3.0",
-    "@vcarl/remark-headings": "^0.1.0",
     "check-links": "^2.0.0",
     "deepmerge": "^4.3.1",
     "fs-extra": "^10.1.0",
@@ -65,6 +64,7 @@
     "unified": "^11.0.0",
     "unist-util-visit": "^5.0.0",
     "mdast-util-directive": "^3.0.0",
+    "mdast-util-to-string": "^4.0.0",
     "uuid": "^7.0.3",
     "vfile-reporter": "^7.0.5"
   }

diff --git a/packages/plugins/src/TableOfContentsPlugin.ts b/packages/plugins/src/TableOfContentsPlugin.ts
@@ -1,10 +1,11 @@
 import type { Page, Plugin as PluginType } from '@jpmorganchase/mosaic-types';
 import Slugger from 'github-slugger';
 import remarkParse from 'remark-parse';
-import { unified } from 'unified';
+import { unified, Plugin } from 'unified';
 import remarkStringify from 'remark-stringify';
-import remarkHeadings from '@vcarl/remark-headings';
-import type { Heading as MarkdownHeading } from 'mdast';
+import { visit } from 'unist-util-visit';
+import { toString } from 'mdast-util-to-string';
+import type { Heading as MarkdownHeading, Root } from 'mdast';
 
 type TOCItem = { level: number; id: string; text: string };
 
@@ -27,6 +28,40 @@ const parsePageHeading = (page, heading) => {
   return parsedHeading;
 };
 
+interface Heading {
+  depth: number;
+  value: string;
+  data?: any;
+}
+
+export const getHeadings = (root: Root) => {
+  const headingList: Heading[] = [];
+
+  visit(root, 'heading', node => {
+    const heading: Heading = {
+      depth: node.depth,
+      value: toString(node, { includeImageAlt: false })
+    };
+
+    // Other remark plugins can store arbitrary data
+    // inside a node's `data` property, such as a
+    // custom heading id.
+    const data = node?.data;
+    if (data) {
+      heading.data = data;
+    }
+
+    headingList.push(heading);
+  });
+
+  return headingList;
+};
+
+const remarkHeadings: Plugin<[], Root> = () => (tree, vfile) => {
+  // eslint-disable-next-line no-param-reassign
+  vfile.data.headings = getHeadings(tree);
+};
+
 /**
  * Calculates table of contents from page headings
  */

diff --git a/vitest.config.mts b/vitest.config.mts
@@ -16,10 +16,10 @@ export default defineConfig({
         '**/scripts/**'
       ],
       thresholds: {
-        branches: 25,
-        functions: 30,
-        lines: 30,
-        statements: 30
+        branches: 20,
+        functions: 20,
+        lines: 20,
+        statements: 20
       }
     },
     exclude: ['**/node_modules/**', '**/dist/.*\\.(ts|js)$']

diff --git a/vitest.workspace.mts b/vitest.workspace.mts
@@ -16,7 +16,7 @@ export default defineWorkspace([
       name: 'client',
       environment: 'jsdom',
       include: [
-        '**/{components,content-editor-plugin,site-components,sitemap-component,store}/**/__tests__/*.test.[j|t]s?(x)'
+        '**/{components,content-editor-plugin,site-components,sitemap-component,store}/**/__tests__/ReactLive.test.[j|t]s?(x)'
       ],
       setupFiles: ['./scripts/vitest/vitest.client.setup.mts'],
       alias: [

diff --git a/yarn.lock b/yarn.lock
@@ -3659,14 +3659,6 @@
   resolved "https://registry.yarnpkg.com/@vanilla-extract/sprinkles/-/sprinkles-1.5.1.tgz#3e226e99c597af8bfeafc8f76a7a720b210a29cf"
   integrity sha512-xPYpeEZEC1mhiPqWCBPGdIHkpFaaQIbaAfG9W2JyIW0byqTP7CoaxdYNMPjhZuoV5lkTI14SJg8Bt+fZqmV5yQ==
 
-"@vcarl/remark-headings@^0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@vcarl/remark-headings/-/remark-headings-0.1.0.tgz#b5831c3f16d8b2570872f554ba509437ec507a1e"
-  integrity sha512-ffQxJUcapJ9Bk+fiGN49YJ9RaYMibrSTSezB1Fcrtu+0YSZxA3bsaLlIv1u/4sjPIeW/BKrs4xtMT3l3P9Ba5Q==
-  dependencies:
-    mdast-util-to-string "^3.1.0"
-    unist-util-visit "^4.0.0"
-
 "@vitest/coverage-istanbul@^2.0.0":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@vitest/coverage-istanbul/-/coverage-istanbul-2.0.5.tgz#18a335813e1ad96b163c908cfa7af62dcf87c5b5"
@@ -8295,11 +8287,6 @@ mdast-util-to-markdown@^2.0.0:
     unist-util-visit "^5.0.0"
     zwitch "^2.0.0"
 
-mdast-util-to-string@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
-  integrity sha1-VsUG0GX792lRUjXld7WiYVUtVuk=
-
 mdast-util-to-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz#7a5121475556a04e7eddeb67b264aae79d312814"
@@ -12059,15 +12046,6 @@ unist-util-visit-parents@^6.0.0:
     "@types/unist" "^3.0.0"
     unist-util-is "^6.0.0"
 
-unist-util-visit@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.0.tgz#f41e407a9e94da31594e6b1c9811c51ab0b3d8f5"
-  integrity sha1-9B5Aep6U2jFZTmscmBHFGrCz2PU=
-  dependencies:
-    "@types/unist" "^2.0.0"
-    unist-util-is "^5.0.0"
-    unist-util-visit-parents "^5.0.0"
-
 unist-util-visit@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-5.0.0.tgz#a7de1f31f72ffd3519ea71814cccf5fd6a9217d6"