Jsoneditor: Progress on version `next`

[josdejong]

I'm working on a completely new version of the JSONEditor. The current code base is hard to maintain and expand, and is too limited qua customization. This new version aims at making the editor extendable (i.e. customize the action menu, custom modes, etc). The new editor will have good support for synchronizing changes with other editors or with a backend via JSON-Patch actions.

Try it out now

The new editor is being built in the next branch. To try it out:

• clone the project: git clone https://github.com/josdejong/jsoneditor.git
• go to the project directory: cd jsoneditor
• check out the next branch with git: git checkout next
• install dependencies: npm install
• build the library: npm run build

All examples in the examples folder are basically working and be tried out.

Progress of version next

• [x] Set up structure for the new editor, using react or preact
• [x] Implement a new data model (works with JSON-Patch to apply changes)
• [x] Implement method patch and an onChange listener using JSON-Patch
• [x] Implement modes Tree, Form, View
• [x] Implement modes Text and Code (the latter integrating Ace)
• [x] Implement mode switcher and API
• [x] Integrate jsonlint and handle errors nicely
• [x] Implement configurable readonly properties and values
• [x] Implement history, undo, redo
• [x] Implement JSONSchema
• [x] Implement search
• [x] Implement customizable quick keys
• [ ] Implement drag and drop of items
• [ ] Implement checkbox for booleans
• [ ] Implement select box for enums (when using JSONSchema)
• [ ] Implement patchText and onTextChange when in modes Text or Code
• [ ] Expose an API for React
• [ ] A bunch of small fixes, refactorings, and performance improvements

Extra

• [ ] Implement hooks to customize the main menu
• [ ] Implement hooks to customize the action menu
• [ ] Implement hooks to customize how values are rendered (i.e. like show a checkbox for boolean values, select box for enums, etc)
• [ ] Implement API to register new modes
• [ ] Implement a more advanced Repair button than the current one that's implicitely executed when clicking format/compact in text mode. Should turn JS data into JSON, and help you to repair JSON-like data with a comma missing somewhere or things like that.

[hassankhan]

Would it be possible to rewrite styles in SCSS for v6? Happy to help with a PR if so 😄

[josdejong]

Thanks for your offer @hassankhan. The styles are now in less though sass seems to be more popular lately. I'm ok with switching to sass, thanks beforehand!

One other thing that I've been wanting to do for a long time is replace the png sprite with icons with an icon font or else SVG's. Is that something you could help with too?

[hassankhan]

Hi! I'd checked the next branch and saw the LESS files, that's why I thought I'd ask 😄

And yes, switching to icon fonts/SVGs would be great and should be totally doable. Is there a font-pack you have in mind?

[josdejong]

I haven't looked into what solutions there are out there to create an icon font, do you have a proposal? I think it would be nicest to have an icon font and not SVG's since it's so easy to style the colors using css buy maybe there are other pros/cons to choose one or the other. What are your thoughts in this regard?

[hassankhan]

Personally, I'm a fan of Font Awesome, but I do realize people may have their own preferences. How I would go about solving that is by providing variables for the font icon path as well as for each individual icon:

$icon-font-path: '';
$icon-open : ''; 

[josdejong]

Yes, making the icons customizable is a good idea.

I like Font Awesome too but we can't just use it since it doesn't contain all the icons we need, so we have to create an icon font our selves. I know there are tools to do this but I haven't yet looked into what it would take and what the options and limitations are.

[epoberezkin]

Didn't manage to run it yet, it shows:
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/.../jsoneditor"

[epoberezkin]

@josdejong I can suggest two things, not sure if they are included in this plan:

• JSON schema draft 6 (should be published soon, ajv 5.0.1-beta already supports it
• I was missing [optional] synchronisation between JSON view and tree view (you have to click the button to synchronise the content). I've just done json-source-map for a different purpose, but it can also be used to synchronise navigation (i.e. when you click the node in the tree some area in JSON gets selected, and vice versa).

[josdejong]

Thanks for giving it a try @epoberezkin .

I'm not sure how I can reproduce your es2015 related issue. I've done a clean install and things work ok here (and detailed the installation steps described on top a bit). How can I reproduce this build issue?

The general plan is simply to always stay up to date with the latest version of ajv, and leave it up to ajv to stay up to date with the latest JSON schema drafts :)

The editor now supports JSON Patch to synchronize contents (see example), which finally allows synchronization. Synchronizing navigation between two panels is an interesting idea, I haven't really thought about that option so far.
The reason the synchronization in the web application is not automatic is that you can always synchronize from the TreeView to the CodeView, but not vice versa since while you type, the contents of the editor is temporarily invalid JSON. Would be cool though to get that working somehow with a JSON parser which can parse partially invalid JSON or something.

[epoberezkin]

I'm not sure how I can reproduce your es2015 related issue. I've done a clean install and things work ok here (and detailed the installation steps described on top a bit). How can I reproduce this build issue?

Not sure what I've done wrong... It's all working now, sorry.

The reason the synchronization in the web application is not automatic is that you can always synchronize from the TreeView to the CodeView, but not vice versa since while you type, the contents of the editor is temporarily invalid JSON

It could attempt parsing and sync as soon as it is valid. Anyway, just an idea.

Thank you.

[josdejong]

:+1: thanks for the suggestions

[safaorhan]

Some feature requests:

• JSONEditor.getErrors() / hasErrors(): since exceptions in get() only work in code and text modes.
• JSONEditor.expand(node)
  node may have the form: data.users[0].friends
• options to remove expand/collapse buttons and search box. (currently styling includes lot's of display: none; )

[josdejong]

Thanks for the suggestions @safaorhan, makes sense indeed.

[walkerrandolphsmith]

Is there a mechanism in place to break this down into stories so I know how to help? I'd love to help make this happen, but don't know exactly what needs to be done.

[josdejong]

Thanks for your offer Walker, help with ~v6~ next would be very welcome! It basically means implementing the unchecked check-marks under "Progress of version next" in the first comment.

I've created separate issues for each of these features, labeled next:

https://github.com/josdejong/jsoneditor/issues?q=is%3Aopen+is%3Aissue+label%3Anext

Is there an issue that you would like to pick up? The easiest one to get going with next is probably #390 (checkboxes for booleans). The most important hurdle to take is #388 (drag and drop), but that may be the hardest too (not sure though). We can continue any in-depth discussions in the issues themselves.

[rabbishuki]

Hi @josdejong

First of all, Thank you for this amazing library. it is literally saving me days of work.

Is version 6 ready for prod? or are there things I need to worry about.
And if not, is there a waiting list where you will let us know when it is ready?

Also a feature that I would want, but don't see it mentioned yet is to have a color type. I.E if the string entered is a color, display a small box with that color next to it.
A big plus if that could open as a color picker.

Thanks for the hard work.

[josdejong]

Thanks @rabbishuki .

The next version is far from ready but progressing steadily. I think you can simply follow this topic (#337) to know when it's ready. It's all done in spare time though so it takes time.

Interesting idea on the color picker, can you open a separate issue for that? (else I think that we will forget about it)

[wilddylan]

round large number like (100000000000600) to (1000000000000585)

fix that?

[josdejong]

@wilddylan that's still an open issue (see #231)

[wilddylan]

@wilddylan that's still an open issue (see #231)

do u have some ideas about fix that?

[josdejong]

Yes, see https://github.com/josdejong/jsoneditor/issues/231#issuecomment-262900954