editor_content
viewof editor_content = JSONeditorAsView({initialValue:{"Hallo":"Welt","more":[1,2,3]}})
store
JSONeditorAsView({dataView:viewof store})
JSONeditorAsView({mode:"text",dataView:viewof store})
JSONeditorAsView = {
return function (p) {
let {mode,dataView,initialValue,expandall} = p?p:{mode:'tree',initialValue:{}};
let _place = html`<div id="myPlace01"/>`;
let __value = { value: initialValue, selection: [] };
let __list =[];
let __editor = new jsoneditor(_place,{
mode:mode?mode:'tree',
onChange:function() {
let newVal = { value: __editor.get(), selection: __editor.getSelection() };
console.log("onChange", newVal);
__value=newVal;
_place.dispatchEvent({type: "input", value:newVal})
if (expandall) __editor.expandAll();
},
onSelectionChange:function(start,end) {
let newVal = { value: __value.value, selection: __editor.getSelection() };
console.log("onSelectionChange", newVal);
__value=newVal;
_place.dispatchEvent({type: "input", value:newVal})
if (expandall) __editor.expandAll();
} /*,
onEvent:function onEvent(node, event) {
console.log("onEvent", event)
let newVal = { value: __value.value, selection: __editor.getSelection() };
if (event.key) {
newVal['key']=event.key
__value=newVal;
_place.dispatchEvent({type: "input", value:newVal})
}
if (expandall) __editor.expandAll();
}*/
},initialValue);
if (expandall) __editor.expandAll();
//__editor.set(__value);
Object.defineProperty(_place, 'value' , {get: function() {return __value;},
set: function(value)
{
const nos = JSON.stringify(value);
const cos = JSON.stringify(__value);
//console.log(cos+"\n"+nos);
if (cos==nos)
return;
let no = JSON.parse(nos);
__editor.set(no);
__value=no;
_place.dispatchEvent({type: "input",value:no})
}
}
);
_place.addEventListener = function(type, listener) {
if (type != "input" || __list.includes(listener)) return;
__list = [listener].concat(__list);
}
_place.removeEventListener = function(type, listener) {
if (type != "input") return;
__list = __list.filter(l => l !== listener);
}
_place.dispatchEvent = function(event) {
console.log("place dispatch event");
const p = Promise.resolve(event);
__list.forEach(l => p.then(l));
};
if (dataView)
bindVisualView2DataView(_place,dataView);
return _place;
}
}
function bindVisualView2DataView(inputView, dataView) {
inputView.value = dataView.value;
function updateStore(e) {
let value= e.value;
let nos = JSON.stringify(value);
if (JSON.stringify(dataView.value) != nos)
dataView.value = JSON.parse(nos);
}
inputView.addEventListener("input", updateStore);
function updateView(e) {
let value= e.value;
let nos = JSON.stringify(value);
if (JSON.stringify(inputView.value) != nos)
inputView.value = JSON.parse(nos);
}
dataView.addEventListener("input", updateView);
return Generators.disposable(inputView, () => {
dataView.removeEventListener("input", updateView);
});
}
stylesheet = html`<link rel='stylesheet' href='https://unpkg.com/jsoneditor@5.26.3/dist/jsoneditor.min.css' />`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
