Global setting for live editor visibility

src/main.js

@@ -110,7 +110,7 @@ router.beforeEach(function (to, from, next) {
 
 const app = createApp(App);
 
-app.config.globalProperties.$appState = reactive({inputStyle: 'outlined', darkTheme: false});
+app.config.globalProperties.$appState = reactive({inputStyle: 'outlined', darkTheme: false, codeSandbox: false});
 
 app.use(PrimeVue, {ripple: true});
 app.use(ToastService);

src/views/liveeditor/LiveEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <span style="margin-top: -0.2rem">
+    <span v-if="showEditor">
         <Button @click="postSandboxParameters()" label="Edit in CodeSandbox" class="liveEditorButton" />
     </span>
 </template>
@@ -45,7 +45,7 @@ export default {
         activeButtonIndex: {
             type: String,
             default: null
-        },
+        }
     },
     methods: {
         postSandboxParameters() {
@@ -494,6 +494,11 @@ img.flag {
 
             return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
         }
+    },
+    computed: {
+        showEditor() {
+            return this.$appState.codeSandbox;
+        }
     }
 }
 </script>