react-json-editor-ajrm migration

[AndrewRedican]

Hi all,

As you may know, the react-json-editor-ajrm project will eventually be deprecated. The tentative date for this is June 15, 2023. I would like to thank those who used it in their projects. I simply no longer wish to maintain this project. It was made in the early days of my software engineer career, and it has not caught up to today's standards.

But don't fret. I intend to breathe new life into this project rewriting it from the ground up.

I would like to take the learnings of the past, and avoid some of the issues react-json-editor-ajrm currently has. I would also like to highlight the things done well, and I wish to carry on.

Pros

• The algorithm that analyses the data, particularly how it decides what is the most probable mistake when there is a syntax issue does the job very well.
• l18n support is comprehensive. I would like to make it easier to add even more support in the future.

Cons

• The algorithm itself is not fully respective to the JSON specification.
• There is a limit to the amount of information that can be displayed on the front end. To avoid running out of memory or saturating the UI thread, it could have used techniques like web workers, lazy/infinite/virtual rendering.
• It is not written in TypeScript. This project could benefit from type safety.
• The original project was in dire need for code contributed and active maintainers. The setup we have in enio will encourage automation.

Limitations

• Currently, this editor is supported on React mainly, I'd like to create an API that is freemarker agnostic - so that it maximizes the scope of where the project can be used. I believe the community will provide some wrappers organically, to work with other frameworks.
• Besides making the framework agnostic it like to ship both an npm package and a browser-ready version that can be used as is; this will allow certain old-school frontend projects to simply load the code through a fetch request or simple script tag that points to a CDN.
• The project should be written in a way that is composable, to encourage the creation of plugins and add-ons by the community.

Feedback collected from PRs and Issues Raised on react-json-editor-ajrm

I forced myself to read every pending issue and PR from the previous project. My god, the code was riddled with bugs and unhandled scenarios. I do intend to avoid these issues in the future by making note of them here. Here is a comprehensive, deduplicated list of issues and/or feature requests.

Category	Short Description	Links
Content Render	Collapsable Arrays	#232
Content Render	Option to keep wrong format	#114
Content Render	Trailing Commas	#104
Content Render	Adjustable Row Height	#8
Content Render	Escaped Html Symbols	#206
Content Render	Backlash and Quotes	#195
Content Render	Accept misshapen content	#167
Content Render	Persist Caret Position	#155
Content Render	Pure Strings Wrap	#145
Content Render	Html in String	#113
Content Render	New Line in String	#111
Error Message	Optional Line Detail	#208
UI	Autofocus Support	#115
UI	Autosize, Resize Support	#106
UI	Ctrl + Z Support	#102
UI	Pasting with Selection	#5
Locale	Improve JP messages	#108
API	Ajv Support	#154
API	Reset not to trigger event callback	#85
API	UI components split up to make solution composable	#74
Specs	Negative numbers	#221
Specs	E-notation	#153
Specs	BigInt	#138
Specs	Quote Wrapping	#118
Specs	Unformatted JSON	#89
Windows	Pasting Content	#207

[nateplusplus]

@AndrewRedican there's some feedback on another GitHub project about single quotes not technically being proper JSON format. It looks like even if double-quotes are passed in, single quotes are rendered in the JSON viewer. I'm not sure if that is already included on your list but you may want to include it as an option.

For example:

// single-quote output of react-json-editor-ajrm will fail many JSON validators
{
    'name': 'James Bond'
}

// double-quoted JSON standard would resolve this
{
    "name": "James Bond"
}

[PupoSDC]

Hello!

I just found out this library, and would like to use it for a new project bu I'm a bit confused with it's current state. I see the main repository is already closed and deprecated.... but I can't find the promised replacement?

Is this project discontinued?

Thanks !!

[tulika3]

Hello @AndrewRedican

We are using this library in our project. It was working fine till now, from past two days we are facing issue for latest version of chrome Version 117.0.5938.150 (Official Build) (64-bit). When we are pasting any JSON in JSONInput , it is pasting the object multiple time. Can you please resolve this browser incompatibility or let us know how to resolve it.

It is urgent.

Thanks!!

[joshkarges]

We're running into the same issue. Have you found a solution?

When it inadvertently pastes multiple times it puts a } next to a { symbol which crashes the code here because there's a bug where it's indexing by the boolean found instead of the integer i:
https://github.com/AndrewRedican/react-json-editor-ajrm/blob/master/src/index.js#L1103

[ndamania00]

Hey, wondering if there is an update to this thread about the status of this project. Thanks!

[Baxa1997]

Hello, I would be very grateful if you can recommend me anything for my case, When I copy and paste the json code, it does not parse it, and throws an error:
react-json-editor-ajrm.js?v=3a6b8f20:2315 Uncaught TypeError: Cannot read properties of undefined (reading 'string')
at JSONInput.tokenize (react-json-editor-ajrm.js?v=3a6b8f20:2315:60)
at JSONInput.update (react-json-editor-ajrm.js?v=3a6b8f20:1597:52)
at JSONInput.scheduledUpdate (react-json-editor-ajrm.js?v=3a6b8f20:1632:10)

my Json:
{

"name": "John",
"age": 30,
"city": "New York",
"isStudent": true,
"grades": [95, 87, 92],
"address": {
"street": "123 Main St",
"zipcode": "10001"
}
}

[heribertolord96]

The editor works well when pasting the json objects, in these formats:

{
 "name": "James Bond"
}

{
 name: "James Bond"
}

{
 name: 'James Bond'
}

.
A problem that occurs is that, when evaluating the json object, the cursor is relocated, and this can cause editing problems, since it is usually sent to the first line.
A possible solution is to use the waitAfterKeyPress property
Thus, the evaluation of the object is delayed a little and we can write a little more. But, it is important to be aware of that, because the cursor is repositioned, and you have to manually move it to the position where you have to write.