From 9cf2a59969362bb6556938b47714ccbff9b107f4 Mon Sep 17 00:00:00 2001
From: vvechev <velko.vechev@gmail.com>
Date: Fri, 10 Feb 2017 13:13:37 +0100
Subject: [PATCH 1/3] Make the code reactive

Updates the contents of the code editor when the prop is changed. The
use case is an editing environment with multiple files.
---
 src/Monaco.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/Monaco.vue b/src/Monaco.vue
index f2718d0..ada4c11 100644
--- a/src/Monaco.vue
+++ b/src/Monaco.vue
@@ -63,6 +63,12 @@ module.exports = {
         this.highlightLines(lines);
       },
       deep: true
+    },
+    code() {
+        if (!this.editor){
+          return;
+        }
+        this.editor.getModel().setValue(this.code);
     }
   },
   methods: {

From 6a83e7e4c04cafbf5f9a9f16306da499947e5555 Mon Sep 17 00:00:00 2001
From: vvechev <velko.vechev@gmail.com>
Date: Fri, 10 Feb 2017 14:06:13 +0100
Subject: [PATCH 2/3] Fix Readme file to have the correct props (editor options
 doesn't work in the given example)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5951fb4..e30e3a1 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,7 @@ defaults: {
     height="600"
     language="typescript"
     :code="code"
-    :editorOptions="options"
+    :options="options"
     @mounted="onMounted"
     @codeChange="onCodeChange"
     >

From a9421d95944e59497f5b469147ed060fca1bb637 Mon Sep 17 00:00:00 2001
From: Velko Vechev <velko@eduroam-als-dock-1-243.ethz.ch>
Date: Wed, 15 Feb 2017 17:06:04 +0100
Subject: [PATCH 3/3] Add inline decorations. Add scroll to line

---
 src/Monaco.vue | 44 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/Monaco.vue b/src/Monaco.vue
index ada4c11..20b74bc 100644
--- a/src/Monaco.vue
+++ b/src/Monaco.vue
@@ -19,6 +19,11 @@ module.exports = {
       number: 0,
       class: ''
     }] },
+    decorations: {type: Array, default: () => [{
+      lines: [],
+      class: ''
+    }]},
+    scrollToLine: {type: Number, default: 0},
     changeThrottle: { type: Number, default: 0 }
   },
   mounted() {
@@ -54,7 +59,8 @@ module.exports = {
         cursorStyle: 'line',
         automaticLayout: false,
         glyphMargin: true
-      }
+      },
+      decorationKeys: []
     }
   },
   watch: {
@@ -69,9 +75,32 @@ module.exports = {
           return;
         }
         this.editor.getModel().setValue(this.code);
+    },
+    decorations: {
+      handler(lines) {
+        this.decorateLines(lines);
+      }
+    },
+    scrollToLine: {
+       handler(lineNumber) {
+
+        this.scrollTo(lineNumber);
+      }
     }
   },
   methods: {
+    scrollTo(lineNumber){
+        
+        const number = parseInt(lineNumber);
+        if (!this.editor && number < 1 || isNaN(number)) {
+          return;
+        }
+
+        //Center the edirot on the line we are scrolling to
+        const offSet = this.editor.getTopForLineNumber(number) - window.innerHeight/2;
+        this.editor.setScrollTop(offSet);
+
+    },
     highlightLines(lines) {
       if (!this.editor) {
         return;
@@ -95,6 +124,19 @@ module.exports = {
         }
       });
     },
+    decorateLines(decorations){
+      if (!this.editor) {
+        return;
+      }
+      var decorationsArray = [];
+
+      decorations.forEach((decoration) => {
+          decorationsArray.push({ range: new this.monaco.Range(...decoration.lines), options: { inlineClassName: decoration.class}});
+      });
+
+      this.decorationKeys = this.editor.getModel().deltaDecorations(this.decorationKeys, decorationsArray);
+
+    },
     editorHasLoaded(editor, monaco) {
       this.editor = editor;
       this.monaco = monaco;