diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/markdown/field.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/markdown/field.vue | 33 |
1 files changed, 32 insertions, 1 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"> |