Commit 0b6fab37 authored by Paul Slaughter's avatar Paul Slaughter

Fix overflow issues with monaco file editor

*What happened?*
`pre` has some `overflow: auto` rules which
causes issues when loading the monaco
editor that expects to not have `overflow: visible`
on the parent.

*What's the fix?*
We really shouldn't put elements under a `pre`, so
this MR moves `pre` inside the #editor elements
to help present the content while the editor
bit is loading.
parent 491937dd
......@@ -41,6 +41,8 @@ export default {
</script>
<template>
<div class="file-content code">
<pre id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">{{ value }}</pre>
<div id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">
<pre class="editor-loading-content">{{ value }}</pre>
</div>
</div>
</template>
......@@ -16,6 +16,11 @@
padding: 0;
position: relative;
width: 100%;
.editor-loading-content {
height: 100%;
border: 0;
}
}
.ace_gutter-cell {
......
......@@ -40,7 +40,8 @@
= select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2', tabindex: '-1'
.file-editor.code
%pre.js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }= params[:content] || local_assigns[:blob_data]
.js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<
%pre.editor-loading-content= params[:content] || local_assigns[:blob_data]
- if local_assigns[:path]
.js-edit-mode-pane#preview.hide
.center
......
......@@ -29,7 +29,8 @@
.js-file-title.file-title-flex-parent
= f.text_field :file_name, placeholder: s_("Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby"), class: 'form-control js-snippet-file-name', data: { qa_selector: 'file_name_field' }
.file-content.code
%pre#editor{ data: { 'editor-loading': true } }= @snippet.content
#editor{ data: { 'editor-loading': true } }<
%pre.editor-loading-content= @snippet.content
= f.hidden_field :content, class: 'snippet-file-content'
.form-group
......
---
title: Fix overflow issues with monaco file editor
merge_request: 37984
author:
type: fixed
......@@ -4,11 +4,15 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = `
<div
class="file-content code"
>
<pre
<div
data-editor-loading=""
id="editor"
>
<pre
class="editor-loading-content"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</pre>
</div>
</div>
`;
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment