Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 21 additions & 13 deletions playground/next/editor.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,21 @@ function editorListener(docName) {
changes.push(update.state.doc.toString());
debounce((docName) => {
// set the global `doc` to the latest string from the editor
try {
const parsed = JSON.parse(changes[changes.length-1]);
this[docName] = parsed;
const latestChange = changes[changes.length-1];
if (latestChange === '') {
this[docName] = '';
this.parseError = '';
} catch (err) {
this.parseError = err.message;
};
setEditorValue(readOnlyEditor, '');
return;
} else {
try {
const parsed = JSON.parse(latestChange);
this[docName] = parsed;
this.parseError = '';
} catch (err) {
this.parseError = err.message;
};
}
}, 1000).call(this, docName);
}
});
Expand Down Expand Up @@ -136,9 +144,6 @@ function completeJSONLDTerms(context) {
const nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
const nearestProperty = getNearestPropertyName(context.state, context.pos);

console.log('nearest property name', nearestProperty);
console.log(nodeBefore.name, nodeBefore._parent?.name, nodeBefore);

const textBefore = context.state.sliceDoc(nodeBefore.from, context.pos);
const tagBefore = /@\w*$/.exec(textBefore);
if (!tagBefore && !context.explicit
Expand Down Expand Up @@ -252,7 +257,7 @@ const jsonLdHighlightTheme = EditorView.baseTheme({
function initEditor(id, content, varName) {
return new EditorView({
parent: document.getElementById(id),
doc: JSON.stringify(content, null, 2),
doc: (content === 'object' ? JSON.stringify(content, null, 2) : ''),
extensions: [
basicSetup,
keymap.of([indentWithTab]),
Expand All @@ -270,7 +275,7 @@ const language = new Compartment();

const readOnlyEditor = new EditorView({
parent: document.getElementById('read-only-editor'),
doc: `{}`,
doc: '',
extensions: [
basicSetup,
language.of(json()),
Expand Down Expand Up @@ -305,7 +310,7 @@ function setEditorValue(_editor, doc, lang) {
}

window.app = createApp({
doc: {},
doc: '',
contextDoc: {},
frameDoc: {},
tableQuads: {},
Expand Down Expand Up @@ -426,6 +431,7 @@ window.app = createApp({
this.setOutputTab(this.outputTab);
},
async setOutputTab(value) {
if (!value || !this.doc) return;
if (value) this.outputTab = value;
let context = this.contextDoc;
switch (this.outputTab) {
Expand All @@ -446,6 +452,7 @@ window.app = createApp({
'@context': this.doc['@context']
};
this.contextDoc = context;
setEditorValue(this.sideEditor, this.contextDoc);
}
try {
const compacted = await jsonld.compact(this.doc, {'@context': context['@context'] || {}}, this.options);
Expand All @@ -462,6 +469,7 @@ window.app = createApp({
'@context': this.doc['@context']
};
this.contextDoc = context;
setEditorValue(this.sideEditor, this.contextDoc);
}
try {
const flattened = await jsonld.flatten(this.doc, {'@context': context['@context'] || {}}, this.options);
Expand Down Expand Up @@ -556,7 +564,7 @@ window.app = createApp({
'frameDoc');
},
initMainEditor() {
this.mainEditor = initEditor.call(this, 'editor', {}, 'doc');
this.mainEditor = initEditor.call(this, 'editor', '', 'doc');
},
copyContext() {
this.contextDoc = {
Expand Down
2 changes: 1 addition & 1 deletion playground/next/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
<div class="ui error message" v-show="parseError" v-text="parseError"></div>
<!-- outputs and renderings -->
<div class="ui top attached tabular menu">
<div v-for="(tab, key) in tabs" :class="{ active: outputTab == key }" class="item" @click="setOutputTab(key)"><i class="icon" :class="tab.icon"></i> <span v-text="tab.label"></span></div>
<div v-for="(tab, key) in tabs" :class="{ active: outputTab == key, disabled: doc === '' }" class="item" @click="setOutputTab(key)"><i class="icon" :class="tab.icon"></i> <span v-text="tab.label"></span></div>
</div>
<div class="ui fitted resizable active bottom attached tab segment">
<div class="ui very compact divided grid">
Expand Down