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

<script>
  import $ from 'jquery';
  import { s__ } from '~/locale';
  import Flash from '../../../flash';
  import GLForm from '../../../gl_form';
  import markdownHeader from './header.vue';
  import markdownToolbar from './toolbar.vue';
  import icon from '../icon.vue';

  export default {
    components: {
      markdownHeader,
      markdownToolbar,
      icon,
    },
    props: {
      markdownPreviewPath: {
        type: String,
        required: false,
        default: '',
      },
      markdownDocsPath: {
        type: String,
        required: true,
      },
      markdownVersion: {
        type: Number,
        required: false,
        default: 0,
      },
      addSpacingClasses: {
        type: Boolean,
        required: false,
        default: true,
      },
      quickActionsDocsPath: {
        type: String,
        required: false,
        default: '',
      },
      canAttachFile: {
        type: Boolean,
        required: false,
        default: true,
      },
      enableAutocomplete: {
        type: Boolean,
        required: false,
        default: true,
      },
    },
    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;

        this.previewMarkdown = true;

        /*
          Can't use `$refs` as the component is technically in the parent component
          so we access the VNode & then get the element
        */
        const text = this.$slots.textarea[0].elm.value;

        if (text) {
          this.markdownPreviewLoading = true;
          this.$http
            .post(this.versionedPreviewPath(), { text })
              .then(resp => resp.json())
              .then(data => this.renderMarkdown(data))
              .catch(() => new Flash(s__('Error loading markdown preview')));
        } else {
          this.renderMarkdown();
        }
      },

      showWriteTab() {
        this.markdownPreview = '';
        this.previewMarkdown = false;
      },

      renderMarkdown(data = {}) {
        this.markdownPreviewLoading = false;
        this.markdownPreview = data.body || 'Nothing to preview.';

        if (data.references) {
          this.referencedCommands = data.references.commands;
          this.referencedUsers = data.references.users;
        }

        this.$nextTick(() => {
          $(this.$refs['markdown-preview']).renderGFM();
        });
      },

      versionedPreviewPath() {
        const { markdownPreviewPath, markdownVersion } = this;
        return `${markdownPreviewPath}${
          markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'
          }markdown_version=${markdownVersion}`;
      },
    },
  };
</script>

<template>
  <div
    ref="gl-form"
    :class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }"
    class="md-area js-vue-markdown-field">
    <markdown-header
      :preview-markdown="previewMarkdown"
      @preview-markdown="showPreviewTab"
      @write-markdown="showWriteTab"
    />
    <div
      v-show="!previewMarkdown"
      class="md-write-holder"
    >
      <div class="zen-backdrop">
        <slot name="textarea"></slot>
        <a
          class="zen-control zen-control-leave js-zen-leave"
          href="#"
          aria-label="Enter zen mode"
        >
          <icon
            :size="32"
            name="screen-normal"
          />
        </a>
        <markdown-toolbar
          :markdown-docs-path="markdownDocsPath"
          :quick-actions-docs-path="quickActionsDocsPath"
          :can-attach-file="canAttachFile"
        />
      </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>
      <span v-if="markdownPreviewLoading">
        Loading...
      </span>
    </div>
    <template v-if="previewMarkdown && !markdownPreviewLoading">
      <div
        v-if="referencedCommands"
        class="referenced-commands"
        v-html="referencedCommands"
      >
      </div>
      <div
        v-if="shouldShowReferencedUsers"
        class="referenced-users"
      >
        <span>
          <i
            class="fa fa-exclamation-triangle"
            aria-hidden="true"
          >
          </i>
          You are about to add
          <strong>
            <span class="js-referenced-users-count">
              {{ referencedUsers.length }}
            </span>
          </strong> people to the discussion. Proceed with caution.
        </span>
      </div>
    </template>
  </div>
</template>