Commit 3197825b authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Merge branch '198609-removed-monaco_blobs' into 'master'

Removed :monaco_blobs feature flag

See merge request gitlab-org/gitlab!45094
parents 6bed0939 9755740c
/* global ace */
import $ from 'jquery'; import $ from 'jquery';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import { deprecatedCreateFlash as createFlash } from '~/flash'; import { deprecatedCreateFlash as createFlash } from '~/flash';
import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants'; import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants';
import TemplateSelectorMediator from '../blob/file_template_mediator'; import TemplateSelectorMediator from '../blob/file_template_mediator';
import getModeByFileExtension from '~/lib/utils/ace_utils';
import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown'; import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
import EditorLite from '~/editor/editor_lite';
const monacoEnabledGlobally = window.gon.features?.monacoBlobs; import FileTemplateExtension from '~/editor/editor_file_template_ext';
export default class EditBlob { export default class EditBlob {
// The options object has: // The options object has:
// assetsPath, filePath, currentAction, projectId, isMarkdown // assetsPath, filePath, currentAction, projectId, isMarkdown
constructor(options) { constructor(options) {
this.options = options; this.options = options;
this.options.monacoEnabled = this.options.monacoEnabled ?? monacoEnabledGlobally; this.configureMonacoEditor();
const { isMarkdown, monacoEnabled } = this.options;
return Promise.resolve() if (this.options.isMarkdown) {
.then(() => { import('~/editor/editor_markdown_ext')
return monacoEnabled ? this.configureMonacoEditor() : this.configureAceEditor(); .then(MarkdownExtension => {
}) this.editor.use(MarkdownExtension.default);
.then(() => {
this.initModePanesAndLinks();
this.initFileSelectors();
this.initSoftWrap();
if (isMarkdown) {
addEditorMarkdownListeners(this.editor); 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() { configureMonacoEditor() {
const EditorPromise = import( const editorEl = document.getElementById('editor');
/* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite' const fileNameEl = document.getElementById('file_path') || document.getElementById('file_name');
); const fileContentEl = document.getElementById('file-content');
const MarkdownExtensionPromise = this.options.isMarkdown const form = document.querySelector('.js-edit-blob-form');
? 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));
}
configureAceEditor() { const rootEditor = new EditorLite();
const { filePath, assetsPath } = this.options;
ace.config.set('modePath', `${assetsPath}/ace`);
ace.config.loadModule('ace/ext/searchbox');
ace.config.loadModule('ace/ext/modelist');
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 fileNameEl.addEventListener('change', () => {
this.editor.$blockScrolling = Infinity; this.editor.updateModelLanguage(fileNameEl.value);
});
if (filePath) { form.addEventListener('submit', () => {
this.editor.getSession().setMode(getModeByFileExtension(filePath)); fileContentEl.value = this.editor.getValue();
} });
} }
initFileSelectors() { initFileSelectors() {
...@@ -137,7 +102,7 @@ export default class EditBlob { ...@@ -137,7 +102,7 @@ export default class EditBlob {
} }
initSoftWrap() { initSoftWrap() {
this.isSoftWrapped = Boolean(this.options.monacoEnabled); this.isSoftWrapped = true;
this.$toggleButton = $('.soft-wrap-toggle'); this.$toggleButton = $('.soft-wrap-toggle');
this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped); this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
this.$toggleButton.on('click', () => this.toggleSoftWrap()); this.$toggleButton.on('click', () => this.toggleSoftWrap());
...@@ -146,10 +111,6 @@ export default class EditBlob { ...@@ -146,10 +111,6 @@ export default class EditBlob {
toggleSoftWrap() { toggleSoftWrap() {
this.isSoftWrapped = !this.isSoftWrapped; this.isSoftWrapped = !this.isSoftWrapped;
this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped); this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
if (this.options.monacoEnabled) { this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' });
this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' });
} else {
this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
}
} }
} }
...@@ -42,9 +42,7 @@ function convertMonacoSelectionToAceFormat(sel) { ...@@ -42,9 +42,7 @@ function convertMonacoSelectionToAceFormat(sel) {
} }
function getEditorSelectionRange(editor) { function getEditorSelectionRange(editor) {
return window.gon.features?.monacoBlobs return convertMonacoSelectionToAceFormat(editor.getSelection());
? convertMonacoSelectionToAceFormat(editor.getSelection())
: editor.getSelectionRange();
} }
function editorBlockTagText(text, blockTag, selected, editor) { function editorBlockTagText(text, blockTag, selected, editor) {
...@@ -56,9 +54,6 @@ function editorBlockTagText(text, blockTag, selected, editor) { ...@@ -56,9 +54,6 @@ function editorBlockTagText(text, blockTag, selected, editor) {
if (shouldRemoveBlock) { if (shouldRemoveBlock) {
if (blockTag !== null) { if (blockTag !== null) {
// ace is globally defined
// eslint-disable-next-line no-undef
const { Range } = ace.require('ace/range');
const lastLine = lines[selectionRange.end.row + 1]; const lastLine = lines[selectionRange.end.row + 1];
const rangeWithBlockTags = new Range( const rangeWithBlockTags = new Range(
lines[selectionRange.start.row - 1], lines[selectionRange.start.row - 1],
...@@ -110,12 +105,7 @@ function moveCursor({ ...@@ -110,12 +105,7 @@ function moveCursor({
const endPosition = startPosition + select.length; const endPosition = startPosition + select.length;
return textArea.setSelectionRange(startPosition, endPosition); return textArea.setSelectionRange(startPosition, endPosition);
} else if (editor) { } else if (editor) {
if (window.gon.features?.monacoBlobs) { editor.selectWithinSelection(select, tag);
editor.selectWithinSelection(select, tag);
} else {
editor.navigateLeft(tag.length - tag.indexOf(select));
editor.getSelection().selectAWord();
}
return; return;
} }
} }
...@@ -139,11 +129,7 @@ function moveCursor({ ...@@ -139,11 +129,7 @@ function moveCursor({
} }
} else if (editor && editorSelectionStart.row === editorSelectionEnd.row) { } else if (editor && editorSelectionStart.row === editorSelectionEnd.row) {
if (positionBetweenTags) { if (positionBetweenTags) {
if (window.gon.features?.monacoBlobs) { editor.moveCursor(tag.length * -1);
editor.moveCursor(tag.length * -1);
} else {
editor.navigateLeft(tag.length);
}
} }
} }
} }
...@@ -266,11 +252,7 @@ export function insertMarkdownText({ ...@@ -266,11 +252,7 @@ export function insertMarkdownText({
} }
if (editor) { if (editor) {
if (window.gon.features?.monacoBlobs) { editor.replaceSelectedText(textToInsert, select);
editor.replaceSelectedText(textToInsert, select);
} else {
editor.insert(textToInsert);
}
} else { } else {
insertText(textArea, textToInsert); insertText(textArea, textToInsert);
} }
......
---
name: monaco_blobs
introduced_by_url:
rollout_issue_url:
group: group::editor
type: development
default_enabled: true
...@@ -43,7 +43,6 @@ module Gitlab ...@@ -43,7 +43,6 @@ module Gitlab
# Initialize gon.features with any flags that should be # Initialize gon.features with any flags that should be
# made globally available to the frontend # made globally available to the frontend
push_frontend_feature_flag(:monaco_blobs, default_enabled: true)
push_frontend_feature_flag(:webperf_experiment, default_enabled: false) push_frontend_feature_flag(:webperf_experiment, default_enabled: false)
push_frontend_feature_flag(:snippets_binary_blob, default_enabled: false) push_frontend_feature_flag(:snippets_binary_blob, default_enabled: false)
push_frontend_feature_flag(:usage_data_api, default_enabled: false) push_frontend_feature_flag(:usage_data_api, default_enabled: false)
......
import waitForPromises from 'helpers/wait_for_promises';
import EditBlob from '~/blob_edit/edit_blob'; import EditBlob from '~/blob_edit/edit_blob';
import EditorLite from '~/editor/editor_lite'; import EditorLite from '~/editor/editor_lite';
import MarkdownExtension from '~/editor/editor_markdown_ext'; import MarkdownExtension from '~/editor/editor_markdown_ext';
...@@ -7,7 +8,12 @@ jest.mock('~/editor/editor_lite'); ...@@ -7,7 +8,12 @@ jest.mock('~/editor/editor_lite');
jest.mock('~/editor/editor_markdown_ext'); jest.mock('~/editor/editor_markdown_ext');
describe('Blob Editing', () => { describe('Blob Editing', () => {
const mockInstance = 'foo'; const useMock = jest.fn();
const mockInstance = {
use: useMock,
getValue: jest.fn(),
focus: jest.fn(),
};
beforeEach(() => { beforeEach(() => {
setFixtures( setFixtures(
`<div class="js-edit-blob-form"><div id="file_path"></div><div id="editor"></div><input id="file-content"></div>`, `<div class="js-edit-blob-form"><div id="file_path"></div><div id="editor"></div><input id="file-content"></div>`,
...@@ -15,36 +21,33 @@ describe('Blob Editing', () => { ...@@ -15,36 +21,33 @@ describe('Blob Editing', () => {
jest.spyOn(EditorLite.prototype, 'createInstance').mockReturnValue(mockInstance); jest.spyOn(EditorLite.prototype, 'createInstance').mockReturnValue(mockInstance);
}); });
const initEditor = (isMarkdown = false) => { const editorInst = isMarkdown => {
return new EditBlob({ return new EditBlob({
isMarkdown, isMarkdown,
monacoEnabled: true,
}); });
}; };
const initEditor = async (isMarkdown = false) => {
editorInst(isMarkdown);
await waitForPromises();
};
it('loads FileTemplateExtension by default', async () => { it('loads FileTemplateExtension by default', async () => {
await initEditor(); await initEditor();
expect(EditorLite.prototype.use).toHaveBeenCalledWith( expect(useMock).toHaveBeenCalledWith(FileTemplateExtension);
expect.arrayContaining([FileTemplateExtension]),
mockInstance,
);
}); });
describe('Markdown', () => { describe('Markdown', () => {
it('does not load MarkdownExtension by default', async () => { it('does not load MarkdownExtension by default', async () => {
await initEditor(); await initEditor();
expect(EditorLite.prototype.use).not.toHaveBeenCalledWith( expect(useMock).not.toHaveBeenCalledWith(MarkdownExtension);
expect.arrayContaining([MarkdownExtension]),
mockInstance,
);
}); });
it('loads MarkdownExtension only for the markdown files', async () => { it('loads MarkdownExtension only for the markdown files', async () => {
await initEditor(true); await initEditor(true);
expect(EditorLite.prototype.use).toHaveBeenCalledWith( expect(useMock).toHaveBeenCalledTimes(2);
[MarkdownExtension, FileTemplateExtension], expect(useMock).toHaveBeenNthCalledWith(1, FileTemplateExtension);
mockInstance, expect(useMock).toHaveBeenNthCalledWith(2, MarkdownExtension);
);
}); });
}); });
}); });
...@@ -268,88 +268,10 @@ describe('init markdown', () => { ...@@ -268,88 +268,10 @@ describe('init markdown', () => {
}); });
}); });
describe('Ace Editor', () => {
let editor;
beforeEach(() => {
editor = {
getSelectionRange: jest.fn().mockReturnValue({
start: 0,
end: 0,
}),
getValue: jest.fn().mockReturnValue('this is text \n in two lines'),
insert: jest.fn(),
navigateLeft: jest.fn(),
};
});
it('uses ace editor insert text when editor is passed in', () => {
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: '',
wrap: false,
editor,
});
expect(editor.insert).toHaveBeenCalled();
});
it('adds block tags on line above and below selection', () => {
const selected = 'this text \n is multiple \n lines';
const text = `before \n ${selected} \n after`;
insertMarkdownText({
text,
tag: '',
blockTag: '***',
selected,
wrap: true,
editor,
});
expect(editor.insert).toHaveBeenCalledWith(`***\n${selected}\n***`);
});
it('uses ace editor to navigate back tag length when nothing is selected', () => {
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: '',
wrap: true,
editor,
});
expect(editor.navigateLeft).toHaveBeenCalledWith(1);
});
it('ace editor does not navigate back when there is selected text', () => {
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: 'foobar',
wrap: true,
editor,
});
expect(editor.navigateLeft).not.toHaveBeenCalled();
});
});
describe('Editor Lite', () => { describe('Editor Lite', () => {
let editor; let editor;
let origGon;
beforeEach(() => { beforeEach(() => {
origGon = window.gon;
window.gon = {
features: {
monacoBlobs: true,
},
};
editor = { editor = {
getSelection: jest.fn().mockReturnValue({ getSelection: jest.fn().mockReturnValue({
startLineNumber: 1, startLineNumber: 1,
...@@ -364,10 +286,6 @@ describe('init markdown', () => { ...@@ -364,10 +286,6 @@ describe('init markdown', () => {
}; };
}); });
afterEach(() => {
window.gon = origGon;
});
it('replaces selected text', () => { it('replaces selected text', () => {
insertMarkdownText({ insertMarkdownText({
text: editor.getValue, text: editor.getValue,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment