Grapesjs Component Code Editor

The stock GrapesJS code view shows the whole document. This plugin scopes it: select a component and its own HTML and CSS open in the right-hand panel, editable, with changes applied back to that component alone.

Commands

• open-code — opens the editor in the side panel. Wire it to a panel button in your editor config.
• code-editor-object and code-editor-constructor — reach the CodeEditor instance or its constructor from your own code.

Layout options

openState and closedState set how the panel and canvas split — 35/65 when open and 15/85 when closed by default. preserveWidth stops the resizing entirely, and appendTo or panelId place the editor somewhere other than the default views container.

The selector problem it solves

Deleting a CSS rule in a code editor does not remove the selector from the GrapesJS Selector Manager, so the rule keeps affecting the component after saving. cleanCssBtn, on by default, adds a button that removes the selector from both places. It applies to valid CSS rules.

Recommended pairing

The author recommends using grapesjs-parser-postcss alongside this plugin: the default CSS parser is inconsistent and adds a lot of extra rules, which becomes visible as soon as you read your own CSS back.