Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vite-plugin-monaco-editor
Advanced tools
Readme
A plugin to simplify loading the Monaco Editor with vite.
node_modules/.monaco
directory, via the server.middlewares
proxy http server for the bundle worker.// make sure you have it installed monaco-editor.
yarn add vite-plugin-monaco-editor -D
// or
npm install --save-dev vite-plugin-monaco-editor
vite.config.ts
:import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
export default defineConfig({
plugins: [monacoEditorPlugin()],
});
index.ts
:import * as monaco from 'monaco-editor';
monaco.editor.create(document.getElementById('container'), {
value: 'console.log("Hello, world")',
language: 'javascript',
});
The import * as monaco from 'monaco-editor'
is import all features and languages of the Monaco Editor. Assume you only need part of the features and languages:
customMonaco.ts
import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
export { monaco };
The Complete list of imports: customMonaco.ts
index.ts
import { monaco } from './customMonaco.ts';
monaco.editor.create(document.getElementById('container'), {
value: 'console.log("Hello, world")',
language: 'javascript',
});
languageWorkers
(string[]
) - include only a subset of the languageWorkers supported.
customWorkers
(IWorkerDefinition[]
) - include your custom worker.
[{label: "graphql", entry: "monaco-graphql/esm/graphql.worker"}]
, The entry
is relative path in the node_modules Or you can set absolute path.publicPath
(string
) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. Or you can set CDN e.g https://unpkg.com/vite-plugin-monaco-editor@1.0.5/cdn
monacoeditorwork
globalAPI
(boolean
) - specifies whether the editor API should be exposed through a global monaco
object or not. This option is applicable to 0.22.0
and newer version of monaco-editor
. Since 0.22.0
, the ESM version of the monaco editor does no longer define a global monaco
object unless global.MonacoEnvironment = { globalAPI: true }
is set (change log).
false
.customDistPath
((root: string, buildOutDir: string, base: string) => string
) - Custom callback returns the worker path
forceBuildCDN
(boolean
) - If you use CDN, the build is skipped by default. Set to true if you want to generate woker
false
Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker:
Language | Instantiator |
---|---|
javascript | typescript |
handlebars | html |
scss, less | css |
FAQs
A vite plugin for the Monaco Editor
The npm package vite-plugin-monaco-editor receives a total of 46,217 weekly downloads. As such, vite-plugin-monaco-editor popularity was classified as popular.
We found that vite-plugin-monaco-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.