IMPORTANT NOTE: This project is specifically for building monaco for node-red and will likely not be of much use to any other projects
This project makes an ESM bundle of monaco-editor with 50 themes and localization support. It was built specifically for use in node-red.
- Huge credit to primefaces-monaco. Without their work, I would never have gotten i18n working.
- All credits to https://www.npmjs.com/package/monaco-themes for the themes
- A bug / issue I had to handle is: when changing mode, html worker would attempt to get links from document, but occasionally
document
would benull
and an exception would be thrown. This has been handled by addingif(!document) return []
at the top offunction findDocumentLinks(...)
in filehtmlLinks.js
git clone https://github.com/node-red/nr-monaco-build
cd nr-monaco-build
Prepare the build:
- Check & update
package.json
for latest version ofmonaco-editor
(check here) and other dev dependencies - Update the
package.json
version
field to match the version ofmonaco-editor
you are using.
Check + update node-red (function node/server-side) type defs
./node-red-types/func.d.ts
./node-red-types/util.d.ts
Install dependencies, clean and build
npm install --include=dev
npm run clean
npm run build
This will bundle the monaco editor with localization support and themes:
cd output/monaco/dist/
Check editor works in browser...
npm run demo
Now go to
http://localhost:8080/demo.html
and you should see monaco editor with the monokai theme and French menus (try opening the context menu with a right click)
If your Node-RED source is relative to this repo, you can run the following helper script:
npm run copy
When your Node-RED source is not relative to this repo, you can copy the files manually:
# Set the path to your node-red source e.g.
export nr_src=~/repos/github/node-red-org/node-red
# clean up
rm -rf $nr_src/packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/*
rm -rf $nr_src/packages/node_modules/@node-red/editor-client/src/types/node/*
rm -rf $nr_src/packages/node_modules/@node-red/editor-client/src/types/node-red/*
# copy
cp -r output/monaco/dist \
$nr_src/packages/node_modules/@node-red/editor-client/src/vendor/monaco/
cp -r output/types \
$nr_src/packages/node_modules/@node-red/editor-client/src/
npm run build-dev
This will run npm run clean
, npm run build
, npm run copy
in sequence
npm run all
This will run npm run clean
, npm run build-dev
, npm run copy
in sequence
npm run all-dev