josdejong / svelte-jsoneditor

A web-based tool to view, edit, format, repair, query, transform, and validate JSON
https://jsoneditoronline.org
Other
820 stars 108 forks source link

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

Open 1pone opened 1 year ago

1pone commented 1 year ago

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 commented 1 year ago

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?

monsieur-ricky commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

josdejong commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Appreciated!