diff --git a/app/assets/javascripts/vue_shared/components/source_editor.vue b/app/assets/javascripts/vue_shared/components/source_editor.vue index 6131fc92843fd483085ce48ac2102d2c29ae65b3..658a33fb7284369a71a13c17474849a122245fd2 100644 --- a/app/assets/javascripts/vue_shared/components/source_editor.vue +++ b/app/assets/javascripts/vue_shared/components/source_editor.vue @@ -58,12 +58,22 @@ export default { required: false, default: CONTENT_UPDATE_DEBOUNCE, }, + useDynamicHeight: { + type: Boolean, + required: false, + default: true, + }, }, data() { return { editor: null, }; }, + computed: { + directives() { + return this.useDynamicHeight ? { DynamicHeight } : {}; + }, + }, watch: { fileName(newVal) { this.editor.updateModelLanguage(newVal); @@ -107,7 +117,7 @@ export default {
diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap index 6414ab6dfba3e3802dc72413ba7b6dc1dfea6b23..85926f6d480ee841c16bc30568268faaab7c8214 100644 --- a/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap +++ b/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap @@ -18,6 +18,7 @@ exports[`Snippet Blob Edit component with loaded blob matches snapshot 1`] = ` extensions="[object Object]" fileglobalid="blob_local_7" filename="foo/bar/test.md" + usedynamicheight="true" value="Lorem ipsum dolar sit amet, consectetur adipiscing elit." /> diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js index 539939216215569abc4f34f070c52a6a9cb4839a..773ceebed969705f962266ab2aeb9eb1b485f004 100644 --- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js +++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js @@ -186,6 +186,7 @@ describe('Snippet Blob Edit component', () => { value: TEST_BLOB_LOADED.content, fileGlobalId: TEST_BLOB_LOADED.id, fileName: TEST_BLOB_LOADED.path, + useDynamicHeight: true, }), ); } diff --git a/spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap index 76deb4d0b3691e6a2a91dcc94a428412be231e14..43915e56d156a84ce1381e7aa0000c942b971837 100644 --- a/spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap +++ b/spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap @@ -4,6 +4,7 @@ exports[`Source Editor component rendering matches the snapshot 1`] = ` 
 {
       createInstance: createInstanceMock,
     };
   });
-  function createComponent(props = {}, directives = {}) {
+  function createComponent(props = {}) {
     wrapper = shallowMount(SourceEditor, {
       propsData: {
         value,
@@ -41,7 +40,6 @@ describe('Source Editor component', () => {
         fileGlobalId,
         ...props,
       },
-      directives,
     });
   }
 
@@ -166,12 +164,20 @@ describe('Source Editor component', () => {
       });
     });
 
-    it('applies the v-dynamic-height directive to the editor element', () => {
-      createComponent({}, { DynamicHeight: createMockDirective('dynamic-height') });
-      const editorElement = wrapper.find('[data-testid="source-editor-container"]');
-      const directiveBinding = getBinding(editorElement.element, 'dynamic-height');
+    it('applies the v-dynamic-height directive to the editor element when useDynamicHeight is true', () => {
+      createComponent({ useDynamicHeight: true });
 
-      expect(directiveBinding).toBeDefined();
+      const editorDiv = wrapper.find('[data-testid="source-editor-container"]');
+
+      expect(editorDiv.attributes('dynamicheight')).toBeDefined();
+    });
+
+    it('does not the v-dynamic-height directive to the editor element when useDynamicHeight is false', () => {
+      createComponent({ useDynamicHeight: false });
+
+      const editorDiv = wrapper.find('[data-testid="source-editor-container"]');
+
+      expect(editorDiv.attributes('dynamicheight')).toBeUndefined();
     });
   });
 });