Bug with template string code formatting

[kleinesfilmroellchen]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Details about the bug:

After trying the text editor with a larger project I have written, I discovered the following: when using a template string of the form

text(`Lives ${playerLives}\nStreak ${round(streak*10)/10}`, 0, 0);

(used to display game information in draw()) the code after it is regarded as part of the template string, or in other terms:

Everything after this line turns turqoise.

Now, to be clear, this is fully functional code without any errors whatsoever, it is just a flaw in the editor's formatting system

• Web browser and version: Chrome 70.0.3538.110
• Operating System: Windows 10
• Steps to reproduce this: Open this Editor page and file sketch.js or create similar code to what is shown above.

[catarak]

thanks for reporting! it seems like this is something that codemirror supports, so maybe the version of codemirror needs to be updated. hopefully it's that and not something else.

[catarak]

i made a custom syntax highlighting file for p5 (like, maybe two years ago), so maybe that needs to be merged with the newest javascript syntax highlighting file in codemirror

[GaurangTandon]

Hey @catarak, could you please tell which files need to be changed to fix this issue? I'd love to help fix this issue. I looked all over the client directory and could not find the custom syntax highlighting file that you mention.

[catarak]

it's in client/utils/p5-javascript.js, which was forked from https://github.com/codemirror/CodeMirror/blob/master/mode/javascript/javascript.js, however that version is much newer. i would look at the last time client/utils/p5-javascript.js was updated, compare that to https://github.com/codemirror/CodeMirror/blob/master/mode/javascript/javascript.js as it was at that time, figure out what i changed to make the p5 syntax highlighting work, and then add it to the newer version.

[LakshSingla]

@catarak It is not an issue of the version. I migrated it to the latest version in the CodeMirror repository. They also have many issues with template string formatting (judging from their Issues tracker). But that is not the problem here because their code does not reflect this issue.
The main issue with this code is usage of p5function . I am attaching a screenshot of the cases in which it posts a problem and which it does not. I am still trying to understand the CodeMirror's treatment of the function keyword. Applying the similar to p5-function is not solving it. Will keep posting my progress here.
P.S: Just realized changing function to p5-function won't help. 😞

UPDATE: I think that updating the parserConfig.globalVars should help. If it does not then there must be a way to include predefined functions in the configuration of CodeMirror. Lemme go through its documentation once, otherwise I will open an issue on their repository.

[catarak]

@LakshSingla thanks for digging into all of this!