styling {injector} is broken in Safari

Renderer

v3

Browser

Safari

Operating System

MacOS

What happened?

Loading any page causes Safari to fail incomplete.

An error in the console leads to this:

The source is https://github.com/naturalcrit/homebrewery/blob/ee05392d27ce76999b95bfb8f990d17a1e6d2b1a/client/homebrew/editor/editor.jsx#L142

The regex for styling {injectors} begins with a negative look-behind, but that is not supported in Safari per https://caniuse.com/js-regexp-lookbehind

Suggestion: this (?<!{) be changed to a non-capturing group (?:[^{]?) — that is, the {injector} pattern should be preceded with zero-or-one character which is not a {.

Code

# heading
{injector}

[calculuschild]

We probably need something more like https://regex101.com/r/H674QD/2

[Gazook89]

I think this does it:

const regex = /(?:^|[^{|\n])({(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\2})/gm;
let match;
while ((match = regex.exec(line)) != null) {
    codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
}

regex101 link

I’ll put a PR up in a minute.