aeolun / react-diff-viewer-continued Goto Github PK

I am getting the below issue while installing this package, @Aeolun could you please help me here

npm ERR! 502 Bad Gateway - GET https://registry.npm.cmdjs.org/@emotion%2fcache
my
npm version: 8.11.0
node version: v16.15.1
react version: 16.13.1

Description
When the user try to view the diff in split mode, if the old code and new code have, some empty line, prism throws error for syntax highlighting

Step to reproduce

1. Use the Syntax Highlighting example
2. Add some empty lines in new code variable, in the beggining (These variables should contain string value)
3. Set split mode to true

Screenshot of error

Screenshot when split mode is false

Code sanbox

Link
Code sandbox example

I was wondering if we can extend the cababiliti to diff not just 2 things, but say more things
Concern i have, how much it would impact performance ?

First image is how it looks on my page and second is how it looks on your website. Why on my page diff is not on the same line

When attempting to add syntax highlighting, I encounter these errors:

Prism.highlight() interface now requires 3 args, not 2:

• the docs show __html: highlight(str, Prism.languages.javascript), however, it looks like the most recent interface has 3 args:
  
• easily resolved with __html: Prism.highlight(str, Prism.languages.javascript, 'javascript')

Prism.highlight() arg0 str undefined:

• passing a string directly to the highlight function arg0 (e.g. __html: Prism.highlight(oldCode, Prism.languages.javascript, 'javascript') but then this shows the oldCode on both sides of the splitView!

Any advice is appreciated!

packages:

"react": "18.2.0",
"react-diff-viewer-continued": "^3.2.3",
"prismjs": "^1.29.0",
"@types/prismjs": "^1.26.0",

Hello,
Is it possible to get sidebar with all content changes. Some demo HERE

Regards, Reinis

if any of the json file is not correct and fails in parsing then its not working and throwing error.
for example if we remove comma from old json and check it will give parse error.

Difference viewer should show all the differences not just parsed json

Just some thoughts:

• Making the UI responsive would allow a setting like view: responsive where it'd switch from split view to unified view depending on the resolution
• The split view not really being responsive makes sense given the space constraint on mobile devices, tho the unified view could use some CSS love, and maybe an option to hide the line numbers

We have very long lines without breaks and it causes the render to slide:

Is there any chance to limit the box and add word and lines wrap?
Example: https://saveourtool.com/vuln/collection/GHSA-xh5m-8qqp-c5x7 (tab: Changes)

This is definitely a useful library, but I would hope for improved HTML semantics.

• Table caption
  When rendering the table to display the diff, it would be beneficial to support or auto-generate a caption value. In practice this would probably be something like "Changes for [filename]". This way, those navigating with assistive technologies, accessibility trees or landmarks navigation can have greater context as to what the information is.

  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

• Deletions use <del> tag
  When showing document changes like this diff viewer, and showing deletions, it's more appropriate to use the <del> element. This creates a more accurate semantic experience and doesn't rely entirely on the visual UI to understand what content is being deleted.

  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del

• Insertions use <ins> tag
  Much like the previous <del> tag, when displaying insertions, the <ins> tag should be used. Again, this provides greater context to those who may browse with assistive technologies and /or accessibility trees. Using these semantic tags will ensure that the markup communicates as clearly as the UI design.

  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins

If i have json in the diff viewer, it shows the json properly, but new lines are rendered as "\n" instead of actual new lines

Issue:

renderContent is not able to render the markdown based content. I am using the MdPreview editor from md-editor-rt. When I am trying to render the markdown based code, its not able to manage the spaces properly and breaking the view by adding many '\n' between lines.

Reference Code

const MarkdownDiffViewer = ({ original, edited }) => {
    return (
      <div>
        <ReactDiffViewer
          newValue={edited}
          oldValue={original}
          splitView={true}
          leftTitle={version}
          rightTitle="latest"
          renderContent={(text) => (
            <MdPreview
              modelValue={text}
              language="en-US"
              previewTheme="github"
            />
          )}
        />
      </div>
    );
  };

<MarkdownDiffViewer
     edited={newcontent}
     original={oldcontent}
 />

Code is completely out of the code block. Is it supported to use markdown rendering using this tool ?

Actual output

@Aeolun Package styles are not visible after applying strict Content Security Policy in my project. I am also using createCache and Cacheprovider provided my emotion to add nonce.

The tagline of this project is, "A simple and beautiful text diff viewer component made with Diff and React."

I think it'd be beneficial to show that beauty right off the bat.

xml difference is also not working in provided library if we pass the xml files we are not able to view difference

I had to add the dependency explicitly and set to 3.2.6 to fix my builds. Not sure which package was using it though. Perhaps payload cms?

It'd be great if the library could provide a boolean option ignoreCase

See praneshr#151. This change should resolve peer dependency issues that may lead to build issues.

version：3.3.1

Hi Guys,

I have observed that setting extraLinesSurroundingDiff props to 0 hides the top skipped lines indicator.

Reproduction: https://stackblitz.com/edit/stackblitz-starters-wsteyt?file=src%2FApp.tsx

Is anybody know if performance improved compared to the original?

Upgrading to 4.0.0 generates error "TS2307: Cannot find module 'react-diff-viewer-continued' or its corresponding type declarations."

• in the node_modules folder the lib-folder is missing (is there in previous versions)
• on npm page the lib-folder is missing (is there in previous versions)

Seems it's shipping without source code.

CodeFold will be removed after first click.
I hope:

• codeFold can be folded and expanded;
• developers can customize it show and hide.

I tried to use the syntax highlighting exactly like the documentation suggests and when i do so (using the same sample code), the lines are getting the right CSS styles applied to each element in the html. however, the styles must be getting overridden somewhere because i see no actual syntax highlighting applied to the rendered content.

I tried using this in a NextJS ESM project, and the default import is not the default export, rather the module object.

My workaround probably does a better job at explaining the problem:

import diffViewerModule from "react-diff-viewer-continued"
const DiffViewer = diffViewerModule.default

I know that getting typescript and ESM to play nice can be a real PITA, but would it be possible to provide a build for ESM?
Esbuild can handle this, you could perhaps build lib/index.mjs and then put that in the module field in package.json.

I am currently trying to compare a texts from html documents, and the default compare functions are not working too well for this case. Is it possible to add the option of using custom compare functions? This should also help with other requests like case insensitive diffs: #26

I found a pull request on the original react-diff-viewer which should just allow us to do this:
https://github.com/praneshr/react-diff-viewer/pull/137/files

Will it be ok to add the changes from that commit? If it is then can I just create a pull request for that? I can also update the readme and provide examples on it. (Sorry for all these questions. This is my first time interacting with a public repo)

Hello,
I've been trying to make the diff-viewer highlight trailing spaces and newlines, but it does not seem to be able to do that.

I tried using different compareMethod values, DiffMethod.WORDS_WITH_SPACE seemed to be the right one. However, it did not do the job.

I also tried separately to use the the method from the diff package, and that managed to return the trailing characters.

Is it something that I am missing? Should I also use it alongside other relevant props?

Cheers!

Summary

I am running into an error when trying to use this library

import ReactDiffViewer from "react-diff-viewer-continued";

export const DiffExpandView = () => {
	return (
		<>
			<ReactDiffViewer
				oldValue={"sourceVersion"}
				newValue={"newVersion"}
				splitView={true}
				// linesOffset={5}
			/>
		</>
	);
}

Here is the error I get:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Context

I am working with a remix-react app.

Any idea how to fix this? This component would really fit my current needs so I would love to be able to use it

rn the component is really slow or even crashes when handling large texts.

i use it to compare network devices configurations and one of them is over 11.000 lines but i can't seem bo be able to render it nicely.

would be a nice enhancement adding the handling of such texts

Set oldValue to "\n\n", newValue to "", and the component will display as blank.

In splitview, a user will often want either to copy all the text of the left view, or all the text of the right view.
Unfortunately, contrary to e.g. Github diff, when we select text after a paragraph it begins to also select the other side of the splitview, which is undesired.
For example my app needs to show an old version and a new version of a SQL query. The user wants to select chunks or all of the previous query, or of the new one, not a mixed version of both..

How to fix the selection?
The html structure is mixed which seems to prevents a CSS solution for selection.

Would there be any way to get the delta of changes that we could display above or within the diff viewer? Such as number of deletions and number of insertions. We don't want to have to use a separate algorithm to calculate that and get out of sync with what the diff viewer is showing.