fix presentify before release

ErnestTeluk · May 6, 2023 · 9762741 · 9762741
1 parent add2623
commit 9762741
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 18 deletions.
diff --git a/packages/presentify/__tests__/Code.spec.tsx b/packages/presentify/__tests__/Code.spec.tsx
@@ -49,16 +49,24 @@ describe('Code', () => {
       '1',
     );
   });
-  it('should render correctly with highlightLines', () => {
+  it('should render correctly without highlightLines', () => {
     render(
-      <Code showLineNumbers highlightLines="1">
+      <Code showLineNumbers>
         <code className="language-js">const test = 'test';</code>
       </Code>,
     );
     expect(screen.getByTestId('code').children[0]).not.toHaveStyle(
       'opacity: 0.3;',
     );
   });
+  it('should render correctly with highlightLines', () => {
+    render(
+      <Code showLineNumbers highlightLines="0">
+        <code className="language-js">const test = 'test';</code>
+      </Code>,
+    );
+    expect(screen.getByTestId('code').children[0]).toHaveStyle('opacity: 0.3;');
+  });
   it('should render Fira Code correctly', () => {
     render(
       <PresentifyProvider options={{ useFiraCode: true }}>

diff --git a/packages/presentify/package.json b/packages/presentify/package.json
@@ -27,8 +27,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@types/react": "^18.0.0",
-    "react": "^18.0.0"
+    "@types/react": "^17.0.2",
+    "react": "^17.0.2"
   },
   "dependencies": {
     "@mdx-js/react": "2.3.0",

diff --git a/packages/presentify/src/components/Code.tsx b/packages/presentify/src/components/Code.tsx
@@ -1,11 +1,11 @@
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import React, { Key, ReactElement } from 'react';
+import React, { Key, ReactElement, useEffect, useRef, useState } from 'react';
 
 import { usePresentifyContext } from './PresentifyProvider';
 import { calculateLinesToHighlight } from '../lib/calculateLinesToHighlight';
 import { getLineNumberWidth } from '../lib/getLineNumberWidth';
 import { getTheme } from '../lib/getTheme';
-import { Line, LineNumber } from '../styles/Code.styled';
+import { Line, LineNumber, StyledPre } from '../styles/Code.styled';
 
 export const Code = ({
   children,
@@ -16,6 +16,8 @@ export const Code = ({
   showLineNumbers?: boolean;
   highlightLines?: string;
 }) => {
+  const [width, setWidth] = useState(0);
+  const ref = useRef<HTMLPreElement>(null);
   const context = usePresentifyContext();
   const { options } = context || {};
   const className = children.props.className || '';
@@ -24,6 +26,23 @@ export const Code = ({
   const lineWidth = getLineNumberWidth(code);
   const shouldHighlightLine = calculateLinesToHighlight(highlightLines);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setWidth(ref.current?.offsetWidth || 0);
+    };
+
+    // Initial measurement
+    handleResize();
+
+    // Add event listener on component mount
+    window.addEventListener('resize', handleResize);
+
+    // Clean up event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
     <Highlight
       {...defaultProps}
@@ -32,13 +51,10 @@ export const Code = ({
       theme={getTheme(options?.theme)}
     >
       {({ tokens, getLineProps, getTokenProps }) => (
-        <pre
-          data-testid="code"
-          className={className}
-          style={{ width: '100vw', padding: '20px' }}
-        >
+        <StyledPre data-testid="code" className={className} ref={ref}>
           {tokens.map((line, i: number) => (
             <Line
+              elementWidth={width}
               useFiraCode={options?.useFiraCode}
               key={i}
               {...getLineProps({ line, key: i })}
@@ -52,7 +68,7 @@ export const Code = ({
               ))}
             </Line>
           ))}
-        </pre>
+        </StyledPre>
       )}
     </Highlight>
   );

diff --git a/packages/presentify/src/hooks/useQueryParams.tsx b/packages/presentify/src/hooks/useQueryParams.tsx
@@ -6,12 +6,11 @@ export const useQueryParams = () => {
   const getParams = (name: string) => searchParams.get(name);
 
   const setParams = (name: string, value: string) => {
+    searchParams.set(name, value);
     window.history.pushState(
       undefined,
       '',
-      `${window.location
-        .toString()
-        .replace(window.location.search, '')}?${name}=${value}`,
+      `${window.location.pathname}?${searchParams.toString()}`,
     );
   };
 

diff --git a/packages/presentify/src/styles/Code.styled.ts b/packages/presentify/src/styles/Code.styled.ts
@@ -9,9 +9,15 @@ export const LineNumber = styled.span<{ lineWidth: number }>`
 export const Line = styled.div<{
   isHighlight: boolean;
   useFiraCode?: boolean;
+  elementWidth: number;
 }>`
   ${({ isHighlight }) => (isHighlight ? '' : 'opacity: 0.3')};
-  font-size: calc((100vw - 40px) / 50);
-  ${({ useFiraCode }) =>
-    useFiraCode ? 'font-family: Fira Code, monospace;' : ''};
+  font-size: ${({ elementWidth }) => `calc((${elementWidth}px - 40px) / 50);`}
+    ${({ useFiraCode }) =>
+      useFiraCode ? 'font-family: Fira Code, monospace;' : ''};
+`;
+
+export const StyledPre = styled.pre`
+  width: 100%;
+  padding: 20px;
 `;