Wrapped Editor Lite in a Vue component

Now the Editor Lite can be easily used in any Vue application
with this component

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

+<script>
+import { debounce } from 'lodash';
+import Editor from '~/editor/editor_lite';
+
+function initEditorLite({ el, ...args }) {
+  const editor = new Editor({
+    scrollbar: {
+      alwaysConsumeMouseWheel: false,
+    },
+  });
+
+  return editor.createInstance({
+    el,
+    ...args,
+  });
+}
+
+export default {
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    fileName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    // This is used to help uniquely create a monaco model
+    // even if two blob's share a file path.
+    fileGlobalId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    extensions: {
+      type: [String, Array],
+      required: false,
+      default: () => null,
+    },
+    editorOptions: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      editor: null,
+    };
+  },
+  watch: {
+    fileName(newVal) {
+      this.editor.updateModelLanguage(newVal);
+    },
+  },
+  mounted() {
+    this.editor = initEditorLite({
+      el: this.$refs.editor,
+      blobPath: this.fileName,
+      blobContent: this.value,
+      blobGlobalId: this.fileGlobalId,
+      extensions: this.extensions,
+      ...this.editorOptions,
+    });
+
+    this.editor.onDidChangeModelContent(debounce(this.onFileChange.bind(this), 250));
+  },
+  beforeDestroy() {
+    this.editor.dispose();
+  },
+  methods: {
+    onFileChange() {
+      this.$emit('input', this.editor.getValue());
+    },
+  },
+};
+</script>
+<template>
+  <div class="file-content code">
+    <div id="editor" ref="editor" data-editor-loading @editor-ready="$emit('editor-ready')">
+      <pre class="editor-loading-content">{{ value }}</pre>
+    </div>
+  </div>
+</template>

changelogs/unreleased/232503-editor-lite-vue-component.yml

+---
+title: Added new editor-lite Vue component
+merge_request: 44577
+author:
+type: added

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`] = `
+<div
+  class="file-content code"
+>
+  <div
+    data-editor-loading=""
+    id="editor"
+  >
+    <pre
+      class="editor-loading-content"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </pre>
+  </div>
+</div>
+`;

spec/frontend/vue_shared/components/editor_lite_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import Editor from '~/editor/editor_lite';
+
+jest.mock('~/editor/editor_lite');
+
+describe('Editor Lite component', () => {
+  let wrapper;
+  const onDidChangeModelContent = jest.fn();
+  const updateModelLanguage = jest.fn();
+  const getValue = jest.fn();
+  const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+  const fileName = 'lorem.txt';
+  const fileGlobalId = 'snippet_777';
+  const createInstanceMock = jest.fn().mockImplementation(() => ({
+    onDidChangeModelContent,
+    updateModelLanguage,
+    getValue,
+    dispose: jest.fn(),
+  }));
+  Editor.mockImplementation(() => {
+    return {
+      createInstance: createInstanceMock,
+    };
+  });
+  function createComponent(props = {}) {
+    wrapper = shallowMount(EditorLite, {
+      propsData: {
+        value,
+        fileName,
+        fileGlobalId,
+        ...props,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const triggerChangeContent = val => {
+    getValue.mockReturnValue(val);
+    const [cb] = onDidChangeModelContent.mock.calls[0];
+
+    cb();
+
+    jest.runOnlyPendingTimers();
+  };
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders content', () => {
+      expect(wrapper.text()).toContain(value);
+    });
+  });
+
+  describe('functionality', () => {
+    it('does not fail without content', () => {
+      const spy = jest.spyOn(global.console, 'error');
+      createComponent({ value: undefined });
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(wrapper.find('#editor').exists()).toBe(true);
+    });
+
+    it('initialises Editor Lite instance', () => {
+      const el = wrapper.find({ ref: 'editor' }).element;
+      expect(createInstanceMock).toHaveBeenCalledWith({
+        el,
+        blobPath: fileName,
+        blobGlobalId: fileGlobalId,
+        blobContent: value,
+        extensions: null,
+      });
+    });
+
+    it('reacts to the changes in fileName', () => {
+      const newFileName = 'ipsum.txt';
+
+      wrapper.setProps({
+        fileName: newFileName,
+      });
+
+      return nextTick().then(() => {
+        expect(updateModelLanguage).toHaveBeenCalledWith(newFileName);
+      });
+    });
+
+    it('registers callback with editor onChangeContent', () => {
+      expect(onDidChangeModelContent).toHaveBeenCalledWith(expect.any(Function));
+    });
+
+    it('emits input event when the blob content is changed', () => {
+      expect(wrapper.emitted().input).toBeUndefined();
+
+      triggerChangeContent(value);
+
+      expect(wrapper.emitted().input).toEqual([[value]]);
+    });
+
+    it('emits editor-ready event when the Editor Lite is ready', async () => {
+      const el = wrapper.find({ ref: 'editor' }).element;
+      expect(wrapper.emitted()['editor-ready']).toBeUndefined();
+
+      await el.dispatchEvent(new Event('editor-ready'));
+
+      expect(wrapper.emitted()['editor-ready']).toBeDefined();
+    });
+  });
+});