GrapesJS Custom Code with Monaco Editor

This plugin adds the possibility to embed custom code using the powerful Monaco Editor (the same editor that powers VS Code)

Features

• Zero External Dependencies - Monaco Editor loads automatically from CDN
• Instant Setup - Just add the plugin to GrapesJS and you're ready to go
• No Manual Configuration - Monaco Editor initializes seamlessly
• Single Package - Everything you need in one plugin
• Rich Syntax Highlighting - Support for HTML, CSS, JavaScript, TypeScript, and many more languages
• IntelliSense - Intelligent code completion, parameter info, quick info, and member lists
• Themes - Multiple built-in themes (VS Dark, VS Light, High Contrast)
• Advanced Editing - Multi-cursor support, find and replace, code folding, and more
• Performance - Optimized for large files and better rendering performance
• Accessibility - Better screen reader support and keyboard navigation

Requires GrapesJS v0.14.25 or higher

Quick Start

// That's it! Monaco Editor loads automatically
grapesjs.init({
  container: '#gjs',
  plugins: ['grapesjs-custom-code-monaco-editor']
});

Summary

• Plugin name: grapesjs-custom-code-monaco-editor
• Components
  • custom-code
• Blocks
  • custom-code
• Commands
  • custom-code:open-modal

Options

|Option|Description|Default| |-|-|- | blockCustomCode | Object to extend the default custom code block, eg. { label: 'Custom Code', category: 'Extra', ... }. Pass a falsy value to avoid adding the block | {} | | propsCustomCode | Object to extend the default custom code properties, eg. { name: 'Custom Code', components: '<span>Initial content</span>' ... } | {} | | toolbarBtnCustomCode | Object to extend the default component's toolbar button for the code, eg. { label: '</>', attributes: { title: 'Open custom code' } }. Pass a falsy value to avoid adding the button | {} | | placeholderScript | Content to show when the custom code contains <script> | Check the source | | modalTitle | Title for the modal | Insert your code | | codeViewOptions | Legacy: Additional options for backward compatibility | {} | | monacoOptions | New: Monaco Editor specific options (see below) | { theme: 'vs-dark', language: 'html', ... } | | monacoLoaderOptions | New: Monaco Editor loading configuration | { version: '0.54.0' } | | buttonLabel | Label for the default save button | Save | | commandCustomCode | Object to extend the default custom code command, eg. { getPreContent: () => '<div>Paste here</div>' } Check the source to see all available methods | {} |

Monaco Editor Options

The monacoOptions object accepts all Monaco Editor configuration options:

|Option|Description|Default| |-|-|- | theme | Editor theme: 'vs', 'vs-dark', 'hc-black' | 'vs-dark' | | language | Language mode: 'html', 'css', 'javascript', 'typescript', etc. | 'html' | | readOnly | Whether the editor is read-only | false | | minimap.enabled | Show/hide minimap | false | | lineNumbers | Show line numbers: 'on', 'off', 'relative', 'interval' | 'on' | | wordWrap | Word wrap: 'on', 'off', 'wordWrapColumn', 'bounded' | 'on' | | fontSize | Font size in pixels | 14 | | tabSize | Tab size in spaces | 2 | | automaticLayout | Automatically resize editor | true | | scrollBeyondLastLine | Allow scrolling beyond last line | false |

For complete Monaco Editor options, see the Monaco Editor API documentation.

Monaco Loader Options

The monacoLoaderOptions object controls how Monaco Editor is loaded:

|Option|Description|Default| |-|-|- | version | Monaco Editor version to load from CDN | '0.54.0' | | baseUrl | Custom CDN base URL for Monaco Editor | https://unpkg.com/monaco-editor@{version}/min/vs |

Example:

{
  monacoLoaderOptions: {
    version: '0.50.0',  // Use specific version
    baseUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'  // Custom CDN
  }
}

Download

• CDN
  • https://unpkg.com/grapesjs-custom-code-monaco-editor
• NPM
  • npm i grapesjs-custom-code-monaco-editor
• GIT
  • git clone https://github.com/GrapesJS/components-custom-code.git

Usage

CDN Usage (with Monaco Editor)

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
<script src="path/to/grapesjs-custom-code-monaco-editor.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  // Configure Monaco Editor
  require.config({ paths: { 'vs': 'https://unpkg.com/[email protected]/min/vs' }});
  
  require(['vs/editor/editor.main'], function() {
    var editor = grapesjs.init({
        container : '#gjs',
        ...
        plugins: ['grapesjs-custom-code-monaco-editor'],
        pluginsOpts: {
          'grapesjs-custom-code-monaco-editor': {
            modalTitle: 'Edit Code with Monaco Editor',
            monacoOptions: {
              theme: 'vs-dark',
              language: 'html',
              readOnly: false,
              minimap: { enabled: true },
              lineNumbers: 'on',
              wordWrap: 'on',
              fontSize: 14,
              tabSize: 2
            }
          }
        }
    });
  });
</script>

ES6/Module Usage

import GrapesJS from 'grapejs';
import customCodePlugin from 'grapesjs-custom-code-monaco-editor';
import * as monaco from 'monaco-editor';

// Configure Monaco Editor (if using webpack/bundler)
self.MonacoEnvironment = {
  getWorkerUrl: function (moduleId, label) {
    if (label === 'json') {
      return './json.worker.js';
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return './css.worker.js';
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return './html.worker.js';
    }
    if (label === 'typescript' || label === 'javascript') {
      return './ts.worker.js';
    }
    return './editor.worker.js';
  }
};

GrapesJS.init({
 container : '#gjs',
 ...
 plugins: [
   customCodePlugin
 ],
 pluginsOpts: {
   [customCodePlugin]: {
     modalTitle: 'Edit Code with Monaco Editor',
     monacoOptions: {
       theme: 'vs-dark',
       language: 'html',
       readOnly: false,
       minimap: { enabled: true },
       lineNumbers: 'on',
       wordWrap: 'on',
       fontSize: 14,
       tabSize: 2,
       automaticLayout: true,
       scrollBeyondLastLine: false
     }
   }
 }
});

Development

Clone the repository

$ git clone https://github.com/GrapesJS/components-custom-code.git
$ cd grapesjs-custom-code-monaco-editor

Install dependencies

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause