fix: make sure the language class is kept after first render (#31)

* fix: make sure the language class is kept after first render

closes  #30

* test: update tests to pass

Author: elevatebart

src/utils/prism.js

@@ -1,16 +1,16 @@
 /* global Prism */
 import escapeHtml from "escape-html";
 
-function wrap(code, lang) {
+function wrap(code, lang, langPrism) {
   if (lang === "text") {
     code = escapeHtml(code);
   }
-  return `<code>${code}</code>`;
+  return `<code class="language-${langPrism}">${code}</code>`;
 }
 
 export default (str, lang) => {
   if (!lang) {
-    return wrap(str, "text");
+    return wrap(str, "text", "text");
   }
   lang = lang.toLowerCase();
   const rawLang = lang;
@@ -25,7 +25,7 @@ export default (str, lang) => {
   }
   if (Prism.languages[lang]) {
     const code = Prism.highlight(str, Prism.languages[lang], lang);
-    return wrap(code, rawLang);
+    return wrap(code, rawLang, lang);
   }
-  return wrap(str, "text");
+  return wrap(str, "text", "text");
 };

tests/unit/Editor.spec.js

@@ -104,8 +104,8 @@ describe("Editor.vue", () => {
       sync: false
     });
 
-    expect(wrapper.vm.content).toBe(
-      `<code><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>`
+    expect(wrapper.vm.content).toMatchInlineSnapshot(
+      `<code class="language-js"><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>`
     );
   });
 });

tests/unit/__snapshots__/Editor.spec.js.snap

@@ -2,6 +2,6 @@
 
 exports[`Editor.vue renders with null value 1`] = `
 <div class="prism-editor-wrapper">
-  <!----> <pre contenteditable="true" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" class="prism-editor__code language-js"><code></code></pre>
+  <!----> <pre contenteditable="true" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" class="prism-editor__code language-js"><code class="language-js"></code></pre>
 </div>
 `;

tests/unit/utils/prism.spec.js

@@ -1,11 +1,11 @@
 import "prismjs";
 import prism from "@/utils/prism";
 const input = 'var x = "Hello World!";';
-const expected =
-  '<code><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"Hello World!"</span><span class="token punctuation">;</span></code>';
 
 describe("prism", () => {
   it("should highlight js(x) code", () => {
-    expect(prism(input, "js")).toBe(expected);
+    expect(prism(input, "js")).toMatchInlineSnapshot(
+      `<code class="language-js"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"Hello World!"</span><span class="token punctuation">;</span></code>`
+    );
   });
 });