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/doc
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2021-02-23 12:10:45 +0300
committerGitLab Bot <gitlab-bot@gitlab.com>2021-02-23 12:10:45 +0300
commitcd40f83527ac4ed4751b4b7849f0416996589d18 (patch)
tree201a36d826fc98f14ee1a7a1dc806b32f51cac00 /doc
parentd5f3372f10b9fefc8cf831515152eee7ae908f69 (diff)
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'doc')
-rw-r--r--doc/api/graphql/reference/index.md149
-rw-r--r--doc/development/fe_guide/editor_lite.md220
2 files changed, 275 insertions, 94 deletions
diff --git a/doc/api/graphql/reference/index.md b/doc/api/graphql/reference/index.md
index 1bfd50e7246..385a2ea0e29 100644
--- a/doc/api/graphql/reference/index.md
+++ b/doc/api/graphql/reference/index.md
@@ -62,6 +62,17 @@ Get information about current user.
Fields related to design management.
+### DevopsAdoptionSegments
+
+Get configured DevOps adoption segments on the instance.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `last` | Returns the last _n_ elements from the list. | Int |
+
### Echo
Text to echo back.
@@ -90,6 +101,20 @@ Find a group.
Fields related to Instance Security Dashboard.
+### InstanceStatisticsMeasurements
+
+Get statistics on the instance. Deprecated in 13.10: This field was renamed. Use the `usageTrendsMeasurements` field instead.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `identifier` | The type of measurement/statistics to retrieve. | MeasurementIdentifier! |
+| `last` | Returns the last _n_ elements from the list. | Int |
+| `recordedAfter` | Measurement recorded after this date. | Time |
+| `recordedBefore` | Measurement recorded before this date. | Time |
+
### Issue
Find an Issue.
@@ -142,6 +167,33 @@ Find a project.
| ----- | ---- | ----------- |
| `fullPath` | The full path of the project, group or namespace, e.g., `gitlab-org/gitlab-foss`. | ID! |
+### Projects
+
+Find projects visible to the current user.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `ids` | Filter projects by IDs. | ID! => Array |
+| `last` | Returns the last _n_ elements from the list. | Int |
+| `membership` | Limit projects that the current user is a member of. | Boolean |
+| `search` | Search query for project name, path, or description. | String |
+| `searchNamespaces` | Include namespace in project search. | Boolean |
+| `sort` | Sort order of results. | String |
+
+### RunnerPlatforms
+
+Supported runner platforms.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `last` | Returns the last _n_ elements from the list. | Int |
+
### RunnerSetup
Get runner setup instructions.
@@ -153,6 +205,37 @@ Get runner setup instructions.
| `platform` | Platform to generate the instructions for. | String! |
| `projectId` | Project to register the runner for. | ProjectID |
+### Snippets
+
+Find Snippets visible to the current user.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `authorId` | The ID of an author. | UserID |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `explore` | Explore personal snippets. | Boolean |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `ids` | Array of global snippet IDs. For example, `gid://gitlab/ProjectSnippet/1`. | SnippetID! => Array |
+| `last` | Returns the last _n_ elements from the list. | Int |
+| `projectId` | The ID of a project. | ProjectID |
+| `type` | The type of snippet. | TypeEnum |
+| `visibility` | The visibility of the snippet. | VisibilityScopesEnum |
+
+### UsageTrendsMeasurements
+
+Get statistics on the instance.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `identifier` | The type of measurement/statistics to retrieve. | MeasurementIdentifier! |
+| `last` | Returns the last _n_ elements from the list. | Int |
+| `recordedAfter` | Measurement recorded after this date. | Time |
+| `recordedBefore` | Measurement recorded before this date. | Time |
+
### User
Find a user.
@@ -162,6 +245,67 @@ Find a user.
| `id` | ID of the User. | UserID |
| `username` | Username of the User. | String |
+### Users
+
+Find users.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `admins` | Return only admin users. | Boolean |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `ids` | List of user Global IDs. | ID! => Array |
+| `last` | Returns the last _n_ elements from the list. | Int |
+| `search` | Query to search users by name, username, or primary email. | String |
+| `sort` | Sort users by this criteria. | Sort |
+| `usernames` | List of usernames. | String! => Array |
+
+### Vulnerabilities
+
+Vulnerabilities reported on projects on the current user's instance security dashboard.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `hasIssues` | Returns only the vulnerabilities which have linked issues. | Boolean |
+| `hasResolution` | Returns only the vulnerabilities which have been resolved on default branch. | Boolean |
+| `last` | Returns the last _n_ elements from the list. | Int |
+| `projectId` | Filter vulnerabilities by project. | ID! => Array |
+| `reportType` | Filter vulnerabilities by report type. | VulnerabilityReportType! => Array |
+| `scanner` | Filter vulnerabilities by VulnerabilityScanner.externalId. | String! => Array |
+| `severity` | Filter vulnerabilities by severity. | VulnerabilitySeverity! => Array |
+| `sort` | List vulnerabilities by sort order. | VulnerabilitySort |
+| `state` | Filter vulnerabilities by state. | VulnerabilityState! => Array |
+
+### VulnerabilitiesCountByDay
+
+Number of vulnerabilities per day for the projects on the current user's instance security dashboard.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `endDate` | Last day for which to fetch vulnerability history. | ISO8601Date! |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `last` | Returns the last _n_ elements from the list. | Int |
+| `startDate` | First day for which to fetch vulnerability history. | ISO8601Date! |
+
+### VulnerabilitiesCountByDayAndSeverity
+
+Number of vulnerabilities per severity level, per day, for the projects on the current user's instance security dashboard. Deprecated in 13.3: Use `vulnerabilitiesCountByDay`.
+
+| Name | Description | Type |
+| ----- | ---- | ----------- |
+| `after` | Returns the elements in the list that come after the specified cursor. | String |
+| `before` | Returns the elements in the list that come before the specified cursor. | String |
+| `endDate` | Last day for which to fetch vulnerability history. | ISO8601Date! |
+| `first` | Returns the first _n_ elements from the list. | Int |
+| `last` | Returns the last _n_ elements from the list. | Int |
+| `startDate` | First day for which to fetch vulnerability history. | ISO8601Date! |
+
### Vulnerability
Find a vulnerability.
@@ -2474,6 +2618,7 @@ Autogenerated return type of MarkAsSpamSnippet.
| `diffStatsSummary` | DiffStatsSummary | Summary of which files were changed in this merge request. |
| `discussionLocked` | Boolean! | Indicates if comments on the merge request are locked to members only. |
| `discussions` | DiscussionConnection! | All discussions on this noteable. |
+| `divergedFromTargetBranch` | Boolean! | Indicates if the source branch is behind the target branch. |
| `downvotes` | Int! | Number of downvotes for the merge request. |
| `forceRemoveSourceBranch` | Boolean | Indicates if the project settings will lead to source branch deletion after merge. |
| `hasCi` | Boolean! | Indicates if the merge request has CI. |
@@ -5629,8 +5774,8 @@ State of a test report.
| Value | Description |
| ----- | ----------- |
-| `done` | |
-| `pending` | |
+| `done` | The state of the todo is done. |
+| `pending` | The state of the todo is pending. |
### TodoTargetEnum
diff --git a/doc/development/fe_guide/editor_lite.md b/doc/development/fe_guide/editor_lite.md
index 8154f0ee5c6..5ad0c753ced 100644
--- a/doc/development/fe_guide/editor_lite.md
+++ b/doc/development/fe_guide/editor_lite.md
@@ -6,114 +6,139 @@ info: To determine the technical writer assigned to the Stage/Group associated w
# Editor Lite **(FREE)**
-## Background
+**Editor Lite** 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:
-**Editor Lite** is a technological product driving features like [Web Editor](../../user/project/repository/web_editor.md), [Snippets](../../user/snippets.md), and [CI Linter](../../ci/lint.md). Editor Lite is the driving technology for any single-file editing experience across the product.
-
-Editor Lite is a thin wrapper around [the Monaco editor](https://microsoft.github.io/monaco-editor/index.html) that provides the necessary helpers and abstractions and extends Monaco using extensions.
+- [Web IDE](../../user/project/web_ide/index.md)
+- [CI Linter](../../ci/lint.md)
+- [Snippets](../../user/snippets.md)
+- [Web Editor](../../user/project/repository/web_editor.md)
## How to use Editor Lite
-Editor Lite is framework-agnostic and can be used in any application, whether it's Rails or Vue. For the convenience of integration, we have the dedicated `<editor-lite>` Vue component, but in general, the integration of Editor Lite is pretty straightforward:
+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:
1. Import Editor Lite:
-```javascript
-import EditorLite from '~/editor/editor_lite';
-```
+ ```javascript
+ import EditorLite from '~/editor/editor_lite';
+ ```
1. Initialize global editor for the view:
-```javascript
-const editor = new EditorLite({
- // Editor Options.
- // The list of all accepted options can be found at
- // https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.editoroption.html
-});
-```
+ ```javascript
+ const editor = new EditorLite({
+ // Editor Options.
+ // The list of all accepted options can be found at
+ // https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.editoroption.html
+ });
+ ```
1. Create an editor's instance:
-```javascript
-editor.createInstance({
- // Editor Lite configuration options.
-})
-```
+ ```javascript
+ editor.createInstance({
+ // Editor Lite configuration options.
+ })
+ ```
An instance of Editor Lite accepts the following configuration options:
| Option | Required? | Description |
-| ---- | ---- | ---- |
-| `el` | `true` | `HTML Node`: element on which to render the editor |
-| `blobPath` | `false` | `String`: the name of a file to render in the editor. It is used to identify the correct syntax highlighter to use with that or another file type. Can accept wildcard as in `*.js` when the actual filename isn't known or doesn't play any role |
-| `blobContent` | `false` | `String`: the initial content to be rendered in the editor |
-| `extensions` | `false` | `Array`: extensions to use in this instance |
-| `blobGlobalId` | `false` | `String`: auto-generated property.<br>**Note:** this prop might go away in the future. Do not pass `blobGlobalId` unless you know what you're doing.|
-| [Editor Options](https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.editoroption.html) | `false` | `Object(s)`: any prop outside of the list above is treated as an Editor Option for this particular instance. This way, one can override global Editor Options on the instance level. |
+| -------------- | ------- | ---- |
+| `el` | `true` | `HTML Node`: The element on which to render the editor. |
+| `blobPath` | `false` | `String`: The name of a file to render in the editor, used to identify the correct syntax highlighter to use with that file, or another file type. Can accept wildcards like `*.js` when the actual filename isn't known or doesn't play any role. |
+| `blobContent` | `false` | `String`: The initial content to render in the editor. |
+| `extensions` | `false` | `Array`: Extensions to use in this instance. |
+| `blobGlobalId` | `false` | `String`: An auto-generated property.<br>**Note:** This property may go away in the future. Do not pass `blobGlobalId` unless you know what you're doing.|
+| Editor Options | `false` | `Object(s)`: Any property outside of the list above is treated as an Editor Option for this particular instance. Use this field to override global Editor Options on the instance level. A full [index of Editor Options](https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.editoroption.html) is available. |
## API
-The editor follows the same public API as [provided by Monaco editor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) with just a few additional functions on the instance level:
+The editor uses the same public API as
+[provided by Monaco editor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html)
+with additional functions on the instance level:
-| Function | Arguments | Description
-| ----- | ----- | ----- |
-| `updateModelLanguage` | `path`: String | Updates the instance's syntax highlighting to follow the extension of the passed `path`. Available only on _instance_ level|
-| `use` | Array of objects | Array of **extensions** to apply to the instance. Accepts only the array of _objects_, which means that the extensions' ES6 modules should be fetched and resolved in your views/components before being passed to `use`. This prop is available on _instance_ (applies extension to this particular instance) and _global editor_ (applies the same extension to all instances) levels. |
+| Function | Arguments | Description
+| --------------------- | ----- | ----- |
+| `updateModelLanguage` | `path`: String | Updates the instance's syntax highlighting to follow the extension of the passed `path`. Available only on the instance level.|
+| `use` | Array of objects | Array of extensions to apply to the instance. Accepts only the array of _objects_. You must fetch the extensions' ES6 modules must be fetched and resolved in your views or components before they are passed to `use`. This property is available on _instance_ (applies extension to this particular instance) and _global editor_ (applies the same extension to all instances) levels. |
| Monaco Editor options | See [documentation](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) | Default Monaco editor options |
## Tips
1. Editor's loading state.
-Editor Lite comes with the loading state built-in, 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 is supposed to contain the editor. Editor Lite shows the loader automatically while it's bootstrapping.
-![Editor Lite: loading state](img/editor_lite_loading.png)
+ The loading state is built in to Editor Lite, 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.
+
+ ![Editor Lite: loading state](img/editor_lite_loading.png)
1. Update syntax highlighting if the filename changes.
-```javascript
-// fileNameEl here is the HTML input element that contains the file name
-fileNameEl.addEventListener('change', () => {
- this.editor.updateModelLanguage(fileNameEl.value);
-});
-```
+ ```javascript
+ // fileNameEl here is the HTML input element that contains the file name
+ fileNameEl.addEventListener('change', () => {
+ this.editor.updateModelLanguage(fileNameEl.value);
+ });
+ ```
1. Get the editor's content.
-We might set up listeners on the editor for every change but it rapidly can become an expensive operation. Instead , we can get editor's content when it's needed. For example on a form's submission:
+ We may set up listeners on the editor for every change, but it rapidly can become
+ an expensive operation. Instead, get the editor's content when it's needed.
+ For example, on a form's submission:
-```javascript
-form.addEventListener('submit', () => {
- my_content_variable = this.editor.getValue();
-});
-```
+ ```javascript
+ form.addEventListener('submit', () => {
+ my_content_variable = this.editor.getValue();
+ });
+ ```
1. Performance
-Even though Editor Lite itself is extremely slim, it still depends on Monaco editor. Monaco is not an easily tree-shakeable module. Hence, every time you add Editor Lite to a view, the JavaScript bundle's size significantly increases, affecting your view's loading performance. It is recommended to import the editor on demand on those views where it is not 100% certain that the editor is needed. Or if the editor is a secondary element of the view. Loading Editor Lite on demand is no different from loading any other module:
+ 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
+ size significantly increases, affecting your view's loading performance. We recommend
+ you import the editor on demand if either:
-```javascript
-someActionFunction() {
- import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite').
- then(({ default: EditorLite }) => {
- const editor = new EditorLite();
- ...
- });
- ...
-}
-```
+ - 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:
+
+ ```javascript
+ someActionFunction() {
+ import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite').
+ then(({ default: EditorLite }) => {
+ const editor = new EditorLite();
+ ...
+ });
+ ...
+ }
+ ```
## Extensions
-Editor Lite has been built to provide a universal, extensible editing tool to the whole product,
-which would not depend on any particular group. Even though the Editor Lite's core is owned by
+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
[Create::Editor FE Team](https://about.gitlab.com/handbook/engineering/development/dev/create-editor/),
-the main functional elements — extensions — can be owned by any group. Editor Lite extensions' main idea
-is that the core of the editor remains very slim and stable. At the same time, whatever new functionality
-is needed can be added as an extension to this core, without touching the core itself. Any group is allowed
-to build and own new editing functionality without being afraid of it being broken or overridden with
-the Editor Lite changes.
+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
+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
+breaking or overriding them.
-Structurally, the complete implementation of Editor Lite could be presented as the following diagram:
+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.
+
+Structurally, the complete implementation of Editor Lite can be presented as this diagram:
```mermaid
graph TD;
@@ -125,7 +150,7 @@ graph TD;
A[Editor Lite]---Z[Monaco]
```
-Technically, an extension is just an ES6 module that exports a JavaScript object:
+An extension is an ES6 module that exports a JavaScript object:
```javascript
import { Position } from 'monaco-editor';
@@ -138,10 +163,9 @@ export default {
```
-Important things to note here:
-
-- We can depend on other modules in our extensions. This organization helps keep the size of Editor Lite's core at bay by importing dependencies only when needed.
-- `this` in extension's functions refers to the current Editor Lite instance. Using `this`, you get access to the complete instance's API, such as the `setPosition()` method in this particular case.
+In the extension's functions, `this` refers to the current Editor Lite 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
@@ -159,7 +183,11 @@ editor.use(MyExtension);
### Creating an extension
-Let's create our first Editor Lite extension. Extensions are ES6 modules exporting a basic `Object` that is used to extend Editor Lite's functionality. As a test, let's create an extension that extends Editor Lite with a new function that, when called, outputs editor's content in `alert`.
+Let's create our first Editor Lite 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,
+outputs the editor's content in `alert`.
`~/my_folder/my_fancy_extension.js:`
@@ -171,7 +199,10 @@ export default {
};
```
-And that's it with our extension! Note that we're using `this` as a reference to the instance. And through it, we get access to the complete underlying [Monaco editor API](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) like `getValue()` in this case.
+In the code example, `this` refers to the instance. By referring to the instance,
+we can access the complete underlying
+[Monaco editor API](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html),
+which includes functions like `getValue()`.
Now let's use our extension:
@@ -191,7 +222,11 @@ 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. 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.
+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.
+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.
@@ -201,27 +236,28 @@ This script would result in an alert containing the editor's content when `someB
1. Performance
-Just like Editor Lite itself, any extension can be loaded on demand to not harm loading performance of the views:
+ Just like Editor Lite 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'
-);
-const MarkdownExtensionPromise = import('~/editor/editor_markdown_ext');
-
-Promise.all([EditorPromise, MarkdownExtensionPromise])
- .then(([{ default: EditorLite }, { default: MarkdownExtension }]) => {
- const editor = new EditorLite().createInstance({
- ...
- });
- editor.use(MarkdownExtension);
- });
-```
+ ```javascript
+ const EditorPromise = import(
+ /* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite'
+ );
+ const MarkdownExtensionPromise = import('~/editor/editor_markdown_ext');
+
+ Promise.all([EditorPromise, MarkdownExtensionPromise])
+ .then(([{ default: EditorLite }, { default: MarkdownExtension }]) => {
+ const editor = new EditorLite().createInstance({
+ ...
+ });
+ editor.use(MarkdownExtension);
+ });
+ ```
1. Using multiple extensions
-Just pass the array of extensions to your `use` method:
+ Just pass the array of extensions to your `use` method:
-```javascript
-editor.use([FileTemplateExtension, MyFancyExtension]);
-```
+ ```javascript
+ editor.use([FileTemplateExtension, MyFancyExtension]);
+ ```