Add a message block above the editor for later.

Not currently used, but certainly will be handy.

Author: BigBlueHat

playground/next/editor.bundle.js

@@ -39937,6 +39937,7 @@ ${O$2.repeat(r.depth)}}`:r.close="}";break}case f$4.TAG:e+=String(i),e+=a(f$4.PO
     },
     remoteDocURL: '',
     remoteSideDocURL: '',
+    message: {type: '', text: ''},
     parseError: '',
     inputTab: 'json-ld',
     outputTab: 'expanded',

playground/next/editor.mjs

@@ -318,6 +318,7 @@ window.app = createApp({
   },
   remoteDocURL: '',
   remoteSideDocURL: '',
+  message: {type: '', text: ''},
   parseError: '',
   inputTab: 'json-ld',
   outputTab: 'expanded',

playground/next/index.html

@@ -113,6 +113,17 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
   <!-- main editor area -->
   <div class="ui one column compact grid container" :class="[editorColumns]">
     <div class="column" :class="{ 'sixteen wide':  editorColumns == '' }">
+      <div class="ui icon message" v-show="message.text" :class="message.type">
+        <i class="icon" :class="{
+          'info circle': message.type == 'info',
+          'check circle': message.type == 'success',
+          'times circle': message.type == 'error',
+          'exclamation triangle': message.type == 'warning'
+        }"></i>
+        <div class="content">
+          <div class="header" v-text="message.text"></div>
+        </div>
+      </div>
       <div class="ui top attached tabular menu">
         <div :class="{ active: inputTab == 'json-ld' }" class="item" @click="inputTab = 'json-ld'"><i class="pencil alternate icon"></i> JSON-LD Input</div>
         <div :class="{ active: inputTab == 'options' }" class="item" @click="inputTab = 'options'"><i class="wrench icon"></i> Options</div>