✨ Enhancement: Review the implementation of the JSON editor to better management of state/style

[benjagm]

Is your feature request related to a problem? Please describe

Related: #417

As of now we are using 2 different code editors: 1 JSON and JSON Schema (json editor) and another for the rest of languages based on react-syntax-highlighter library.

This is providing an inconsistent experience in terms of formatting but also in terms of features. Ideally we'll use one single document that provides:

• Consistent formating/color/linting
• Availability of copy/pasting
• In cases of JSON and availability to add labels to express that is a valid JSON. See:

Describe the solution you'd like

Use or extend a code editor or improve the current implementation using 2 different editors.

Use only the react-syntax-highlighter and explore how to better do the customizations required:

• Lang labels for JSON and JSON Schema.
• Copy paste button.
• line number
• line highlight
• For json instances availability to highlight if is a valid instance, like the previous custom instance.

For copy paste see: https://www.bojanjagetic.com/post/react-syntaxhighlighter-copy-clipboard

For line numbers and line highlight see https://www.dhiwise.com/post/crafting-beautiful-code-blocks-with-react-syntax-highlighter

Describe alternatives you've considered

No response

Additional context

No response

Are you working on this?

No

[Adity20]

Shall I continue working on this @benjagm as I have the idea of code components

[AdityaSingh-02]

Heyy @benjagm Can I work on this??

[akkshitgupta]

I totally agree with you @benjagm to improve or extend the code editor, however, we can go with next-mdx-remote npm package that can handle rendering of mdx, formatting of any valid language or syntax on the client side. It provides a great User and Developer experience. very nicely go with NextJs as well :)

[Adity20]

Hello @akkshitgupta I tried using that but somehow it wasn't supporting some styles which needed to be applied to the rendered code. But can give it one more chance 👍

[benjagm]

This is a big feature to be developed. Are you sure @Adity20 ?

[Adity20]

Maybe me and @AdityaSingh-02 can work together on this one if he is okay as he also worked on one issue related to this. So that we can complete this task a bit early

[benjagm]

It will be fine for me if at least to make an analysis and a proposal, even thought you don't implement it

[Adity20]

Okay, then I'll make a plan and will present it to you soon.

[AdityaSingh-02]

Yup we can work together on this @Adity20

[DarhkVoyd]

Just checking back in on this issue. Is anyone actively working to resolve this issue?

[Adity20]

Yes

[benjagm]

Hi everyone! There has been no updates for the last 3 months and this is an important feature. Therefore i am going to make this issue available for other contributors.

Thanks a lot for your efforts!

[benjagm]

I just updated the description of the issue suggesting to focus all the solutions on using the same library we use for the standard code editor: react-syntax-highlighter

[github-actions[bot]]

Hello! :wave:

This issue has been automatically marked as stale due to inactivity :sleeping:

It will be closed in 180 days if no further activity occurs. To keep it active, please add a comment with more details.

There can be many reasons why a specific issue has no activity. The most probable cause is a lack of time, not a lack of interest.

Let us figure out together how to push this issue forward. Connect with us through our slack channel : https://json-schema.org/slack

Thank you for your patience :heart:

[jayprakash25]

Hi @benjagm . Can I start working on this issue?

[29deepanshutyagi]

hi , i want to work on this issue , kindly assign me , if it open to contribute , @benjagm

[jagpreetrahi]

Hey @DhairyaMajmudar, I’d love the opportunity to work on this issue. Please let me know if I can contribute!

[Karan-Palan]

It will be fine for me if at least to make an analysis and a proposal, even thought you don't implement it

I created a document where I have stated my approach @benjagm and @DhairyaMajmudar here - https://gist.github.com/Karan-Palan/073f23767c77c2040e9694345d194572

I believe I can solve this issue as I am familiar with codes for both StyledMarkdown which uses react-syntax-highlight and JsonEditor.

I would like some suggestions that could better my proposal and help me solve this issue.

Thanks!

[Karan-Palan]

I created a document where I have stated my approach @benjagm and @DhairyaMajmudar here - https://gist.github.com/Karan-Palan/073f23767c77c2040e9694345d194572

@DhairyaMajmudar @benjagm , it'd be great if I could get any feedback on this !

[benjagm]

Hi Karan. If you can find a way to unify the editors that would be great. Remember that we have another label at the bottom to express that is a valid JSON Schema instance.

Do you like to work on this?

[Karan-Palan]

Thanks for your response @benjagm ! I’d like to work on unifying the editors while ensuring that all necessary features, including the validation label at the bottom, remain intact. I'll start by setting up a proof of concept for the unified editor.

[benjagm]

Go ahead. Good luck!

[DhairyaMajmudar]

@Karan-Palan updates on this? Do you need any help?

[Karan-Palan]

@DhairyaMajmudar , I got caught up with exams, however I've started the work and will raise a draft PR in 2-3 days and keep you updated if I need any help!

[Karan-Palan]

An update on this issue:

• Used react-syntax-highlighter instead of slate in JsonEditor.tsx
• Stopped re-rendering by adding the copy state inside a memo

https://github.com/user-attachments/assets/3608f9a9-f219-4636-b8e2-aca202f7a303

I am currently finding figuring out how to some highlight features from /lib and have the same colors that we had whilst using slate . Also some schemas in Drafts have unusual behavior, fixing that

Update: Discussed this issue with Benja in the meeting, it is currently on hold right now till the component library project is started, will collaborate with the contributor