✨ 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]

Hello! 👋

This issue has been automatically marked as stale due to inactivity 😴

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 ❤️

[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!