Wrong highlighting for closing </Fragment> in JSX code

gctwnl commented 1 year ago

Describe the issue The highlighting for closing Fragments is incorrect.

Sample Code to Reproduce

  return (
    <Fragment>
      <Heading size="large">Design Library Info</Heading>
      {(maxRequirements.length > 0) ? 
        <Fragment>
          <Form onSubmit={onSubmit}>
            <TextField label="Show depth" name="depth" type="number" defaultValue={formState.depth}/>
          </Form>
          {(`${formState.depth}` !== "0" ?
            <Table>
              <Head><Cell><Text>This design depends on</Text></Cell><Cell><Text>Inherited requirements</Text></Cell></Head>
              {renderSource.map(depEntry => {
                return (
                  <Row>
                    <Cell><Text><Link href={`${depEntry.link}`}>{depEntry.title}</Link></Text></Cell><Cell><Text>{depEntry.req}</Text></Cell>
                  </Row>
                )
              })}
            </Table>:
            <Text>(Increase depth to show incoming dependencies and requirements. Edit page to add/delete dependencies)</Text>)
          }
        </Fragment>:
        <Text>(This design does not have incoming dependencies. Edit page to add.)</Text>
      }
      <Table>
        <Row>
          <Cell><Button text="DL QueueRepair" onClick={async () => {
            await dlRepairQueue.push( {"spaceKey": `${context.spaceKey}`, "contentId": context.contentId});
          }}/></Cell>
          <Cell><Button text="DL DirectRepair" onClick={async () => {
            await dlRepairPage( {payload: {"spaceKey": `${context.spaceKey}`, "contentId": context.contentId}});
          }}/></Cell>
          <Cell><Button text="DL DictSync" onClick={async () => {
            await syncDLDictFromPage( context.spaceKey, context.contentId, 'asUser');
          }}/></Cell>
        </Row>
      </Table>
    </Fragment>
  );

Screenshot of Current Behavior

gctwnl commented 1 year ago

Note, there is also a wring colour on /delete inside one of the html texts.

michaelgmcd commented 1 year ago

I don't believe that parentheses are valid in html. It may be a bug, but there is a very reasonable workaround.

Change your rendering of Text to the following and the syntax highlighting should work fine:

<Text>&#40;This design does not have incoming dependencies. Edit page to add.&#41;</Text>

Separately, I strongly recommend Prettier. This issue was pretty easy to find with the formatted code:

return (
  <Fragment>
    <Heading size="large">Design Library Info</Heading>
    {maxRequirements.length > 0 ? (
      <Fragment>
        <Form onSubmit={onSubmit}>
          <TextField
            label="Show depth"
            name="depth"
            type="number"
            defaultValue={formState.depth}
          />
        </Form>
        {`${formState.depth}` !== '0' ? (
          <Table>
            <Head>
              <Cell>
                <Text>This design depends on</Text>
              </Cell>
              <Cell>
                <Text>Inherited requirements</Text>
              </Cell>
            </Head>
            {renderSource.map(depEntry => {
              return (
                <Row>
                  <Cell>
                    <Text>
                      <Link href={`${depEntry.link}`}>{depEntry.title}</Link>
                    </Text>
                  </Cell>
                  <Cell>
                    <Text>{depEntry.req}</Text>
                  </Cell>
                </Row>
              );
            })}
          </Table>
        ) : (
          <Text>
            (Increase depth to show incoming dependencies and requirements. Edit page to
            add/delete dependencies)
          </Text>
        )}
      </Fragment>
    ) : (
      <Text>&#40;This design does not have incoming dependencies. Edit page to add.&#41;</Text>
    )}
    <Table>
      <Row>
        <Cell>
          <Button
            text="DL QueueRepair"
            onClick={async () => {
              await dlRepairQueue.push({
                spaceKey: `${context.spaceKey}`,
                contentId: context.contentId,
              });
            }}
          />
        </Cell>
        <Cell>
          <Button
            text="DL DirectRepair"
            onClick={async () => {
              await dlRepairPage({
                payload: { spaceKey: `${context.spaceKey}`, contentId: context.contentId },
              });
            }}
          />
        </Cell>
        <Cell>
          <Button
            text="DL DictSync"
            onClick={async () => {
              await syncDLDictFromPage(context.spaceKey, context.contentId, 'asUser');
            }}
          />
        </Cell>
      </Row>
    </Table>
  </Fragment>
);

michaelgmcd commented 1 year ago

Happy to accept a PR if you'd like to track down the problem

gctwnl commented 1 year ago

Thank you. As far as I know, using ( or ) characters in text is OK in HTML, it is not required to use the ampersand-coded versions. It's not a big deal, I just wanted to let you know about it. I've got enough on my support plate right now to fork and hunt for it, sorry.

michaelgmcd / vscode-language-babel

Wrong highlighting for closing </Fragment> in JSX code #116