Set main editor to empty.

Sadly, this now (like the existing Playground) throws a linting error by
default...

Author: BigBlueHat

playground/next/editor.mjs

@@ -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);
     }
   });
@@ -249,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]),
@@ -267,7 +275,7 @@ const language = new Compartment();
 
 const readOnlyEditor = new EditorView({
   parent: document.getElementById('read-only-editor'),
-  doc: `{}`,
+  doc: '',
   extensions: [
     basicSetup,
     language.of(json()),
@@ -302,7 +310,7 @@ function setEditorValue(_editor, doc, lang) {
 }
 
 window.app = createApp({
-  doc: {},
+  doc: '',
   contextDoc: {},
   frameDoc: {},
   tableQuads: {},
@@ -423,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) {
@@ -553,7 +562,7 @@ window.app = createApp({
       'frameDoc');
   },
   initMainEditor() {
-    this.mainEditor = initEditor.call(this, 'editor', {}, 'doc');
+    this.mainEditor = initEditor.call(this, 'editor', '', 'doc');
   },
   copyContext() {
     this.contextDoc = {

playground/next/index.html

@@ -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">