Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ide
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/ide')
-rw-r--r--app/assets/javascripts/ide/components/panes/right.vue12
-rw-r--r--app/assets/javascripts/ide/components/repo_editor.vue19
-rw-r--r--app/assets/javascripts/ide/lib/common/model.js16
-rw-r--r--app/assets/javascripts/ide/lib/common/model_manager.js5
-rw-r--r--app/assets/javascripts/ide/lib/diff/controller.js4
-rw-r--r--app/assets/javascripts/ide/lib/editor.js36
-rw-r--r--app/assets/javascripts/ide/monaco_loader.js16
7 files changed, 44 insertions, 64 deletions
diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
index aafd6a15a78..dd7fc8f1e01 100644
--- a/app/assets/javascripts/ide/components/panes/right.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -5,6 +5,7 @@ import Icon from '../../../vue_shared/components/icon.vue';
import { rightSidebarViews } from '../../constants';
import PipelinesList from '../pipelines/list.vue';
import JobsDetail from '../jobs/detail.vue';
+import ResizablePanel from '../resizable_panel.vue';
export default {
directives: {
@@ -14,6 +15,7 @@ export default {
Icon,
PipelinesList,
JobsDetail,
+ ResizablePanel,
},
computed: {
...mapState(['rightPane']),
@@ -40,12 +42,16 @@ export default {
<div
class="multi-file-commit-panel ide-right-sidebar"
>
- <div
- class="multi-file-commit-panel-inner"
+ <resizable-panel
v-if="rightPane"
+ class="multi-file-commit-panel-inner"
+ :collapsible="false"
+ :initial-width="350"
+ :min-size="350"
+ side="right"
>
<component :is="rightPane" />
- </div>
+ </resizable-panel>
<nav class="ide-activity-bar">
<ul class="list-unstyled">
<li>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 93453989c08..d365745d78b 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -1,10 +1,8 @@
<script>
-/* global monaco */
import { mapState, mapGetters, mapActions } from 'vuex';
import flash from '~/flash';
import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
import { activityBarViews, viewerTypes } from '../constants';
-import monacoLoader from '../monaco_loader';
import Editor from '../lib/editor';
import ExternalLink from './external_link.vue';
@@ -50,7 +48,7 @@ export default {
// Compare key to allow for files opened in review mode to be cached differently
if (oldVal.key !== this.file.key) {
- this.initMonaco();
+ this.initEditor();
if (this.currentActivityView !== activityBarViews.edit) {
this.setFileViewMode({
@@ -84,15 +82,10 @@ export default {
this.editor.dispose();
},
mounted() {
- if (this.editor && monaco) {
- this.initMonaco();
- } else {
- monacoLoader(['vs/editor/editor.main'], () => {
- this.editor = Editor.create(monaco);
-
- this.initMonaco();
- });
+ if (!this.editor) {
+ this.editor = Editor.create();
}
+ this.initEditor();
},
methods: {
...mapActions([
@@ -105,7 +98,7 @@ export default {
'updateViewer',
'removePendingTab',
]),
- initMonaco() {
+ initEditor() {
if (this.shouldHideEditor) return;
this.editor.clearEditor();
@@ -118,7 +111,7 @@ export default {
this.createEditorInstance();
})
.catch(err => {
- flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true);
+ flash('Error setting up editor. Please try again.', 'alert', document, null, false, true);
throw err;
});
},
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index e5149b1f3ad..78e6f632728 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -1,32 +1,32 @@
+import { editor as monacoEditor, Uri } from 'monaco-editor';
import Disposable from './disposable';
import eventHub from '../../eventhub';
export default class Model {
- constructor(monaco, file, head = null) {
- this.monaco = monaco;
+ constructor(file, head = null) {
this.disposable = new Disposable();
this.file = file;
this.head = head;
this.content = file.content !== '' ? file.content : file.raw;
this.disposable.add(
- (this.originalModel = this.monaco.editor.createModel(
+ (this.originalModel = monacoEditor.createModel(
head ? head.content : this.file.raw,
undefined,
- new this.monaco.Uri(null, null, `original/${this.path}`),
+ new Uri(false, false, `original/${this.path}`),
)),
- (this.model = this.monaco.editor.createModel(
+ (this.model = monacoEditor.createModel(
this.content,
undefined,
- new this.monaco.Uri(null, null, this.path),
+ new Uri(false, false, this.path),
)),
);
if (this.file.mrChange) {
this.disposable.add(
- (this.baseModel = this.monaco.editor.createModel(
+ (this.baseModel = monacoEditor.createModel(
this.file.baseRaw,
undefined,
- new this.monaco.Uri(null, null, `target/${this.path}`),
+ new Uri(false, false, `target/${this.path}`),
)),
);
}
diff --git a/app/assets/javascripts/ide/lib/common/model_manager.js b/app/assets/javascripts/ide/lib/common/model_manager.js
index 7f643969480..bd9b8fc3fcc 100644
--- a/app/assets/javascripts/ide/lib/common/model_manager.js
+++ b/app/assets/javascripts/ide/lib/common/model_manager.js
@@ -3,8 +3,7 @@ import Disposable from './disposable';
import Model from './model';
export default class ModelManager {
- constructor(monaco) {
- this.monaco = monaco;
+ constructor() {
this.disposable = new Disposable();
this.models = new Map();
}
@@ -22,7 +21,7 @@ export default class ModelManager {
return this.getModel(file.key);
}
- const model = new Model(this.monaco, file, head);
+ const model = new Model(file, head);
this.models.set(model.path, model);
this.disposable.add(model);
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index f579424cf33..046e562ba2b 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/app/assets/javascripts/ide/lib/diff/controller.js
@@ -1,4 +1,4 @@
-/* global monaco */
+import { Range } from 'monaco-editor';
import { throttle } from 'underscore';
import DirtyDiffWorker from './diff_worker';
import Disposable from '../common/disposable';
@@ -16,7 +16,7 @@ export const getDiffChangeType = change => {
};
export const getDecorator = change => ({
- range: new monaco.Range(change.lineNumber, 1, change.endLineNumber, 1),
+ range: new Range(change.lineNumber, 1, change.endLineNumber, 1),
options: {
isWholeLine: true,
linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(change)}`,
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 9c3bb9cc17d..02038fcb534 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -1,4 +1,5 @@
import _ from 'underscore';
+import { editor as monacoEditor, KeyCode, KeyMod } from 'monaco-editor';
import store from '../stores';
import DecorationsController from './decorations/controller';
import DirtyDiffController from './diff/controller';
@@ -8,6 +9,11 @@ import editorOptions, { defaultEditorOptions } from './editor_options';
import gitlabTheme from './themes/gl_theme';
import keymap from './keymap.json';
+function setupMonacoTheme() {
+ monacoEditor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
+ monacoEditor.setTheme('gitlab');
+}
+
export const clearDomElement = el => {
if (!el || !el.firstChild) return;
@@ -17,24 +23,22 @@ export const clearDomElement = el => {
};
export default class Editor {
- static create(monaco) {
- if (this.editorInstance) return this.editorInstance;
-
- this.editorInstance = new Editor(monaco);
-
+ static create() {
+ if (!this.editorInstance) {
+ this.editorInstance = new Editor();
+ }
return this.editorInstance;
}
- constructor(monaco) {
- this.monaco = monaco;
+ constructor() {
this.currentModel = null;
this.instance = null;
this.dirtyDiffController = null;
this.disposable = new Disposable();
- this.modelManager = new ModelManager(this.monaco);
+ this.modelManager = new ModelManager();
this.decorationsController = new DecorationsController(this);
- this.setupMonacoTheme();
+ setupMonacoTheme();
this.debouncedUpdate = _.debounce(() => {
this.updateDimensions();
@@ -46,7 +50,7 @@ export default class Editor {
clearDomElement(domElement);
this.disposable.add(
- (this.instance = this.monaco.editor.create(domElement, {
+ (this.instance = monacoEditor.create(domElement, {
...defaultEditorOptions,
})),
(this.dirtyDiffController = new DirtyDiffController(
@@ -66,7 +70,7 @@ export default class Editor {
clearDomElement(domElement);
this.disposable.add(
- (this.instance = this.monaco.editor.createDiffEditor(domElement, {
+ (this.instance = monacoEditor.createDiffEditor(domElement, {
...defaultEditorOptions,
quickSuggestions: false,
occurrencesHighlight: false,
@@ -122,17 +126,11 @@ export default class Editor {
modified: model.getModel(),
});
- this.monaco.editor.createDiffNavigator(this.instance, {
+ monacoEditor.createDiffNavigator(this.instance, {
alwaysRevealFirst: true,
});
}
- setupMonacoTheme() {
- this.monaco.editor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
-
- this.monaco.editor.setTheme('gitlab');
- }
-
clearEditor() {
if (this.instance) {
this.instance.setModel(null);
@@ -200,7 +198,7 @@ export default class Editor {
const getKeyCode = key => {
const monacoKeyMod = key.indexOf('KEY_') === 0;
- return monacoKeyMod ? this.monaco.KeyCode[key] : this.monaco.KeyMod[key];
+ return monacoKeyMod ? KeyCode[key] : KeyMod[key];
};
keymap.forEach(command => {
diff --git a/app/assets/javascripts/ide/monaco_loader.js b/app/assets/javascripts/ide/monaco_loader.js
deleted file mode 100644
index 142a220097b..00000000000
--- a/app/assets/javascripts/ide/monaco_loader.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import monacoContext from 'monaco-editor/dev/vs/loader';
-
-monacoContext.require.config({
- paths: {
- vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase
- },
-});
-
-// ignore CDN config and use local assets path for service worker which cannot be cross-domain
-const relativeRootPath = (gon && gon.relative_url_root) || '';
-const monacoPath = `${relativeRootPath}/assets/webpack/monaco-editor/vs`;
-window.MonacoEnvironment = { getWorkerUrl: () => `${monacoPath}/base/worker/workerMain.js` };
-
-// eslint-disable-next-line no-underscore-dangle
-window.__monaco_context__ = monacoContext;
-export default monacoContext.require;
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-12 04:47:26 +0300