adjust for border syntax check

[Ghesselink]

Same as #72, but for the syntax checks instead of schema.

I've also looked at the gherkin checks, but here were no such issues.

Before, the same issue:

After:

[aothms]

One thing that needs to be accounted for is the ^ character that is used to indicate where the error is in the line. We have this approach because the syntax checker can also be used in a terminal setting.

(see how the ^ is exactly underneath the 2nd comma).

I think the simplest option is replace this approach client-side by transforming

00008 | #1=IFCPERSON($,$,'',,$,$,$,$);
                            ^

to

00008 | #1=IFCPERSON($,$,'',<span style='text-decoration:underline'>,</span>$,$,$,$);

Counting the number of space characters before the ^ will tell you where to insert the html element on the 1st line.

Alternative is that we adapt the syntax checker to have some sort of --html output mode. But this requires more steps and also does not fix the situation for existing reports.

[Ghesselink]

Ah yes, I see how splitting the strings into multiple lines causes confusion.

It's modified it as suggested. I've also made the text bold and with a slight background color to improve visibility as solely underscoring sometimes is unclear (I think), for example when underscoring the ; sign.

Lastly,
<br /> {}

is added in between

<span class='pre'>{item.msg.split('\n').slice(0, -2).join('\n')}</span>
 <span class='pre mono' dangerouslySetInnerHTML={{ __html: modifiedStr }}></span>

To make sure each line indeed starts on a new line (this was sometimes not the case)

[aothms]

The token length is not necessarily 1. Try one with a duplicate numeric instance id. It will highlight the entire definition I think. (Not sure actually abt other cases of actual tokens if length can be more than one. )

#1=IFCPERSON(...
#1=IFCWALL(...

But don't assume +1, but count the number of ^ characters.

It would also make the regex a little bit more robust (making sure there is actually a ^ in there) by combining those:

Something like const [numWhitespace, numHighlight] = .match(/(\s*)(\^+)).map(s => s.length)

[aothms]

Also missing ;

[aothms]

Maybe also try with a border:solid 1px red for the span style to make it even clearer.

[Ghesselink]

Done Ghesselink@2634fe1

This worked
const [_, numWhitespace, numHighlight] = msg_parts[msg_parts.length -1].match(/(\s*)(\^+)/).map(s => s.length);

border:solid 1px red
Is also added

The result. Clearer indeed :)

In case of a duplicate ID

[aothms]

I don't think dangerouslySetInnerHTML is needed here? It's actually risky in this case.

Because the IFC could be

#1=IFCPERSON($, $, '<script>alert("haha")</script>'

And in that case the text that was embedded in the IFC content will be executed as actual HTML. This vulnerability is called XSS for cross site scripting and could potentially result in an attacker having access to your account.

[Ghesselink]

Modified in Ghesselink@2634fe1

Right, it doesn't even seem that difficult to embed some malicious html.

I think the following is safer. The message is split into three parts (in which the caret ^is the highlighted part) and rendered seperately as a react (Fragment) component.

  function renderMessage(error_instance, numWhitespace, numHighlight) {
    const beforeHighlight = error_instance.substring(0, numWhitespace);
    const highlightedChar = error_instance.substring(numWhitespace, numWhitespace + numHighlight);
    const afterHighlight = error_instance.substring(numWhitespace + numHighlight);
    return (
      <React.Fragment>
        {beforeHighlight}
        <span
          style={{
            textDecoration: 'underline',
            fontWeight: 'bold',
            backgroundColor: '#ddd',
            border: 'solid 1px red'
          }}
        >
          {highlightedChar}
        </span>
        {afterHighlight}
      </React.Fragment>
    );
  };

Define const

              const errorMessage = renderMessage(
                error_instance,
                numWhitespace,
                numHighlight
              );

Display table
<span class='pre mono'>{errorMessage}</span>