Extend HTML mode - persist checkbox value and use across views

src/components/Code.vue

@@ -14,6 +14,8 @@ 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,14 +27,14 @@ export default defineComponent({
   },
   data() {
     return {
-      asHtml: false,
+      asHtml: store.state.asHtml,
     };
   },
   computed: {
     outputCode(): String {
+      store.setAsHTML(this.asHtml);
       if (this.asHtml) {
         const htmlCode = mdToHTML(this.code);
-
         return cleanHtml(htmlCode);
       }
       return this.code;

src/core/markdown.ts

@@ -68,7 +68,7 @@ export function mdImageWithLink({
  * Render Markdown code as HTML code.
  */
 export function mdToHTML(value: string): string {
-  return md.render(value);
+  return md.render(value).trim();
 }
 
 /**

src/store.ts

@@ -4,6 +4,7 @@
 import { DEBUG } from "@/constants/";
 import { DEFAULT_REPO_INPUTS } from "@/constants/badgeValues";
 import { reactive } from "vue";
+// import  asHtml from "@/components/Code.vue";
 
 /**
  * Global store.
@@ -14,6 +15,7 @@ const store = {
   state: reactive({
     repoUsername: DEFAULT_REPO_INPUTS.username,
     repoName: DEFAULT_REPO_INPUTS.repoName,
+    asHtml: false,
   }),
 
   /**
@@ -37,6 +39,17 @@ const store = {
 
     this.state.repoName = value;
   },
+
+  /**
+   * Store asHtml value. e.g. true or false.
+   */
+  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", () => {