vankop / jsoneditor-react Goto Github PK
View Code? Open in Web Editor NEWreact wrapper implementation for https://github.com/josdejong/jsoneditor
License: MIT License
react wrapper implementation for https://github.com/josdejong/jsoneditor
License: MIT License
Object.values() doesn't work for some browsers.
When I type npm install --save jsoneditor jsoneditor-react
, this is what happen:
git:(master) ✗ npm install --save jsoneditor jsoneditor-react npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: unops_frontend@undefined npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.2.0" from [email protected] npm ERR! node_modules/jsoneditor-react npm ERR! jsoneditor-react@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution
Sorry, I'm not sure where else to ask this. I'm just having difficulty trying to figure out how to call expandAll / collapseAll on the component. Any advice would be appreciated.
If this is compatible with React 17, is it possible to update the peer dependency. Otherwise npm i fails with latest npm.
I noticed auto-complete is supported in the original jsoneditor. Is there a way to enable it or plans to enable it in the react-wrapper?
Hi,
I'm really liking your work and use it in one of my projects. In "josdejong/jsoneditor" you can apply an custom function to onEvent. Unfortunately in your reimplementation this feature is skipped. Since you already implemented the onChange event, could you also implement the onEvent event?
Here is the example from the official jsoneditor repo: https://github.com/josdejong/jsoneditor/blob/master/examples/17_on_event_api.html
I couldn't get the ace editor to load. Then I ran into a CodeSandbox (https://codesandbox.io/s/8wp9w?file=/src/App.js:2337-2557), and figured the property "mode" needs to be assigned to "code". Kindly add that to your documentation?
passing ace parameter disables scrolling with mouse wheel.
(trackpad scrolling works well - macbook macos 10.15.7)
<JsonEditor ... **ace={ace}**/>
Editor without ace parameter is mouse-wheel scrollable.
I don't think this is an intended feature.
Hello, is there any options to use this package with typescript? Original jsoneditor has typescript definitions in DefinetelyTyped. Would be glad any recommendations for usage with typescript:) thanks
Please, clear the variable this.err
at the function handleChange
before the line:
jsoneditor-react/src/Editor.jsx
Line 176 in 8c05a8b
With it, I can just check the err variable at the editor to check if there is an error at the JSON
JsonEditor.prototype.shouldComponentUpdate = function shouldComponentUpdate(_ref2) { var htmlElementProps = _ref2.htmlElementProps; return htmlElementProps !== this.props.htmlElementProps; };
In this function you compare with !== the new (yet to be applied) and the old (current) htmlElementProps.
In the docs you specify
* @property {object} [htmlElementProps] - html element custom props
but if htmlElementProps
is an object than the comparison above will always return true, since you are comparing two distinct objects and for example, '{a: 1} !== {a: 1}' gives true.
Shouldn't you have a shallow comparison here? like suggested in https://reactjs.org/docs/shallow-compare.html and in particular
When trying to run Jest tests under create react app with yarn test
I get the following error:
● Test suite failed to run
/projects/project/node_modules/jsoneditor-react/es/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React, { Component } from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
2 | import { Button, Col, Row, Container } from "reactstrap";
3 |
> 4 | import { JsonEditor as Editor } from "jsoneditor-react";
| ^
5 | import "jsoneditor-react/es/editor.min.css";
6 |
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
The code compiles just fine without any errors and works as intended. Somehow running it with NODE_ENV=test causes the transpiler to fail.
import React from 'react';
import importedComponent from 'react-imported-component';
export const JsonEditor = importedComponent(() => Promise.all([
import(/* webpackChunkName:'jsoneditor' /'jsoneditor-react'),
import(/ webpackChunkName:'jsoneditor' /'brace'),
import(/ webpackChunkName:'jsoneditor' /'brace/mode/json'),
import(/ webpackChunkName:'jsoneditor' */'brace/theme/solarized_dark'),
]).then(([{ JsonEditor: Editor }, ace]) => {
console.log('ace');
return function EditorHoc(props) {
return (
<Editor
ace={ace}
theme="ace/theme/solarized_dark"
{...props}
/>
);
};
}));
Can you provide an example about using this library with create-react-app?
how to change theme color on this editor
I am using CRA. it works on development localhost, but shows error when deployed to production. Please check below
import { JsonEditor as Editor } from 'jsoneditor-react';
import 'jsoneditor-react/es/editor.min.css';
import 'brace';
import 'brace/mode/json';
import 'brace/theme/github';
...
<Editor
style={{height: 500}}
value={app.data}
search={false}
mode={'code'}
enableSort={false}
enableTransform={false}
history={false}
onChange={this.handleJSONChange}
/>
jsoneditor-minimalist.js:8204 Uncaught TypeError: e.canUndo is not a function
at v.g._updateHistoryButtons (jsoneditor-minimalist.js:8204)
at v.g.create (jsoneditor-minimalist.js:8084)
at v.setMode (jsoneditor-minimalist.js:12705)
at v._create (jsoneditor-minimalist.js:12608)
at new v (jsoneditor-minimalist.js:12571)
at t.value (index.js:324)
at t.value (index.js:255)
at react-dom.production.min.js:6324
at t.unstable_runWithPriority (scheduler.production.min.js:270)
at qi (react-dom.production.min.js:2794)
react-dom.production.min.js:4636 TypeError: e.canUndo is not a function
at v.g._updateHistoryButtons (jsoneditor-minimalist.js:8204)
at v.g.create (jsoneditor-minimalist.js:8084)
at v.setMode (jsoneditor-minimalist.js:12705)
at v._create (jsoneditor-minimalist.js:12608)
at new v (jsoneditor-minimalist.js:12571)
at t.value (index.js:324)
at t.value (index.js:255)
at react-dom.production.min.js:6324
at t.unstable_runWithPriority (scheduler.production.min.js:270)
at qi (react-dom.production.min.js:2794)
Hi vankop,
When installing your package via npm, it comes with its own copy of josdejong/jsoneditor. Since your last publish on npm is 8 month ago, it lacks cool new features from josdejong/jsoneditor. ( even so your package is compatible with them)
At the moment, one has to to build jsoneditor-react from source (or maybe npm install from github-link) in order to have it use a newer build of josdejong/jsoneditor.
I try to use onError, but do nothing, and when I look to implementation - is logically then do nothing because is not implemented :)
is planned to implement this useful property? thanks
any ideas on this? I've followed
import { JsonEditor as Editor } from 'jsoneditor-react';
import 'jsoneditor-react/es/editor.min.css';
later in render method:
<Editor
value={yourJson}
onChange={this.handleChange}
/>
I'm not seeing any support for placeholder text (hint text). Correct me if I'm wrong.
Hello,
When using your package, I saw that it builds its own jsoneditor.
But the interface of it has changed in the current month (added for example the onValidationError props).
Is this possible to re-push an update of your package on npm?
There is hardcoded css import:
import 'jsoneditor/dist/jsoneditor.css';
This makes any css customisation harder. Please remove this import so that we can import css of our choice.
Hi!
While trying to incorporate the editor into my application I came across this <div>
wrapping the editor.
jsoneditor-react/src/Editor.jsx
Lines 210 to 216 in dabd034
It seems rather unneeded and prevents the expansion of the Editor, which I think is not expected behaviour, implied by the CSS set on the jsoneditor
class:
I think the rogue div
should be removed, what do you think?
🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet.
We recommend using:
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.
The bundled icons file does not include icons for the sort and transform buttons in the editor menu. The buttons are still clickable, but it is not clear that there are buttons.
Screenshots of jsoneditor-react and jsoneditor online demo (using tree mode)
Hello. Is there any way that we could block all or some of the keys or/and all or some of the values rendered to be editable?
@vankop I think you will like the latest release of the jsoneditor, v5.20.1
, which allows using it as a controlled component in a framework like React. There are two new methods update(json)
and updateText
for this, and two new callback methods onChangeText
and onChangeJSON
(checkout the docs for details).
You can find two react examples in the examples
folder for inspiration:
https://github.com/josdejong/jsoneditor/tree/master/examples/react_demo
https://github.com/josdejong/jsoneditor/tree/master/examples/react_advanced_demo
It would be great if you could update jsoneditor-react
to utilize this new functionality, and I would love to hear your feedback on whether it all works smooth or if you encounter issues.
Icons are not visible in the editor.
Issue reproduced in codesandbx.
https://codesandbox.io/s/infallible-smoke-lvcvo?fontsize=14&hidenavigation=1&theme=dark
This is an awesome editor we are hoping to use this but there are some issues to clarify regarding this component.
When clicking these:
https://www.dropbox.com/s/wjn1w3n0ec48u7h/Screenshot%202018-12-28%2011.49.23.png?dl=0
This happens:
https://www.dropbox.com/s/2f2rae0cua28edr/Screenshot%202018-12-28%2011.50.04.png?dl=0
Anyone else having this problem?
i have dubt if in jsoneditor-react it is possible use json editor menu templates like in next example
https://github.com/josdejong/jsoneditor/blob/master/examples/10_templates.html
I'm exploring the new editor created by same developer. see here:
https://github.com/josdejong/svelte-jsoneditor
I'm struggling to get it to run inside of React, mainly due to my lack of React knowledge I'm sure. Would love anyone taking a look at how to get a simple example working:
Reference json:
{
type: 'object',
required: ['spin_turn'],
properties: {
spin_turn: {
type: 'number',
title: 'Spin turn',
default: 0,
enum:[0,1,2]
},
disabled: {
type: 'boolean',
title: 'Disabled',
default: false,
},
},
errorMessage: {
properties: {
spin_turn: 'should be of type integer & should be one of 0,1,2',
disabled: 'disabled should be of type boolean',
}
}
};
Issue: Default value for spin_turn is not set whereas set for disabled property.
Hi!
How do I to sort level 0 JSON attributes after component is loaded?
Thanks.
The documentation doesn't make this clear, but in order to use the <JsonEditor>
component, you need to first:
npm install --save-dev url-loader style-loader css-loader
Then add to your webpack.config.js
:
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.svg$/,
use: ['url-loader']
}
]
}
You probably need the Babel loader too, but since most people using React have that anyway, it's less essential to point out.
I think it would be helpful if this were explained in the README.
How can i change size of this component when using ace editor?
As mentioned here by me: josdejong/jsoneditor#321
Is there a nice way to implement it using this library perhaps?
I am using two editors at same time. An update in one editor should update the second one and viceversa. I have used same state variable in both editors and i have handled onChange in both editors by changing the state variable jsonData
. Still when I change JSON data in one editor the other one doesn't rerender. It remains same. The following is my code:
`
I was trying to dynamically set editor theme and it doesn't work, if I set it like this
const editorTheme = useMemo(() => {
return isDark ? 'ace/theme/ambiance' : 'ace/theme/chrome';
}, [isDark]);
theme={editorTheme}
it's not working, it just picks up the first theme in condition, how can I change it when toggling between dark and light modes of the app?
Example: codesandbox
When I try to validate erroneous data:
[ { "na1me": "one" }, { "name": "two" } ]
with json schema:
{ "definitions": {}, "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://example.com/root.json", "type": "array", "title": "The Root Schema", "items": { "$id": "#/items", "type": "object", "title": "The Items Schema", "required": ["name"], "properties": { "name": { "$id": "#/items/properties/name", "type": "string", "title": "The Name Schema", "default": "", "examples": ["one"] } } } }
I always receive an error: Invalid JSON path: unexpected character "/" at index 0
. The problem is actual only for ajv >= 7.x.x. Pure jsoneditor can validate the same case without any problems.
Greetings,
I'm wondering; I'm using the jsoneditor-react, included a svg-loader in my webpack configurations since it was giving me an error to this effect, but now I'm getting this error here.
GET http://localhost:8080/%3Csvg%20xmlns:dc=%22http://purl.org/dc/elements/1.1/%22%20xmlns:cc=%22http://creativecommons.org/ns 404 (Not Found)
Does anyone have any idea why it's giving me this GET error? Do I really have to have a img folder in which I'll put the jsoneditor svg files?
Any help is greatly appreciated.
Thomas
Due to componentWillReceiveProps being not recommended for use, this code should be refactored to use componentDidUpdate.
Greetings,
In this code, when I change the state of the component with setState(), it does go into the render() method, but does not actually change the display to reflect the new state.
I placed the this.state in the "value" props of the Editor component.
Here's a link to the code: demo-jsoneditor-react
when I use yarn start
, it looks fine:
when I use yarn build and config nginx to serve it, it looks wrong:
The nginx.conf is:
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
sendfile on;
keepalive_timeout 65;
gzip on;
server {
listen 3000;
location / {
#root /usr/share/nginx/html;
root /....../build;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location /stories {
set $args $args;
proxy_pass http://localhost:8000;
}
}
}
Could you help make nginx
version work like yarn start
version?
Thanks.
Hi! I really liked you editor, but I find it a little hard to use because the value prop only takes the initial value, but is not affected when the prop is changed elsewhere.
Am I missing something?
Greetings!
can please update the dependency to be compatible to the lastest version of react (18). Otherwise npm i fails with latest npm.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.