bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

X-Debbugs-CC: theo@thornhill.no

In tsx-ts-mode we use this query to apply syntax properties:


(defvar tsx-ts--s-p-query
  (when (treesit-available-p)
    (treesit-query-compile 'tsx
                           '(((regex pattern: (regex_pattern) @regexp))
                             ((variable_declarator value: (jsx_element) @jsx))
                             ((assignment_expression right: (jsx_element) @jsx))
                             ((arguments (jsx_element) @jsx))
                             ((parenthesized_expression (jsx_element) @jsx))
                             ((return_statement (jsx_element) @jsx))))))


And then in tsx-ts--syntax-propertize-captures we mark everything
enclosed by the captured jsx_element nodes in text fences.

Then for the following code

<button onClick={() => {
  func();
  return true;
}}>
  Text
  {func();}
</button>

All the func() and other code will be considered text because the whole
jsx tag (<button>...</button>) are wrapped in string fences. Theo,
what’s the original intention for marking jsx_elements as text? Can we
only mark jsx_text as string?

Yuan

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Eli Zaretskii]

Ping! Theo, can you answer Yuan's questions?

> Cc: theo@thornhill.no
> From: Yuan Fu <casouri@gmail.com>
> Date: Wed, 23 Oct 2024 21:06:40 -0700
> 
> X-Debbugs-CC: theo@thornhill.no
> 
> In tsx-ts-mode we use this query to apply syntax properties:
> 
> 
> (defvar tsx-ts--s-p-query
>   (when (treesit-available-p)
>     (treesit-query-compile 'tsx
>                            '(((regex pattern: (regex_pattern) @regexp))
>                              ((variable_declarator value: (jsx_element) @jsx))
>                              ((assignment_expression right: (jsx_element) @jsx))
>                              ((arguments (jsx_element) @jsx))
>                              ((parenthesized_expression (jsx_element) @jsx))
>                              ((return_statement (jsx_element) @jsx))))))
> 
> 
> And then in tsx-ts--syntax-propertize-captures we mark everything
> enclosed by the captured jsx_element nodes in text fences.
> 
> Then for the following code
> 
> <button onClick={() => {
>   func();
>   return true;
> }}>
>   Text
>   {func();}
> </button>
> 
> All the func() and other code will be considered text because the whole
> jsx tag (<button>...</button>) are wrapped in string fences. Theo,
> what’s the original intention for marking jsx_elements as text? Can we
> only mark jsx_text as string?
> 
> Yuan
> 
> 
> 
> 
> 

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Nov 9, 2024, at 1:11 AM, Eli Zaretskii <eliz@gnu.org> wrote:
> 
> Ping! Theo, can you answer Yuan's questions?

I’ve been using my local fix at work for a while now and it seems to work fine. I’ll make a patch and apply in a few days.

Yuan

> 
>> Cc: theo@thornhill.no
>> From: Yuan Fu <casouri@gmail.com>
>> Date: Wed, 23 Oct 2024 21:06:40 -0700
>> 
>> X-Debbugs-CC: theo@thornhill.no
>> 
>> In tsx-ts-mode we use this query to apply syntax properties:
>> 
>> 
>> (defvar tsx-ts--s-p-query
>>  (when (treesit-available-p)
>>    (treesit-query-compile 'tsx
>>                           '(((regex pattern: (regex_pattern) @regexp))
>>                             ((variable_declarator value: (jsx_element) @jsx))
>>                             ((assignment_expression right: (jsx_element) @jsx))
>>                             ((arguments (jsx_element) @jsx))
>>                             ((parenthesized_expression (jsx_element) @jsx))
>>                             ((return_statement (jsx_element) @jsx))))))
>> 
>> 
>> And then in tsx-ts--syntax-propertize-captures we mark everything
>> enclosed by the captured jsx_element nodes in text fences.
>> 
>> Then for the following code
>> 
>> <button onClick={() => {
>>  func();
>>  return true;
>> }}>
>>  Text
>>  {func();}
>> </button>
>> 
>> All the func() and other code will be considered text because the whole
>> jsx tag (<button>...</button>) are wrapped in string fences. Theo,
>> what’s the original intention for marking jsx_elements as text? Can we
>> only mark jsx_text as string?
>> 
>> Yuan
>> 
>> 
>> 
>> 
>> 

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Eli Zaretskii]

> From: Yuan Fu <casouri@gmail.com>
> Date: Sat, 9 Nov 2024 08:49:55 -0800
> Cc: Theodor Thornhill <theo@thornhill.no>,
>  73978@debbugs.gnu.org
> 
> 
> 
> > On Nov 9, 2024, at 1:11 AM, Eli Zaretskii <eliz@gnu.org> wrote:
> > 
> > Ping! Theo, can you answer Yuan's questions?
> 
> I’ve been using my local fix at work for a while now and it seems to work fine. I’ll make a patch and apply in a few days.

Did you have an opportunity to install such a patch?

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Nov 23, 2024, at 4:15 AM, Eli Zaretskii <eliz@gnu.org> wrote:
> 
>> From: Yuan Fu <casouri@gmail.com>
>> Date: Sat, 9 Nov 2024 08:49:55 -0800
>> Cc: Theodor Thornhill <theo@thornhill.no>,
>> 73978@debbugs.gnu.org
>> 
>> 
>> 
>>> On Nov 9, 2024, at 1:11 AM, Eli Zaretskii <eliz@gnu.org> wrote:
>>> 
>>> Ping! Theo, can you answer Yuan's questions?
>> 
>> I’ve been using my local fix at work for a while now and it seems to work fine. I’ll make a patch and apply in a few days.
> 
> Did you have an opportunity to install such a patch?

Hey sorry, I haven’t applied the patch. Actually, I want to ask you a question before I do: is there a way to mark a single character in buffer in string syntax? The only way I’m aware of is to mark string delimiter syntax to the start and end of the string, but that doesn’t work for a single character.

Take the following snippet as an example:

<button>a<button>

I want to apply string syntax to “a”.

If there’s no such way, I guess just not applying the string syntax in such case is also an option.

Yuan

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Eli Zaretskii]

> From: Yuan Fu <casouri@gmail.com>
> Date: Sat, 23 Nov 2024 21:25:50 -0800
> Cc: Theodor Thornhill <theo@thornhill.no>,
>  73978@debbugs.gnu.org
> 
> >> I’ve been using my local fix at work for a while now and it seems to work fine. I’ll make a patch and apply in a few days.
> > 
> > Did you have an opportunity to install such a patch?
> 
> Hey sorry, I haven’t applied the patch. Actually, I want to ask you a question before I do: is there a way to mark a single character in buffer in string syntax? The only way I’m aware of is to mark string delimiter syntax to the start and end of the string, but that doesn’t work for a single character.
> 
> Take the following snippet as an example:
> 
> <button>a<button>
> 
> I want to apply string syntax to “a”.
> 
> If there’s no such way, I guess just not applying the string syntax in such case is also an option.

There's a syntax-table text property, see the node "Syntax Properties"
in the ELisp manual.  Would that do the job?

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Dmitry Gutov]

On 24/11/2024 09:47, Eli Zaretskii wrote:
>> Hey sorry, I haven’t applied the patch. Actually, I want to ask you a question before I do: is there a way to mark a single character in buffer in string syntax? The only way I’m aware of is to mark string delimiter syntax to the start and end of the string, but that doesn’t work for a single character.
>>
>> Take the following snippet as an example:
>>
>> <button>a<button>
>>
>> I want to apply string syntax to “a”.
>>
>> If there’s no such way, I guess just not applying the string syntax in such case is also an option.
> There's a syntax-table text property, see the node "Syntax Properties"
> in the ELisp manual.  Would that do the job?

In particular, the "generic string" syntax property, this one

   (string-to-syntax "|")

You put it on the first and the last chars of a "generic string".

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Nov 24, 2024, at 5:45 AM, Dmitry Gutov <dmitry@gutov.dev> wrote:
> 
> On 24/11/2024 09:47, Eli Zaretskii wrote:
>>> Hey sorry, I haven’t applied the patch. Actually, I want to ask you a question before I do: is there a way to mark a single character in buffer in string syntax? The only way I’m aware of is to mark string delimiter syntax to the start and end of the string, but that doesn’t work for a single character.
>>> 
>>> Take the following snippet as an example:
>>> 
>>> <button>a<button>
>>> 
>>> I want to apply string syntax to “a”.
>>> 
>>> If there’s no such way, I guess just not applying the string syntax in such case is also an option.
>> There's a syntax-table text property, see the node "Syntax Properties"
>> in the ELisp manual.  Would that do the job?
> 
> In particular, the "generic string" syntax property, this one
> 
>  (string-to-syntax "|")
> 
> You put it on the first and the last chars of a "generic string”.

The problem is, that doesn’t work when there’s only one character. Take the snippet as an example:

<button>a</button>

You can’t put the string fence syntax on the “a”, because there isn’t a closing fence to close it.

Yuan

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Nov 24, 2024, at 5:27 PM, Yuan Fu <casouri@gmail.com> wrote:
> 
> 
> 
>> On Nov 24, 2024, at 5:45 AM, Dmitry Gutov <dmitry@gutov.dev> wrote:
>> 
>> On 24/11/2024 09:47, Eli Zaretskii wrote:
>>>> Hey sorry, I haven’t applied the patch. Actually, I want to ask you a question before I do: is there a way to mark a single character in buffer in string syntax? The only way I’m aware of is to mark string delimiter syntax to the start and end of the string, but that doesn’t work for a single character.
>>>> 
>>>> Take the following snippet as an example:
>>>> 
>>>> <button>a<button>
>>>> 
>>>> I want to apply string syntax to “a”.
>>>> 
>>>> If there’s no such way, I guess just not applying the string syntax in such case is also an option.
>>> There's a syntax-table text property, see the node "Syntax Properties"
>>> in the ELisp manual.  Would that do the job?
>> 
>> In particular, the "generic string" syntax property, this one
>> 
>> (string-to-syntax "|")
>> 
>> You put it on the first and the last chars of a "generic string”.
> 
> The problem is, that doesn’t work when there’s only one character. Take the snippet as an example:
> 
> <button>a</button>
> 
> You can’t put the string fence syntax on the “a”, because there isn’t a closing fence to close it.
> 
> Yuan

Circling back on this. I don’t think there’s a way to apply string syntax to a single character.

Yuan

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Dmitry Gutov]

On 11/12/2024 06:52, Yuan Fu wrote:
>> The problem is, that doesn’t work when there’s only one character. Take the snippet as an example:
>>
>> <button>a</button>
>>
>> You can’t put the string fence syntax on the “a”, because there isn’t a closing fence to close it.
>>
>> Yuan
> Circling back on this. I don’t think there’s a way to apply string syntax to a single character.

Indeed, sorry.

There needs to be a separate char as a "closing fence" like you say 
because it's treated as a part of the string. So it's 2 chars minimum.

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Dec 11, 2024, at 6:52 PM, Dmitry Gutov <dmitry@gutov.dev> wrote:
> 
> On 11/12/2024 06:52, Yuan Fu wrote:
>>> The problem is, that doesn’t work when there’s only one character. Take the snippet as an example:
>>> 
>>> <button>a</button>
>>> 
>>> You can’t put the string fence syntax on the “a”, because there isn’t a closing fence to close it.
>>> 
>>> Yuan
>> Circling back on this. I don’t think there’s a way to apply string syntax to a single character.
> 
> Indeed, sorry.
> 
> There needs to be a separate char as a "closing fence" like you say because it's treated as a part of the string. So it's 2 chars minimum.

How hard is it to add a new syntax for this case? Or is there some way to work around this? We can’t just not apply the string syntax, because if the “a” is a parenthesis, etc, it would mess up the parenthesis balancing after it.

Maybe just give it a whitespace syntax? 

Yuan

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Dmitry Gutov]

On 12/12/2024 06:56, Yuan Fu wrote:
> How hard is it to add a new syntax for this case? Or is there some way to work around this? We can’t just not apply the string syntax, because if the “a” is a parenthesis, etc, it would mess up the parenthesis balancing after it.

Probably not very hard, but that seems like it'd affect the total set of 
syntax classes - which means adding it to the manual, etc.

> Maybe just give it a whitespace syntax?

Right, in such cases I applied the "whitespace" or "punctuation" syntax 
to the whole character span, like in 
https://github.com/dgutov/mmm-mode/blob/master/mmm-erb.el#L97

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Dec 12, 2024, at 9:19 AM, Dmitry Gutov <dmitry@gutov.dev> wrote:
> 
> On 12/12/2024 06:56, Yuan Fu wrote:
>> How hard is it to add a new syntax for this case? Or is there some way to work around this? We can’t just not apply the string syntax, because if the “a” is a parenthesis, etc, it would mess up the parenthesis balancing after it.
> 
> Probably not very hard, but that seems like it'd affect the total set of syntax classes - which means adding it to the manual, etc.
> 
>> Maybe just give it a whitespace syntax?
> 
> Right, in such cases I applied the "whitespace" or "punctuation" syntax to the whole character span, like in https://github.com/dgutov/mmm-mode/blob/master/mmm-erb.el#L97

Thanks. I went with the whitespace trick and pushed my patch to master.

Yuan

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Juri Linkov]

> I went with the whitespace trick and pushed my patch to master.

While testing forward-sexp in tsx-ts-mode I noticed that
this line in 'tsx-ts--s-p-query':

  ((jsx_text) @jsx)

disrupts syntax-based navigation for forward-sentence-default-function.

In such example:

import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(
<div>
<h1>Hello, Welcome to React and TypeScript</h1>
</div>,
  document.getElementById("root")
);

'C-M-b' on text inside <h1> stops after the first "H" in "Hello", and
'C-M-f' before the last "t" in "TypeScript".  It seems the first
and the last characters are interpreted as the opening/closing fence?

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Juri Linkov]

> While testing forward-sexp in tsx-ts-mode I noticed that
> this line in 'tsx-ts--s-p-query':
>
>   ((jsx_text) @jsx)
>
> disrupts syntax-based navigation for forward-sentence-default-function.

With this patch everything works perfectly:

diff --git a/lisp/progmodes/typescript-ts-mode.el b/lisp/progmodes/typescript-ts-mode.el
index 5c3c9a24ff4..01dd8297996 100644
--- a/lisp/progmodes/typescript-ts-mode.el
+++ b/lisp/progmodes/typescript-ts-mode.el
@@ -630,7 +640,8 @@ tsx-ts--s-p-query
   (when (treesit-available-p)
     (treesit-query-compile 'tsx
                            '(((regex pattern: (regex_pattern) @regexp))
-                             ((jsx_text) @jsx)))))
+                             ((jsx_opening_element) @jsx)
+                             ((jsx_closing_element) @jsx)))))
 
 (defun typescript-ts--syntax-propertize (beg end)
   (let ((captures (treesit-query-capture 'typescript typescript-ts--s-p-query beg end)))

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Dec 24, 2024, at 12:31 AM, Juri Linkov <juri@linkov.net> wrote:
> 
>> While testing forward-sexp in tsx-ts-mode I noticed that
>> this line in 'tsx-ts--s-p-query':
>> 
>>  ((jsx_text) @jsx)
>> 
>> disrupts syntax-based navigation for forward-sentence-default-function.
> 
> With this patch everything works perfectly:
> 
> diff --git a/lisp/progmodes/typescript-ts-mode.el b/lisp/progmodes/typescript-ts-mode.el
> index 5c3c9a24ff4..01dd8297996 100644
> --- a/lisp/progmodes/typescript-ts-mode.el
> +++ b/lisp/progmodes/typescript-ts-mode.el
> @@ -630,7 +640,8 @@ tsx-ts--s-p-query
>   (when (treesit-available-p)
>     (treesit-query-compile 'tsx
>                            '(((regex pattern: (regex_pattern) @regexp))
> -                             ((jsx_text) @jsx)))))
> +                             ((jsx_opening_element) @jsx)
> +                             ((jsx_closing_element) @jsx)))))
> 
> (defun typescript-ts--syntax-propertize (beg end)
>   (let ((captures (treesit-query-capture 'typescript typescript-ts--s-p-query beg end)))

Thanks for looking into this! But what’s the intention of this change? In a snippet like this:

<button onClick={() => {
  func();
  return true;
}}>
  Text
  {func();}
</button>

Only the “Text” part should be marked as string. With the change you proposed, the <button …> and </button> part would be marked as string.

We must mark text as strings because they could include </>/(/) etc and mess with syntax-ppss. 

Yuan

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Juri Linkov]

>> @@ -630,7 +640,8 @@ tsx-ts--s-p-query
>>   (when (treesit-available-p)
>>     (treesit-query-compile 'tsx
>>                            '(((regex pattern: (regex_pattern) @regexp))
>> -                             ((jsx_text) @jsx)))))
>> +                             ((jsx_opening_element) @jsx)
>> +                             ((jsx_closing_element) @jsx)))))
>> 
>> (defun typescript-ts--syntax-propertize (beg end)
>>   (let ((captures (treesit-query-capture 'typescript typescript-ts--s-p-query beg end)))
>
> Thanks for looking into this! But what’s the intention of this change?
> In a snippet like this:
>
> <button onClick={() => {
>   func();
>   return true;
> }}>
>   Text
>   {func();}
> </button>
>
> Only the “Text” part should be marked as string.  With the change you
> proposed, the <button …> and </button> part would be marked as string.

How could I see that text is marked as string?
I see no different fontification.

> We must mark text as strings because they could include </>/(/) etc
> and mess with syntax-ppss. 

With the updates in 'tsx-ts-mode' that I just pushed to master
please try in the following example:

ReactDOM.render(
<div>
<h1>Hello, Welcome to React and TypeScript</h1>
</div>,
  document.getElementById("root")
);

1. move point to the beginning of <h1>
2. type C-M-b
3. point incorrectly moves to inside <div>

However, this the above patch, point doesn't move
that is correct.

Another test case:

1. move point to the beginning of the word "Welcome"
2. type C-M-b
3. point incorrectly moves to the letter "e" instead of correct "H"

4. type C-M-f a few times until the end of text
5. point stops at the letter "t" instead of moving after the last letter

All these cases work correctly with the patch above.

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Dec 24, 2024, at 9:25 AM, Juri Linkov <juri@linkov.net> wrote:
> 
>>> @@ -630,7 +640,8 @@ tsx-ts--s-p-query
>>>  (when (treesit-available-p)
>>>    (treesit-query-compile 'tsx
>>>                           '(((regex pattern: (regex_pattern) @regexp))
>>> -                             ((jsx_text) @jsx)))))
>>> +                             ((jsx_opening_element) @jsx)
>>> +                             ((jsx_closing_element) @jsx)))))
>>> 
>>> (defun typescript-ts--syntax-propertize (beg end)
>>>  (let ((captures (treesit-query-capture 'typescript typescript-ts--s-p-query beg end)))
>> 
>> Thanks for looking into this! But what’s the intention of this change?
>> In a snippet like this:
>> 
>> <button onClick={() => {
>>  func();
>>  return true;
>> }}>
>>  Text
>>  {func();}
>> </button>
>> 
>> Only the “Text” part should be marked as string.  With the change you
>> proposed, the <button …> and </button> part would be marked as string.
> 
> How could I see that text is marked as string?
> I see no different fontification.

It’s marked as string for syntax-ppss purpose, so that syntax-ppss skips it when scanning for balanced pairs. It’s not related to fontification.

> 
>> We must mark text as strings because they could include </>/(/) etc
>> and mess with syntax-ppss.
> 
> With the updates in 'tsx-ts-mode' that I just pushed to master
> please try in the following example:
> 
> ReactDOM.render(
> <div>
> <h1>Hello, Welcome to React and TypeScript</h1>
> </div>,
>  document.getElementById("root")
> );
> 
> 1. move point to the beginning of <h1>
> 2. type C-M-b
> 3. point incorrectly moves to inside <div>
> 
> However, this the above patch, point doesn't move
> that is correct.
> 
> Another test case:
> 
> 1. move point to the beginning of the word "Welcome"
> 2. type C-M-b
> 3. point incorrectly moves to the letter "e" instead of correct "H"
> 
> 4. type C-M-f a few times until the end of text
> 5. point stops at the letter "t" instead of moving after the last letter
> 
> All these cases work correctly with the patch above.

I understand the problem you want to solve, but the patch above will bring back the bug I was trying to fix in the first place. 

And I still don’t understand the intention of your patch. Maybe I missed something. Am I correct that you want to apply string syntax on the tags, eg, <div>, <button>, </button>, </div>? 

Yuan

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Juri Linkov]

>> ReactDOM.render(
>> <div>
>> <h1>Hello, Welcome to React and TypeScript</h1>
>> </div>,
>>  document.getElementById("root")
>> );
>> 
>> 1. move point to the beginning of <h1>
>> 2. type C-M-b
>> 3. point incorrectly moves to inside <div>
>> 
>> However, this the above patch, point doesn't move
>> that is correct.
>> 
>> Another test case:
>> 
>> 1. move point to the beginning of the word "Welcome"
>> 2. type C-M-b
>> 3. point incorrectly moves to the letter "e" instead of correct "H"
>> 
>> 4. type C-M-f a few times until the end of text
>> 5. point stops at the letter "t" instead of moving after the last letter
>> 
>> All these cases work correctly with the patch above.
>
> I understand the problem you want to solve, but the patch above will
> bring back the bug I was trying to fix in the first place.

The patch just demonstrated one of possible ways to solve the problem.

> And I still don’t understand the intention of your patch.  Maybe
> I missed something.  Am I correct that you want to apply string syntax
> on the tags, eg, <div>, <button>, </button>, </div>?

I don't need to apply string syntax on the tags.  I just found
that currently C-M-f navigation was broken.  Maybe there are
other ways to fix it?

bug#73978: 31.0.50; Text syntax applied on too many things in tsx-ts-mode

[Yuan Fu]

> On Dec 24, 2024, at 11:40 PM, Juri Linkov <juri@linkov.net> wrote:
> 
>>> ReactDOM.render(
>>> <div>
>>> <h1>Hello, Welcome to React and TypeScript</h1>
>>> </div>,
>>> document.getElementById("root")
>>> );
>>> 
>>> 1. move point to the beginning of <h1>
>>> 2. type C-M-b
>>> 3. point incorrectly moves to inside <div>
>>> 
>>> However, this the above patch, point doesn't move
>>> that is correct.
>>> 
>>> Another test case:
>>> 
>>> 1. move point to the beginning of the word "Welcome"
>>> 2. type C-M-b
>>> 3. point incorrectly moves to the letter "e" instead of correct "H"
>>> 
>>> 4. type C-M-f a few times until the end of text
>>> 5. point stops at the letter "t" instead of moving after the last letter
>>> 
>>> All these cases work correctly with the patch above.
>> 
>> I understand the problem you want to solve, but the patch above will
>> bring back the bug I was trying to fix in the first place.
> 
> The patch just demonstrated one of possible ways to solve the problem.
> 
>> And I still don’t understand the intention of your patch.  Maybe
>> I missed something.  Am I correct that you want to apply string syntax
>> on the tags, eg, <div>, <button>, </button>, </div>?
> 
> I don't need to apply string syntax on the tags.  I just found
> that currently C-M-f navigation was broken.  Maybe there are
> other ways to fix it?

Then let’s look for other ways to solve the problem you demonstrated. Dmitry, would there be any negative effects if we apply the whitespace syntax on all the text (rather than string syntax)? Ah, I guess skip-syntax wouldn’t work right. Is there another way to tell syntax-ppss to skip a chunk of text when scanning?

Yuan