How to force soft wrap from a custom-made ACE editor mode?

Question

I'm writing a custom mode for the ACE editor to support my toy template language.

In the language there is a construct to embed a newline:

foo{\n}bar

It will be rendered with a newline, as follows:

foo
bar

I would like to imitate this in the editor and force a soft wrap after {\n}:

1 | foo{\n}
  | bar

Is there a way to do this in my mode?

Update: FWIW, here is a link to my mode file.

Answer 1

Without code, it's a bit hard to reproduce [EDIT: see below], but according to the class diagram, you need to interact with the VirtualRenderer to alter how things are displayed.

It takes a theme to style the code. (you can select these in the editor at the Theme-menu). Themes are css (+js) files, which opens the possibility of using this trick to insert a newline after your {\n} element class.

EDIT: code was added

Depending on the position of the \n (several parts of the regex could match), you might be able to use

{
    token: function(arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
      return [
        "constant",
        "keyword.operator",
        (arg3 === '\n') ? "newline" : "variable.parameter",
        "keyword.operator",
        "string",
        "keyword.operator",
        "variable"
      ],
    regex: /([%]?)([=]?)([^|>}]*)([|]?)([^>}]*)([>]?)([^}]*)/
}

and then have

.ace_newline:after {
  content:"\a";
  white-space: pre;
}

in your custom theme.