debian-mirror-gitlab/app/assets/javascripts/blob_edit/edit_blob.js

152 lines
4.6 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2022-01-26 12:08:38 +05:30
import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
2021-09-30 23:02:18 +05:30
import { FileTemplateExtension } from '~/editor/extensions/source_editor_file_template_ext';
import SourceEditor from '~/editor/source_editor';
2021-10-27 15:23:28 +05:30
import { getBlobLanguage } from '~/editor/utils';
2021-09-04 01:27:46 +05:30
import createFlash from '~/flash';
2021-03-11 19:13:27 +05:30
import axios from '~/lib/utils/axios_utils';
import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
2021-02-22 17:27:13 +05:30
import { insertFinalNewline } from '~/lib/utils/text_utility';
2021-03-11 19:13:27 +05:30
import TemplateSelectorMediator from '../blob/file_template_mediator';
import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants';
2020-07-28 23:09:34 +05:30
2017-08-17 22:00:37 +05:30
export default class EditBlob {
2019-02-15 15:39:39 +05:30
// The options object has:
2021-10-27 15:23:28 +05:30
// assetsPath, filePath, currentAction, projectId, isMarkdown, previewMarkdownPath
2019-02-15 15:39:39 +05:30
constructor(options) {
this.options = options;
2021-01-03 14:25:43 +05:30
this.configureMonacoEditor();
if (this.options.isMarkdown) {
2021-10-27 15:23:28 +05:30
this.fetchMarkdownExtension();
2021-01-03 14:25:43 +05:30
}
this.initModePanesAndLinks();
this.initFileSelectors();
this.initSoftWrap();
this.editor.focus();
2020-07-28 23:09:34 +05:30
}
2022-01-26 12:08:38 +05:30
async fetchMarkdownExtension() {
try {
const [
{ EditorMarkdownExtension: MarkdownExtension },
{ EditorMarkdownPreviewExtension: MarkdownLivePreview },
] = await Promise.all([
import('~/editor/extensions/source_editor_markdown_ext'),
import('~/editor/extensions/source_editor_markdown_livepreview_ext'),
]);
this.editor.use([
{ definition: MarkdownExtension },
{
definition: MarkdownLivePreview,
setupOptions: { previewMarkdownPath: this.options.previewMarkdownPath },
},
]);
} catch (e) {
createFlash({
message: `${BLOB_EDITOR_ERROR}: ${e}`,
});
}
this.hasMarkdownExtension = true;
addEditorMarkdownListeners(this.editor);
2021-10-27 15:23:28 +05:30
}
2020-07-28 23:09:34 +05:30
configureMonacoEditor() {
2021-01-03 14:25:43 +05:30
const editorEl = document.getElementById('editor');
const fileNameEl = document.getElementById('file_path') || document.getElementById('file_name');
const fileContentEl = document.getElementById('file-content');
const form = document.querySelector('.js-edit-blob-form');
2017-08-17 22:00:37 +05:30
2021-10-27 15:23:28 +05:30
this.hasMarkdownExtension = false;
2021-09-30 23:02:18 +05:30
const rootEditor = new SourceEditor();
2017-08-17 22:00:37 +05:30
2021-01-03 14:25:43 +05:30
this.editor = rootEditor.createInstance({
el: editorEl,
blobPath: fileNameEl.value,
blobContent: editorEl.innerText,
});
2022-01-26 12:08:38 +05:30
this.editor.use([{ definition: SourceEditorExtension }, { definition: FileTemplateExtension }]);
2017-08-17 22:00:37 +05:30
2021-01-03 14:25:43 +05:30
fileNameEl.addEventListener('change', () => {
this.editor.updateModelLanguage(fileNameEl.value);
2021-10-27 15:23:28 +05:30
const newLang = getBlobLanguage(fileNameEl.value);
if (newLang === 'markdown') {
if (!this.hasMarkdownExtension) {
this.fetchMarkdownExtension();
}
}
2021-01-03 14:25:43 +05:30
});
2017-08-17 22:00:37 +05:30
2021-01-03 14:25:43 +05:30
form.addEventListener('submit', () => {
2021-02-22 17:27:13 +05:30
fileContentEl.value = insertFinalNewline(this.editor.getValue());
2021-01-03 14:25:43 +05:30
});
2017-08-17 22:00:37 +05:30
}
2019-02-15 15:39:39 +05:30
initFileSelectors() {
const { currentAction, projectId } = this.options;
2017-08-17 22:00:37 +05:30
this.fileTemplateMediator = new TemplateSelectorMediator({
currentAction,
editor: this.editor,
2018-12-05 23:21:45 +05:30
projectId,
2017-08-17 22:00:37 +05:30
});
}
initModePanesAndLinks() {
this.$editModePanes = $('.js-edit-mode-pane');
this.$editModeLinks = $('.js-edit-mode a');
2021-03-08 18:12:59 +05:30
this.$editModeLinks.on('click', (e) => this.editModeLinkClickHandler(e));
2017-08-17 22:00:37 +05:30
}
editModeLinkClickHandler(e) {
e.preventDefault();
const currentLink = $(e.target);
const paneId = currentLink.attr('href');
const currentPane = this.$editModePanes.filter(paneId);
this.$editModeLinks.parent().removeClass('active hover');
currentLink.parent().addClass('active hover');
this.$editModePanes.hide();
2021-04-29 21:17:54 +05:30
currentPane.show();
2017-08-17 22:00:37 +05:30
if (paneId === '#preview') {
this.$toggleButton.hide();
2018-12-05 23:21:45 +05:30
axios
.post(currentLink.data('previewUrl'), {
content: this.editor.getValue(),
})
.then(({ data }) => {
currentPane.empty().append(data);
currentPane.renderGFM();
})
2021-09-04 01:27:46 +05:30
.catch(() =>
createFlash({
message: BLOB_PREVIEW_ERROR,
}),
);
2016-09-13 17:45:13 +05:30
}
2017-08-17 22:00:37 +05:30
this.$toggleButton.show();
return this.editor.focus();
}
initSoftWrap() {
2021-01-03 14:25:43 +05:30
this.isSoftWrapped = true;
2017-08-17 22:00:37 +05:30
this.$toggleButton = $('.soft-wrap-toggle');
2020-07-28 23:09:34 +05:30
this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
2017-08-17 22:00:37 +05:30
this.$toggleButton.on('click', () => this.toggleSoftWrap());
}
toggleSoftWrap() {
this.isSoftWrapped = !this.isSoftWrapped;
this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
2021-01-03 14:25:43 +05:30
this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' });
2017-08-17 22:00:37 +05:30
}
}