From 9cf3b257dd109a24b87911b106ce8dab0a3ecd9d Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Sat, 12 Dec 2020 23:31:57 -0500
Subject: [PATCH 1/3] Add click event to wrapper

This will set focus to the text area when height is set. Currently, you need to click on the first line.
---
 packages/vue-prism-editor/src/Editor.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/vue-prism-editor/src/Editor.ts b/packages/vue-prism-editor/src/Editor.ts
index b15d316..b7a9c1c 100644
--- a/packages/vue-prism-editor/src/Editor.ts
+++ b/packages/vue-prism-editor/src/Editor.ts
@@ -589,6 +589,15 @@ export const PrismEditor = Vue.extend({
       },
     });
     const editorContainer = h('div', { staticClass: 'prism-editor__container' }, [textarea, preview]);
-    return h('div', { staticClass: 'prism-editor-wrapper' }, [this.lineNumbers && lineNumbers, editorContainer]);
+    return h('div', {
+      on: {
+        click: ($event: MouseEvent) => {
+          this.$refs.textarea.focus();
+        },
+      },
+      staticClass: 'prism-editor-wrapper',
+    },
+    [this.lineNumbers && lineNumbers, editorContainer]
+    );
   },
 });

From 59824d80e506bb165a1744a9ab19892b686db61f Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Sun, 13 Dec 2020 12:21:11 -0500
Subject: [PATCH 2/3] fix build issue

---
 packages/vue-prism-editor/src/Editor.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/vue-prism-editor/src/Editor.ts b/packages/vue-prism-editor/src/Editor.ts
index b7a9c1c..ccab003 100644
--- a/packages/vue-prism-editor/src/Editor.ts
+++ b/packages/vue-prism-editor/src/Editor.ts
@@ -591,8 +591,9 @@ export const PrismEditor = Vue.extend({
     const editorContainer = h('div', { staticClass: 'prism-editor__container' }, [textarea, preview]);
     return h('div', {
       on: {
-        click: ($event: MouseEvent) => {
-          this.$refs.textarea.focus();
+        click: () => {
+          const input = this.$refs.textarea as HTMLTextAreaElement
+          input.focus();
         },
       },
       staticClass: 'prism-editor-wrapper',

From bebe37b4e814c6e50dcec74c1a453e56fca6a796 Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Sun, 13 Dec 2020 13:06:30 -0500
Subject: [PATCH 3/3] add fixed-height box to demo

---
 packages/example/src/App.vue            | 15 ++++++++++++++-
 packages/vue-prism-editor/src/Editor.ts | 18 ++++++++++--------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/example/src/App.vue b/packages/example/src/App.vue
index 9005ee8..d4d05a9 100644
--- a/packages/example/src/App.vue
+++ b/packages/example/src/App.vue
@@ -17,6 +17,10 @@
             <input type="checkbox" name="ln" v-model="readonly" />
             Readonly
           </label>
+          <label for="ln" class="ml-4">
+            <input type="checkbox" name="ln" v-model="fixedHeight" />
+            Fixed Height
+          </label>
         </div>
         <div class="hero-info">
           Documentation on
@@ -26,7 +30,7 @@
     </header>
     <main class="main max-w-lg mx-auto my-0 p-0">
       <Editor
-        class="my-editor"
+        :class="editorClasses"
         language="html"
         v-model="code"
         :highlight="highlight"
@@ -56,9 +60,15 @@ export default {
   data: () => ({
     lineNumbers: true,
     readonly: false,
+    fixedHeight: false,
     /* eslint-disable */
     code: require('./example.js').default /* eslint-enable */,
   }),
+  computed: {
+    editorClasses() {
+      return this.fixedHeight ? 'my-editor set-height' : 'my-editor';
+    },
+  },
   methods: {
     highlight(code) {
       return highlight(
@@ -87,4 +97,7 @@ export default {
   line-height: 1.5;
   padding: 5px 10px;
 }
+.set-height {
+  height: 20em; /* 20 lines */
+}
 </style>
diff --git a/packages/vue-prism-editor/src/Editor.ts b/packages/vue-prism-editor/src/Editor.ts
index ccab003..29aba04 100644
--- a/packages/vue-prism-editor/src/Editor.ts
+++ b/packages/vue-prism-editor/src/Editor.ts
@@ -589,16 +589,18 @@ export const PrismEditor = Vue.extend({
       },
     });
     const editorContainer = h('div', { staticClass: 'prism-editor__container' }, [textarea, preview]);
-    return h('div', {
-      on: {
-        click: () => {
-          const input = this.$refs.textarea as HTMLTextAreaElement
-          input.focus();
+    return h(
+      'div',
+      {
+        on: {
+          click: (): void => {
+            const input = this.$refs.textarea as HTMLTextAreaElement;
+            input.focus();
+          },
         },
+        staticClass: 'prism-editor-wrapper',
       },
-      staticClass: 'prism-editor-wrapper',
-    },
-    [this.lineNumbers && lineNumbers, editorContainer]
+      [this.lineNumbers && lineNumbers, editorContainer]
     );
   },
 });