diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
6 files changed, 54 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 21d6519191f..392c08fc5c0 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -6,12 +6,14 @@ import GLForm from '../../../gl_form'; import markdownHeader from './header.vue'; import markdownToolbar from './toolbar.vue'; import icon from '../icon.vue'; +import suggestion from '~/vue_shared/components/markdown/suggestion.vue'; export default { components: { markdownHeader, markdownToolbar, icon, + suggestion, }, props: { markdownPreviewPath: { @@ -48,6 +50,11 @@ export default { required: false, default: true, }, + line: { + type: Object, + required: false, + default: null, + }, }, data() { return { @@ -63,6 +70,21 @@ export default { const referencedUsersThreshold = 10; return this.referencedUsers.length >= referencedUsersThreshold; }, + mockSuggestion() { + // temporary: this will be generated on the backend and returned via api call in parent + return ` + <p dir="auto">I suggest</p> + 
 + <pre class="code highlight js-syntax-highlight suggestion" lang="suggestion" v-pre="true"><code class="js-render-suggestion"><span id="LC1" class="line" lang="suggestion"><p>Foo</p></span></code></pre> + 
 + + <p dir="auto">Or this</p> + 
 + <pre class="code highlight js-syntax-highlight suggestion" lang="suggestion" v-pre="true"><code class="js-render-suggestion"><span id="LC1" class="line" lang="suggestion"><p>Bar</p></span></code></pre>`; + }, + isSuggestion() { + return this.mockSuggestion.includes('js-render-suggestion'); + }, }, mounted() { /* @@ -163,7 +185,16 @@ export default { </div> </div> <div v-show="previewMarkdown" class="md md-preview-holder md-preview js-vue-md-preview"> - <div ref="markdown-preview" v-html="markdownPreview"></div> + <suggestion + v-if="isSuggestion" + :suggestion-html="mockSuggestion" + :line="line" + /> + <div + v-else + ref="markdown-preview" + v-html="mockSuggestion" + ></div> <span v-if="markdownPreviewLoading"> Loading... </span> </div> <template v-if="previewMarkdown && !markdownPreviewLoading"> diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index 4c4ba537065..8c68a9d5be6 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -119,6 +119,13 @@ export default { :button-title="__('Add a table')" icon="table" /> + <toolbar-button + tag="```suggestion {text} ```" + :prepend="true" + :button-title="__('Insert suggestion')" + :cursor-offset="4" + icon="doc-code" + /> <button v-gl-tooltip aria-label="Go full screen" diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion.vue index d6b0ce2ea9c..18cba8aab39 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion.vue @@ -102,7 +102,6 @@ export default { <div> <div ref="container" - class="md-suggestion-diff" v-html="suggestionHtml" ></div> </div> diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue index 6a2a7adb314..7b30053508f 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue @@ -29,12 +29,12 @@ export default { </script> <template> - <div class="md-suggestion-diff-content"> + <div> <suggestion-diff-header :can-apply="canApply" @apply="applySuggestion" /> - <table class="mb-3"> + <table class="mb-3 md-suggestion-diff"> <tbody> <!-- New Line --> <tr class="line_holder new"> diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue index ddb303b8962..463fc39b5ff 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue @@ -1,5 +1,8 @@ <script> +import Icon from '~/vue_shared/components/icon.vue'; + export default { + components: { Icon }, props: { canApply: { type: Boolean, @@ -17,7 +20,10 @@ export default { <template> <div class="file-title-flex-parent md-suggestion-header border-bottom-0 mt-2"> - Suggested change + <div> + Suggested change + <icon name="question-o" css-classes="link-highlight" /> + </div> <button v-if="canApply" type="button" diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue index a6d2cecdf7e..4bf6a0b9b26 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue @@ -37,6 +37,11 @@ export default { required: false, default: false, }, + cursorOffset: { + type: Number, + required: false, + default: 0, + }, }, }; </script> @@ -45,6 +50,7 @@ export default { <button v-gl-tooltip :data-md-tag="tag" + :data-md-cursor-offset="cursorOffset" :data-md-select="tagSelect" :data-md-block="tagBlock" :data-md-prepend="prepend" |