Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot distinguish between number and string when they are equal in compare mode #270

Open
1pone opened this issue May 9, 2023 · 7 comments
Labels
enhancement New feature or request webapp

Comments

@1pone
Copy link
Contributor

1pone commented May 9, 2023

In text mode, you can distinguish field types by quotes and colors, but in compare mode, quotes and colors disappear, so when the compared fields are of different types but have the same literal size, the two cannot be distinguished.

hope to provide a configuration to show the text color or quotes to distinguish the type in compare mode as well

image

image

@josdejong
Copy link
Owner

Thanks for reporting, that is an interesting case indeed. Right now all text is black (or white) when highlighted as a difference, because with colored text it became a bit of a color-circus with some colors having a bad contrast.

Maybe we can come up with an other way to show what the difference is, like showing an icon with explanatory text like "this item is removed in the right panel", and "the value in the left panel is a number, and in the right panel is a string".

Showing text quotes is also an idea. Always showing quotes would make the editor look quite crowdy. So indeed maybe only when highlighted as a difference 🤔 .

Other ideas?

@josdejong josdejong added enhancement New feature or request webapp labels May 9, 2023
@monsieur-ricky
Copy link

I'm trying out JSON Editor with the vanilla-jsoneditor version, but I'm unable to activate the compare mode. How can I accomplish that?

I'm using the following code sample provided in the documentation:

    let content = {
      text: undefined,
      json: {
        greeting: 'Hello World'
      }
    };

    const editor = new JSONEditor({
      target: document.getElementById('jsoneditor'),
      props: {
        content,
        onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
          // content is an object { json: JSONValue } | { text: string }
          console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult });
          content = updatedContent;
        }
      }
    });

This is what is rendered:
image

@josdejong
Copy link
Owner

Comparing two JSON documents is not part of this open-source library (svelte-jsoneditor and vanilla-jsoneditor), it's part of the web application https://jsoneditoronline.org which is not open-source.

@monsieur-ricky
Copy link

Hey @josdejong, thanks for the quick response.
Is there a commercial version of the web application?

@josdejong
Copy link
Owner

No there isn't, sorry. I'm trying to make a living out of my open-source projects though, amongst others with this web application. Any support for this library and the web application is welcome.

@monsieur-ricky
Copy link

Thanks for the clarifications. If we decide to go with this package for our project, I'll be more than happy to support this library :)

@josdejong
Copy link
Owner

Appreciated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request webapp
Projects
None yet
Development

No branches or pull requests

3 participants