Passing backtick string var as prop breaks syntax
zacharytyhacz opened this issue · 5 comments
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`}
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>
)}
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[]) => {
Hello, I have switched my react typescript syntax highlighting plugin to:
HerringtonDarkholme/yats.vim
I have not had any problems with it at all