Camunda Modeler Script Highlight

Camunda Modeler plugin that replaces the default <textarea> in the properties panel with a full-featured code editor powered by CodeMirror 6.

Works with Script Tasks, Execution Listeners, Task Listeners, and any other inline script field in the Camunda 7 properties panel.

Features

Code Editing

• Syntax highlighting, line numbers, active line highlight
• Code folding, bracket matching, rainbow brackets
• Search & replace (Ctrl+F / Ctrl+H)
• Autocomplete with Camunda API completions (execution.*, task.*)
• Undo/redo history, auto-indent, indent with Tab
• Resizable editor (drag handle, 100-800px, remembered across sessions)
• Ctrl+S passthrough to Camunda Modeler

Multi-Language Support

• Groovy - keywords (def, as, trait, it), collection methods (collect, findAll, each, inject, groupBy)
• JavaScript - Nashorn/GraalJS Java interop (Java.type, java.util.HashMap, java.util.UUID)
• Auto-detection from the scriptFormat field in the properties panel

Themes

• 5 built-in themes: Light, One Dark (default), Dracula, Monokai, GitHub Dark
• Theme Creator with live preview and color pickers
• Import/export custom themes as JSON
• Adaptive toolbar that adjusts to light/dark themes

Toolbar

• Theme selector, language badge, Format/Indent, Copy, Fold All, Unfold All, Word Wrap toggle, Theme Creator

Installation

1. Download the latest release or clone and build from source
2. Copy the plugin folder (keeping the directory structure) to your Camunda Modeler plugins directory.

The plugin folder must contain:

camunda-modeler-script-highlight/
  index.js
  dist/
    client.js
  style/
    style.css

3. Restart Camunda Modeler
4. Verify: open DevTools (F12) and look for [CamundaModelerScriptHighlight] Plugin loaded! in the console

Building from Source

git clone https://github.com/DKorb/camunda-modeler-script-highlight.git
cd camunda-modeler-script-highlight
npm install
npm run build

Command	Description
npm run build	Production build (minified)
npm run dev	Development build (watch mode, source maps)

Custom Themes

Theme Creator

Click Theme Creator in the toolbar to open the visual editor. Pick colors for the editor background, gutter, syntax tokens, and see changes in real-time. Save your theme or export it as JSON.

JSON Format

{
  "label": "My Theme",
  "editor": {
    "background": "#1a1b26",
    "foreground": "#a9b1d6",
    "gutterBackground": "#1a1b26",
    "gutterForeground": "#3b4261",
    "activeLineBackground": "#1e2030",
    "cursorColor": "#c0caf5",
    "selectionBackground": "#283457"
  },
  "highlight": [
    {"tag": "keyword", "color": "#9d7cd8"},
    {"tag": "string", "color": "#9ece6a"},
    {"tag": "number", "color": "#ff9e64"},
    {"tag": "comment", "color": "#565f89"},
    {"tag": "typeName", "color": "#2ac3de"},
    {"tag": "variableName", "color": "#c0caf5"},
    {"tag": "function", "color": "#7aa2f7"},
    {"tag": "operator", "color": "#89ddff"},
    {"tag": "bool", "color": "#ff9e64"},
    {"tag": "null", "color": "#ff9e64"},
    {"tag": "definition", "color": "#7aa2f7"},
    {"tag": "propertyName", "color": "#73daca"}
  ]
}

Tech Stack

• CodeMirror 6 - editor framework
• Lezer - parser system
• Webpack 5 - bundler
• camunda-modeler-plugin-helpers - plugin registration
• Vanilla JS - no frameworks

Keyboard Shortcuts

Shortcut	Action
Ctrl+S	Save (passed to Camunda Modeler)
Ctrl+F	Search
Ctrl+H	Search & Replace
Ctrl+Z	Undo
Ctrl+Shift+Z	Redo
Tab	Indent
Shift+Tab	Dedent
Ctrl+/	Toggle comment
Ctrl+D	Select next occurrence
Alt+Up/Down	Move line up/down

Contributing

See CONTRIBUTING.md for development setup, code guidelines, and PR process.

License

MIT