added nonce support (#24)

Aeolun · Jun 19, 2023 · 8b5c579 · 8b5c579
1 parent a9d6112
commit 8b5c579
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -66,6 +66,8 @@ export interface ReactDiffViewerProps {
   leftTitle?: string | JSX.Element;
   // Title for left column
   rightTitle?: string | JSX.Element;
+  	// Nonce
+	nonce?: string;
 }
 
 export interface ReactDiffViewerState {
@@ -92,6 +94,7 @@ class DiffViewer extends React.Component<
     showDiffOnly: true,
     useDarkTheme: false,
     linesOffset: 0,
+    nonce: '',
   };
 
   public static propTypes = {
@@ -111,6 +114,7 @@ class DiffViewer extends React.Component<
     leftTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     rightTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     linesOffset: PropTypes.number,
+    nonce: PropTypes.string,
   };
 
   public constructor(props: ReactDiffViewerProps) {
@@ -157,6 +161,7 @@ class DiffViewer extends React.Component<
   private computeStyles: (
     styles: ReactDiffViewerStylesOverride,
     useDarkTheme: boolean,
+    nonce: string,
   ) => ReactDiffViewerStyles = memoize(computeStyles);
 
   /**
@@ -580,6 +585,7 @@ class DiffViewer extends React.Component<
       rightTitle,
       splitView,
       hideLineNumbers,
+      nonce,
     } = this.props;
 
     if (this.props.compareMethod !== DiffMethod.JSON) {
@@ -588,7 +594,7 @@ class DiffViewer extends React.Component<
       }
     }
 
-    this.styles = this.computeStyles(this.props.styles, useDarkTheme);
+    this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
     const nodes = this.renderDiff();
     const colSpanOnSplitView = hideLineNumbers ? 2 : 3;
     const colSpanOnInlineView = hideLineNumbers ? 2 : 4;

diff --git a/src/styles.ts b/src/styles.ts
@@ -1,4 +1,5 @@
-import { css, CSSInterpolation, cx } from '@emotion/css';
+import { CSSInterpolation } from '@emotion/css';
+import createEmotion from '@emotion/css/create-instance';
 
 export interface ReactDiffViewerStyles {
   diffContainer?: string;
@@ -85,6 +86,7 @@ export interface ReactDiffViewerStylesOverride {
 export default (
   styleOverride: ReactDiffViewerStylesOverride,
   useDarkTheme = false,
+  nonce = '',
 ): ReactDiffViewerStyles => {
   const { variables: overrideVariables = {}, ...styles } = styleOverride;
 
@@ -153,6 +155,8 @@ export default (
 
   const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
 
+  const { css, cx } = createEmotion({ key: 'react-diff', nonce });
+
   const content = css({
     width: '100%',
     label: 'content',