Add default autocomplete config
This commit is contained in:
parent
2bac2918b2
commit
db9fb8a30e
|
@ -7,6 +7,16 @@ function sanitize(str) {
|
||||||
return str.replace(/<(?:.|\n)*?>/gm, '');
|
return str.replace(/<(?:.|\n)*?>/gm, '');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const defaultAutocompleteConfig = {
|
||||||
|
emojis: true,
|
||||||
|
members: true,
|
||||||
|
issues: true,
|
||||||
|
mergeRequests: true,
|
||||||
|
epics: false,
|
||||||
|
milestones: true,
|
||||||
|
labels: true,
|
||||||
|
};
|
||||||
|
|
||||||
class GfmAutoComplete {
|
class GfmAutoComplete {
|
||||||
constructor(dataSources) {
|
constructor(dataSources) {
|
||||||
this.dataSources = dataSources || {};
|
this.dataSources = dataSources || {};
|
||||||
|
@ -14,14 +24,7 @@ class GfmAutoComplete {
|
||||||
this.isLoadingData = {};
|
this.isLoadingData = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
setup(input, enableMap = {
|
setup(input, enableMap = defaultAutocompleteConfig) {
|
||||||
emojis: true,
|
|
||||||
members: true,
|
|
||||||
issues: true,
|
|
||||||
milestones: true,
|
|
||||||
mergeRequests: true,
|
|
||||||
labels: true,
|
|
||||||
}) {
|
|
||||||
// Add GFM auto-completion to all input fields, that accept GFM input.
|
// Add GFM auto-completion to all input fields, that accept GFM input.
|
||||||
this.input = input || $('.js-gfm-input');
|
this.input = input || $('.js-gfm-input');
|
||||||
this.enableMap = enableMap;
|
this.enableMap = enableMap;
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import autosize from 'autosize';
|
import autosize from 'autosize';
|
||||||
import GfmAutoComplete from './gfm_auto_complete';
|
import GfmAutoComplete, * as GFMConfig from './gfm_auto_complete';
|
||||||
import dropzoneInput from './dropzone_input';
|
import dropzoneInput from './dropzone_input';
|
||||||
import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown';
|
import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown';
|
||||||
|
|
||||||
export default class GLForm {
|
export default class GLForm {
|
||||||
constructor(form, enableGFM = false) {
|
constructor(form, enableGFM = {}) {
|
||||||
this.form = form;
|
this.form = form;
|
||||||
this.textarea = this.form.find('textarea.js-gfm-input');
|
this.textarea = this.form.find('textarea.js-gfm-input');
|
||||||
this.enableGFM = enableGFM;
|
this.enableGFM = Object.assign({}, GFMConfig.defaultAutocompleteConfig, enableGFM);
|
||||||
// Before we start, we should clean up any previous data for this form
|
// Before we start, we should clean up any previous data for this form
|
||||||
this.destroy();
|
this.destroy();
|
||||||
// Setup the form
|
// Setup the form
|
||||||
|
@ -34,14 +34,7 @@ export default class GLForm {
|
||||||
// remove notify commit author checkbox for non-commit notes
|
// remove notify commit author checkbox for non-commit notes
|
||||||
gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
|
gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
|
||||||
this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
|
this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
|
||||||
this.autoComplete.setup(this.form.find('.js-gfm-input'), {
|
this.autoComplete.setup(this.form.find('.js-gfm-input'), this.enableGFM);
|
||||||
emojis: true,
|
|
||||||
members: this.enableGFM,
|
|
||||||
issues: this.enableGFM,
|
|
||||||
milestones: this.enableGFM,
|
|
||||||
mergeRequests: this.enableGFM,
|
|
||||||
labels: this.enableGFM,
|
|
||||||
});
|
|
||||||
dropzoneInput(this.form);
|
dropzoneInput(this.form);
|
||||||
autosize(this.textarea);
|
autosize(this.textarea);
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,6 +20,7 @@ import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_c
|
||||||
import axios from './lib/utils/axios_utils';
|
import axios from './lib/utils/axios_utils';
|
||||||
import { getLocationHash } from './lib/utils/url_utility';
|
import { getLocationHash } from './lib/utils/url_utility';
|
||||||
import Flash from './flash';
|
import Flash from './flash';
|
||||||
|
import { defaultAutocompleteConfig } from './gfm_auto_complete';
|
||||||
import CommentTypeToggle from './comment_type_toggle';
|
import CommentTypeToggle from './comment_type_toggle';
|
||||||
import GLForm from './gl_form';
|
import GLForm from './gl_form';
|
||||||
import loadAwardsHandler from './awards_handler';
|
import loadAwardsHandler from './awards_handler';
|
||||||
|
@ -45,7 +46,7 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
|
||||||
const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
|
const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
|
||||||
|
|
||||||
export default class Notes {
|
export default class Notes {
|
||||||
static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
|
static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM) {
|
||||||
if (!this.instance) {
|
if (!this.instance) {
|
||||||
this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
|
this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
|
||||||
}
|
}
|
||||||
|
@ -55,7 +56,7 @@ export default class Notes {
|
||||||
return this.instance;
|
return this.instance;
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
|
constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = defaultAutocompleteConfig) {
|
||||||
this.updateTargetButtons = this.updateTargetButtons.bind(this);
|
this.updateTargetButtons = this.updateTargetButtons.bind(this);
|
||||||
this.updateComment = this.updateComment.bind(this);
|
this.updateComment = this.updateComment.bind(this);
|
||||||
this.visibilityChange = this.visibilityChange.bind(this);
|
this.visibilityChange = this.visibilityChange.bind(this);
|
||||||
|
@ -94,7 +95,7 @@ export default class Notes {
|
||||||
this.cleanBinding();
|
this.cleanBinding();
|
||||||
this.addBinding();
|
this.addBinding();
|
||||||
this.setPollingInterval();
|
this.setPollingInterval();
|
||||||
this.setupMainTargetNoteForm();
|
this.setupMainTargetNoteForm(enableGFM);
|
||||||
this.taskList = new TaskList({
|
this.taskList = new TaskList({
|
||||||
dataType: 'note',
|
dataType: 'note',
|
||||||
fieldName: 'note',
|
fieldName: 'note',
|
||||||
|
@ -598,14 +599,14 @@ export default class Notes {
|
||||||
*
|
*
|
||||||
* Sets some hidden fields in the form.
|
* Sets some hidden fields in the form.
|
||||||
*/
|
*/
|
||||||
setupMainTargetNoteForm() {
|
setupMainTargetNoteForm(enableGFM) {
|
||||||
var form;
|
var form;
|
||||||
// find the form
|
// find the form
|
||||||
form = $('.js-new-note-form');
|
form = $('.js-new-note-form');
|
||||||
// Set a global clone of the form for later cloning
|
// Set a global clone of the form for later cloning
|
||||||
this.formClone = form.clone();
|
this.formClone = form.clone();
|
||||||
// show the form
|
// show the form
|
||||||
this.setupNoteForm(form);
|
this.setupNoteForm(form, enableGFM);
|
||||||
// fix classes
|
// fix classes
|
||||||
form.removeClass('js-new-note-form');
|
form.removeClass('js-new-note-form');
|
||||||
form.addClass('js-main-target-form');
|
form.addClass('js-main-target-form');
|
||||||
|
@ -633,9 +634,9 @@ export default class Notes {
|
||||||
* setup GFM auto complete
|
* setup GFM auto complete
|
||||||
* show the form
|
* show the form
|
||||||
*/
|
*/
|
||||||
setupNoteForm(form) {
|
setupNoteForm(form, enableGFM = defaultAutocompleteConfig) {
|
||||||
var textarea, key;
|
var textarea, key;
|
||||||
this.glForm = new GLForm(form, this.enableGFM);
|
this.glForm = new GLForm(form, enableGFM);
|
||||||
textarea = form.find('.js-note-text');
|
textarea = form.find('.js-note-text');
|
||||||
key = [
|
key = [
|
||||||
'Note',
|
'Note',
|
||||||
|
|
|
@ -62,7 +62,14 @@
|
||||||
/*
|
/*
|
||||||
GLForm class handles all the toolbar buttons
|
GLForm class handles all the toolbar buttons
|
||||||
*/
|
*/
|
||||||
return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
|
return new GLForm($(this.$refs['gl-form']), {
|
||||||
|
emojis: this.enableAutocomplete,
|
||||||
|
members: this.enableAutocomplete,
|
||||||
|
issues: this.enableAutocomplete,
|
||||||
|
mergeRequests: this.enableAutocomplete,
|
||||||
|
milestones: this.enableAutocomplete,
|
||||||
|
labels: this.enableAutocomplete,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
const glForm = $(this.$refs['gl-form']).data('glForm');
|
const glForm = $(this.$refs['gl-form']).data('glForm');
|
||||||
|
|
|
@ -143,7 +143,14 @@ module NotesHelper
|
||||||
notesIds: @notes.map(&:id),
|
notesIds: @notes.map(&:id),
|
||||||
now: Time.now.to_i,
|
now: Time.now.to_i,
|
||||||
diffView: diff_view,
|
diffView: diff_view,
|
||||||
autocomplete: autocomplete
|
enableGFM: {
|
||||||
|
emojis: true,
|
||||||
|
members: autocomplete,
|
||||||
|
issues: autocomplete,
|
||||||
|
mergeRequests: autocomplete,
|
||||||
|
milestones: autocomplete,
|
||||||
|
labels: autocomplete
|
||||||
|
}
|
||||||
}
|
}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue