diff options
Diffstat (limited to 'app/assets/javascripts/blob_edit/edit_blob.js')
-rw-r--r-- | app/assets/javascripts/blob_edit/edit_blob.js | 109 |
1 files changed, 35 insertions, 74 deletions
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js index 2a4ab4b8827..e6b0a6fc1c5 100644 --- a/app/assets/javascripts/blob_edit/edit_blob.js +++ b/app/assets/javascripts/blob_edit/edit_blob.js @@ -1,91 +1,56 @@ -/* global ace */ - import $ from 'jquery'; import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants'; import TemplateSelectorMediator from '../blob/file_template_mediator'; -import getModeByFileExtension from '~/lib/utils/ace_utils'; import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown'; - -const monacoEnabledGlobally = window.gon.features?.monacoBlobs; +import EditorLite from '~/editor/editor_lite'; +import FileTemplateExtension from '~/editor/editor_file_template_ext'; export default class EditBlob { // The options object has: // assetsPath, filePath, currentAction, projectId, isMarkdown constructor(options) { this.options = options; - this.options.monacoEnabled = this.options.monacoEnabled ?? monacoEnabledGlobally; - const { isMarkdown, monacoEnabled } = this.options; - return Promise.resolve() - .then(() => { - return monacoEnabled ? this.configureMonacoEditor() : this.configureAceEditor(); - }) - .then(() => { - this.initModePanesAndLinks(); - this.initFileSelectors(); - this.initSoftWrap(); - if (isMarkdown) { + this.configureMonacoEditor(); + + if (this.options.isMarkdown) { + import('~/editor/editor_markdown_ext') + .then(MarkdownExtension => { + this.editor.use(MarkdownExtension.default); addEditorMarkdownListeners(this.editor); - } - this.editor.focus(); - }) - .catch(() => createFlash(BLOB_EDITOR_ERROR)); + }) + .catch(() => createFlash(BLOB_EDITOR_ERROR)); + } + + this.initModePanesAndLinks(); + this.initFileSelectors(); + this.initSoftWrap(); + this.editor.focus(); } configureMonacoEditor() { - const EditorPromise = import( - /* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite' - ); - const MarkdownExtensionPromise = this.options.isMarkdown - ? import('~/editor/editor_markdown_ext') - : Promise.resolve(false); - const FileTemplateExtensionPromise = import('~/editor/editor_file_template_ext'); - - return Promise.all([EditorPromise, MarkdownExtensionPromise, FileTemplateExtensionPromise]) - .then(([EditorModule, MarkdownExtension, FileTemplateExtension]) => { - const EditorLite = EditorModule.default; - 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'); - - const rootEditor = new EditorLite(); - - this.editor = rootEditor.createInstance({ - el: editorEl, - blobPath: fileNameEl.value, - blobContent: editorEl.innerText, - }); - - rootEditor.use([MarkdownExtension.default, FileTemplateExtension.default], this.editor); - - fileNameEl.addEventListener('change', () => { - this.editor.updateModelLanguage(fileNameEl.value); - }); - - form.addEventListener('submit', () => { - fileContentEl.value = this.editor.getValue(); - }); - }) - .catch(() => createFlash(BLOB_EDITOR_ERROR)); - } + 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'); - configureAceEditor() { - const { filePath, assetsPath } = this.options; - ace.config.set('modePath', `${assetsPath}/ace`); - ace.config.loadModule('ace/ext/searchbox'); - ace.config.loadModule('ace/ext/modelist'); + const rootEditor = new EditorLite(); - this.editor = ace.edit('editor'); + this.editor = rootEditor.createInstance({ + el: editorEl, + blobPath: fileNameEl.value, + blobContent: editorEl.innerText, + }); + this.editor.use(FileTemplateExtension); - // This prevents warnings re: automatic scrolling being logged - this.editor.$blockScrolling = Infinity; + fileNameEl.addEventListener('change', () => { + this.editor.updateModelLanguage(fileNameEl.value); + }); - if (filePath) { - this.editor.getSession().setMode(getModeByFileExtension(filePath)); - } + form.addEventListener('submit', () => { + fileContentEl.value = this.editor.getValue(); + }); } initFileSelectors() { @@ -137,7 +102,7 @@ export default class EditBlob { } initSoftWrap() { - this.isSoftWrapped = Boolean(this.options.monacoEnabled); + this.isSoftWrapped = true; this.$toggleButton = $('.soft-wrap-toggle'); this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped); this.$toggleButton.on('click', () => this.toggleSoftWrap()); @@ -146,10 +111,6 @@ export default class EditBlob { toggleSoftWrap() { this.isSoftWrapped = !this.isSoftWrapped; this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped); - if (this.options.monacoEnabled) { - this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' }); - } else { - this.editor.getSession().setUseWrapMode(this.isSoftWrapped); - } + this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' }); } } |