🐛 Bug: Unintentional behaviour of the code snippet section

[AgniveshChaubey]

Schema code snippet

When copying the schema using the copy to clipboard button, the title of that section in the top right corner changes to data (from schema) for a moment. I'm not sure if it is intentional, but it should not change I guess.

After copying:

---

Instance code snippet

When copying the instance using the copy to clipboard button, the bottom row showing the validation result disappears for a moment, which also should not happen.

After copying:

Expected Behavior

1. schema should not change to data when copying the schema snippet.
2. The bottom row should not disappear when copying the Instance snippet.

[DhairyaMajmudar]

If approved , I would like to take this up.

[benjagm]

Thanks Agnivesh!! @DhairyaMajmudar please go ahead.

[DhairyaMajmudar]

@benjagm @AgniveshChaubey I think the schema changing to data is an intentional behavior since while analysing the code file I found that both of them are wrapped in a ternary conditional block depending on variable isJsonSchema

Pls. give your views on this.

[benjagm]

I think the label should stay consistent after copying data.

[AgniveshChaubey]

I think the schema changing to data is an intentional behavior since while analysing the code file I found that both of them are wrapped in a ternary conditional block depending on variable isJsonSchema

I haven't gone through the codebase of the website, but when quickly looking at the file you mentioned, it seems that this ternary operator is to check whether the snippet is a JSON Schema or a JSON data

          <div className='flex flex-row items-center text-white h-6 font-sans bg-white/20 text-xs px-3 rounded-bl-lg font-semibold'>
            {isJsonSchema ? (
              <>
                <img src='/logo-white.svg' className='h-4 mr-1.5' /> schema
              </>
            ) : (
              <>data</>
            )}
          </div>

Edit:
And when it is JSON Schema render

              <>
                <img src='/logo-white.svg' className='h-4 mr-1.5' /> schema
              </>

and when it is JSON data, render

<>data</>

[benjagm]

Dhairya are you working on this?

[DhairyaMajmudar]

Yes I am trying to find its solution its taking time because its very anomalous , sometime the bug appears and sometimes not.

[DarhkVoyd]

@DhairyaMajmudar I am not sure but I believe it has something to do with how we are implementing the copy to clipboard component. Currently, instead of being a separate component with its own state, we are setting the copied state on the entire JsonEditor component due to which after each copy the Json Editor is caused to re-render again and again multiple times simply due to a copy event. Since, its somewhat heavy component with calculations, react would schedule updates and they would be async and in no particular order in some cases the state change would re-render but the data might not be ready and therefore it breaks to dynamically assert if the data is schema in some renders and valid or invalid in others, causing these errors.

We should probably refactor the component to move the state from the root JsonEditor component even if that doesn't solve the issue for a better state management and efficient component.

[benjagm]

Thanks everyone! Great inputs here. I think the path forward is creating a new issue to review and refine the current code editor strategy. To do it more consistently.

[benjagm]

I am putting this on hold in favour of #560