[BUG] Incorrect Table Formatting When Stylized

[micahchaya]

Describe the bug

I am experiencing a bug in my TW notebook where my tables are formatted incorrectly when I stylize information in cells. In the first table, only the third cell is displayed, but I have found that if I put spaces before the line bars defining the table, I can get all three cells to display. This behavior only happens when I stylize information in tables.

Expected behavior

I expect all cells to be displayed and stylized when I put this wikitext in my notebook: |@@color:#FF7C38;Test1@@|@@color:#FF7C38;Test2@@|@@color:#394348;Test3@@|

Screenshots

TiddlyWiki Configuration

• Version: 5.2.7
• Saving mechanism: browser (Microsoft Edge)
• Plugins installed: KaTex, TiddlyRemember, CodeMirror, Highlight

[CodaCodr]

Confirmed in Firefox on Windows.

I can get all three cells to display, with only the first two being stylized

The third color value is missing a "#".

[micahchaya]

Confirmed in Firefox on Windows.

I can get all three cells to display, with only the first two being stylized

The third color value is missing a "#".

Thanks for catching that @CodaCodr. I have updated my post.

[ericshulman]

The TWCore wikiparser that processes the @@...@@ syntax is defined in: $:/core/modules/parsers/wikiparser/rules/styleinline.js

Within the init() method is this line:

this.matchRegExp = /@@((?:[^\.\r\n\s:]+:[^\r\n;]+;)+)?(\.(?:[^\r\n\s]+)\s+)?/mg;

Because this regexp pattern is "greedy", and doesn't exclude the | symbol, the result of the example table syntax in the OP produces a single <td> element like this:

<td><span style="color:#FF7C38;Test1@@|@@color:#FF7C38;Test2@@|@@color:#FF7C38;">Test3</span></td>

which results in the erroneous rendered output that was observed.

This can be corrected by adding \| to the "termination" characters that are being excluded in the matchRegExp, like this:

this.matchRegExp = /@@((?:[^\.\|\r\n\s:]+:[^\|\r\n;]+;)+)?(\.(?:[^\|\r\n\s]+)\s+)?/mg;

[Jermolene]

Note that consecutive instances of the inline style syntax will only be merged like this if there is no whitespace in between them. So a simpler fix for this issue is to introduce whitespace after each use of the inline styling syntax:

|@@color:#FF7C38;Test1@@ |@@color:#FF7C38;Test2@@ |@@color:#A9F348;Test3@@ |