• 소스 편집기 사용 시기
• 소스 편집기 사용 방법
• API
• 팁
• 확장 기능
  • 기존의 확장 기능 사용하기
  • 확장 기능 생성하기
  • 팁

소스 편집기

소스 편집기(Source Editor)는 GitLab에서의 편집 경험을 제공합니다. 이것은 Monaco 편집기 주변을 가볍게 감싸 필요한 도우미 및 추상화를 제공하고 확장 기능을 사용하여 Monaco를 확장합니다. 다중 GitLab 기능에서 사용되며 다음이 포함됩니다.

• 웹 IDE
• CI Linter
• 스니펫
• 웹 편집기
• 보안 정책

소스 편집기 사용 시기

사용자가 파일 내용을 편집해야 할 때에만 소스 편집기를 사용하세요. 소스 코드를 표시하는 것만으로 충분한 경우, BlobContent 구성 요소를 사용하는 것을 고려하세요.

작업 중인 페이지가 이미 소스 편집기를 로드하는 경우, 소스 편집기에 읽기 전용 내용을 표시하는 것도 여전히 유효한 옵션입니다.

소스 편집기 사용 방법

소스 편집기는 프레임워크와 무관하며 Rails 및 Vue를 포함한 모든 응용 프로그램에서 사용할 수 있습니다. 통합을 돕기 위해 전용 <source-editor> Vue 구성 요소가 있지만, 소스 편집기의 통합은 일반적으로 간단합니다.

1. 소스 편집기 가져오기:

   import SourceEditor from '~/editor/source_editor';
   

2. 보기 전역 편집기를 초기화:

   const editor = new SourceEditor({
     // 편집기 옵션.
     // 모든 허용된 옵션 목록은
     // https://microsoft.github.io/monaco-editor/docs.html에서 찾을 수 있습니다.
   });
   

3. 편집기의 인스턴스 만들기:

   editor.createInstance({
     // 소스 편집기 구성 옵션.
   })
   

소스 편집기의 인스턴스는 다음 구성 옵션을 허용합니다:

API

편집기는 동일한 공개 API를 사용하며 Monaco 편집기에서 제공하는 추가 기능을 인스턴스 레벨에서 추가로 제공합니다.

팁

1. 편집기 로딩 상태입니다.

   로딩 상태는 소스 편집기에 내장되어 있어 스피너 및 로더가 거의 필요하지 않습니다. 내장된 로딩 상태를 이용하려면, 편집기를 포함해야 할 HTML 요소에 data-editor-loading 속성을 설정하세요. 소스 편집기를 부트스트래핑할 때, 소스 편집기가 로더를 자동으로 표시합니다.

   

2. 파일 이름이 변경되면 구문 강조 업데이트합니다.

   // fileNameEl은 파일 이름을 포함하는 HTML 입력 요소입니다.
   fileNameEl.addEventListener('change', () => {
     this.editor.updateModelLanguage(fileNameEl.value);
   });
   

3. 편집기 콘텐츠 가져오기

   편집기의 모든 변경에 대해 청취기를 설정할 수 있지만, 이것은 빠르게 비용이 많이 들 수 있습니다. 대신, 필요할 때 편집기 콘텐츠를 가져옵니다. 예를 들어, 양식 제출 시:

   form.addEventListener('submit', () => {
     my_content_variable = this.editor.getValue();
   });
   

4. 성능

   소스 편집기 자체가 매우 가볍기는 하지만, 여전히 무게가 추가되는 Monaco 편집기에 의존합니다. 뷰의 로딩 성능에 영향을 줄 정도로 자바스크립트 번들의 크기가 크게 증가합니다. 편집기를 뷰에 추가할 때마다, 자바스크립트 번들의 크기가 상당히 증가하므로 뷰의 로딩 성능에 영향을 줄 수 있습니다. 편집기가 뷰에서 필요한지 확실하지 않은 경우 또는 편집기가 뷰의 부수적 요소인 경우에는 편집기를 필요한 시점에 가져오세요.

   소스 편집기를 필요한 시점에 가져오는 것은 다른 모듈을 가져오는 것과 같이 처리됩니다:

   someActionFunction() {
     import(/* webpackChunkName: 'SourceEditor' */ '~/editor/source_editor').
       then(({ default: SourceEditor }) => {
         const editor = new SourceEditor();
         ...
       });
     ...
   }
   

확장 기능

소스 편집기는 제품 전반에 걸쳐 사용할 수 있는 범용적이고 확장 가능한 편집 도구를 제공하며 특정 그룹에 의존하지 않습니다. 소스 편집기의 핵심은 Create::Editor FE Team 소유이지만, 어떤 그룹이든 소유 확장 기능입니다. 소스 편집기 확장 기능의 목표는 편집기의 핵심을 가볍고 안정적으로 유지하는 것입니다. 필요한 기능은 여기에 확장 기능으로 추가될 수 있습니다. 변경되거나 재정의되어도 소스 편집기를 걱정할 필요가 없습니다.

확장 기능에서 다른 모듈에 종속될 수 있습니다. 이 조직은 필요할 때만 종속성을 가져와서 관리하며, 이는 소스 편집기의 핵심 크기를 유지하는 데 도움이 됩니다.

구조적으로, 소스 편집기의 완전한 구현은 다음과 같이 나타낼 수 있습니다:

확장 기능은 JavaScript 객체를 내보내는 ES6 모듈입니다:

import { Position } from 'monaco-editor';

export default {
  navigateFileStart() {
    this.setPosition(new Position(1, 1));
  },
};

확장 기능의 함수에서 this는 현재 소스 편집기 인스턴스를 참조합니다. 이를 통해 특정한 경우의 setPosition() 메서드 등 인스턴스의 전체 API에 액세스할 수 있습니다.

기존의 확장 기능 사용하기

Source Editor의 인스턴스에 확장 기능을 추가하는 데는 다음 단계가 필요합니다:

import SourceEditor from '~/editor/source_editor';
import MyExtension from '~/my_extension';

const editor = new SourceEditor().createInstance({
  ...
});
editor.use(MyExtension);

확장 기능 생성하기

첫 번째 Source Editor 확장 기능을 만들어 봅시다. 확장 기능은 Source Editor 기능을 확장하는 데 사용되는 기본 Object를 내보내는 ES6 모듈입니다. 테스트를 위해 호출될 때 새로운 기능을 추가하는 확장 기능을 만들어 보겠습니다. 이 기능은 에디터의 내용을 alert로 출력하는 새로운 함수로 Source Editor를 확장합니다.

~/my_folder/my_fancy_extension.js:

export default {
  throwContentAtMe() {
    alert(this.getValue());
  },
};

위의 코드 예시에서 this는 인스턴스를 가리킵니다. 인스턴스를 참조함으로써 getValue()와 같은 기능을 포함하고 있는 완전한 Monaco editor API에 접근할 수 있습니다.

이제 확장 기능을 사용해 봅시다:

~/my_folder/component_bundle.js:

import SourceEditor from '~/editor/source_editor';
import MyFancyExtension from './my_fancy_extension';

const editor = new SourceEditor().createInstance({
  ...
});
editor.use(MyFancyExtension);
...
someButton.addEventListener('click', () => {
  editor.throwContentAtMe();
});

먼저 Source Editor와 새로운 확장 기능을 가져옵니다. 그런 다음, 에디터와 해당 인스턴스를 생성합니다. 기본적으로 Source Editor에는 throwContentAtMe 메서드가 없습니다. 그러나 editor.use(MyFancyExtension) 줄은 해당 메서드를 우리의 인스턴스로 가져옵니다. 이후에는 필요할 때마다 사용할 수 있습니다. 이 경우에는 가정적으로 버튼이 클릭될 때 호출합니다.

someButton이 클릭될 때 에디터의 내용이 포함된 경고가 표시됩니다.

팁

1. 성능

   Source Editor 자체와 마찬가지로 모든 확장 기능은 뷰의 로딩 성능에 영향을 미치지 않도록 필요할 때에만 로드할 수 있습니다:

   const EditorPromise = import(
     /* webpackChunkName: 'SourceEditor' */ '~/editor/source_editor'
   );
   const MarkdownExtensionPromise = import('~/editor/source_editor_markdown_ext');
   
   Promise.all([EditorPromise, MarkdownExtensionPromise])
     .then(([{ default: SourceEditor }, { default: MarkdownExtension }]) => {
       const editor = new SourceEditor().createInstance({
         ...
       });
       editor.use(MarkdownExtension);
     });
   

2. 여러 확장 기능 사용하기

   use 메서드에 확장 기능 배열을 전달하기만 하면 됩니다:

   editor.use([FileTemplateExtension, MyFancyExtension]);