Extend HTML mode - persist checkbox value and use across views

src/components/Code.vue

@@ -1,7 +1,7 @@
 // Render Markdown as a codeblock. Apply highlighting on content changes.
 <template>
   <div>
-    <Checkbox label="Show HTML" v-model="asHtml" />
+    <Checkbox label="Show HTML" v-model="asHtml" @change="storeAsHtml()" />
     <br />
 
     <pre><code ref="codeBlock" class="markdown">{{ outputCode }}</code></pre>
@@ -14,6 +14,7 @@ import { defineComponent } from "vue";
 
 import { cleanHtml, mdToHTML } from "@/core/markdown";
 import Checkbox from "./Checkbox.vue";
+import store from "@/store";
 
 export default defineComponent({
   name: "Code",
@@ -25,7 +26,7 @@ export default defineComponent({
   },
   data() {
     return {
-      asHtml: false,
+      asHtml: store.state.asHtml,
     };
   },
   computed: {
@@ -35,10 +36,14 @@ export default defineComponent({
 
         return cleanHtml(htmlCode);
       }
+
       return this.code;
     },
   },
   methods: {
+    storeAsHtml() {
+      store.setAsHtml(this.asHtml);
+    },
     highlight() {
       const block = this.$refs.codeBlock as HTMLElement;
       hljs.highlightElement(block);

src/core/markdown.ts

@@ -65,10 +65,10 @@ export function mdImageWithLink({
 /**
  * Markdown to HTML.
  *
- * Render Markdown code as HTML code.
+ * Render Markdown code as HTML code, without trailing newline.
  */
 export function mdToHTML(value: string): string {
-  return md.render(value);
+  return md.render(value).trim();
 }
 
 /**

src/store.ts

@@ -14,6 +14,7 @@ const store = {
   state: reactive({
     repoUsername: DEFAULT_REPO_INPUTS.username,
     repoName: DEFAULT_REPO_INPUTS.repoName,
+    asHtml: false,
   }),
 
   /**
@@ -37,6 +38,17 @@ const store = {
 
     this.state.repoName = value;
   },
+
+  /**
+   * Store value for whether output is displayed as HTML or Markdown.
+   */
+  setAsHtml(value: boolean) {
+    if (DEBUG) {
+      console.debug(`Storing asHtml as: ${value}`);
+    }
+
+    this.state.asHtml = value;
+  },
 };
 
 export default store;

tests/unit/components/Code.spec.ts

@@ -1,5 +1,7 @@
 import Code from "@/components/Code.vue";
 import { shallowMount } from "@vue/test-utils";
+import store from "@/store";
+
 
 describe("Code.vue", () => {
   it("renders a Markdown codeblock as Markdown code, with highlighting", () => {