Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README #116

Merged
merged 1 commit into from
May 16, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 45 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
# @codingame/monaco-editor-wrapper · [![monthly downloads](https://img.shields.io/npm/dm/@codingame/monaco-editor-wrapper)](https://www.npmjs.com/package/@codingame/monaco-editor-wrapper) [![npm version](https://img.shields.io/npm/v/@codingame/monaco-editor-wrapper.svg?style=flat)](https://www.npmjs.com/package/@codingame/monaco-editor-wrapper) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/codingame/monaco-editor-wrapper/pulls)

## Synopsis
Monaco editor wrapper that adds some features and improvements to it:
- It uses VS Code extensions for all languages, including:
- TextMate grammars
- Language configurations
- Language snippets
- Language default editor configuration
- Language resources loading are lazy using dynamic imports (compatible with webpack)
- It requires using VS Code themes instead of Monaco themes and includes default vscode themes
- Keybindings and user configuration like in VS Code
- Vim and Emacs modes
- It configures the workers
- It adds some features:
- Smart tabs in Cobol
- A way to register a text model content provider and a editor open handler
- It allows the opening of an overlay editor when navigating to an external file
- It adds some language aliases
Monaco editor wrapper uses and configures [monaco-vscode-api](https://www.npmjs.com/package/@codingame/monaco-vscode-api) for you

It also includes some tools allowing to add some missing features to monaco-editor:
- placeholder
- `preventAlwaysConsumeTouchEvent`, mobile feature corresponding to the `alwaysConsumeMouseWheel` monaco-editor option
- `collapseCodeSections` allows to create and collapse a code section between 2 tokens
- `registerTextDecorationProvider` allows to compute decorations on all existing editors
- `hideCodeWithoutDecoration` allows to hide code parts that have a specific decoration
- `lockCodeWithoutDecoration` allows to make read-only code parts that have a specific decoration
- `updateEditorKeybindingsMode` allows to apply vim or emacs keybindings

### Installation

Expand All @@ -28,18 +22,46 @@ npm install @codingame/monaco-editor-wrapper

#### Simple usage

The monaco-editor api should be used except for the editor creation.
Instead of using `monaco.editor.create`, you should use the `createEditor` exposed by this library.
You need to call the exposed `initialize` function, and wait for the returned promise.

You will then be able to interact with the monaco-editor api (by importing `monaco-editor`) OR the VSCode api (by importing `vscode`)

#### Model creation

Instead of using `monaco.editor.createModel`, it is recommended to use `monaco.editor.createModelReference` to create models.

It makes it possible for the VSCode service to reference that file by it's reference without breaking (for instance when following file links in source code using LSP).

#### Optional features

By default, only a minimal set of features is registered (vscode extensions, editor/model services, languages, textmate, dialogs, configuration/keybindings, snippets, accessibility...)

There are some optional features that can be enabled by importing a specific export:
- `@codingame/monaco-editor-wrapper/features/extensionHostWorker` enables the worker extension host which allows to run VSCode extensions
- `@codingame/monaco-editor-wrapper/features/notifications` enables the VSCode notifications instead of logging into the console
- `@codingame/monaco-editor-wrapper/features/workbench` allows to use the full VSCode workbench

Those feature can be used in the workbench feature is enabled:
- `@codingame/monaco-editor-wrapper/features/viewPanels` enables a few panels (timeline, outline, output, markers, explorer)
- `@codingame/monaco-editor-wrapper/features/search` enables the search panel
- `@codingame/monaco-editor-wrapper/features/extensionGallery` enables the extension gallery panel and the possibility to install extensions from the marketplace
- `@codingame/monaco-editor-wrapper/features/terminal` enables the terminal panel
- `@codingame/monaco-editor-wrapper/features/testing` enables the testing panels

### Embed language IntelliSense

By default, monaco-editor contains worker to achieve IntelliSense in CSS, SCSS, JavaScript, TypeScript, JSON and HTML.

To enable them, import the following files:
- JSON: `import '@codingame/monaco-editor-wrapper/features/jsonContribution'`
- JavaScript/TypeScript: `import '@codingame/monaco-editor-wrapper/features/typescriptContribution'`
- CSS/SCSS: `import '@codingame/monaco-editor-wrapper/features/cssContribution'`
- HTML: `import '@codingame/monaco-editor-wrapper/features/htmlContribution'`
It's not possible to use them with this lib.
However they can be replaced by the corresponding VSCode extension.

To enable them, install and import for following packages:
- JSON: `import '@codingame/monaco-vscode-json-language-features-default-extension'`
- JavaScript/TypeScript: `import '@codingame/monaco-vscode-typescript-language-features-default-extension'`
- CSS/SCSS: `import '@codingame/monaco-vscode-css-language-features-default-extension'`
- HTML: `import '@codingame/monaco-vscode-html-language-features-default-extension'`

You also need to import `@codingame/monaco-editor-wrapper/features/extensionHostWorker` to allows the VSCode extensions to run in a webworker.

#### Additional apis

Expand Down
Loading