josdejong / svelte-jsoneditor Goto Github PK

Looks like there is support for a readOnly param (although its not in the documentation). Seems to work fine, except the menu still has all the options to modify everything - they just don't do anything.

Can we disable the popup menu items related to modifying the data when in readOnly mode

Programmatically formatting and repairing as the older version does is much needed, thanks.

Hello,

Working with the newest library, I've noticed some things....

navigationBar: false, mainMenuBar: false, readOnly: false, onClassName: CallbackFn(),

don't seem to be working.

I just want a pure editable Json tree view, so can I hide context menu besides css?

I want to hide both drop-down triangle and insert triangle, like this

error

$ rollup --config rollup.config.bundle.js

src/lib/index.js → package/dist/jsoneditor.js...
(!) Plugin typescript: @rollup/plugin-typescript TS5083: Cannot read file '.svelte-kit/tsconfig.json'.
[!] (plugin typescript) Error: @rollup/plugin-typescript: Couldn't process compiler options

this file is missing

fixed (?) by removing the line from tsconfig.json

I tried svelte-jsoneditor with Sveltekit and got the following error. Just thought you might like to know. Looks like a great project you've got going.

document is not defined
ReferenceError: document is not defined
at /Volumes/Userdata/Users/clarke/dev/svelte/auth-kit/node_modules/vanilla-picker/dist/vanilla-picker.js:1000:19
at /Volumes/Userdata/Users/clarke/dev/svelte/auth-kit/node_modules/vanilla-picker/dist/vanilla-picker.js:9:83
at Object. (/Volumes/Userdata/Users/clarke/dev/svelte/auth-kit/node_modules/vanilla-picker/dist/vanilla-picker.js:12:3)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap. (node:internal/modules/esm/translators:168:29)
at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
at async Promise.all (index 0)
document is not defined
ReferenceError: document is not defined
at /Volumes/Userdata/Users/clarke/dev/svelte/auth-kit/node_modules/vanilla-picker/dist/vanilla-picker.js:1000:19
at /Volumes/Userdata/Users/clarke/dev/svelte/auth-kit/node_modules/vanilla-picker/dist/vanilla-picker.js:9:83
at Object. (/Volumes/Userdata/Users/clarke/dev/svelte/auth-kit/node_modules/vanilla-picker/dist/vanilla-picker.js:12:3)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap. (node:internal/modules/esm/translators:168:29)
at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
at async Promise.all (index 0)

TLDR: how to actually use this library? 0__o
... project template?

when i run the example json_schema_validation.svelte, i get the error

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/[email protected]/node_modules/debug/src/browser.js?v=ab0664fe' does not provide an export named 'default'

from

backtrace

// node_modules/debug/src/browser.js

module.exports = require('./common')(exports);

// node_modules/debug/src/common.js

function setup(env) {
        createDebug.debug = createDebug;
        // ...
        return createDebug;
}

module.exports = setup;

looks like a problem with vite and commonjs ...

reproduce

npm i -g pnpm
pnpx create-vite frontend --template svelte
cd frontend
pnpm install svelte-jsoneditor
cd src
curl -L -o App.svelte https://github.com/josdejong/svelte-jsoneditor/raw/main/src/routes/examples/json_schema_validation.svelte
sed -i 's/\$lib/svelte-jsoneditor/' App.svelte
cd ..
npm run dev

related

also pnpm does not run the prepare script when i install from git ...

npm rm svelte-jsoneditor
pnpm i https://github.com/josdejong/svelte-jsoneditor.git

stat node_modules/svelte-jsoneditor/dist
stat: cannot statx 'node_modules/svelte-jsoneditor/dist': No such file or directory

When calling expand() from onChangeMode callback and where mode === 'tree' I get the following error:

Error: Method expand is not available in mode "tree"
    at lE.eval (https://i4vo7.csb.app/node_modules/svelte-jsoneditor/dist/jsoneditor.js:33:182026)
    at expand (https://i4vo7.csb.app/src/JSONEditor.tsx:36:22)
    at handleOnChangeMode (https://i4vo7.csb.app/src/JSONEditor.tsx:58:7)
    at HTMLButtonElement.G (https://i4vo7.csb.app/node_modules/svelte-jsoneditor/dist/jsoneditor.js:33:179849)
    at HTMLButtonElement.eval (https://i4vo7.csb.app/node_modules/svelte-jsoneditor/dist/jsoneditor.js:29:23080)

The expand method works ok when first mounting the component, but not when switching between modes.

See the issue in the following sandbox:
https://codesandbox.io/s/blue-cloud-i4vo7

On first load the nodes are expanded, but when clicking to code and back to tree, that's when the expand method fails.

Am I calling it correctly?

I've been trying to open a relatively large (around ~150 MiB) in code mode, for which the editor seems to raise a warning that this could browser to hang. Since the file is minified, however, the last editor line seems to have a calculated width of 1.08636e+09 px which causes the editor layout to overflow (screenshot below):

Could be copy on ContextMenu or emit on mousedown.

When styling the editor it has been easy since the classnames are static and not all hashed. For example, I can target classes like .code-mode and .contents. This works really well for the most part, until I have other styles that apply to common class names like .contents or .row, resulting in unexpected conflicts.

Material UI solves the issue of helping to avoid conflicts while also providing static classes to target by prefixing their classes with .Mui, like .MuiButton.

I realize it could be a breaking change if something like this were done, but I think it could be a good pattern to use in order to help consuming projects avoid conflicts, while also allowing customizability. I believe this prefix could be added in the build process.

@josdejong , if you are open to this as a change, I can work on a PR, but I wanted to ask to gage interest before going and making the change without buy in.

Situation: I have the json-editor as one of the children inside a <form> element. Clicking on the <button> elements of the json-editor, such as the "expand" button, causes the parent form to get submitted. This is because the <button> elements don't have type="button" attribute.

Fix: Add type="button" as an attribute to all <button>s used in the editor.

Should I open a PR for the same? Thanks :)

All indents are coming as expanded in default. If there is an tree mode button, people better understand how to collapse all indents and display in the tree mode. I had to read the documentation for not leaving JSON editor. It was the fastest, most convenient tool I've been using, I had difficulty with the tree mode. This is a feedback, hope you keep doing great work!

P.S: I'll try to use all new features through time

I followed the Readme instruction as described, but when I start the project I get the following error:

[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules/ajv/dist/refs/json-schema-draft-07.json (2:11)

Is there a step that I'm missing ?
Does this component requires an older version of Svelte ?

Was testing the BETA and can't seem to find the reorder feature - kept jumping back the the "old" to fix my JSON order.
Is the reorder feature available on the new version?

I am looking to use this new beta editor in a react application (not create-react-app) and was following this issue about wrapping it in a react wrapper #4

When i try to use the codesandbox posted in that issue above, i get the following error:

export 'JSONEditor' (imported as 'JSONEditor') was not found in 'svelte-jsoneditor' (module has no exports)

importing like so:

import { JSONEditor } from "svelte-jsoneditor";

Do you know why this could be happening? Webpack is being used to compile

hey, your navigation button have this html:

<button class="jse-navigation-bar-button jse-navigation-bar-arrow svelte-lfr3gu">...</button>

so, it dont have type = button attr specified. That means browsers threat such buttons as submit buttons (proof https://stackoverflow.com/a/9643866/10099510)

I use your json-editor as a part of bootstrap form so it makes some trouble in our case 😀

Getting the following error after fresh install of svelte-kit.

node v14.17.4
svelte v3.34.0
svelte-jsoneditor v0.1.6"

Might this be because it is missing in the dependencies

`[vite] Internal server error: Cannot find any of modules: sass,node-sass

Error: Cannot find module 'node-sass'
Require stack:

• /mnt/c/dev/repo/node_modules/svelte-preprocess/dist/modules/utils.js
• /mnt/c/dev/repo/node_modules/svelte-preprocess/dist/autoProcess.js
• /mnt/c/dev/repo/node_modules/svelte-preprocess/dist/index.js
  Plugin: vite-plugin-svelte
  File: /mnt/c/dev/repo/node_modules/svelte-jsoneditor/src/components/modals/SortModal.svelte`

For some reason svelte-jsoneditor@>0.3.5 crashes in react starter app just after being imported:

Steps to reproduce:

• npx create-react-app my-app
• cd my-app
• yarn add [email protected]
• add this line to src/App.js: import {JSONEditor} from 'svelte-jsoneditor/dist/jsoneditor.js';
• run npm start
• see the error:

Failed to compile
./node_modules/svelte-jsoneditor/dist/jsoneditor.js 13423:12
Module parse failed: Unexpected token (13423:12)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     label: "descending"
|   }];
>   let f = u?.filter?.path ? I(u.filter.path) : null,
|       p = u?.filter?.relation ? h.find(e => e.value === u.filter.relation) : null,
|       m = u?.filter?.value || "",
This error occurred during the build time and cannot be dismissed.

I've noticed downgrading to [email protected] seems fixing the issue for now.
Thanks in advance!

This is an issue in the sandbox:

When you are in Code mode and press enter it resets the cursor to the top of the editor. I am assuming this has something to do with the implementation of the value or onChange in the ace editor, but would appreciate help with debugging this.

For some reason [email protected] can not compiling when use npm:

✖ [14:12:16] 1 error in compiling process.
[error] in ./~/svelte-jsoneditor/dist/jsoneditor.js
Module parse failed: /Users/haha/dev_code/demo/vendors/node_modules/svelte-jsoneditor/dist/jsoneditor.js Unexpected token (1:17468)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:17468)
@ ./client/components/ScSvelteJSONEditor/SvelteJSONEditor.js 6:24-52

need help ,thanks!!

If you create a component that extends HTMLElement and use shadowDOM, the context menus wont appear.
How to reproduce:

1. Create a class that extends HTMLElement
2. Create a ShadowDOM via: this.attachShadow({mode: 'open'});
3. Create a svelt-jsoneditor inside this custom Element
4. Context menu don´t work.

If you keep everthing the same but don´t use shadowDOM it works as expected.

I want to use this library in a small PHP/JS project.
Reading the docs I'm trying to follow the examples for plain javascript.

This line:

import { JSONEditor } from 'svelte-jsoneditor'

does not work because the browser (Firefox) requires the module name starts with /, ./ or ../.
So I changed it to an absolute path:

import { JSONEditor } from '/node_modules/svelte-jsoneditor/dist/jsoneditor.js'

Now I have a 404 (even the path is correct - PHP Storm can retrieve the file) and another error:

Loading module from “http://mydevice.local/node_modules/svelte-jsoneditor/dist/jsoneditor.js” was blocked because of a disallowed MIME type (“text/html”).

I copied and paste this example in my HTML page. I only adjusted the path of the module to match the actual position on my machine.

Again, if I copy to the bundle file to /js/jsoneditor.js and change the include to a common script tag like this:

<script type="text/javascript" src="/js/jsoneditor.js">

I get this error:

Uncaught SyntaxError: export declarations may only appear at top level of a module jsoneditor.js:55:43779

I'm trying to install this into an environment that I don't have much control over and getting this error. I know that the spread operator is available in my codebase as I use it plenty, so not sure why it would complain about that.

Any ideas what could be causing this?

I have to set all json contetn expand all

i think it can set in new JSONEditor properties

it would be great if SHIFT+ENTER key combination will show previous search result as it works in Chrome, Vscode and everywhere, i guess.

Thanks in advance!

Thank you for this brilliant library. Ive been a long time user of jsoneditoronline.org (its a pinned tab since I use it all the time 😁).

Would be good to have some documentation as to how this package is different from your previous lib (https://github.com/josdejong/jsoneditor) and also why you decided to create another.

I also see that the demo for the earlier is pointing to http://jsoneditoronline.org/ while the latter is pointing to https://jsoneditoronline.org/, but both seem to be running off svelte-jsoneditor as per the changelog.

clicking outside the editor does not stop the field edit. Old jsoneditor work fine here - it stops field edit on clicking outside of himself

In classic mode I could select the content within brackets by double clicking the text within the brackets (content only) or in front of the brackets (content + brackets). This is not working anymore. Will this feature be implemented in the new version as well?

Would sugguest to keep tree view option. Some guys might like to use new view. But some guys might still get used to classic tree view mode. So better keep it there.

I may be understanding the functionality of the onError callback function, but I would assume that it would be triggered on a JSON error.

This does not seem to work today, at least not when using it in React.

I've replicated it here in a fork of the React example: https://codesandbox.io/s/svelte-jsoneditor-react-forked-3ohvvk

I started this one and got close, but had some issues with it (still learning VueJS too) - based on the REACT demo that you have
https://codesandbox.io/s/svelte-jsoneditor-vue-h7yz8
(and didn't get that close in my actual project I want it in either)
This sample sandbox does display the editor, but that's about all at this point - will give it a break for a while and do some more learning.

I am using typescript in my project and e.g. when I use "createAjvValidator" and pass it a schema, TypeScript complains because due to the comment in the code it thinks there is some JSON type and my data is not of that type.

It would be great if the exposed functions would be made properly TypeScript compatible, or at least fixed in a way that TypeScript is not confused and treats everything as any instead of non-existing types.

Using svelte-kit, this error seems to occur when onMount is present and the page is refreshed.

This codesandbox https://codesandbox.io/s/svelte-jsoneditor-react-59wxz is referenced as React example on main page.

Now it has error _svelteJsoneditor.JSONEditor is not a constructor in /src/SvelteJSONEditor.js:12:23.

Seems like changing import { JSONEditor } from "svelte-jsoneditor"; to import { JSONEditor } from "svelte-jsoneditor/dist/jsoneditor.js"; resolves the issue

Implement dragging the selected node(s) up or down. Create a configuration option to enable/disable dragging an object outside of it's current object/array.

I realize this package does not necessarily support the build process of NextJs, but I wanted to share the error I am getting with the module for JSONEditor in svelte-jsoneditor/dist/jsoneditor.js that is crashing my dev server.

import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor.js';

TypeError: Cannot read properties of undefined (reading 'ace')
    at file:///Users/.../node_modules/svelte-jsoneditor/dist/jsoneditor.js:47:20281
    at file:///Users/.../node_modules/svelte-jsoneditor/dist/jsoneditor.js:47:20475
    at file:///.../node_modules/svelte-jsoneditor/dist/jsoneditor.js:47:20483
    at file:///Users/.../node_modules/svelte-jsoneditor/dist/jsoneditor.js:47:383518
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
ERROR: "dev:next" exited with 1.

I am not sure what ace is in this case, but would appreciate any ideas for debugging.

Sidenote: I updated the react codesandbox in a fork to match the new interface for content - https://codesandbox.io/s/svelte-jsoneditor-react-forked-0k1bl

Hey! It would be great and really convenient if the refJsonEditor (https://github.com/josdejong/svelte-jsoneditor/blob/main/src/components/JSONEditor.svelte#L50) variable could be exported so users can use it for DOM manipulation.

Further, exposing an a callback for onMount that calls the callback in the onMount() of the component will be great too!

Thanks again :)

Hello, I was super excited to see this project. I've been using the original version within my project and it does have it quarks. My steps for repo:

0. use a nextJS project (typescript)
1. npm install svelte-jsoneditor
2. npm install --save-dev @rollup/plugin-json svelte-preprocess sass
3. add ./rollup.config.js to the root
4. Add import { JSONEditor } from "svelte-jsoneditor"; to my component
5. Add in my render() function
6. run 'npm run build'

Errors:

Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/sean.stringer/dev/skinconfig.admin/node_modules/svelte-jsoneditor/dist/jsoneditor.js
require() of ES modules is not supported.
require() of /Users/sean.stringer/dev/skinconfig.admin/node_modules/svelte-jsoneditor/dist/jsoneditor.js from /Users/sean.stringer/dev/skinconfig.admin/dist/.next/server/pages/skinconfig.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename jsoneditor.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/sean.stringer/dev/skinconfig.admin/node_modules/svelte-jsoneditor/package.json.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:13)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.lfQ6 (/Users/sean.stringer/dev/skinconfig.admin/dist/.next/server/pages/skinconfig.js:240:18)
at __webpack_require__ (/Users/sean.stringer/dev/skinconfig.admin/dist/.next/server/pages/skinconfig.js:23:31)
at Module.qmwh (/Users/sean.stringer/dev/skinconfig.admin/dist/.next/server/pages/skinconfig.js:288:35)
at __webpack_require__ (/Users/sean.stringer/dev/skinconfig.admin/dist/.next/server/pages/skinconfig.js:23:31)
at Object.21 (/Users/sean.stringer/dev/skinconfig.admin/dist/.next/server/pages/skinconfig.js:120:18) {

type: 'NodeError',
code: 'ERR_REQUIRE_ESM'
}

As you can see I'm getting a ERR_REQUIRE_ESM error. The message is telling me to do a couple things different.

Has anyone run into this issue?

We lost wonderful functionality from old version:

I get: " Could not load https://unpkg.com/[email protected]/index.js (imported by https://unpkg.com/[email protected]/src/node.js): Cannot find "/index.js" in [email protected]" when copy pasting the basic svelte example from the example folder into a svelte REPL.

I'm building a small project based on jsoneditor (thanks a lot!).

While porting from jsoneditor to svelte-jsoneditor, I noticed it doesn't build on skypack. Here's how to reproduce:

1. Head to https://cdn.skypack.dev/svelte-jsoneditor
2. Results in https://cdn.skypack.dev/error/build:[email protected]

It's possible the problem is at skypack side as well but just thought to let you know consuming through skypack doesn't work at the moment.

Attempting to wrap in a React component. I'm able to get it to display, although not perfectly. But then after a couple seconds it generates an error:
TypeError: Cannot read property 'ownerDocument' of undefined

Here is the code in the wrapper:

import React, {useRef} from 'react'
import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor.js'

const JSONEditorComponent = ( {} ) => {
    const editor = useRef(null)

    const onRef = ( ref ) => {
        if(ref) {
            console.log('ON REF', ref)
            editor.current = new JSONEditor({
                target: ref,
                props: {
                    json: {
                        greeting: 'Hello World'
                    },
                    onChange: (content) => {
                        // content is an object { json: JSON | undefined, text: string | undefined }
                        console.log('onChange', content)

                    }
                }
            })
        }
    }

    return (
        <div id="json-editor" ref={onRef}/>
    )
}

Any one more advanced with React able to get this working?

Please add a checkbox to the Configure indentation dialogue so that the editor can use literal tabs. When checked, use the number to set tabSize, but set indentUnit to a single tab character, rather than tabSize × space characters.

Not sure if this is an issue, but when I make a new project using "npm init svelte@next" and use this module using "npm install svelte-jsoneditor" and try to use it, I see this error:

Must use import to load ES Module: C:\Users\tom\Desktop\stuff\sc\client\node_modules\svelte-jsoneditor\dist\jsoneditor.js require() of ES modules is not supported. require() of C:\Users\tom\Desktop\stuff\sc\client\node_modules\svelte-jsoneditor\dist\jsoneditor.js from C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\dist\index2.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename jsoneditor.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\tom\Desktop\stuff\sc\client\node_modules\svelte-jsoneditor\package.json.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\tom\Desktop\stuff\sc\client\node_modules\svelte-jsoneditor\dist\jsoneditor.js
require() of ES modules is not supported.
require() of C:\Users\tom\Desktop\stuff\sc\client\node_modules\svelte-jsoneditor\dist\jsoneditor.js from C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\dist\index2.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename jsoneditor.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\tom\Desktop\stuff\sc\client\node_modules\svelte-jsoneditor\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at load_node (C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\api\dev\loader.js:137:22)
    at get_module (C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\api\dev\loader.js:20:26)
    at C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\api\dev\loader.js:108:27
    at Array.map (<anonymous>)
    at initialize_module (C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\api\dev\loader.js:107:10)
    at C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\api\dev\loader.js:47:22
    at C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\api\dev\loader.js:108:21
    at async Promise.all (index 2)
    at initialize_module (C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\api\dev\loader.js:106:8)
    at C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\api\dev\index.js:318:32
    at get_response (C:\Users\tom\Desktop\stuff\sc\client\node_modules\@sveltejs\kit\src\renderer\page.js:141:16)

Not sure if this is a svelte problem, a sapper/sveltekit problem or what, just something to note that users seeking the bleeding edge of technology might run into this wall.

Steps to reproduce:

1. npm init svelte@next
2. npm install svelte-jsoneditor
3. follow the basic usage example for svelte, just importing it in your component will yield the above

-- additional info

Maybe this is just my misunderstanding. I tried npm installing the previous jsoneditor and am having similar issues. Are these projects not usable as npm packages? Or is sveltekit/sapper completely busted?

-- more info

Good/bad news! After some additional testing (creating a new svelte project without sveltekit), following the example for svelte-jsoneditor worked. It is probably fine to attribute these errors to sveltekit or its bundler snowpack, and hopefully that is not indicative of impending disaster when sveltekit is stable 👍

In the old version, I can paste in some JSON, click on TREE, then click back on CODE, and it is all nicely formatted for me.
In the new version, it just restores my unformatted JSON.

Switching to the old view because of this.

I thought maybe this was related to the svelte router library I chose at first, but then I reproduced the issue with this minimal component:

<script>
    import {JSONEditor} from "svelte-jsoneditor";
    let show = true;
</script>

<div>
    <button on:click={() => show = !show}>Toggle</button>
    {#if show}
        <JSONEditor />
    {/if}
</div>

This issue can also be reproduced if you have the json editor component loaded in a component that is loaded / unloaded by the "svelte-routing" package.

How can I theme up this puppy? Any clues?

Thanks!!! Great work!

If I click other than the pull-down button after editing keyword or content in a object, the object disappears in total.

I need the editor readOnly value to do something ， but it not can