Merge branch '333930-renamed-editor-lite' into 'master'

Renamed EditorLite to SourceEditor

See merge request gitlab-org/gitlab!64302

app/assets/javascripts/blob/components/blob_edit_content.vue

 <script>
 import { debounce } from 'lodash';
-import { initEditorLite } from '~/blob/utils';
+import { initSourceEditor } from '~/blob/utils';
 import { SNIPPET_MEASURE_BLOBS_CONTENT } from '~/performance/constants';
 
 import eventHub from './eventhub';
@@ -36,7 +36,7 @@ export default {
     },
   },
   mounted() {
-    this.editor = initEditorLite({
+    this.editor = initSourceEditor({
       el: this.$refs.editor,
       blobPath: this.fileName,
       blobContent: this.value,

app/assets/javascripts/blob/utils.js

-import Editor from '~/editor/editor_lite';
+import Editor from '~/editor/source_editor';
 
-export function initEditorLite({ el, ...args }) {
+export function initSourceEditor({ el, ...args }) {
   const editor = new Editor({
     scrollbar: {
       alwaysConsumeMouseWheel: false,

app/assets/javascripts/blob_edit/edit_blob.js

 import $ from 'jquery';
-import EditorLite from '~/editor/editor_lite';
-import { FileTemplateExtension } from '~/editor/extensions/editor_file_template_ext';
+import { FileTemplateExtension } from '~/editor/extensions/source_editor_file_template_ext';
+import SourceEditor from '~/editor/source_editor';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
@@ -16,7 +16,7 @@ export default class EditBlob {
     this.configureMonacoEditor();
 
     if (this.options.isMarkdown) {
-      import('~/editor/extensions/editor_markdown_ext')
+      import('~/editor/extensions/source_editor_markdown_ext')
         .then(({ EditorMarkdownExtension: MarkdownExtension } = {}) => {
           this.editor.use(new MarkdownExtension());
           addEditorMarkdownListeners(this.editor);
@@ -40,7 +40,7 @@ export default class EditBlob {
     const fileContentEl = document.getElementById('file-content');
     const form = document.querySelector('.js-edit-blob-form');
 
-    const rootEditor = new EditorLite();
+    const rootEditor = new SourceEditor();
 
     this.editor = rootEditor.createInstance({
       el: editorEl,

app/assets/javascripts/ci_lint/components/ci_lint.vue

@@ -2,7 +2,7 @@
 import { GlButton, GlFormCheckbox, GlIcon, GlLink, GlAlert } from '@gitlab/ui';
 import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue';
 import lintCiMutation from '~/pipeline_editor/graphql/mutations/lint_ci.mutation.graphql';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
 export default {
   components: {
@@ -12,7 +12,7 @@ export default {
     GlLink,
     GlAlert,
     CiLintResults,
-    EditorLite,
+    SourceEditor,
   },
   props: {
     endpoint: {
@@ -93,7 +93,7 @@ export default {
         <div class="js-file-title file-title clearfix">
           {{ __('Contents of .gitlab-ci.yml') }}
         </div>
-        <editor-lite v-model="content" file-name="*.yml" />
+        <source-editor v-model="content" file-name="*.yml" />
       </div>
     </div>
 

app/assets/javascripts/editor/constants.js

 import { __ } from '~/locale';
 
-export const EDITOR_LITE_INSTANCE_ERROR_NO_EL = __(
+export const SOURCE_EDITOR_INSTANCE_ERROR_NO_EL = __(
   '"el" parameter is required for createInstance()',
 );
 
@@ -8,7 +8,7 @@ export const URI_PREFIX = 'gitlab';
 export const CONTENT_UPDATE_DEBOUNCE = 250;
 
 export const ERROR_INSTANCE_REQUIRED_FOR_EXTENSION = __(
-  'Editor Lite instance is required to set up an extension.',
+  'Source Editor instance is required to set up an extension.',
 );
 
 export const EDITOR_READY_EVENT = 'editor-ready';

app/assets/javascripts/editor/extensions/editor_ci_schema_ext.js → app/assets/javascripts/editor/extensions/source_editor_ci_schema_ext.js

 import Api from '~/api';
 import { registerSchema } from '~/ide/utils';
 import { EXTENSION_CI_SCHEMA_FILE_NAME_MATCH } from '../constants';
-import { EditorLiteExtension } from './editor_lite_extension_base';
+import { SourceEditorExtension } from './source_editor_extension_base';
 
-export class CiSchemaExtension extends EditorLiteExtension {
+export class CiSchemaExtension extends SourceEditorExtension {
   /**
    * Registers a syntax schema to the editor based on project
    * identifier and commit.

app/assets/javascripts/editor/extensions/editor_lite_extension_base.js → app/assets/javascripts/editor/extensions/source_editor_extension_base.js

@@ -16,15 +16,15 @@ const createAnchor = (href) => {
   return fragment;
 };
 
-export class EditorLiteExtension {
+export class SourceEditorExtension {
   constructor({ instance, ...options } = {}) {
     if (instance) {
       Object.assign(instance, options);
-      EditorLiteExtension.highlightLines(instance);
+      SourceEditorExtension.highlightLines(instance);
       if (instance.getEditorType && instance.getEditorType() === EDITOR_TYPE_CODE) {
-        EditorLiteExtension.setupLineLinking(instance);
+        SourceEditorExtension.setupLineLinking(instance);
       }
-      EditorLiteExtension.deferRerender(instance);
+      SourceEditorExtension.deferRerender(instance);
     } else if (Object.entries(options).length) {
       throw new Error(ERROR_INSTANCE_REQUIRED_FOR_EXTENSION);
     }
@@ -79,7 +79,7 @@ export class EditorLiteExtension {
   }
 
   static setupLineLinking(instance) {
-    instance.onMouseMove(EditorLiteExtension.onMouseMoveHandler);
+    instance.onMouseMove(SourceEditorExtension.onMouseMoveHandler);
     instance.onMouseDown((e) => {
       const isCorrectAnchor = e.target.element.classList.contains('link-anchor');
       if (!isCorrectAnchor) {

app/assets/javascripts/editor/extensions/editor_file_template_ext.js → app/assets/javascripts/editor/extensions/source_editor_file_template_ext.js

 import { Position } from 'monaco-editor';
-import { EditorLiteExtension } from './editor_lite_extension_base';
+import { SourceEditorExtension } from './source_editor_extension_base';
 
-export class FileTemplateExtension extends EditorLiteExtension {
+export class FileTemplateExtension extends SourceEditorExtension {
   navigateFileStart() {
     this.setPosition(new Position(1, 1));
   }

app/assets/javascripts/editor/extensions/editor_markdown_ext.js → app/assets/javascripts/editor/extensions/source_editor_markdown_ext.js

-import { EditorLiteExtension } from './editor_lite_extension_base';
+import { SourceEditorExtension } from './source_editor_extension_base';
 
-export class EditorMarkdownExtension extends EditorLiteExtension {
+export class EditorMarkdownExtension extends SourceEditorExtension {
   getSelectedText(selection = this.getSelection()) {
     const { startLineNumber, endLineNumber, startColumn, endColumn } = selection;
     const valArray = this.getValue().split('\n');

app/assets/javascripts/editor/extensions/editor_lite_webide_ext.js → app/assets/javascripts/editor/extensions/source_editor_webide_ext.js

 import { debounce } from 'lodash';
 import { KeyCode, KeyMod, Range } from 'monaco-editor';
 import { EDITOR_TYPE_DIFF } from '~/editor/constants';
-import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
+import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
 import Disposable from '~/ide/lib/common/disposable';
 import { editorOptions } from '~/ide/lib/editor_options';
 import keymap from '~/ide/lib/keymap.json';
@@ -12,7 +12,7 @@ const isDiffEditorType = (instance) => {
 
 export const UPDATE_DIMENSIONS_DELAY = 200;
 
-export class EditorWebIdeExtension extends EditorLiteExtension {
+export class EditorWebIdeExtension extends SourceEditorExtension {
   constructor({ instance, modelManager, ...options } = {}) {
     super({
       instance,

app/assets/javascripts/editor/editor_lite.js → app/assets/javascripts/editor/source_editor.js

@@ -6,23 +6,23 @@ import { registerLanguages } from '~/ide/utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { uuids } from '~/lib/utils/uuids';
 import {
-  EDITOR_LITE_INSTANCE_ERROR_NO_EL,
+  SOURCE_EDITOR_INSTANCE_ERROR_NO_EL,
   URI_PREFIX,
   EDITOR_READY_EVENT,
   EDITOR_TYPE_DIFF,
 } from './constants';
 import { clearDomElement } from './utils';
 
-export default class EditorLite {
+export default class SourceEditor {
   constructor(options = {}) {
     this.instances = [];
     this.options = {
-      extraEditorClassName: 'gl-editor-lite',
+      extraEditorClassName: 'gl-source-editor',
       ...defaultEditorOptions,
       ...options,
     };
 
-    EditorLite.setupMonacoTheme();
+    SourceEditor.setupMonacoTheme();
 
     registerLanguages(...languages);
   }
@@ -56,7 +56,7 @@ export default class EditorLite {
     extensionsArray.forEach((ext) => {
       const prefix = ext.includes('/') ? '' : 'editor/';
       const trimmedExt = ext.replace(/^\//, '').trim();
-      EditorLite.pushToImportsArray(promises, `~/${prefix}${trimmedExt}`);
+      SourceEditor.pushToImportsArray(promises, `~/${prefix}${trimmedExt}`);
     });
 
     return Promise.all(promises);
@@ -77,7 +77,7 @@ export default class EditorLite {
 
   static prepareInstance(el) {
     if (!el) {
-      throw new Error(EDITOR_LITE_INSTANCE_ERROR_NO_EL);
+      throw new Error(SOURCE_EDITOR_INSTANCE_ERROR_NO_EL);
     }
 
     clearDomElement(el);
@@ -88,7 +88,7 @@ export default class EditorLite {
   }
 
   static manageDefaultExtensions(instance, el, extensions) {
-    EditorLite.loadExtensions(extensions, instance)
+    SourceEditor.loadExtensions(extensions, instance)
       .then((modules) => {
         if (modules) {
           modules.forEach((module) => {
@@ -126,7 +126,7 @@ export default class EditorLite {
     const diffModel = {
       original: monacoEditor.createModel(
         blobOriginalContent,
-        EditorLite.getModelLanguage(model.uri.path),
+        SourceEditor.getModelLanguage(model.uri.path),
       ),
       modified: model,
     };
@@ -135,18 +135,18 @@ export default class EditorLite {
   }
 
   static convertMonacoToELInstance = (inst) => {
-    const editorLiteInstanceAPI = {
+    const sourceEditorInstanceAPI = {
       updateModelLanguage: (path) => {
-        return EditorLite.instanceUpdateLanguage(inst, path);
+        return SourceEditor.instanceUpdateLanguage(inst, path);
       },
       use: (exts = []) => {
-        return EditorLite.instanceApplyExtension(inst, exts);
+        return SourceEditor.instanceApplyExtension(inst, exts);
       },
     };
     const handler = {
       get(target, prop, receiver) {
-        if (Reflect.has(editorLiteInstanceAPI, prop)) {
-          return editorLiteInstanceAPI[prop];
+        if (Reflect.has(sourceEditorInstanceAPI, prop)) {
+          return sourceEditorInstanceAPI[prop];
         }
         return Reflect.get(target, prop, receiver);
       },
@@ -155,7 +155,7 @@ export default class EditorLite {
   };
 
   static instanceUpdateLanguage(inst, path) {
-    const lang = EditorLite.getModelLanguage(path);
+    const lang = SourceEditor.getModelLanguage(path);
     const model = inst.getModel();
     return monacoEditor.setModelLanguage(model, lang);
   }
@@ -163,7 +163,7 @@ export default class EditorLite {
   static instanceApplyExtension(inst, exts = []) {
     const extensions = [].concat(exts);
     extensions.forEach((extension) => {
-      EditorLite.mixIntoInstance(extension, inst);
+      SourceEditor.mixIntoInstance(extension, inst);
     });
     return inst;
   }
@@ -210,10 +210,10 @@ export default class EditorLite {
     isDiff = false,
     ...instanceOptions
   } = {}) {
-    EditorLite.prepareInstance(el);
+    SourceEditor.prepareInstance(el);
 
     const createEditorFn = isDiff ? 'createDiffEditor' : 'create';
-    const instance = EditorLite.convertMonacoToELInstance(
+    const instance = SourceEditor.convertMonacoToELInstance(
       monacoEditor[createEditorFn].call(this, el, {
         ...this.options,
         ...instanceOptions,
@@ -222,7 +222,7 @@ export default class EditorLite {
 
     let model;
     if (instanceOptions.model !== null) {
-      model = EditorLite.createEditorModel({
+      model = SourceEditor.createEditorModel({
         blobGlobalId,
         blobOriginalContent,
         blobPath,
@@ -233,11 +233,11 @@ export default class EditorLite {
     }
 
     instance.onDidDispose(() => {
-      EditorLite.instanceRemoveFromRegistry(this, instance);
-      EditorLite.instanceDisposeModels(this, instance, model);
+      SourceEditor.instanceRemoveFromRegistry(this, instance);
+      SourceEditor.instanceDisposeModels(this, instance, model);
     });
 
-    EditorLite.manageDefaultExtensions(instance, el, extensions);
+    SourceEditor.manageDefaultExtensions(instance, el, extensions);
 
     this.instances.push(instance);
     return instance;

app/assets/javascripts/ide/components/repo_editor.vue

@@ -6,8 +6,8 @@ import {
   EDITOR_CODE_INSTANCE_FN,
   EDITOR_DIFF_INSTANCE_FN,
 } from '~/editor/constants';
-import EditorLite from '~/editor/editor_lite';
-import { EditorWebIdeExtension } from '~/editor/extensions/editor_lite_webide_ext';
+import { EditorWebIdeExtension } from '~/editor/extensions/source_editor_webide_ext';
+import SourceEditor from '~/editor/source_editor';
 import createFlash from '~/flash';
 import ModelManager from '~/ide/lib/common/model_manager';
 import { defaultDiffEditorOptions, defaultEditorOptions } from '~/ide/lib/editor_options';
@@ -216,7 +216,7 @@ export default {
   },
   mounted() {
     if (!this.globalEditor) {
-      this.globalEditor = new EditorLite();
+      this.globalEditor = new SourceEditor();
     }
     this.initEditor();
 

app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue

@@ -50,13 +50,13 @@ export default {
   methods: {
     ...mapActions(['setFileResolveMode', 'setPromptConfirmationState', 'updateFile']),
     loadEditor() {
-      const EditorPromise = import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite');
+      const EditorPromise = import(/* webpackChunkName: 'SourceEditor' */ '~/editor/source_editor');
       const DataPromise = axios.get(this.file.content_path);
 
       Promise.all([EditorPromise, DataPromise])
         .then(
           ([
-            { default: EditorLite },
+            { default: SourceEditor },
             {
               data: { content, new_path: path },
             },
@@ -66,7 +66,7 @@ export default {
             this.originalContent = content;
             this.fileLoaded = true;
 
-            this.editor = new EditorLite().createInstance({
+            this.editor = new SourceEditor().createInstance({
               el: contentEl,
               blobPath: path,
               blobContent: content,

app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue

@@ -2,14 +2,14 @@
 import { GlIcon } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { s__ } from '~/locale';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
 export default {
   i18n: {
     viewOnlyMessage: s__('Pipelines|Merged YAML is view only'),
   },
   components: {
-    EditorLite,
+    SourceEditor,
     GlIcon,
   },
   inject: ['ciConfigPath'],
@@ -41,7 +41,7 @@ export default {
       {{ $options.i18n.viewOnlyMessage }}
     </div>
     <div class="gl-mt-3 gl-border-solid gl-border-gray-100 gl-border-1">
-      <editor-lite
+      <source-editor
         ref="editor"
         :value="mergedYaml"
         :file-name="ciConfigPath"

app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue

 <script>
 import { EDITOR_READY_EVENT } from '~/editor/constants';
-import { CiSchemaExtension } from '~/editor/extensions/editor_ci_schema_ext';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
 
 export default {
   components: {
-    EditorLite,
+    SourceEditor,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['ciConfigPath', 'projectPath', 'projectNamespace', 'defaultBranch'],
@@ -44,7 +44,7 @@ export default {
 </script>
 <template>
   <div class="gl-border-solid gl-border-gray-100 gl-border-1">
-    <editor-lite
+    <source-editor
       ref="editor"
       :file-name="ciConfigPath"
       v-bind="$attrs"

app/assets/javascripts/snippets/components/snippet_blob_edit.vue

@@ -6,13 +6,13 @@ import axios from '~/lib/utils/axios_utils';
 import { getBaseURL, joinPaths } from '~/lib/utils/url_utility';
 import { sprintf } from '~/locale';
 import { SNIPPET_BLOB_CONTENT_FETCH_ERROR } from '~/snippets/constants';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
 export default {
   components: {
     BlobHeaderEdit,
     GlLoadingIcon,
-    EditorLite,
+    SourceEditor,
   },
   inheritAttrs: false,
   props: {
@@ -85,7 +85,7 @@ export default {
       size="lg"
       class="loading-animation prepend-top-20 gl-mb-6"
     />
-    <editor-lite
+    <source-editor
       v-else
       :value="blob.content"
       :file-global-id="blob.id"

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

@@ -9,8 +9,8 @@ export default {
   name: 'SimpleViewer',
   components: {
     GlIcon,
-    EditorLite: () =>
-      import(/* webpackChunkName: 'EditorLite' */ '~/vue_shared/components/editor_lite.vue'),
+    SourceEditor: () =>
+      import(/* webpackChunkName: 'SourceEditor' */ '~/vue_shared/components/source_editor.vue'),
   },
   mixins: [ViewerMixin, glFeatureFlagsMixin()],
   inject: ['blobHash'],
@@ -53,7 +53,7 @@ export default {
 </script>
 <template>
   <div>
-    <editor-lite
+    <source-editor
       v-if="isRawContent && refactorBlobViewerEnabled"
       :value="content"
       :file-name="fileName"

app/assets/javascripts/vue_shared/components/editor_lite.vue → app/assets/javascripts/vue_shared/components/source_editor.vue

 <script>
 import { debounce } from 'lodash';
 import { CONTENT_UPDATE_DEBOUNCE, EDITOR_READY_EVENT } from '~/editor/constants';
-import Editor from '~/editor/editor_lite';
+import Editor from '~/editor/source_editor';
 
-function initEditorLite({ el, ...args }) {
+function initSourceEditor({ el, ...args }) {
   const editor = new Editor({
     scrollbar: {
       alwaysConsumeMouseWheel: false,
@@ -64,7 +64,7 @@ export default {
     },
   },
   mounted() {
-    this.editor = initEditorLite({
+    this.editor = initSourceEditor({
       el: this.$refs.editor,
       blobPath: this.fileName,
       blobContent: this.value,
@@ -93,7 +93,7 @@ export default {
 </script>
 <template>
   <div
-    :id="`editor-lite-${fileGlobalId}`"
+    :id="`source-editor-${fileGlobalId}`"
     ref="editor"
     data-editor-loading
     @[$options.readyEvent]="$emit($options.readyEvent)"

app/assets/stylesheets/framework.scss

@@ -69,5 +69,5 @@
 @import 'framework/system_messages';
 @import 'framework/spinner';
 @import 'framework/card';
-@import 'framework/editor-lite';
+@import 'framework/source_editor';
 @import 'framework/diffs';

app/assets/stylesheets/framework/editor-lite.scss → app/assets/stylesheets/framework/source_editor.scss

@@ -21,11 +21,11 @@
   }
 }
 
-[id^='editor-lite-'] {
+[id^='source-editor-'] {
   height: 500px;
 }
 
-.monaco-editor.gl-editor-lite {
+.monaco-editor.gl-source-editor {
   .margin-view-overlays {
     .line-numbers {
       @include gl-display-flex;

doc/development/fe_guide/index.md

@@ -95,7 +95,7 @@ How we implement [keyboard shortcuts](keyboard_shortcuts.md) that can be customi
 
 ## Editors
 
-GitLab text editing experiences are provided by the [Source Editor](editor_lite.md) and
+GitLab text editing experiences are provided by the [Source Editor](source_editor.md) and
 the [Content Editor](content_editor.md).
 
 ## Frontend FAQ

doc/development/fe_guide/editor_lite.md → doc/development/fe_guide/source_editor.md

@@ -4,9 +4,9 @@ group: Editor
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
 ---
 
-# Editor Lite **(FREE)**
+# Source Editor **(FREE)**
 
-**Editor Lite** provides the editing experience at GitLab. This thin wrapper around
+**Source Editor** provides the editing experience at GitLab. This thin wrapper around
 [the Monaco editor](https://microsoft.github.io/monaco-editor/) provides necessary
 helpers and abstractions, and extends Monaco [using extensions](#extensions). Multiple
 GitLab features use it, including:
@@ -17,22 +17,22 @@ GitLab features use it, including:
 - [Web Editor](../../user/project/repository/web_editor.md)
 - [Security Policies](../../user/application_security/threat_monitoring/index.md)
 
-## How to use Editor Lite
+## How to use Source Editor
 
-Editor Lite is framework-agnostic and can be used in any application, including both
-Rails and Vue. To help with integration, we have the dedicated `<editor-lite>`
-Vue component, but the integration of Editor Lite is generally straightforward:
+Source Editor is framework-agnostic and can be used in any application, including both
+Rails and Vue. To help with integration, we have the dedicated `<source-editor>`
+Vue component, but the integration of Source Editor is generally straightforward:
 
-1. Import Editor Lite:
+1. Import Source Editor:
 
    ```javascript
-   import EditorLite from '~/editor/editor_lite';
+   import SourceEditor from '~/editor/source_editor';
    ```
 
 1. Initialize global editor for the view:
 
    ```javascript
-   const editor = new EditorLite({
+   const editor = new SourceEditor({
      // Editor Options.
      // The list of all accepted options can be found at
      // https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.editoroption.html
@@ -43,11 +43,11 @@ Vue component, but the integration of Editor Lite is generally straightforward:
 
    ```javascript
    editor.createInstance({
-     // Editor Lite configuration options.
+     // Source Editor configuration options.
    })
    ```
 
-An instance of Editor Lite accepts the following configuration options:
+An instance of Source Editor accepts the following configuration options:
 
 | Option | Required? | Description |
 | -------------- | ------- | ---- |
@@ -74,12 +74,12 @@ with additional functions on the instance level:
 
 1. Editor's loading state.
 
-   The loading state is built in to Editor Lite, making spinners and loaders
+   The loading state is built in to Source Editor, making spinners and loaders
    rarely needed in HTML. To benefit the built-in loading state, set the `data-editor-loading`
    property on the HTML element that should contain the editor. When bootstrapping,
-   Editor Lite shows the loader automatically.
+   Source Editor shows the loader automatically.
 
-   ![Editor Lite: loading state](img/editor_lite_loading.png)
+   ![Source Editor: loading state](img/editor_lite_loading.png)
 
 1. Update syntax highlighting if the filename changes.
 
@@ -104,21 +104,21 @@ with additional functions on the instance level:
 
 1. Performance
 
-   Even though Editor Lite itself is extremely slim, it still depends on Monaco editor,
-   which adds weight. Every time you add Editor Lite to a view, the JavaScript bundle's
+   Even though Source Editor itself is extremely slim, it still depends on Monaco editor,
+   which adds weight. Every time you add Source Editor to a view, the JavaScript bundle's
    size significantly increases, affecting your view's loading performance. We recommend
    you import the editor on demand if either:
 
    - You're uncertain if the view needs the editor.
    - The editor is a secondary element of the view.
 
-   Loading Editor Lite on demand is handled like loading any other module:
+   Loading Source Editor on demand is handled like loading any other module:
 
    ```javascript
    someActionFunction() {
-     import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite').
-       then(({ default: EditorLite }) => {
-         const editor = new EditorLite();
+     import(/* webpackChunkName: 'SourceEditor' */ '~/editor/source_editor').
+       then(({ default: SourceEditor }) => {
+         const editor = new SourceEditor();
          ...
        });
      ...
@@ -127,28 +127,28 @@ with additional functions on the instance level:
 
 ## Extensions
 
-Editor Lite provides a universal, extensible editing tool to the whole product,
-and doesn't depend on any particular group. Even though the Editor Lite's core is owned by
+Source Editor provides a universal, extensible editing tool to the whole product,
+and doesn't depend on any particular group. Even though the Source Editor's core is owned by
 [Create::Editor FE Team](https://about.gitlab.com/handbook/engineering/development/dev/create-editor/),
 any group can own the extensions—the main functional elements. The goal of
-Editor Lite extensions is to keep the editor's core slim and stable. Any
+Source Editor extensions is to keep the editor's core slim and stable. Any
 needed features can be added as extensions to this core. Any group can
-build and own new editing features without worrying about changes to Editor Lite
+build and own new editing features without worrying about changes to Source Editor
 breaking or overriding them.
 
 You can depend on other modules in your extensions. This organization helps keep
-the size of Editor Lite's core at bay by importing dependencies only when needed.
+the size of Source Editor's core at bay by importing dependencies only when needed.
 
-Structurally, the complete implementation of Editor Lite can be presented as this diagram:
+Structurally, the complete implementation of Source Editor can be presented as this diagram:
 
 ```mermaid
 graph TD;
-    B[Extension 1]---A[Editor Lite]
-    C[Extension 2]---A[Editor Lite]
-    D[Extension 3]---A[Editor Lite]
-    E[...]---A[Editor Lite]
-    F[Extension N]---A[Editor Lite]
-    A[Editor Lite]---Z[Monaco]
+    B[Extension 1]---A[Source Editor]
+    C[Extension 2]---A[Source Editor]
+    D[Extension 3]---A[Source Editor]
+    E[...]---A[Source Editor]
+    F[Extension N]---A[Source Editor]
+    A[Source Editor]---Z[Monaco]
 ```
 
 An extension is an ES6 module that exports a JavaScript object:
@@ -164,19 +164,19 @@ export default {
 
 ```
 
-In the extension's functions, `this` refers to the current Editor Lite instance.
+In the extension's functions, `this` refers to the current Source Editor instance.
 Using `this`, you get access to the complete instance's API, such as the
 `setPosition()` method in this particular case.
 
 ### Using an existing extension
 
-Adding an extension to Editor Lite's instance requires the following steps:
+Adding an extension to Source Editor's instance requires the following steps:
 
 ```javascript
-import EditorLite from '~/editor/editor_lite';
+import SourceEditor from '~/editor/source_editor';
 import MyExtension from '~/my_extension';
 
-const editor = new EditorLite().createInstance({
+const editor = new SourceEditor().createInstance({
   ...
 });
 editor.use(MyExtension);
@@ -184,10 +184,10 @@ editor.use(MyExtension);
 
 ### Creating an extension
 
-Let's create our first Editor Lite extension. Extensions are
+Let's create our first Source Editor extension. Extensions are
 [ES6 modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) exporting a
-basic `Object`, used to extend Editor Lite's features. As a test, let's
-create an extension that extends Editor Lite with a new function that, when called,
+basic `Object`, used to extend Source Editor's features. As a test, let's
+create an extension that extends Source Editor with a new function that, when called,
 outputs the editor's content in `alert`.
 
 `~/my_folder/my_fancy_extension.js:`
@@ -210,10 +210,10 @@ Now let's use our extension:
 `~/my_folder/component_bundle.js`:
 
 ```javascript
-import EditorLite from '~/editor/editor_lite';
+import SourceEditor from '~/editor/source_editor';
 import MyFancyExtension from './my_fancy_extension';
 
-const editor = new EditorLite().createInstance({
+const editor = new SourceEditor().createInstance({
   ...
 });
 editor.use(MyFancyExtension);
@@ -223,32 +223,32 @@ someButton.addEventListener('click', () => {
 });
 ```
 
-First of all, we import Editor Lite and our new extension. Then we create the
-editor and its instance. By default Editor Lite has no `throwContentAtMe` method.
+First of all, we import Source Editor and our new extension. Then we create the
+editor and its instance. By default Source Editor has no `throwContentAtMe` method.
 But the `editor.use(MyFancyExtension)` line brings that method to our instance.
 After that, we can use it any time we need it. In this case, we call it when some
 theoretical button has been clicked.
 
 This script would result in an alert containing the editor's content when `someButton` is clicked.
 
-![Editor Lite new extension's result](img/editor_lite_create_ext.png)
+![Source Editor new extension's result](img/editor_lite_create_ext.png)
 
 ### Tips
 
 1. Performance
 
-   Just like Editor Lite itself, any extension can be loaded on demand to not harm
+   Just like Source Editor itself, any extension can be loaded on demand to not harm
    loading performance of the views:
 
    ```javascript
    const EditorPromise = import(
-     /* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite'
+     /* webpackChunkName: 'SourceEditor' */ '~/editor/source_editor'
    );
-   const MarkdownExtensionPromise = import('~/editor/editor_markdown_ext');
+   const MarkdownExtensionPromise = import('~/editor/source_editor_markdown_ext');
 
    Promise.all([EditorPromise, MarkdownExtensionPromise])
-     .then(([{ default: EditorLite }, { default: MarkdownExtension }]) => {
-       const editor = new EditorLite().createInstance({
+     .then(([{ default: SourceEditor }, { default: MarkdownExtension }]) => {
+       const editor = new SourceEditor().createInstance({
          ...
        });
        editor.use(MarkdownExtension);

ee/app/assets/javascripts/threat_monitoring/components/policy_yaml_editor.vue

 <script>
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
 export default {
   components: {
-    EditorLite,
+    SourceEditor,
   },
   props: {
     value: {
@@ -44,5 +44,10 @@ export default {
 </script>
 
 <template>
-  <editor-lite :value="value" file-name="*.yaml" :editor-options="editorOptions" @input="onInput" />
+  <source-editor
+    :value="value"
+    file-name="*.yaml"
+    :editor-options="editorOptions"
+    @input="onInput"
+  />
 </template>

ee/spec/frontend/threat_monitoring/components/policy_yaml_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
 import PolicyYamlEditor from 'ee/threat_monitoring/components/policy_yaml_editor.vue';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
 describe('PolicyYamlEditor component', () => {
   let wrapper;
 
-  const findEditor = () => wrapper.findComponent(EditorLite);
+  const findEditor = () => wrapper.findComponent(SourceEditor);
 
   const factory = ({ propsData } = {}) => {
     wrapper = shallowMount(PolicyYamlEditor, {
@@ -14,7 +14,7 @@ describe('PolicyYamlEditor component', () => {
         ...propsData,
       },
       stubs: {
-        EditorLite,
+        SourceEditor,
       },
     });
   };

locale/gitlab.pot

@@ -11737,9 +11737,6 @@ msgstr ""
 msgid "Editing"
 msgstr ""
 
-msgid "Editor Lite instance is required to set up an extension."
-msgstr ""
-
 msgid "Elapsed time"
 msgstr ""
 
@@ -30552,6 +30549,9 @@ msgstr ""
 msgid "Source Branch"
 msgstr ""
 
+msgid "Source Editor instance is required to set up an extension."
+msgstr ""
+
 msgid "Source IP"
 msgstr ""
 

spec/features/merge_request/user_resolves_conflicts_spec.rb

@@ -3,7 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe 'Merge request > User resolves conflicts', :js do
-  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+  include Spec::Support::Helpers::Features::SourceEditorSpecHelpers
 
   let(:project) { create(:project, :repository) }
   let(:user) { project.creator }

spec/features/projects/ci/editor_spec.rb

@@ -3,7 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe 'Pipeline Editor', :js do
-  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+  include Spec::Support::Helpers::Features::SourceEditorSpecHelpers
 
   let(:project) { create(:project, :repository) }
   let(:user) { create(:user) }

spec/features/projects/ci/lint_spec.rb

@@ -3,7 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe 'CI Lint', :js, quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/297782' do
-  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+  include Spec::Support::Helpers::Features::SourceEditorSpecHelpers
 
   let(:project) { create(:project, :repository) }
   let(:user) { create(:user) }

spec/features/projects/files/dockerfile_dropdown_spec.rb

@@ -3,7 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Files > User wants to add a Dockerfile file', :js do
-  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+  include Spec::Support::Helpers::Features::SourceEditorSpecHelpers
 
   before do
     project = create(:project, :repository)

spec/features/projects/files/gitignore_dropdown_spec.rb

@@ -3,7 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Files > User wants to add a .gitignore file', :js do
-  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+  include Spec::Support::Helpers::Features::SourceEditorSpecHelpers
 
   before do
     project = create(:project, :repository)

spec/features/projects/files/gitlab_ci_yml_dropdown_spec.rb

@@ -3,7 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Files > User wants to add a .gitlab-ci.yml file', :js do
-  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+  include Spec::Support::Helpers::Features::SourceEditorSpecHelpers
 
   let(:params) { {} }
   let(:filename) { '.gitlab-ci.yml' }

spec/frontend/blob/components/blob_edit_content_spec.js

@@ -3,7 +3,7 @@ import { nextTick } from 'vue';
 import BlobEditContent from '~/blob/components/blob_edit_content.vue';
 import * as utils from '~/blob/utils';
 
-jest.mock('~/editor/editor_lite');
+jest.mock('~/editor/source_editor');
 
 describe('Blob Header Editing', () => {
   let wrapper;
@@ -26,7 +26,7 @@ describe('Blob Header Editing', () => {
   }
 
   beforeEach(() => {
-    jest.spyOn(utils, 'initEditorLite').mockImplementation(() => ({
+    jest.spyOn(utils, 'initSourceEditor').mockImplementation(() => ({
       onDidChangeModelContent,
       updateModelLanguage,
       getValue,
@@ -68,9 +68,9 @@ describe('Blob Header Editing', () => {
       expect(wrapper.find('#editor').exists()).toBe(true);
     });
 
-    it('initialises Editor Lite', () => {
+    it('initialises Source Editor', () => {
       const el = wrapper.find({ ref: 'editor' }).element;
-      expect(utils.initEditorLite).toHaveBeenCalledWith({
+      expect(utils.initSourceEditor).toHaveBeenCalledWith({
         el,
         blobPath: fileName,
         blobGlobalId: fileGlobalId,

spec/frontend/blob/utils_spec.js

 import * as utils from '~/blob/utils';
-import Editor from '~/editor/editor_lite';
+import Editor from '~/editor/source_editor';
 
-jest.mock('~/editor/editor_lite');
+jest.mock('~/editor/source_editor');
 
 describe('Blob utilities', () => {
-  describe('initEditorLite', () => {
+  describe('initSourceEditor', () => {
     let editorEl;
     const blobPath = 'foo.txt';
     const blobContent = 'Foo bar';
@@ -15,8 +15,8 @@ describe('Blob utilities', () => {
     });
 
     describe('Monaco editor', () => {
-      it('initializes the Editor Lite', () => {
-        utils.initEditorLite({ el: editorEl });
+      it('initializes the Source Editor', () => {
+        utils.initSourceEditor({ el: editorEl });
         expect(Editor).toHaveBeenCalledWith({
           scrollbar: {
             alwaysConsumeMouseWheel: false,
@@ -34,7 +34,7 @@ describe('Blob utilities', () => {
 
           expect(Editor.prototype.createInstance).not.toHaveBeenCalled();
 
-          utils.initEditorLite(params);
+          utils.initSourceEditor(params);
 
           expect(Editor.prototype.createInstance).toHaveBeenCalledWith(params);
         },

spec/frontend/blob_edit/blob_bundle_spec.js

@@ -3,21 +3,21 @@ import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import blobBundle from '~/blob_edit/blob_bundle';
 
-import EditorLite from '~/blob_edit/edit_blob';
+import SourceEditor from '~/blob_edit/edit_blob';
 
 jest.mock('~/blob_edit/edit_blob');
 
 describe('BlobBundle', () => {
-  it('does not load EditorLite by default', () => {
+  it('does not load SourceEditor by default', () => {
     blobBundle();
-    expect(EditorLite).not.toHaveBeenCalled();
+    expect(SourceEditor).not.toHaveBeenCalled();
   });
 
-  it('loads EditorLite for the edit screen', async () => {
+  it('loads SourceEditor for the edit screen', async () => {
     setFixtures(`<div class="js-edit-blob-form"></div>`);
     blobBundle();
     await waitForPromises();
-    expect(EditorLite).toHaveBeenCalled();
+    expect(SourceEditor).toHaveBeenCalled();
   });
 
   describe('No Suggest Popover', () => {

spec/frontend/blob_edit/edit_blob_spec.js

 import waitForPromises from 'helpers/wait_for_promises';
 import EditBlob from '~/blob_edit/edit_blob';
-import EditorLite from '~/editor/editor_lite';
-import { FileTemplateExtension } from '~/editor/extensions/editor_file_template_ext';
-import { EditorMarkdownExtension } from '~/editor/extensions/editor_markdown_ext';
+import { FileTemplateExtension } from '~/editor/extensions/source_editor_file_template_ext';
+import { EditorMarkdownExtension } from '~/editor/extensions/source_editor_markdown_ext';
+import SourceEditor from '~/editor/source_editor';
 
-jest.mock('~/editor/editor_lite');
-jest.mock('~/editor/extensions/editor_markdown_ext');
-jest.mock('~/editor/extensions/editor_file_template_ext');
+jest.mock('~/editor/source_editor');
+jest.mock('~/editor/extensions/source_editor_markdown_ext');
+jest.mock('~/editor/extensions/source_editor_file_template_ext');
 
 describe('Blob Editing', () => {
   const useMock = jest.fn();
@@ -24,7 +24,7 @@ describe('Blob Editing', () => {
         <textarea id="file-content"></textarea>
       </form>
     `);
-    jest.spyOn(EditorLite.prototype, 'createInstance').mockReturnValue(mockInstance);
+    jest.spyOn(SourceEditor.prototype, 'createInstance').mockReturnValue(mockInstance);
   });
   afterEach(() => {
     EditorMarkdownExtension.mockClear();

spec/frontend/ci_lint/components/ci_lint_spec.js

@@ -4,7 +4,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import CiLint from '~/ci_lint/components/ci_lint.vue';
 import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue';
 import lintCIMutation from '~/pipeline_editor/graphql/mutations/lint_ci.mutation.graphql';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 import { mockLintDataValid } from '../mock_data';
 
 describe('CI Lint', () => {
@@ -35,7 +35,7 @@ describe('CI Lint', () => {
     });
   };
 
-  const findEditor = () => wrapper.find(EditorLite);
+  const findEditor = () => wrapper.find(SourceEditor);
   const findAlert = () => wrapper.find(GlAlert);
   const findCiLintResults = () => wrapper.find(CiLintResults);
   const findValidateBtn = () => wrapper.find('[data-testid="ci-lint-validate"]');

spec/frontend/editor/editor_ci_schema_ext_spec.js

 import { languages } from 'monaco-editor';
 import { TEST_HOST } from 'helpers/test_constants';
 import { EXTENSION_CI_SCHEMA_FILE_NAME_MATCH } from '~/editor/constants';
-import EditorLite from '~/editor/editor_lite';
-import { CiSchemaExtension } from '~/editor/extensions/editor_ci_schema_ext';
+import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
+import SourceEditor from '~/editor/source_editor';
 
 const mockRef = 'AABBCCDD';
 
@@ -17,7 +17,7 @@ describe('~/editor/editor_ci_config_ext', () => {
   const createMockEditor = ({ blobPath = defaultBlobPath } = {}) => {
     setFixtures('<div id="editor"></div>');
     editorEl = document.getElementById('editor');
-    editor = new EditorLite();
+    editor = new SourceEditor();
     instance = editor.createInstance({
       el: editorEl,
       blobPath,

spec/frontend/editor/editor_lite_extension_base_spec.js

@@ -5,7 +5,7 @@ import {
   EDITOR_TYPE_CODE,
   EDITOR_TYPE_DIFF,
 } from '~/editor/constants';
-import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
+import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
 
 jest.mock('~/helpers/startup_css_helper', () => {
   return {
@@ -22,7 +22,7 @@ jest.mock('~/helpers/startup_css_helper', () => {
   };
 });
 
-describe('The basis for an Editor Lite extension', () => {
+describe('The basis for an Source Editor extension', () => {
   const defaultLine = 3;
   let ext;
   let event;
@@ -63,7 +63,7 @@ describe('The basis for an Editor Lite extension', () => {
       const instance = {
         layout: jest.fn(),
       };
-      ext = new EditorLiteExtension({ instance });
+      ext = new SourceEditorExtension({ instance });
       expect(instance.layout).not.toHaveBeenCalled();
 
       // We're waiting for the waitForCSSLoaded mock to kick in
@@ -79,7 +79,7 @@ describe('The basis for an Editor Lite extension', () => {
       ${'does not fail if both instance and the options are omitted'} | ${undefined} | ${undefined}
       ${'throws if only options are passed'}                          | ${undefined} | ${defaultOptions}
     `('$description', ({ instance, options } = {}) => {
-      EditorLiteExtension.deferRerender = jest.fn();
+      SourceEditorExtension.deferRerender = jest.fn();
       const originalInstance = { ...instance };
 
       if (instance) {
@@ -88,54 +88,54 @@ describe('The basis for an Editor Lite extension', () => {
             expect(instance[prop]).toBeUndefined();
           });
           // Both instance and options are passed
-          ext = new EditorLiteExtension({ instance, ...options });
+          ext = new SourceEditorExtension({ instance, ...options });
           Object.entries(options).forEach(([prop, value]) => {
             expect(ext[prop]).toBeUndefined();
             expect(instance[prop]).toBe(value);
           });
         } else {
-          ext = new EditorLiteExtension({ instance });
+          ext = new SourceEditorExtension({ instance });
           expect(instance).toEqual(originalInstance);
         }
       } else if (options) {
         // Options are passed without instance
         expect(() => {
-          ext = new EditorLiteExtension({ ...options });
+          ext = new SourceEditorExtension({ ...options });
         }).toThrow(ERROR_INSTANCE_REQUIRED_FOR_EXTENSION);
       } else {
         // Neither options nor instance are passed
         expect(() => {
-          ext = new EditorLiteExtension();
+          ext = new SourceEditorExtension();
         }).not.toThrow();
       }
     });
 
     it('initializes the line highlighting', () => {
-      EditorLiteExtension.deferRerender = jest.fn();
-      const spy = jest.spyOn(EditorLiteExtension, 'highlightLines');
-      ext = new EditorLiteExtension({ instance: {} });
+      SourceEditorExtension.deferRerender = jest.fn();
+      const spy = jest.spyOn(SourceEditorExtension, 'highlightLines');
+      ext = new SourceEditorExtension({ instance: {} });
       expect(spy).toHaveBeenCalled();
     });
 
     it('sets up the line linking for code instance', () => {
-      EditorLiteExtension.deferRerender = jest.fn();
-      const spy = jest.spyOn(EditorLiteExtension, 'setupLineLinking');
+      SourceEditorExtension.deferRerender = jest.fn();
+      const spy = jest.spyOn(SourceEditorExtension, 'setupLineLinking');
       const instance = {
         getEditorType: jest.fn().mockReturnValue(EDITOR_TYPE_CODE),
         onMouseMove: jest.fn(),
         onMouseDown: jest.fn(),
       };
-      ext = new EditorLiteExtension({ instance });
+      ext = new SourceEditorExtension({ instance });
       expect(spy).toHaveBeenCalledWith(instance);
     });
 
     it('does not set up the line linking for diff instance', () => {
-      EditorLiteExtension.deferRerender = jest.fn();
-      const spy = jest.spyOn(EditorLiteExtension, 'setupLineLinking');
+      SourceEditorExtension.deferRerender = jest.fn();
+      const spy = jest.spyOn(SourceEditorExtension, 'setupLineLinking');
       const instance = {
         getEditorType: jest.fn().mockReturnValue(EDITOR_TYPE_DIFF),
       };
-      ext = new EditorLiteExtension({ instance });
+      ext = new SourceEditorExtension({ instance });
       expect(spy).not.toHaveBeenCalled();
     });
   });
@@ -172,7 +172,7 @@ describe('The basis for an Editor Lite extension', () => {
       ${'does not highlight if hash is incomplete 2'}    | ${'#L-'}     | ${false}     | ${null}
     `('$desc', ({ hash, shouldReveal, expectedRange } = {}) => {
       window.location.hash = hash;
-      EditorLiteExtension.highlightLines(instance);
+      SourceEditorExtension.highlightLines(instance);
       if (!shouldReveal) {
         expect(revealSpy).not.toHaveBeenCalled();
         expect(decorationsSpy).not.toHaveBeenCalled();
@@ -194,7 +194,7 @@ describe('The basis for an Editor Lite extension', () => {
       decorationsSpy.mockReturnValue('foo');
       window.location.hash = '#L10';
       expect(instance.lineDecorations).toBeUndefined();
-      EditorLiteExtension.highlightLines(instance);
+      SourceEditorExtension.highlightLines(instance);
       expect(instance.lineDecorations).toBe('foo');
     });
   });
@@ -208,7 +208,7 @@ describe('The basis for an Editor Lite extension', () => {
     };
 
     beforeEach(() => {
-      EditorLiteExtension.onMouseMoveHandler(event); // generate the anchor
+      SourceEditorExtension.onMouseMoveHandler(event); // generate the anchor
     });
 
     it.each`
@@ -216,7 +216,7 @@ describe('The basis for an Editor Lite extension', () => {
       ${'onMouseMove'} | ${instance.onMouseMove}
       ${'onMouseDown'} | ${instance.onMouseDown}
     `('sets up the $desc listener', ({ spy } = {}) => {
-      EditorLiteExtension.setupLineLinking(instance);
+      SourceEditorExtension.setupLineLinking(instance);
       expect(spy).toHaveBeenCalled();
     });
 
@@ -230,7 +230,7 @@ describe('The basis for an Editor Lite extension', () => {
         fn(event);
       });
 
-      EditorLiteExtension.setupLineLinking(instance);
+      SourceEditorExtension.setupLineLinking(instance);
       if (shouldRemove) {
         expect(instance.deltaDecorations).toHaveBeenCalledWith(instance.lineDecorations, []);
       } else {
@@ -241,7 +241,7 @@ describe('The basis for an Editor Lite extension', () => {
 
   describe('onMouseMoveHandler', () => {
     it('stops propagation for contextmenu event on the generated anchor', () => {
-      EditorLiteExtension.onMouseMoveHandler(event);
+      SourceEditorExtension.onMouseMoveHandler(event);
       const anchor = findLine(defaultLine).querySelector('a');
       const contextMenuEvent = new Event('contextmenu');
 
@@ -253,27 +253,27 @@ describe('The basis for an Editor Lite extension', () => {
 
     it('creates an anchor if it does not exist yet', () => {
       expect(findLine(defaultLine).querySelector('a')).toBe(null);
-      EditorLiteExtension.onMouseMoveHandler(event);
+      SourceEditorExtension.onMouseMoveHandler(event);
       expect(findLine(defaultLine).querySelector('a')).not.toBe(null);
     });
 
     it('does not create a new anchor if it exists', () => {
-      EditorLiteExtension.onMouseMoveHandler(event);
+      SourceEditorExtension.onMouseMoveHandler(event);
       expect(findLine(defaultLine).querySelector('a')).not.toBe(null);
 
-      EditorLiteExtension.createAnchor = jest.fn();
-      EditorLiteExtension.onMouseMoveHandler(event);
-      expect(EditorLiteExtension.createAnchor).not.toHaveBeenCalled();
+      SourceEditorExtension.createAnchor = jest.fn();
+      SourceEditorExtension.onMouseMoveHandler(event);
+      expect(SourceEditorExtension.createAnchor).not.toHaveBeenCalled();
       expect(findLine(defaultLine).querySelectorAll('a')).toHaveLength(1);
     });
 
     it('does not create a link if the event is triggered on a wrong node', () => {
       setFixtures('<div class="wrong-class">3</div>');
-      EditorLiteExtension.createAnchor = jest.fn();
+      SourceEditorExtension.createAnchor = jest.fn();
       const wrongEvent = generateEventMock({ el: document.querySelector('.wrong-class') });
 
-      EditorLiteExtension.onMouseMoveHandler(wrongEvent);
-      expect(EditorLiteExtension.createAnchor).not.toHaveBeenCalled();
+      SourceEditorExtension.onMouseMoveHandler(wrongEvent);
+      expect(SourceEditorExtension.createAnchor).not.toHaveBeenCalled();
     });
   });
 });

spec/frontend/editor/editor_lite_spec.js

@@ -2,12 +2,12 @@
 import { editor as monacoEditor, languages as monacoLanguages } from 'monaco-editor';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
-  EDITOR_LITE_INSTANCE_ERROR_NO_EL,
+  SOURCE_EDITOR_INSTANCE_ERROR_NO_EL,
   URI_PREFIX,
   EDITOR_READY_EVENT,
 } from '~/editor/constants';
-import EditorLite from '~/editor/editor_lite';
-import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
+import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
+import SourceEditor from '~/editor/source_editor';
 import { DEFAULT_THEME, themes } from '~/ide/lib/themes';
 import { joinPaths } from '~/lib/utils/url_utility';
 
@@ -25,7 +25,7 @@ describe('Base editor', () => {
     setFixtures('<div id="editor" data-editor-loading></div>');
     editorEl = document.getElementById('editor');
     defaultArguments = { el: editorEl, blobPath, blobContent, blobGlobalId };
-    editor = new EditorLite();
+    editor = new SourceEditor();
   });
 
   afterEach(() => {
@@ -49,7 +49,7 @@ describe('Base editor', () => {
     expect(editorEl.dataset.editorLoading).toBeUndefined();
   });
 
-  describe('instance of the Editor Lite', () => {
+  describe('instance of the Source Editor', () => {
     let modelSpy;
     let instanceSpy;
     const setModel = jest.fn();
@@ -58,7 +58,7 @@ describe('Base editor', () => {
       modelSpy = jest.spyOn(monacoEditor, 'createModel').mockImplementation(() => res);
     };
     const mockDecorateInstance = (decorations = {}) => {
-      jest.spyOn(EditorLite, 'convertMonacoToELInstance').mockImplementation((inst) => {
+      jest.spyOn(SourceEditor, 'convertMonacoToELInstance').mockImplementation((inst) => {
         return Object.assign(inst, decorations);
       });
     };
@@ -76,11 +76,11 @@ describe('Base editor', () => {
         mockDecorateInstance();
         expect(() => {
           editor.createInstance();
-        }).toThrow(EDITOR_LITE_INSTANCE_ERROR_NO_EL);
+        }).toThrow(SOURCE_EDITOR_INSTANCE_ERROR_NO_EL);
 
         expect(modelSpy).not.toHaveBeenCalled();
         expect(instanceSpy).not.toHaveBeenCalled();
-        expect(EditorLite.convertMonacoToELInstance).not.toHaveBeenCalled();
+        expect(SourceEditor.convertMonacoToELInstance).not.toHaveBeenCalled();
       });
 
       it('creates model to be supplied to Monaco editor', () => {
@@ -261,7 +261,7 @@ describe('Base editor', () => {
         blobPath,
       };
 
-      editor = new EditorLite();
+      editor = new SourceEditor();
       instanceSpy = jest.spyOn(monacoEditor, 'create');
     });
 
@@ -304,7 +304,7 @@ describe('Base editor', () => {
     });
 
     it('shares global editor options among all instances', () => {
-      editor = new EditorLite({
+      editor = new SourceEditor({
         readOnly: true,
       });
 
@@ -316,7 +316,7 @@ describe('Base editor', () => {
     });
 
     it('allows overriding editor options on the instance level', () => {
-      editor = new EditorLite({
+      editor = new SourceEditor({
         readOnly: true,
       });
       inst1 = editor.createInstance({
@@ -410,7 +410,7 @@ describe('Base editor', () => {
         return WithStaticMethod.computeBoo(this.base);
       }
     }
-    class WithStaticMethodExtended extends EditorLiteExtension {
+    class WithStaticMethodExtended extends SourceEditorExtension {
       static computeBoo(a) {
         return a + 1;
       }
@@ -546,7 +546,7 @@ describe('Base editor', () => {
 
       beforeEach(() => {
         editorExtensionSpy = jest
-          .spyOn(EditorLite, 'pushToImportsArray')
+          .spyOn(SourceEditor, 'pushToImportsArray')
           .mockImplementation((arr) => {
             arr.push(
               Promise.resolve({
@@ -593,7 +593,7 @@ describe('Base editor', () => {
         const useSpy = jest.fn().mockImplementation(() => {
           calls.push('use');
         });
-        jest.spyOn(EditorLite, 'convertMonacoToELInstance').mockImplementation((inst) => {
+        jest.spyOn(SourceEditor, 'convertMonacoToELInstance').mockImplementation((inst) => {
           const decoratedInstance = inst;
           decoratedInstance.use = useSpy;
           return decoratedInstance;
@@ -664,7 +664,7 @@ describe('Base editor', () => {
     it('sets default syntax highlighting theme', () => {
       const expectedTheme = themes.find((t) => t.name === DEFAULT_THEME);
 
-      editor = new EditorLite();
+      editor = new SourceEditor();
 
       expect(themeDefineSpy).toHaveBeenCalledWith(DEFAULT_THEME, expectedTheme.data);
       expect(themeSetSpy).toHaveBeenCalledWith(DEFAULT_THEME);
@@ -676,7 +676,7 @@ describe('Base editor', () => {
       expect(expectedTheme.name).not.toBe(DEFAULT_THEME);
 
       window.gon.user_color_scheme = expectedTheme.name;
-      editor = new EditorLite();
+      editor = new SourceEditor();
 
       expect(themeDefineSpy).toHaveBeenCalledWith(expectedTheme.name, expectedTheme.data);
       expect(themeSetSpy).toHaveBeenCalledWith(expectedTheme.name);
@@ -687,7 +687,7 @@ describe('Base editor', () => {
       const nonExistentTheme = { name };
 
       window.gon.user_color_scheme = nonExistentTheme.name;
-      editor = new EditorLite();
+      editor = new SourceEditor();
 
       expect(themeDefineSpy).not.toHaveBeenCalled();
       expect(themeSetSpy).toHaveBeenCalledWith(DEFAULT_THEME);

spec/frontend/editor/editor_markdown_ext_spec.js

 import { Range, Position } from 'monaco-editor';
-import EditorLite from '~/editor/editor_lite';
-import { EditorMarkdownExtension } from '~/editor/extensions/editor_markdown_ext';
+import { EditorMarkdownExtension } from '~/editor/extensions/source_editor_markdown_ext';
+import SourceEditor from '~/editor/source_editor';
 
-describe('Markdown Extension for Editor Lite', () => {
+describe('Markdown Extension for Source Editor', () => {
   let editor;
   let instance;
   let editorEl;
@@ -25,7 +25,7 @@ describe('Markdown Extension for Editor Lite', () => {
   beforeEach(() => {
     setFixtures('<div id="editor" data-editor-loading></div>');
     editorEl = document.getElementById('editor');
-    editor = new EditorLite();
+    editor = new SourceEditor();
     instance = editor.createInstance({
       el: editorEl,
       blobPath: filePath,

spec/frontend/ide/components/repo_editor_spec.js

@@ -8,8 +8,8 @@ import waitForPromises from 'helpers/wait_for_promises';
 import waitUsingRealTimer from 'helpers/wait_using_real_timer';
 import { exampleConfigs, exampleFiles } from 'jest/ide/lib/editorconfig/mock_data';
 import { EDITOR_CODE_INSTANCE_FN, EDITOR_DIFF_INSTANCE_FN } from '~/editor/constants';
-import EditorLite from '~/editor/editor_lite';
-import { EditorWebIdeExtension } from '~/editor/extensions/editor_lite_webide_ext';
+import { EditorWebIdeExtension } from '~/editor/extensions/source_editor_webide_ext';
+import SourceEditor from '~/editor/source_editor';
 import RepoEditor from '~/ide/components/repo_editor.vue';
 import {
   leftSidebarViews,
@@ -123,8 +123,8 @@ describe('RepoEditor', () => {
   const findPreviewTab = () => wrapper.find('[data-testid="preview-tab"]');
 
   beforeEach(() => {
-    createInstanceSpy = jest.spyOn(EditorLite.prototype, EDITOR_CODE_INSTANCE_FN);
-    createDiffInstanceSpy = jest.spyOn(EditorLite.prototype, EDITOR_DIFF_INSTANCE_FN);
+    createInstanceSpy = jest.spyOn(SourceEditor.prototype, EDITOR_CODE_INSTANCE_FN);
+    createDiffInstanceSpy = jest.spyOn(SourceEditor.prototype, EDITOR_DIFF_INSTANCE_FN);
     createModelSpy = jest.spyOn(monacoEditor, 'createModel');
     jest.spyOn(service, 'getFileData').mockResolvedValue();
     jest.spyOn(service, 'getRawFileData').mockResolvedValue();
@@ -252,7 +252,7 @@ describe('RepoEditor', () => {
     );
 
     it('installs the WebIDE extension', async () => {
-      const extensionSpy = jest.spyOn(EditorLite, 'instanceApplyExtension');
+      const extensionSpy = jest.spyOn(SourceEditor, 'instanceApplyExtension');
       await createComponent();
       expect(extensionSpy).toHaveBeenCalled();
       Reflect.ownKeys(EditorWebIdeExtension.prototype)

spec/frontend/lib/utils/text_markdown_spec.js

@@ -300,7 +300,7 @@ describe('init markdown', () => {
     });
   });
 
-  describe('Editor Lite', () => {
+  describe('Source Editor', () => {
     let editor;
 
     beforeEach(() => {

spec/frontend/pipeline_editor/components/editor/ci_config_merged_preview_spec.js

@@ -8,7 +8,7 @@ import { mockLintResponse, mockCiConfigPath } from '../../mock_data';
 describe('Text editor component', () => {
   let wrapper;
 
-  const MockEditorLite = {
+  const MockSourceEditor = {
     template: '<div/>',
     props: ['value', 'fileName', 'editorOptions'],
     mounted() {
@@ -26,13 +26,13 @@ describe('Text editor component', () => {
         ciConfigPath: mockCiConfigPath,
       },
       stubs: {
-        EditorLite: MockEditorLite,
+        SourceEditor: MockSourceEditor,
       },
     });
   };
 
   const findIcon = () => wrapper.findComponent(GlIcon);
-  const findEditor = () => wrapper.findComponent(MockEditorLite);
+  const findEditor = () => wrapper.findComponent(MockSourceEditor);
 
   afterEach(() => {
     wrapper.destroy();

spec/frontend/pipeline_editor/components/editor/text_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
 
 import { EDITOR_READY_EVENT } from '~/editor/constants';
-import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
+import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
 import TextEditor from '~/pipeline_editor/components/editor/text_editor.vue';
 import {
   mockCiConfigPath,
@@ -19,7 +19,7 @@ describe('Pipeline Editor | Text editor component', () => {
   let mockUse;
   let mockRegisterCiSchema;
 
-  const MockEditorLite = {
+  const MockSourceEditor = {
     template: '<div/>',
     props: ['value', 'fileName'],
     mounted() {
@@ -55,15 +55,15 @@ describe('Pipeline Editor | Text editor component', () => {
         [EDITOR_READY_EVENT]: editorReadyListener,
       },
       stubs: {
-        EditorLite: MockEditorLite,
+        SourceEditor: MockSourceEditor,
       },
     });
   };
 
-  const findEditor = () => wrapper.findComponent(MockEditorLite);
+  const findEditor = () => wrapper.findComponent(MockSourceEditor);
 
   beforeEach(() => {
-    EditorLiteExtension.deferRerender = jest.fn();
+    SourceEditorExtension.deferRerender = jest.fn();
   });
 
   afterEach(() => {

spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js

@@ -6,7 +6,7 @@ import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
 const mockContent1 = 'MOCK CONTENT 1';
 const mockContent2 = 'MOCK CONTENT 2';
 
-const MockEditorLite = {
+const MockSourceEditor = {
   template: '<div>EDITOR</div>',
 };
 
@@ -48,12 +48,12 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
     wrapper = mount(EditorTab, {
       propsData: props,
       slots: {
-        default: MockEditorLite,
+        default: MockSourceEditor,
       },
     });
   };
 
-  const findSlotComponent = () => wrapper.findComponent(MockEditorLite);
+  const findSlotComponent = () => wrapper.findComponent(MockSourceEditor);
   const findAlert = () => wrapper.findComponent(GlAlert);
 
   beforeEach(() => {

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -25,7 +25,7 @@ import {
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-const MockEditorLite = {
+const MockSourceEditor = {
   template: '<div/>',
 };
 
@@ -55,7 +55,7 @@ describe('Pipeline editor app component', () => {
         PipelineEditorHome,
         PipelineEditorTabs,
         PipelineEditorMessages,
-        EditorLite: MockEditorLite,
+        SourceEditor: MockSourceEditor,
         PipelineEditorEmptyState,
       },
       mocks: {

spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap

@@ -13,7 +13,7 @@ exports[`Snippet Blob Edit component with loaded blob matches snapshot 1`] = `
     value="foo/bar/test.md"
   />
    
-  <editor-lite-stub
+  <source-editor-stub
     editoroptions="[object Object]"
     fileglobalid="blob_local_7"
     filename="foo/bar/test.md"

spec/frontend/snippets/components/snippet_blob_edit_spec.js

@@ -8,7 +8,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
 jest.mock('~/flash');
 
@@ -48,7 +48,7 @@ describe('Snippet Blob Edit component', () => {
 
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findHeader = () => wrapper.find(BlobHeaderEdit);
-  const findContent = () => wrapper.find(EditorLite);
+  const findContent = () => wrapper.find(SourceEditor);
   const getLastUpdatedArgs = () => {
     const event = wrapper.emitted()['blob-updated'];
 

spec/frontend/vue_shared/components/__snapshots__/editor_lite_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Editor Lite component rendering matches the snapshot 1`] = `
+exports[`Source Editor component rendering matches the snapshot 1`] = `
 <div
   data-editor-loading=""
-  id="editor-lite-snippet_777"
+  id="source-editor-snippet_777"
 >
   <pre
     class="editor-loading-content"

spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
 import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
 import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
 describe('Blob Simple Viewer component', () => {
   let wrapper;
@@ -96,7 +96,7 @@ describe('Blob Simple Viewer component', () => {
   });
 
   describe('Vue refactoring to use Source Editor', () => {
-    const findEditorLite = () => wrapper.find(EditorLite);
+    const findSourceEditor = () => wrapper.find(SourceEditor);
 
     it.each`
       doesRender    | condition                                          | isRawContent | isRefactorFlagEnabled
@@ -105,19 +105,19 @@ describe('Blob Simple Viewer component', () => {
       ${'Does not'} | ${'both, the FF and rawContent are not specified'} | ${false}     | ${false}
       ${'Does'}     | ${'both, the FF and rawContent are specified'}     | ${true}      | ${true}
     `(
-      '$doesRender render Editor Lite component in readonly mode when $condition',
+      '$doesRender render Source Editor component in readonly mode when $condition',
       async ({ isRawContent, isRefactorFlagEnabled } = {}) => {
         createComponent('raw content', isRawContent, isRefactorFlagEnabled);
         await waitForPromises();
 
         if (isRawContent && isRefactorFlagEnabled) {
-          expect(findEditorLite().exists()).toBe(true);
+          expect(findSourceEditor().exists()).toBe(true);
 
-          expect(findEditorLite().props('value')).toBe('raw content');
-          expect(findEditorLite().props('fileName')).toBe('test.js');
-          expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true });
+          expect(findSourceEditor().props('value')).toBe('raw content');
+          expect(findSourceEditor().props('fileName')).toBe('test.js');
+          expect(findSourceEditor().props('editorOptions')).toEqual({ readOnly: true });
         } else {
-          expect(findEditorLite().exists()).toBe(false);
+          expect(findSourceEditor().exists()).toBe(false);
         }
       },
     );

spec/frontend/vue_shared/components/editor_lite_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { EDITOR_READY_EVENT } from '~/editor/constants';
-import Editor from '~/editor/editor_lite';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import Editor from '~/editor/source_editor';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
-jest.mock('~/editor/editor_lite');
+jest.mock('~/editor/source_editor');
 
-describe('Editor Lite component', () => {
+describe('Source Editor component', () => {
   let wrapper;
   let mockInstance;
 
@@ -30,7 +30,7 @@ describe('Editor Lite component', () => {
     };
   });
   function createComponent(props = {}) {
-    wrapper = shallowMount(EditorLite, {
+    wrapper = shallowMount(SourceEditor, {
       propsData: {
         value,
         fileName,
@@ -73,10 +73,10 @@ describe('Editor Lite component', () => {
       createComponent({ value: undefined });
 
       expect(spy).not.toHaveBeenCalled();
-      expect(wrapper.find('[id^="editor-lite-"]').exists()).toBe(true);
+      expect(wrapper.find('[id^="source-editor-"]').exists()).toBe(true);
     });
 
-    it('initialises Editor Lite instance', () => {
+    it('initialises Source Editor instance', () => {
       const el = wrapper.find({ ref: 'editor' }).element;
       expect(createInstanceMock).toHaveBeenCalledWith({
         el,
@@ -111,7 +111,7 @@ describe('Editor Lite component', () => {
       expect(wrapper.emitted().input).toEqual([[value]]);
     });
 
-    it('emits EDITOR_READY_EVENT event when the Editor Lite is ready', async () => {
+    it('emits EDITOR_READY_EVENT event when the Source Editor is ready', async () => {
       const el = wrapper.find({ ref: 'editor' }).element;
       expect(wrapper.emitted()[EDITOR_READY_EVENT]).toBeUndefined();
 

spec/support/helpers/features/editor_lite_spec_helpers.rb

 # frozen_string_literal: true
 
-# These helpers help you interact within the Editor Lite (single-file editor, snippets, etc.).
+# These helpers help you interact within the Source Editor (single-file editor, snippets, etc.).
 #
 module Spec
   module Support
     module Helpers
       module Features
-        module EditorLiteSpecHelpers
+        module SourceEditorSpecHelpers
           include ActionView::Helpers::JavaScriptHelper
 
           def editor_set_value(value)

spec/support/helpers/features/snippet_helpers.rb

 # frozen_string_literal: true
 
-# These helpers help you interact within the Editor Lite (single-file editor, snippets, etc.).
+# These helpers help you interact within the Source Editor (single-file editor, snippets, etc.).
 #
 module Spec
   module Support
@@ -8,7 +8,7 @@ module Spec
       module Features
         module SnippetSpecHelpers
           include ActionView::Helpers::JavaScriptHelper
-          include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+          include Spec::Support::Helpers::Features::SourceEditorSpecHelpers
 
           def snippet_description_locator
             'snippet-description'
@@ -31,7 +31,7 @@ module Spec
           end
 
           def snippet_get_first_blob_value
-            page.find('.gl-editor-lite', match: :first)
+            page.find('.gl-source-editor', match: :first)
           end
 
           def snippet_description_value
@@ -53,7 +53,7 @@ module Spec
           end
 
           def snippet_fill_in_content(value)
-            page.within('.gl-editor-lite') do
+            page.within('.gl-source-editor') do
               el = find('.inputarea')
               el.send_keys value
             end

spec/support/helpers/features/top_nav_spec_helpers.rb

 # frozen_string_literal: true
 
-# These helpers help you interact within the Editor Lite (single-file editor, snippets, etc.).
+# These helpers help you interact within the Source Editor (single-file editor, snippets, etc.).
 #
 module Spec
   module Support