code block will not collapse if using optional chaining WITH backtick literals

[DarylBerryhill]

Description

the use of Optional Chaining operator '?' AND backtick literals causes code blocks unable to collapse. No down arrow to the right of line number. The affecting code block is orange color. Commenting out EITHER enables code block collapsing again.

Code snippet

`

// code block will not collapse if using optional chaining WITH backtick literals
// the use of Optional Chaining operator '?' AND backtick literals causes code blocks unable to collapse
// commenting out EITHER enables code block collapsing again.

let arr = [" one ", " two "];

// removing the option chaining operator '?' enables block collapsing
// we are using option chaining in case 'arr' length is less than 2 elements
let str = arr[1]?.trim();

// by using the backtick literal strings AND optional chaining above,
// prevents ALL code blocks below not to collapse
console.log(`value is: ${str} `);

// this code block doesn't collapse
if (1)
{
console.log( " this code block wont collapse");
}

// The class code block won't collapse
// in addition, the color syntax is not correct. This was mentioned in Bracket github issue #201
class test
{
static testProp = 0;

static testMethod() {}
}

`

Steps to Reproduce

1. reload brackets WITHOUT extensions
2. paste in the above code snippet.
3. save as a javascript file with .JS extension
4. Now the problem is showing itself. No down arrow to collapse code block. Code is orange color
5. comment out either line 9 (let str...) or line 13 (console ...) to show down arrow for collapsing.

Expected behavior:
The IF code block and CLASS code block should collapse using the down arrow to the right of the line number.

Actual behavior:
there is no down arrow when BOTH optional chaining AND backtick literals are present. The code is orange

Versions

OS: Windows 10 x64 10.0.19044 21H2 build 19044.1826

Brackets version:
Release 2.1 build 2.1.2-17937 (master 167640b)
build timestamp: Wed Jul 06 2022 18:43:26 GMT+0530

[abose]

@DarylBerryhill Thanks for reporting the issue.

Can you check if the issue is reproducible in https://phcode.dev/

It looks like it should be fixed once phoenix migration is complete in brackets.

[DarylBerryhill]

Chrome wont let me into that website.Briefly it gives the error message

phcode.dev normally uses encryption to protect your information. When Chrome tried to connect to phcode.dev this time, the website sent back unusual and incorrect credentials......
You cannot visit phcode.dev right now because the website uses HSTS......

[abose]

That is quite strange. Does it happen in other browsers too?

[DarylBerryhill]

yes, Microsoft Edge Version 103.0.1264.62 (Official build) (64-bit) gives the same error.

To be complete here is the full complete error message.

_Your connection isn't private
Attackers might be trying to steal your information from phcode.dev (for example, passwords, messages, or credit cards).
NET::ERR_CERT_AUTHORITY_INVALID
phcode.dev uses encryption to protect your information. When Microsoft Edge tried to connect to phcode.dev this time, the website sent back unusual and incorrect credentials. This may happen when an attacker is trying to pretend to be phcode.dev, or a Wi-Fi sign-in screen has interrupted the connection. Your information is still secure because Microsoft Edge stopped the connection before any data was exchanged.

You can't visit phcode.dev right now because the website uses HSTS. Network errors and attacks are usually temporary, so this page will probably work later._

[abose]

The main issue looks fixed in phcode.dev. so it will be fixed with Phoenix/Brackets 3.0 release

Will investigate the the https issue. We host our site in GitHub Pages, so im not sure how the https issue occurs but would help us to decode the issue if we know more of the network details (Like is this on a work network/ public network).

[DarylBerryhill]

strangely the website seems to be working now in both chrome and edge. I am connecting from my work MaxVision domain. When I get home I'll try it using Starlink internet.

Also tried the website using my phone over 5G using Chrome V103. It does come up pretty quick. A popup says browser not supported. Switching Chrome settings to desktop mode, still using the phone, phcode.dev comes up quickly without error. I don't think its intended to be used on a phone but maybe on a tablet would be useful for quick edits. Personally I'm lost without a triple display.

[abose]

Thanks for the update. It is most likely a transient network issue with corp firewall.

Phoenix is in development right now, hopefully will be released by October. The unsupported dialogue can be dismissed in mobiles/tablets for now, it is just that tablet browsers dont yet allow opening local folders for edits. But a cloud based version for quick edits could be something we will look at in the future.

[DarylBerryhill]

**** Possible Solution ****

This temporary fix that user @tkutlic commented in Github Brackets issue #107 seems to fix the code collapsing problem.
I have changed the paths a little bit to work with Windows 10

1. on Windows 10
   Navigate to and rename the file below to something else. perhaps old_javascript.js
   \Program Files (x86)\Brackets\www\thirdparty\CodeMirror\mode\javascript\javascript.js

2. download this file
   _https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/javascript/javascript.js_

3. overwrite the file below with the one downloaded
   \Program Files (x86)\Brackets\www\thirdparty\CodeMirror\mode\javascript\javascript.js

4. reload brackets. Bam! it just works