Best way to create new syntax for text editing with rules

Hello everyone! I’m new to CodeMirror and text editors.
I’ve been reading the doc of CodeMirror v6, but I’m a little lost in defining the best and most straightforward way to achieve what I want.

My requirements are simple to list but a bit tough to implement (I think).
I aim to build a text editor that allows users to create a drama play. I want to replicate something like similar to this (will improve it, but it’s a good base to show my specific needs):

It’s not code editor, it’s for text editing but with some rules to follow.


  • The user cannot do formatting manually (italic, bold underline) and can’t insert components (video, image…)
  • Only two actions are available: # indicates a new scene, and @ mentions a user and indicate the start of a new replica/cue


  • Scenes should be shown in orange and mentions in blue
  • Anything in parenthesis in grey, and any text between a scene title and a cue should be in grey too.


How would you address that? Do I absolutely need to create my own grammar with Lezer? I couldn’t find any good examples to follow tbh, so that’s why i’d prefer to avoid it.

Thanks in advance for your help, much appreciated!