Export jsoneditor factory function
This commit is contained in:
josdejong
parent
0d8854c5ea
commit
8cb22b3480
|
|
@ -8,6 +8,7 @@
|
|||
"test": "mocha ./src/**/*.test.js"
|
||||
},
|
||||
"type": "module",
|
||||
"module": "./public/build/jsoneditor.mjs",
|
||||
"dependencies": {
|
||||
"@fortawesome/free-regular-svg-icons": "5.13.0",
|
||||
"@fortawesome/free-solid-svg-icons": "5.13.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
|
||||
<title>JSONEditor | Basic usage</title>
|
||||
|
||||
<style type="text/css">
|
||||
#jsoneditor {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<button id="setJSON">Set JSON</button>
|
||||
<button id="getJSON">Get JSON</button>
|
||||
</p>
|
||||
<div id="jsoneditor"></div>
|
||||
|
||||
<script type="module">
|
||||
import jsoneditor from '../build/jsoneditor.module.js'
|
||||
|
||||
// create the editor
|
||||
const editor = jsoneditor({
|
||||
target: document.getElementById('jsoneditor')
|
||||
})
|
||||
|
||||
// set json
|
||||
document.getElementById('setJSON').onclick = function () {
|
||||
const json = {
|
||||
'array': [1, 2, 3],
|
||||
'boolean': true,
|
||||
'color': '#82b92c',
|
||||
'null': null,
|
||||
'number': 123,
|
||||
'object': {'a': 'b', 'c': 'd'},
|
||||
'time': 1575599819000,
|
||||
'string': 'Hello World'
|
||||
}
|
||||
editor.set(json)
|
||||
}
|
||||
|
||||
// get json
|
||||
document.getElementById('getJSON').onclick = function () {
|
||||
const json = editor.get()
|
||||
alert(JSON.stringify(json, null, 2))
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,11 +6,140 @@
|
|||
|
||||
<title>JSON Editor (Svelte)</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='icon' type='image/png' href='favicon.png'>
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
<style>
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
#testEditor {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="testEditor"></div>
|
||||
<p>
|
||||
<button id="loadLargeJson">load large json</button>
|
||||
<button id="clearJson">clear json</button>
|
||||
<input id="loadFile" type="file">
|
||||
</p>
|
||||
|
||||
<script type="module">
|
||||
import jsoneditor from './build/jsoneditor.module.js'
|
||||
|
||||
const json = {
|
||||
'array': [1, 2, 3, {
|
||||
name: 'Item ' + 2,
|
||||
id: String(2),
|
||||
index: 2,
|
||||
time: new Date().toISOString(),
|
||||
location: {
|
||||
latitude: 1.23,
|
||||
longitude: 23.44,
|
||||
coordinates: [23.44, 1.23]
|
||||
}
|
||||
}],
|
||||
'boolean': true,
|
||||
'color': '#82b92c',
|
||||
'null': null,
|
||||
'number': 123,
|
||||
'object': {
|
||||
'a': 'b', 'c': 'd', nested: {
|
||||
name: 'Item ' + 2,
|
||||
id: String(2),
|
||||
index: 2,
|
||||
time: new Date().toISOString(),
|
||||
location: {
|
||||
latitude: 1.23,
|
||||
longitude: 23.44,
|
||||
coordinates: [23.44, 1.23]
|
||||
}
|
||||
}
|
||||
},
|
||||
'': '',
|
||||
'string': 'Hello World',
|
||||
'url': 'https://jsoneditoronline.org',
|
||||
'Lorem Ipsum': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
|
||||
}
|
||||
|
||||
const testEditor = jsoneditor({
|
||||
target: document.getElementById('testEditor'),
|
||||
props: {
|
||||
json,
|
||||
onChangeJson: json => console.log('onChangeJson', json)
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById('loadLargeJson').onclick = function handleLoadLargeJson() {
|
||||
const count = 500
|
||||
|
||||
console.log('create large json', {count})
|
||||
console.time('create large json')
|
||||
const largeJson = {}
|
||||
largeJson.numbers = []
|
||||
largeJson.array = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
const longitude = 4 + i / count
|
||||
const latitude = 51 + i / count
|
||||
|
||||
largeJson.numbers.push(i)
|
||||
largeJson.array.push({
|
||||
name: 'Item ' + i,
|
||||
id: String(i),
|
||||
index: i,
|
||||
time: new Date().toISOString(),
|
||||
location: {
|
||||
latitude,
|
||||
longitude,
|
||||
coordinates: [longitude, latitude]
|
||||
},
|
||||
random: Math.random()
|
||||
})
|
||||
}
|
||||
console.timeEnd('create large json')
|
||||
|
||||
// const stringifiedSize = JSON.stringify(largeJson).length
|
||||
// console.log(`large json stringified size: ${filesize(stringifiedSize)}`)
|
||||
|
||||
testEditor.set(largeJson)
|
||||
}
|
||||
|
||||
document.getElementById('clearJson').onclick = function handleClearJson() {
|
||||
testEditor.set({})
|
||||
}
|
||||
|
||||
document.getElementById('loadFile').onchange = function loadFile(event) {
|
||||
console.log('loadFile', event.target.files)
|
||||
|
||||
const reader = new FileReader()
|
||||
const file = event.target.files[0]
|
||||
reader.onload = function (event) {
|
||||
const text = event.target.result
|
||||
const json = JSON.parse(text)
|
||||
testEditor.set(json)
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ export default {
|
|||
input: 'src/main.js',
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: 'public/build/bundle.js'
|
||||
format: 'esm', // esm, umd, cjs, iife
|
||||
name: 'JSONEditor',
|
||||
file: 'public/build/jsoneditor.module.js'
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
|
|
|
|||
24
src/App.sass
24
src/App.sass
|
|
@ -1,24 +0,0 @@
|
|||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.editor {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
}
|
||||
128
src/App.svelte
128
src/App.svelte
|
|
@ -1,128 +0,0 @@
|
|||
<script>
|
||||
import JSONEditor from './JSONEditor.svelte'
|
||||
|
||||
let json = {
|
||||
'array': [1, 2, 3, {
|
||||
name: 'Item ' + 2,
|
||||
id: String(2),
|
||||
index: 2,
|
||||
time: new Date().toISOString(),
|
||||
location: {
|
||||
latitude: 1.23,
|
||||
longitude: 23.44,
|
||||
coordinates: [23.44, 1.23]
|
||||
}
|
||||
}],
|
||||
'boolean': true,
|
||||
'color': '#82b92c',
|
||||
'null': null,
|
||||
'number': 123,
|
||||
'object': {
|
||||
'a': 'b', 'c': 'd', nested: {
|
||||
name: 'Item ' + 2,
|
||||
id: String(2),
|
||||
index: 2,
|
||||
time: new Date().toISOString(),
|
||||
location: {
|
||||
latitude: 1.23,
|
||||
longitude: 23.44,
|
||||
coordinates: [23.44, 1.23]
|
||||
}
|
||||
}
|
||||
},
|
||||
'': '',
|
||||
'string': 'Hello World',
|
||||
'url': 'https://jsoneditoronline.org',
|
||||
'Lorem Ipsum': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
|
||||
}
|
||||
|
||||
export function get() {
|
||||
return json
|
||||
}
|
||||
|
||||
export function set(newJson) {
|
||||
json = newJson
|
||||
}
|
||||
|
||||
console.time('load editor')
|
||||
|
||||
function handleChangeFiles (event) {
|
||||
console.log('handleChangeFiles', event.target.files)
|
||||
|
||||
const reader = new FileReader()
|
||||
const file = event.target.files[0]
|
||||
reader.onload = function (event) {
|
||||
const text = event.target.result
|
||||
json = JSON.parse(text)
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
function loadLargeJson() {
|
||||
const count = 500
|
||||
|
||||
console.log('create large json', {count})
|
||||
console.time('create large json')
|
||||
const largeJson = {}
|
||||
largeJson.numbers = []
|
||||
largeJson.array = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
const longitude = 4 + i / count
|
||||
const latitude = 51 + i / count
|
||||
|
||||
largeJson.numbers.push(i)
|
||||
largeJson.array.push({
|
||||
name: 'Item ' + i,
|
||||
id: String(i),
|
||||
index: i,
|
||||
time: new Date().toISOString(),
|
||||
location: {
|
||||
latitude,
|
||||
longitude,
|
||||
coordinates: [longitude, latitude]
|
||||
},
|
||||
random: Math.random()
|
||||
})
|
||||
}
|
||||
console.timeEnd('create large json')
|
||||
|
||||
// const stringifiedSize = JSON.stringify(largeJson).length
|
||||
// console.log(`large json stringified size: ${filesize(stringifiedSize)}`)
|
||||
|
||||
return largeJson
|
||||
}
|
||||
|
||||
// json = loadLargeJson()
|
||||
|
||||
function handleLoadLargeJson() {
|
||||
json = loadLargeJson()
|
||||
}
|
||||
|
||||
function handleClearJson() {
|
||||
json = {}
|
||||
}
|
||||
|
||||
function handleChange (json) {
|
||||
// console.log('App handleChange', json)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
console.timeEnd('load editor')
|
||||
console.log('loaded')
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="editor">
|
||||
<JSONEditor
|
||||
bind:json={json}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<button on:click={handleLoadLargeJson}>load large json</button>
|
||||
<button on:click={handleClearJson}>clear json</button>
|
||||
<input type="file" on:change={handleChangeFiles}>
|
||||
</p>
|
||||
|
||||
<style type="text/scss" src="App.sass"></style>
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
@import './styles.scss';
|
||||
|
||||
.jsoneditor {
|
||||
border: 1px solid gray;
|
||||
border: 1px solid $theme-color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: $input-padding;
|
||||
|
||||
.menu {
|
||||
font-family: $font-family-menu;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
import { immutableJSONPatch } from './utils/immutableJSONPatch'
|
||||
|
||||
export let json = {}
|
||||
export let onChange = () => {}
|
||||
export let onChangeJson = () => {}
|
||||
export let searchText = ''
|
||||
|
||||
export function get() {
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
$: searchResult = searchText ? doSearch(json, searchText) : undefined
|
||||
|
||||
$: onChange(json)
|
||||
$: onChangeJson(json)
|
||||
|
||||
function handleChangeKey (key, oldKey) {
|
||||
// console.log('handleChangeKey', { key, oldKey })
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
* @param {JSONPatchDocument} operations
|
||||
*/
|
||||
function handleChange (operations) {
|
||||
console.log('handleChange', operations)
|
||||
// console.log('handleChange', operations)
|
||||
|
||||
// TODO: store changes in history
|
||||
json = immutableJSONPatch(json, operations).json
|
||||
|
|
|
|||
12
src/main.js
12
src/main.js
|
|
@ -1,9 +1,5 @@
|
|||
import App from './App.svelte';
|
||||
import JSONEditor from './JSONEditor.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
props: {
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
export default function jsoneditor (config) {
|
||||
return new JSONEditor(config)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@ $error-border-color: #ffd700;
|
|||
$gray: #9d9d9d;
|
||||
$gray-icon: $gray;
|
||||
$light-gray: #c0c0c0;
|
||||
$input-padding: 5px;
|
||||
|
||||
|
||||
$line-height: 18px;
|
||||
$indentation-width: 18px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue