There is a regular expression compatibility problem in Google browser version 60

[ferqx]

What’s the bug you are facing?

Browser version：Chrome 60
Dependent version：

"@tiptap/extension-highlight": "^2.0.0-beta.25",
"@tiptap/extension-image": "^2.0.0-beta.19",
"@tiptap/extension-task-item": "^2.0.0-beta.22",
"@tiptap/extension-task-list": "^2.0.0-beta.18",
"@tiptap/vue-2": "^2.0.0-beta.60",

@tiptap/extension-code-block/src/code-block.ts

export const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/
export const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/

The two regular expressions have compatibility problems
Our project runs in Google browser version 60 after packaging. There is an error

At the same time, we also found some problems by checking the regular syntax of regulex

How can we reproduce the bug on our side?

https://jex.im/regulex/#!flags=&re=%5E%60%60%60(%3F%3Clanguage%3E%5Ba-z%5D*)%3F%20%24

Can you provide a CodeSandbox?

No response

What did you expect to happen?

I hope we can handle the project as soon as possible to help us run normally. Thank you

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[philippkuehn]

Chrome V60 is over 4 years old. Please do yourself a favor and update Chrome.
This is our list of supported browsers.

[ferqx]

Please help me, because we have been used in production projects, the number of users is relatively large, and it is unlikely to accept the upgrade

[ferqx]

Or can you tell me the meaning of that regular expression? We can handle it ourselves, mainly because we don't understand the meaning of this regular expression

[rfgamaral]

@philippkuehn We are getting hit by this issue, as one of our users has an enterprise policy to use Firefox v77 (which breaks with those RegExp).

If this is not something you are interested in supporting (given your supported browsers list), can you please clarify for me what's the purpose of <language> in the RegExps? Why something simple like /^```([a-z]+)?[\s\n]$/ isn't sufficient? 🤔

[rfgamaral]

@philippkuehn After further research and testing, I realized that (?<language>) refers to named capturing groups.

Although the original issue mentioned Chrome 60 (a 4-year-old browser), Firefox 77, on the other hand, is only 1.5 years old. I understand you have your list of supported browsers, but it looks to me that the official extension could easily use standard capturing groups instead, without breaking anything or introducing any major hindrance to code maintenance.

In the meantime, we are considering to stop using the official CodeBlock extension, and instead copy/paste the original source code and do the following changes:

- export const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/
+ export const backtickInputRegex = /^```([a-z]+)?[\s\n]$/
- export const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/
+ export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/

 addInputRules() {
   return [
     textblockTypeInputRule({
       find: backtickInputRegex,
       type: this.type,
-      getAttributes: ({ groups }) => groups,
+      getAttributes: (match) => ({ language: match[1] }),
     }),
     textblockTypeInputRule({
       find: tildeInputRegex,
       type: this.type,
-      getAttributes: ({ groups }) => groups,
+      getAttributes: (match) => ({ language: match[1] }),
     }),
   ]
 },

However, it would be much better if we could just keep using the official extension (and get updates on that), than having to maintain our own forked extension for a simple RegExp tweak. Could you consider making this change to the official extension? 🙏

Happy new year 🥳

[ferqx]

So far, we have solved this problem. The solution is to compile the module again when the project is packaged. After compilation, the regular expression will change and it will run normally in Chrome 60.

[philippkuehn]

I removed these named capturing groups in the latest version.

[rfgamaral]

Awesome, @philippkuehn, thanks for that, really appreciated 🤗