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

215 lines
5.2 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2018-12-13 13:39:08 +05:30
import $ from 'jquery';
2019-01-03 12:48:30 +05:30
import { s__ } from '~/locale';
2018-12-13 13:39:08 +05:30
import Flash from '../../../flash';
import GLForm from '../../../gl_form';
import markdownHeader from './header.vue';
import markdownToolbar from './toolbar.vue';
import icon from '../icon.vue';
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
markdownHeader,
markdownToolbar,
icon,
},
props: {
markdownPreviewPath: {
type: String,
required: false,
default: '',
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
markdownDocsPath: {
type: String,
required: true,
2017-09-10 17:25:29 +05:30
},
2018-12-13 13:39:08 +05:30
markdownVersion: {
type: Number,
required: false,
default: 0,
2017-09-10 17:25:29 +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
},
2018-12-13 13:39:08 +05:30
},
data() {
return {
markdownPreview: '',
referencedCommands: '',
referencedUsers: '',
markdownPreviewLoading: false,
previewMarkdown: false,
};
},
computed: {
shouldShowReferencedUsers() {
const referencedUsersThreshold = 10;
return this.referencedUsers.length >= referencedUsersThreshold;
},
},
mounted() {
/*
GLForm class handles all the toolbar buttons
*/
return new GLForm($(this.$refs['gl-form']), {
emojis: this.enableAutocomplete,
members: this.enableAutocomplete,
issues: this.enableAutocomplete,
mergeRequests: this.enableAutocomplete,
epics: this.enableAutocomplete,
milestones: this.enableAutocomplete,
labels: this.enableAutocomplete,
snippets: this.enableAutocomplete,
});
},
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
2018-12-13 13:39:08 +05:30
/*
2018-03-17 18:26:18 +05:30
Can't use `$refs` as the component is technically in the parent component
so we access the VNode & then get the element
*/
2018-12-13 13:39:08 +05:30
const text = this.$slots.textarea[0].elm.value;
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
if (text) {
this.markdownPreviewLoading = true;
this.$http
.post(this.versionedPreviewPath(), { text })
.then(resp => resp.json())
.then(data => this.renderMarkdown(data))
2019-01-03 12:48:30 +05:30
.catch(() => new Flash(s__('Error loading markdown preview')));
2018-12-13 13:39:08 +05:30
} else {
this.renderMarkdown();
}
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
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;
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;
}
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
this.$nextTick(() => {
$(this.$refs['markdown-preview']).renderGFM();
});
},
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
versionedPreviewPath() {
const { markdownPreviewPath, markdownVersion } = this;
return `${markdownPreviewPath}${
markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'
}markdown_version=${markdownVersion}`;
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"
2018-03-17 18:26:18 +05:30
:class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }"
2019-01-03 12:48:30 +05:30
class="md-area js-vue-markdown-field">
2017-09-10 17:25:29 +05:30
<markdown-header
:preview-markdown="previewMarkdown"
2018-03-17 18:26:18 +05:30
@preview-markdown="showPreviewTab"
@write-markdown="showWriteTab"
/>
2019-01-03 12:48:30 +05:30
<div
v-show="!previewMarkdown"
class="md-write-holder"
>
2017-09-10 17:25:29 +05:30
<div class="zen-backdrop">
<slot name="textarea"></slot>
2019-01-03 12:48:30 +05:30
<a
class="zen-control zen-control-leave js-zen-leave"
href="#"
aria-label="Enter zen mode"
>
<icon
:size="32"
name="screen-normal"
/>
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-01-03 12:48:30 +05:30
<div
v-show="previewMarkdown"
class="md md-preview-holder md-preview js-vue-md-preview"
>
2017-09-10 17:25:29 +05:30
<div
ref="markdown-preview"
2019-01-03 12:48:30 +05:30
v-html="markdownPreview"
2018-03-17 18:26:18 +05:30
>
</div>
2019-01-03 12:48:30 +05:30
<span v-if="markdownPreviewLoading">
Loading...
</span>
</div>
2018-12-23 12:14:25 +05:30
<template v-if="previewMarkdown && !markdownPreviewLoading">
2019-01-03 12:48:30 +05:30
<div
v-if="referencedCommands"
class="referenced-commands"
v-html="referencedCommands"
>
</div>
<div
v-if="shouldShowReferencedUsers"
class="referenced-users"
>
2018-03-17 18:26:18 +05:30
<span>
2019-01-03 12:48:30 +05:30
<i
class="fa fa-exclamation-triangle"
aria-hidden="true"
>
</i>
You are about to add
2018-03-17 18:26:18 +05:30
<strong>
2019-01-03 12:48:30 +05:30
<span class="js-referenced-users-count">
{{ referencedUsers.length }}
</span>
</strong> people to the discussion. Proceed with caution.
2018-03-17 18:26:18 +05:30
</span>
</div>
</template>
2017-09-10 17:25:29 +05:30
</div>
</template>