juicy / juicy-jsoneditor Goto Github PK

Steps to reproduce

Use in Internet Explorer 11

Live Demo

http://juicy.github.io/juicy-jsoneditor/
As a quick note, the sample jsbin provided in this template is missing the appropriate referenced to fast-json-patch in the polygit path.

Expected result

Juicy-jsoneditor should be usable.

Actual result

Element fails to construct.
Syntax error
SCRIPT1002: Syntax error

Browsers affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Screenshot

is there any way to prevent the change event from firing on every edit and fire only when the editor loses focus? right now it is triggered on each keystroke.

There are issues related to Shady DOM, if we are going to support it (see Starcounter/DevTools#35), we could find nice way to inject styles.

Hi Juicy,

I am Binh from Vaadin. Just want to let you know that we dedicate a whole blog post for your component, A powerful web component that lets you edit JSON in browser.

Hope that brightens up your day and keep rocking these components!

Binh

This is some seriously good stuff.
Thanks for writing this !!

I have a use case question - not a feature request.

The user has lots of templates. Let's say they are in markdown and it represents email templates.

The user also has a json schema and json datasets that conforms to that json schema.

With juicy, I think I can build a way for the user to put special tags in the template and for the user to map json data to the tags.
And show the result of the data binding.

The key point is that juicy becomes an IDE of sorts because everything is dynamic.

I actually want to do the data bind on the server in golang. But I want to make it easy for the user to visually edit markup and configure the data mapping of the json to the tags inside the template.

Your components look to be made to do this type of thing or am a madman ? :)

Steps to reproduce

Add two jsoneditors on the same html page and connect them to the same date model.
Change some values in one model and you will see that the other josonditor's model is not updated.

Live Demo

http://juicy.github.io/juicy-jsoneditor/

Screenshot

Release notes: https://github.com/Juicy/juicy-jsoneditor/releases/edit/untagged-c30f681942e01fcf8469

• update Starcounter-Jack/[email protected]
• updated npm devDependencies to pass security audit #26

Any plans to update to polymer 3?

Or if it already works with polymer 3 - any examples?

Hi!

First of all thanks a lot for creating this Polymer wrapper around json-editor. Currently, we are using it in one of our projects and seems like we've encountered one problem:

Steps to reproduce

1. Configure the project to use Polymer v1.
2. Build the project using Vulcanize tool.
3. Since Vulcanize tool follows HTML Imports and <script> tags to inline these external assets into a single page, we will encounter the problem of corrupted import paths. (After reducing(flattening) all imported assets into the final bundle, all the relative paths which were previously resolved imperatively in the runtime using f.e. Polymer.ResolveUrl.resolveUrl("../jsoneditor/dist/jsoneditor.min.css", script.ownerDocument.baseURI); won't be able to resolve.)

Live Demo

Let's say we have following structure:

app
|___ bower_components
|   |___ jsoneditor
|   |   |___ dist
|   |       |___ jsoneditor.min.css
|   |___ juicy-jsoneditor
|       |___ juicy-jsoneditor.html <=== in the runtime tries to resolve ../jsoneditor/dist/jsoneditor.min.css
|___ elements.html <=== here we are importing juicy-jsoneditor.html

Example above works fine till the moment Vulcanize tool starts bundling and produces following:

app
|___ bower_components
|   |___ jsoneditor
|   |   |___ dist
|   |       |___ jsoneditor.min.css
|   |___ juicy-jsoneditor
|       |___ juicy-jsoneditor.html <=== this page is completely included inside of elements.html page.
|___ elements.html <=== juicy-jsoneditor.html in runtime tries to resolve ../jsoneditor/dist/jsoneditor.min.css but path is already corrupted.

Expected result

Be able to resolve ../jsoneditor/dist/jsoneditor.min.css dependency on build step using Vulcanize tool.

Actual result

Vulcanize tool is not able to detect and include into bundle imperative dependencies which are resolved in the runtime. Right now, ../jsoneditor/dist/jsoneditor.min.css is not resolved.

Browsers affected

• [+] Chrome
• [+] Firefox
• [+] Edge
• [+] Safari 9
• [+] Safari 8
• [+] IE 11

In general, it's not a browser issue. More likely architectural one.

Screenshot

No styles :(

We should substitute the usage of /deep/ in the code, since it was removed from spec: https://groups.google.com/d/topic/polymer-dev/P4WgenEfiAY/discussion

As proposed by @mbana at #9 (comment) it would be nice to fire an event once inner JSONEditor is created and ready to be used.

Steps to reproduce

Live Demo

https://jsbin.com/ligimo/3/edit?html,output

Expected result

Scripts should only import/execute once upon initial import.

Actual result

Currently the imported scripts will execute for each instance of the component.

Browsers affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Screenshot

Templates could be very useful when need to add custom nodes to avoid copy and paste.

.. as this one contains mainly workarounds.

To address #21

Can you please post a working example of getting access to the actual editor field? I'd like to set a schema on it. I can't see how it is exposed, nor events being fired when it is initialised.

Many thanks for the lib. Good work.

Edit: modes='["code", "form", "text", "tree", "view"]' is the new syntax in Polymer. The examples use: modes="['code', 'form', 'text', 'tree', 'view']".

Currently at /src/juicy-jsoneditor.html#L41 I need to iterate over json's properties to replace/remove them with ones from JSONEditor.

First of all it replaces entire objects, so it will break any binding to nested nodes, it triggers update on all root nodes even if they were not changed.

All that ugly hacking would not be necessary if JSONEditor's change callback could provide actual changes. (josdejong/jsoneditor#102)

when I using editor's 'code' mode, it cause an json pase error.

Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'EOF'

juicy-jsoneditor currently uses https://github.com/tomalec/jsoneditor/tree/102-onChangeArgumentsBuilt as the JSON tree rendering engine, which is josdejong/jsoneditor enhanced to give JSON Patch object as an argument to change callback.

As discussed between me and @tomalec on Hangouts, it should be possible to revert to upstream josdejong/jsoneditor and use obtain the JSON Patch from a different approach - for example by calling jsonpatch.compare

Reverting to use josdejong/jsoneditor will give us access to improvements made on regular base in the upstream repo.

In consequence, we will get improved JSON editor in starcounter-debug-aid

The json attribute currently requires and object, making it not usable both from raw HTML and from non-JS languages like Dart.

Please support providing raw JSON.