diff --git a/x-pack/plugins/grokdebugger/common/constants/editor.js b/x-pack/plugins/grokdebugger/common/constants/editor.js
new file mode 100644
index 000000000000..44e395f8882d
--- /dev/null
+++ b/x-pack/plugins/grokdebugger/common/constants/editor.js
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const EDITOR = {
+  PATTERN_MIN_LINES: 3,
+  PATTERN_MAX_LINES: 10,
+  SAMPLE_DATA_MIN_LINES: 3,
+  SAMPLE_DATA_MAX_LINES: 50,
+  SCROLL_MARGIN_TOP: 4,
+  SCROLL_MARGIN_BOTTOM: 4,
+};
diff --git a/x-pack/plugins/grokdebugger/common/constants/index.js b/x-pack/plugins/grokdebugger/common/constants/index.js
index 85b819624b70..12e440d7ed85 100644
--- a/x-pack/plugins/grokdebugger/common/constants/index.js
+++ b/x-pack/plugins/grokdebugger/common/constants/index.js
@@ -6,3 +6,4 @@
 
 export { ROUTES } from './routes';
 export { PLUGIN } from './plugin';
+export { EDITOR } from './editor';
diff --git a/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js b/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js
new file mode 100644
index 000000000000..a51c284e3da5
--- /dev/null
+++ b/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EDITOR } from '../../../common/constants';
+
+export function applyEditorOptions(editor, minLines, maxLines) {
+  editor.getSession().setUseWrapMode(true);
+
+  /*
+    * This sets the space between the editor's borders and the
+    * edges of the top/bottom lines to make for a less-crowded
+    * typing experience.
+    */
+  editor.renderer.setScrollMargin(
+    EDITOR.SCROLL_MARGIN_TOP,
+    EDITOR.SCROLL_MARGIN_BOTTOM,
+    0,
+    0
+  );
+
+  editor.setOptions({
+    highlightActiveLine: false,
+    highlightGutterLine: false,
+    minLines,
+    maxLines
+  });
+
+  editor.$blockScrolling = Infinity;
+}
diff --git a/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js b/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js
new file mode 100644
index 000000000000..24aafeabdd3b
--- /dev/null
+++ b/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { applyEditorOptions } from './apply_editor_options';
+import { EDITOR } from '../../../common/constants';
+
+describe('applyEditorOptions', () => {
+  let editor;
+  let setUseWrapMode;
+  let setScrollMargin;
+  let setOptions;
+
+  beforeEach(() => {
+    setUseWrapMode = jest.fn();
+    setScrollMargin = jest.fn();
+    setOptions = jest.fn();
+
+    editor = {
+      getSession: () => {
+        return { setUseWrapMode };
+      },
+      renderer: {
+        setScrollMargin,
+      },
+      setOptions,
+    };
+  });
+
+  it('creates default props and given line sizes', () => {
+    const minLines = 14;
+    const maxLines = 90;
+
+    applyEditorOptions(editor, minLines, maxLines);
+
+    expect(setUseWrapMode.mock.calls).toHaveLength(1);
+    expect(setUseWrapMode.mock.calls[0][0]).toBe(true);
+
+    expect(setScrollMargin.mock.calls).toHaveLength(1);
+    expect(setScrollMargin.mock.calls[0][0]).toEqual(EDITOR.SCROLL_MARGIN_TOP);
+    expect(setScrollMargin.mock.calls[0][1]).toEqual(EDITOR.SCROLL_MARGIN_BOTTOM);
+    expect(setScrollMargin.mock.calls[0][2]).toEqual(0);
+    expect(setScrollMargin.mock.calls[0][3]).toEqual(0);
+
+    expect(setOptions.mock.calls).toHaveLength(1);
+    expect(setOptions.mock.calls[0][0]).toEqual({
+      highlightActiveLine: false,
+      highlightGutterLine: false,
+      minLines: 14,
+      maxLines: 90,
+    });
+
+    expect(editor.$blockScrolling).toEqual(Infinity);
+  });
+});
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html
index 5c47a0b9c194..d252743e7a26 100644
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html
@@ -22,15 +22,17 @@ MSG message-id=<%{GREEDYDATA}></code></pre>
           </div>
         </div>
       </div>
-      <div
-        class="custom-patterns-input-editor grokdebugger-ace-editor kuiVerticalRhythm"
-        require-keys="true"
-        ui-ace="{
-          onLoad: aceLoaded
-        }"
-        ng-model="customPatternsInput.customPatterns"
-        data-test-subj="aceCustomPatternsInput"
+      <div class="grokdebugger-ace-editor">
+        <div
+          class="custom-patterns-input-editor kuiVerticalRhythm"
+          require-keys="true"
+          ui-ace="{
+            onLoad: aceLoaded
+          }"
+          ng-model="customPatternsInput.customPatterns"
+          data-test-subj="aceCustomPatternsInput"
         ></div>
+      </div>
     </div>
   </toggle-panel>
 </form>
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js
index 243744bb7c10..7fd0d60b768a 100644
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js
@@ -6,6 +6,8 @@
 
 import { uiModules } from 'ui/modules';
 import { InitAfterBindingsWorkaround } from 'ui/compat';
+import { EDITOR } from '../../../../../common/constants';
+import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
 import template from './custom_patterns_input.html';
 import './custom_patterns_input.less';
 import 'ui/toggle_panel';
@@ -32,14 +34,7 @@ app.directive('customPatternsInput', function () {
         });
         $scope.aceLoaded = (editor) => {
           this.editor = editor;
-          editor.getSession().setUseWrapMode(true);
-          editor.setOptions({
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-            minLines: 3,
-            maxLines: 25
-          });
-          editor.$blockScrolling = Infinity;
+          applyEditorOptions(editor, EDITOR.PATTERN_MIN_LINES, EDITOR.PATTERN_MAX_LINES);
         };
       }
 
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html
index 364e9df0ef77..ab4f97223a03 100644
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html
@@ -3,14 +3,16 @@
     <label class="kuiLabel kuiVerticalRhythmSmall">
       Sample Data
     </label>
-    <div
-      class="event-input-editor grokdebugger-ace-editor kuiVerticalRhythmSmall"
-      require-keys="true"
-      ui-ace="{
-        onLoad: aceLoaded
-      }"
-      ng-model="eventInput.rawEvent"
-      data-test-subj="aceEventInput"
-    ></div>
+    <div class="grokdebugger-ace-editor">
+      <div
+        class="event-input-editor kuiVerticalRhythmSmall"
+        require-keys="true"
+        ui-ace="{
+          onLoad: aceLoaded
+        }"
+        ng-model="eventInput.rawEvent"
+        data-test-subj="aceEventInput"
+      ></div>
+    </div>
   </div>
 </form>
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js
index 870c0353945d..a827289b13fd 100644
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js
@@ -5,6 +5,8 @@
  */
 
 import { uiModules } from 'ui/modules';
+import { EDITOR } from '../../../../../common/constants';
+import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
 import template from './event_input.html';
 import './event_input.less';
 import 'ace';
@@ -27,14 +29,7 @@ app.directive('eventInput', function () {
         });
         $scope.aceLoaded = (editor) => {
           this.editor = editor;
-          editor.getSession().setUseWrapMode(true);
-          editor.setOptions({
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-            minLines: 3,
-            maxLines: 10
-          });
-          editor.$blockScrolling = Infinity;
+          applyEditorOptions(editor, EDITOR.SAMPLE_DATA_MIN_LINES, EDITOR.SAMPLE_DATA_MAX_LINES);
         };
       }
     }
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html
index 32f35386ad32..4c6acc5d374b 100644
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html
@@ -3,14 +3,16 @@
     <label class="kuiLabel kuiVerticalRhythmSmall">
       Grok Pattern
     </label>
-    <div
-      class="pattern-input-editor grokdebugger-ace-editor kuiVerticalRhythmSmall"
-      require-keys="true"
-      ui-ace="{
-        onLoad: aceLoaded
-      }"
-      ng-model="patternInput.pattern"
-      data-test-subj="acePatternInput"
-    ></div>
+    <div class="grokdebugger-ace-editor">
+      <div
+        class="pattern-input-editor kuiVerticalRhythmSmall"
+        require-keys="true"
+        ui-ace="{
+          onLoad: aceLoaded
+        }"
+        ng-model="patternInput.pattern"
+        data-test-subj="acePatternInput"
+      ></div>
+    </div>
   </div>
 </form>
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js
index dc9af3dc428d..f119a40cb779 100644
--- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js
+++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js
@@ -5,6 +5,8 @@
  */
 
 import { uiModules } from 'ui/modules';
+import { EDITOR } from '../../../../../common/constants';
+import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
 import template from './pattern_input.html';
 import './pattern_input.less';
 import { GrokMode } from '../../../../lib/ace';
@@ -27,14 +29,7 @@ app.directive('patternInput', function () {
         });
         $scope.aceLoaded = (editor) => {
           this.editor = editor;
-          editor.getSession().setUseWrapMode(true);
-          editor.setOptions({
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-            minLines: 3,
-            maxLines: 10
-          });
-          editor.$blockScrolling = Infinity;
+          applyEditorOptions(editor, EDITOR.PATTERN_MIN_LINES, EDITOR.PATTERN_MAX_LINES);
           editor.getSession().setMode(new GrokMode());
         };
       }