Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

monaco-editor-comp

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

monaco-editor-comp

Lit Component for Monaco-Editor and Monaco Languageclient Wrapper

latest
Source
npmnpm
Version
1.6.0
Version published
Weekly downloads
8
100%
Maintainers
1
Weekly downloads
 
Created
Source

Lit Component for Monaco Editor and Monaco Languageclient

This packages provides a wrapped monaco-editor. The monaco-languageclient can be activated to connect to a configurable languages server.

The component can be fully configured with embedded JavaScript. It can be configured as regular or diff editor.

Web Component properties / configuration options

  • code: Code or text that is shown in the editor (default: '');
  • languageId: Specify the editor language (default: javascript)
  • theme: Theme of the editor that is used (default: vs-light)
  • enableInlineConfig: Enable the inline editor configuration by specifying function getMonacoEditorOptions in inner script tag. You can directly pass monaco-editor options. See examples below. Attach the id directly to the name if you use more than one editor (e.g. getMonacoEditorOptions42).
  • useDiffEditor: Use the diff editor instead of the regular editor by specifying function getMonacoDiffEditorOptions. It can only be used if enableInlineConfig is passed. See examples below. Attach the id directly to the name if you use more than one editor (e.g. getMonacoDiffEditorOptions42).
  • modifiedCode: Only Diff Editor: Specify the modified language (default: javascript)
  • modifiedLanguageId: Only Diff Editor: Code or text that is shown in the modified editor. (default: '')
  • useLanguageClient: Enable monaco languageclient. You have to configure the following WebDocket configuration options (or use getLanguageClientOptions if enableInlineConfig is set):
    • useWebSocket: Use the web socket connection (default: true), if false implementation tries to use a web worker instead (need to set workerURL)
    • Options for web socket:
      • wsSecured: Use secure connection (default: false)
      • wsHost: Specify host (default: localhost)
      • wsPort: Specify port (default: 8080)
      • wsPath: Specify path (default: '')
    • Options for web worker:
      • workerURL: Specify a url to a web worker that is used for running a language server in the browser (default: '')
      • useModuleWorker: Tells if worker is a module (true) or a worker with classical syntax (false) (default: false)
      • workerName: The name to be used for the web worker (default: '')

Help / Hints

Proper styling of at least the Diff Editor requires that the codicon font is loaded outside the web component. Due to limitations of the Shadow DOM this can unfortunately not be transparently handled by the web component and requires user code adjustments shown here and monaco-editor sample).

Getting Started

If you have node.js LTS available, then from the root of the project run:

npm i
npm run build

Afterwards launch the Vite.js development mode:

npm run dev

You find examples (manual human testing) in the root of the repository index.html. They can be used once Vite is running.

Inspiration

This project was inspired by:

Keywords

monaco-editor

FAQs

Package last updated on 21 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts