fix: code highlight doesn't update unless model is linked

Fix koca#35
jefrydco · Feb 11, 2020 · 6d86808 · 6d86808
1 parent e421a78
commit 6d86808
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -87,6 +87,7 @@ export default {
       undoTimestamp: 0,
       lastPos: 0,
       codeData: "",
+      content: "",
       composing: false
     };
   },
@@ -101,6 +102,14 @@ export default {
         }
       }
     },
+    codeData: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.content = prism(newVal, this.language);
+        }
+      }
+    },
     content: {
       immediate: true,
       handler() {
@@ -119,9 +128,6 @@ export default {
     }
   },
   computed: {
-    content() {
-      return prism(this.codeData, this.language);
-    },
     lineNumbersCount() {
       let totalLines = this.codeData.split(/\r\n|\n/).length;
       // TODO: Find a better way of doing this - ignore last line break (os spesific etc.)
@@ -346,6 +352,10 @@ export default {
         }
       }
 
+      if (!this.code) {
+        this.codeData = evt.target.innerText;
+      }
+
       if (this.emitEvents) {
         this.$emit("keyup", evt);
       }

diff --git a/tests/unit/Editor.spec.js b/tests/unit/Editor.spec.js
@@ -53,6 +53,17 @@ describe("Editor.vue", () => {
     expect(wrapper.vm.code).toEqual("works");
   });
 
+  it("works without v-model", () => {
+    const wrapper = mount(Editor, {
+      emitEvents: true
+    });
+
+    wrapper.vm.codeData = "<html>";
+    expect(wrapper.vm.content).toBe(
+      `<code class="language-js"><span class="token operator">&lt;</span>html<span class="token operator">></span></code>`
+    );
+  });
+
   it("code with sync modifier works", () => {
     const compiled = compileToFunctions(
       '<div><Editor class="foo" :code.sync="code" /></div>'
@@ -156,7 +167,6 @@ describe("Editor.vue", () => {
     });
     const $pre = wrapper.find("pre");
 
-    $pre.element.dispatchEvent(new KeyboardEvent("keyup", { keyCode: 16 }));
     $pre.element.dispatchEvent(new KeyboardEvent("keyup", { keyCode: 16 })); // shift
     $pre.element.dispatchEvent(new KeyboardEvent("keyup", { keyCode: 17 })); // ctrl
     $pre.element.dispatchEvent(new KeyboardEvent("keyup", { keyCode: 18 })); // alt

diff --git a/tests/unit/__snapshots__/Editor.spec.js.snap b/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 class="language-js"></code></pre>
+  <!----> <pre contenteditable="true" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" class="prism-editor__code language-js"></pre>
 </div>
 `;