7.0: Code Editing


There are a few instances where you have to edit code in the browser:

  • Editing the source of a page
  • Editing the source of a region
  • Editing templates
  • Editing blocks (formerly snippets)

Surreal has always had a decent code editor with syntax highlighting, but I thought the overall experience could be improved. Meet the new Code Editor, which you’ll find in various places in 7.0.

I created this component using CodeMirror. Key features include:

  • A beautifully designed theme inspired by Atom’s One Dark theme
  • Bracket matching (highlights matching brackets and parenthesis)
  • Tag matching (highlights matching HTML tags)
  • Editable classes (highlights cms-boundary, cms-editable, cms-repeatable classes)
  • Drag and drop (to insert your HTML file into the editor)\
  • Multiple cursors (because it’s so handy)

The editor supports a fixed height mode and an auto-height mode (i.e. expands as you add more lines). I like the appearance of a fixed height control better, but it doesn’t usually provide enough room for editing so I’m using auto-height for now.

I’m thinking of adding a full screen option as an alternative, so the control will be a fixed height but you can make it full screen for more serious editing. I’ll post an update later on about this!


I added the full screen option and it works great. This feels much better than letting the code scroll way down the page. The code editors have a fixed height when displayed in the form and can be full-screened by clicking the expand button:

And full screen mode looks like this:

Toggling full screen mode is instant (no cheezy animations to get in your way), and you can click the button or press escape to exit. :+1: