debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/markdown/field.vue

302 lines
8.4 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2020-11-24 15:15:51 +05:30
/* eslint-disable vue/no-v-html */
2018-12-13 13:39:08 +05:30
import $ from 'jquery';
2019-12-04 20:38:33 +05:30
import '~/behaviors/markdown/render_gfm';
2020-05-24 23:13:21 +05:30
import { unescape } from 'lodash';
2020-11-24 15:15:51 +05:30
import { GlIcon } from '@gitlab/ui';
2019-09-30 21:07:59 +05:30
import { __, sprintf } from '~/locale';
2019-02-15 15:39:39 +05:30
import { stripHtml } from '~/lib/utils/text_utility';
2020-10-24 23:57:45 +05:30
import { deprecatedCreateFlash as Flash } from '~/flash';
2020-07-28 23:09:34 +05:30
import GLForm from '~/gl_form';
import MarkdownHeader from './header.vue';
import MarkdownToolbar from './toolbar.vue';
2021-02-22 17:27:13 +05:30
import GfmAutocomplete from '~/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue';
2019-02-15 15:39:39 +05:30
import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
2020-07-28 23:09:34 +05:30
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2019-12-04 20:38:33 +05:30
import axios from '~/lib/utils/axios_utils';
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
2021-02-22 17:27:13 +05:30
GfmAutocomplete,
2020-07-28 23:09:34 +05:30
MarkdownHeader,
MarkdownToolbar,
2020-11-24 15:15:51 +05:30
GlIcon,
2019-02-15 15:39:39 +05:30
Suggestions,
2018-12-13 13:39:08 +05:30
},
2020-07-28 23:09:34 +05:30
mixins: [glFeatureFlagsMixin()],
2018-12-13 13:39:08 +05:30
props: {
2021-01-03 14:25:43 +05:30
/**
* This prop should be bound to the value of the `<textarea>` element
* that is rendered as a child of this component (in the `textarea` slot)
*/
textareaValue: {
type: String,
required: true,
},
markdownDocsPath: {
type: String,
required: true,
},
2020-03-13 15:44:24 +05:30
isSubmitting: {
type: Boolean,
required: false,
default: false,
},
2018-12-13 13:39:08 +05:30
markdownPreviewPath: {
type: String,
required: false,
default: '',
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
addSpacingClasses: {
type: Boolean,
required: false,
default: true,
2017-09-10 17:25:29 +05:30
},
2018-12-13 13:39:08 +05:30
quickActionsDocsPath: {
type: String,
required: false,
default: '',
2017-09-10 17:25:29 +05:30
},
2018-12-13 13:39:08 +05:30
canAttachFile: {
type: Boolean,
required: false,
default: true,
},
enableAutocomplete: {
type: Boolean,
required: false,
default: true,
2017-09-10 17:25:29 +05:30
},
2019-02-15 15:39:39 +05:30
line: {
type: Object,
required: false,
default: null,
},
note: {
type: Object,
required: false,
default: () => ({}),
},
canSuggest: {
type: Boolean,
required: false,
default: false,
},
helpPagePath: {
type: String,
required: false,
default: '',
},
2019-09-04 21:01:54 +05:30
showSuggestPopover: {
type: Boolean,
required: false,
default: false,
},
2018-12-13 13:39:08 +05:30
},
data() {
return {
markdownPreview: '',
referencedCommands: '',
referencedUsers: '',
2019-02-15 15:39:39 +05:30
hasSuggestion: false,
2018-12-13 13:39:08 +05:30
markdownPreviewLoading: false,
previewMarkdown: false,
2019-07-07 11:18:12 +05:30
suggestions: this.note.suggestions || [],
2018-12-13 13:39:08 +05:30
};
},
computed: {
shouldShowReferencedUsers() {
const referencedUsersThreshold = 10;
return this.referencedUsers.length >= referencedUsersThreshold;
},
2019-02-15 15:39:39 +05:30
lineContent() {
const [firstSuggestion] = this.suggestions;
if (firstSuggestion) {
return firstSuggestion.from_content;
}
if (this.line) {
const { rich_text: richText, text } = this.line;
if (text) {
return text;
}
2020-05-24 23:13:21 +05:30
return unescape(stripHtml(richText).replace(/\n/g, ''));
2019-02-15 15:39:39 +05:30
}
return '';
},
lineNumber() {
let lineNumber;
if (this.line) {
const { new_line: newLine, old_line: oldLine } = this.line;
lineNumber = newLine || oldLine;
}
return lineNumber;
},
lineType() {
return this.line ? this.line.type : '';
},
2019-09-30 21:07:59 +05:30
addMultipleToDiscussionWarning() {
return sprintf(
__(
2021-01-29 00:20:46 +05:30
'You are about to add %{usersTag} people to the discussion. They will all receive a notification.',
2019-09-30 21:07:59 +05:30
),
{
usersTag: `<strong><span class="js-referenced-users-count">${this.referencedUsers.length}</span></strong>`,
},
false,
);
},
2018-12-13 13:39:08 +05:30
},
2020-03-13 15:44:24 +05:30
watch: {
isSubmitting(isSubmitting) {
if (!isSubmitting || !this.$refs['markdown-preview'].querySelectorAll) {
return;
}
const mediaInPreview = this.$refs['markdown-preview'].querySelectorAll('video, audio');
if (mediaInPreview) {
mediaInPreview.forEach(media => {
media.pause();
});
}
},
},
2018-12-13 13:39:08 +05:30
mounted() {
2020-07-28 23:09:34 +05:30
// GLForm class handles all the toolbar buttons
2021-01-03 14:25:43 +05:30
return new GLForm(
$(this.$refs['gl-form']),
{
emojis: this.enableAutocomplete,
members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
mergeRequests: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
2021-02-22 17:27:13 +05:30
epics: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
2021-01-29 00:20:46 +05:30
milestones: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
2021-01-03 14:25:43 +05:30
labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
2021-01-29 00:20:46 +05:30
snippets: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
vulnerabilities: this.enableAutocomplete,
2021-01-03 14:25:43 +05:30
},
true,
);
2018-12-13 13:39:08 +05:30
},
beforeDestroy() {
const glForm = $(this.$refs['gl-form']).data('glForm');
if (glForm) {
glForm.destroy();
}
},
methods: {
showPreviewTab() {
if (this.previewMarkdown) return;
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
this.previewMarkdown = true;
2018-03-17 18:26:18 +05:30
2021-01-03 14:25:43 +05:30
if (this.textareaValue) {
2018-12-13 13:39:08 +05:30
this.markdownPreviewLoading = true;
2019-02-15 15:39:39 +05:30
this.markdownPreview = __('Loading…');
2019-12-04 20:38:33 +05:30
axios
2021-01-03 14:25:43 +05:30
.post(this.markdownPreviewPath, { text: this.textareaValue })
2019-12-04 20:38:33 +05:30
.then(response => this.renderMarkdown(response.data))
2019-02-15 15:39:39 +05:30
.catch(() => new Flash(__('Error loading markdown preview')));
2018-12-13 13:39:08 +05:30
} else {
this.renderMarkdown();
}
},
showWriteTab() {
this.markdownPreview = '';
this.previewMarkdown = false;
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
renderMarkdown(data = {}) {
this.markdownPreviewLoading = false;
2019-09-30 21:07:59 +05:30
this.markdownPreview = data.body || __('Nothing to preview.');
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
if (data.references) {
this.referencedCommands = data.references.commands;
this.referencedUsers = data.references.users;
2019-02-15 15:39:39 +05:30
this.hasSuggestion = data.references.suggestions && data.references.suggestions.length;
2019-07-07 11:18:12 +05:30
this.suggestions = data.references.suggestions;
2018-12-13 13:39:08 +05:30
}
2018-03-17 18:26:18 +05:30
2019-03-02 22:35:43 +05:30
this.$nextTick()
.then(() => $(this.$refs['markdown-preview']).renderGFM())
.catch(() => new Flash(__('Error rendering markdown preview')));
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2017-09-10 17:25:29 +05:30
</script>
<template>
<div
2018-11-08 19:23:39 +05:30
ref="gl-form"
2020-07-28 23:09:34 +05:30
:class="{ 'gl-mt-3 gl-mb-3': addSpacingClasses }"
2021-01-03 14:25:43 +05:30
class="js-vue-markdown-field md-area position-relative gfm-form"
2019-02-15 15:39:39 +05:30
>
2017-09-10 17:25:29 +05:30
<markdown-header
:preview-markdown="previewMarkdown"
2019-02-15 15:39:39 +05:30
:line-content="lineContent"
:can-suggest="canSuggest"
2019-09-04 21:01:54 +05:30
:show-suggest-popover="showSuggestPopover"
2018-03-17 18:26:18 +05:30
@preview-markdown="showPreviewTab"
@write-markdown="showWriteTab"
2019-09-04 21:01:54 +05:30
@handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
2018-03-17 18:26:18 +05:30
/>
2019-02-15 15:39:39 +05:30
<div v-show="!previewMarkdown" class="md-write-holder">
2017-09-10 17:25:29 +05:30
<div class="zen-backdrop">
2021-02-22 17:27:13 +05:30
<gfm-autocomplete v-if="glFeatures.tributeAutocomplete">
2020-07-28 23:09:34 +05:30
<slot name="textarea"></slot>
2021-02-22 17:27:13 +05:30
</gfm-autocomplete>
2020-07-28 23:09:34 +05:30
<slot v-else name="textarea"></slot>
2019-09-30 21:07:59 +05:30
<a
2020-10-24 23:57:45 +05:30
class="zen-control zen-control-leave js-zen-leave gl-text-gray-500"
2019-09-30 21:07:59 +05:30
href="#"
2020-06-23 00:09:42 +05:30
:aria-label="__('Leave zen mode')"
2019-09-30 21:07:59 +05:30
>
2020-11-24 15:15:51 +05:30
<gl-icon :size="16" name="minimize" />
2017-09-10 17:25:29 +05:30
</a>
<markdown-toolbar
2018-03-17 18:26:18 +05:30
:markdown-docs-path="markdownDocsPath"
:quick-actions-docs-path="quickActionsDocsPath"
:can-attach-file="canAttachFile"
/>
2017-09-10 17:25:29 +05:30
</div>
</div>
2019-02-15 15:39:39 +05:30
<template v-if="hasSuggestion">
2017-09-10 17:25:29 +05:30
<div
2019-02-15 15:39:39 +05:30
v-show="previewMarkdown"
2017-09-10 17:25:29 +05:30
ref="markdown-preview"
2019-07-07 11:18:12 +05:30
class="js-vue-md-preview md-preview-holder"
2019-01-03 12:48:30 +05:30
>
2019-02-15 15:39:39 +05:30
<suggestions
v-if="hasSuggestion"
:note-html="markdownPreview"
:from-line="lineNumber"
:from-content="lineContent"
:line-type="lineType"
:disabled="true"
:suggestions="suggestions"
:help-page-path="helpPagePath"
/>
2019-01-03 12:48:30 +05:30
</div>
2019-02-15 15:39:39 +05:30
</template>
<template v-else>
2019-01-03 12:48:30 +05:30
<div
2019-02-15 15:39:39 +05:30
v-show="previewMarkdown"
ref="markdown-preview"
2019-07-07 11:18:12 +05:30
class="js-vue-md-preview md md-preview-holder"
2019-02-15 15:39:39 +05:30
v-html="markdownPreview"
></div>
</template>
<template v-if="previewMarkdown && !markdownPreviewLoading">
<div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div>
<div v-if="shouldShowReferencedUsers" class="referenced-users">
2021-01-29 00:20:46 +05:30
<gl-icon name="warning-solid" />
2019-09-30 21:07:59 +05:30
<span v-html="addMultipleToDiscussionWarning"></span>
2018-03-17 18:26:18 +05:30
</div>
</template>
2017-09-10 17:25:29 +05:30
</div>
</template>