Add a message block above the editor for later.

Not currently used, but certainly will be handy.

Author: BigBlueHat

playground/next/editor.mjs

@@ -319,6 +319,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>