Passing backtick string var as prop breaks syntax

[zacharytyhacz]

trafficstars

Hello, I have dealt with this syntax bug for a while, but it is really getting annoying.

I have this code:

...
              <DropDownItem to={`/app/profile/${props3.row.id}`} target='_blank'>
                  View
              </DropDownItem>
              <DropDownItem to={`/app/profile/${props3.row.id}/edit`} target='_blank'>
                  Edit
              </DropDownItem>
...

and it appears like this in my vim, the syntax is saying that the string continues into the tag so it fails to highlight the text inside and the other props that appear after this string.

Notice how the component with 'to' prop ending with /edit displays totally fine: ( the @ts-ignore does not change anything, just to hide typescript errors for extra given props )

It's rather small, but it always happens when I pass a backtick string prop with the ${} at the end of it. e.g.:

// this will break syntax
propString={`this string adds var at end: ${userId}`}

propString={`${userIdAtStart} this backtick will not break syntax because the var insert is not at the end`}

[zacharytyhacz]

Also weird issue here, not exactly sure what's causing it to break syntax:

            <input
                hidden
                type="file"
                ref={fileUploadRef}
                id={`${name}-upload`}
                className="d-none"
                name={name}
                onChange={onChange}
            />

            {!uploading && uploadedResult && !props.hideResult && uploadedResultIsImage && (
                <div className="upload-zone-result form-group">
                    <img className="upload-zone-result-image" src={uploadedResult} width={250} />
                    {!disabled && <Button primary onClick={onUploadNew}>Upload New</Button>}
                </div>
            )}

[zacharytyhacz]

Also found this one that goes really long:

      const DropDownTable = (props3: { row: TransferFormattedForTableViewType }) => {
          return (
              <DropDownMenu align="left" button={DropDownEllipsis}>
                  <DropDownItem to={`/app/transfers/view/${props3.row.id}`}>
                      View
                  </DropDownItem>

                  <DropDownItem to={'/app/organization/chart'}>
                      Org Chart View
                  </DropDownItem>

                  {props3.row.routeTo.filter((id) => id === $user.authStore.state.user._id).length > 0 &&
                      props3.row.status !== 'Approved' &&
                      <DropDownItem to={`/app/transfers/approve/${props3.row.id}`}>
                          Approve
                      </DropDownItem>}
              </DropDownMenu>
          )
      }

      const columns = [
          {
              name: 'Employee',
              selector: 'name',
              sortable: true,
              minWidth: '250px'
          },
          {
              name: 'From',
              selector: 'transferFromName',
              sortable: true

          },
          {
              name: 'To',
              selector: 'transferToName',
              sortable: true

          },
          {
              name: 'Date Issued',
              selector: 'date',
              sortable: true

          },
          {
              name: 'Status',
              selector: 'status',
              sortable: true
          },
          {
              name: '',
              cell: (row: TransferFormattedForTableViewType) => <DropDownTable row={row} />,
              ignoreRowClick: true,
              allowOverflow: true,
              button: true,
              maxWidth: '70px',
              minWidth: '50px'
          }
      ]
      const filterSearch = (searchInput: string, data: TransferFormattedForTableViewType[]) => {

[chadmckenna]

I've been having the same issue. It happens pretty much everywhere there are backticks in the code base, here's an example:

[zacharytyhacz]

@chadmckenna

Hello, I have switched my react typescript syntax highlighting plugin to:

HerringtonDarkholme/yats.vim

I have not had any problems with it at all

[buesing]

I have this too, sometimes it's breaking the rest of the document. Disappears after scrolling around for a bit.