With wrapLongLines and showLineNumbers both enabled, if we copy some code, all code formatting, spaces, styles etc. is lost

[SatyamKr07]

Describe the bug
With wrapLongLines and showLineNumbers both enabled, if we copy some code, all code formatting, spaces, stykes etc. are lost
To Reproduce
Steps to reproduce the behavior:

1. Go to ' https://codesandbox.io/s/react-syntax-highlighter-forked-y7kqj?file=/src/index.js '
2. Copy few lines of code ( select code and ctrl+c)
3. Paste it in a code editor like vscode
4. See that all code formatting, spaces, styles etc. are lost

Note: the above mentioned issue doesn't occur if we set showLineNumbers={false}

Expected behavior
code formatting, spaces, styles etc. should be preserved on pasting it in any code editor

Desktop (please complete the following information):

• OS: [ windows 10 ]
• Browser [e.g. chrome ]
• Version [ chrome Version 94.0.4606.81 (Official Build) (64-bit)]

[PKXZ]

I also encountered this problem. Is there a solution

[krishnamvb]

We also have the same issue.
However, using - wrapLongLines={false}, showLineNumbers={false} is not hiding line numbers as well.

Usage:
<SyntaxHighlighter
style={vscDarkPlus}
language={text.language}
wrapLines={true}
wrapLongLines={false}
showLineNumbers={false}
customStyle={{
margin: '0.5em 0',
borderRadius: '0.3em',
background: '#1e1e1e',
}}
>

[dmontagu]

I also ran into this. I traced the issue down to:

react-syntax-highlighter/src/highlight.js

Lines 119 to 121 in b0d7714

	if (wrapLongLines & showLineNumbers) {
	properties.style = { ...properties.style, display: 'flex' };
	}

I'm not sure why this code is necessary; for me, if I just remove it, everything behaves correctly in my app while using these settings together.

Specifically, I'm using the following diff with patch-package:
<project_root>/patches/react-syntax-highlighter+15.5.0.patch:

diff --git a/node_modules/react-syntax-highlighter/dist/cjs/highlight.js b/node_modules/react-syntax-highlighter/dist/cjs/highlight.js
index 31ad1d4..7adfd33 100644
--- a/node_modules/react-syntax-highlighter/dist/cjs/highlight.js
+++ b/node_modules/react-syntax-highlighter/dist/cjs/highlight.js
@@ -122,12 +122,6 @@ function createLineElement(_ref3) {
     children.unshift(getInlineLineNumber(lineNumber, inlineLineNumberStyle));
   }
 
-  if (wrapLongLines & showLineNumbers) {
-    properties.style = _objectSpread(_objectSpread({}, properties.style), {}, {
-      display: 'flex'
-    });
-  }
-
   return {
     type: 'element',
     tagName: 'span',
diff --git a/node_modules/react-syntax-highlighter/dist/esm/highlight.js b/node_modules/react-syntax-highlighter/dist/esm/highlight.js
index 8e78a19..be8c674 100644
--- a/node_modules/react-syntax-highlighter/dist/esm/highlight.js
+++ b/node_modules/react-syntax-highlighter/dist/esm/highlight.js
@@ -107,12 +107,6 @@ function createLineElement(_ref3) {
     children.unshift(getInlineLineNumber(lineNumber, inlineLineNumberStyle));
   }
 
-  if (wrapLongLines & showLineNumbers) {
-    properties.style = _objectSpread(_objectSpread({}, properties.style), {}, {
-      display: 'flex'
-    });
-  }
-
   return {
     type: 'element',
     tagName: 'span',
diff --git a/node_modules/react-syntax-highlighter/src/highlight.js b/node_modules/react-syntax-highlighter/src/highlight.js
index e84eb3a..39f7a43 100644
--- a/node_modules/react-syntax-highlighter/src/highlight.js
+++ b/node_modules/react-syntax-highlighter/src/highlight.js
@@ -116,10 +116,6 @@ function createLineElement({
     children.unshift(getInlineLineNumber(lineNumber, inlineLineNumberStyle));
   }
 
-  if (wrapLongLines & showLineNumbers) {
-    properties.style = { ...properties.style, display: 'flex' };
-  }
-
   return {
     type: 'element',
     tagName: 'span',

If anyone wants to open a PR with this feel free, I tried to build/run tests/etc. but it didn't work with my currently installed version of nodejs, and I didn't have time to look into it further now.