Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add HTML Element close tag auto-insertion support #501

Merged
merged 4 commits into from
Sep 27, 2024

Conversation

charlespwd
Copy link
Contributor

@charlespwd charlespwd commented Sep 23, 2024

The feature's TL;DR:

html-end-auto-insert.mp4
  • Type > to close an HTML element, get the </$tagName> for free.
<!-- type this -->
<div id="main">
  <div id="inner">|
</div>

<!-- get this -->
<div id="main">
  <div id="inner">|</div>
</div>
  • Type enter in the middle of a closed tag and get the correct level of indentation
enter-ux.mp4

Fun exceptions we support

{% # type %}
<div
  {% if cond > 2 %}
    note="the `>` inside the if condition doesn't trip the parser"
  {% endif %}
>|

{% # get %}
<div
  {% if cond > 2 %}
    note="the `>` inside the if condition doesn't trip the parser"
  {% endif %}
>|</div>

What are you adding in this PR?

  • Rearchitect OnTypeFormattingProvider for extensibility
  • Add unclosed node information on LiquidHTMLASTParsingErrors
  • Add HTML Element close tag auto-insertion support

How it works

  • Language Client makes server->client textDocument/onTypeFormatting requests when the user types the > character

    • If the document.ast is a LiquidHTMLASTParsingError that says one of:
      • "Attempting to close X before Y was closed",
      • "Attempting to end parsing before Y was closed",
    • Then we reply with a TextEdit that modifies the file and appends </$tag> at the cursor position
  • When the stars are not aligned, we do nothing.

What did you learn?

Before you deploy

  • I included a minor bump changeset

@charlespwd charlespwd force-pushed the feature/499-html-tag-close-auto-insert branch from 732d9a4 to 79b4815 Compare September 23, 2024 18:52
}
return null;
const results = this.providers.map((provider) => provider.onTypeFormatting(document, params));
return results.find((result) => result !== null) ?? null;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I'm doing here is turning this provider into a meta provider like the other ones. I did everything inline for this feature before and I'm rearchitecting to make this like everything else.

@charlespwd charlespwd requested a review from a team September 23, 2024 19:00
@charlespwd charlespwd linked an issue Sep 23, 2024 that may be closed by this pull request
@charlespwd charlespwd force-pushed the feature/499-html-tag-close-auto-insert branch from a9bc589 to f05c362 Compare September 23, 2024 19:40
@charlespwd charlespwd force-pushed the feature/499-html-tag-close-auto-insert branch from f05c362 to c9068e6 Compare September 23, 2024 19:42
@charlespwd charlespwd force-pushed the feature/499-html-tag-close-auto-insert branch from e9e3c9d to 0257da5 Compare September 26, 2024 18:13
Copy link
Contributor

@graygilmore graygilmore left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎩 went well! Just a couple of nits that can be ignored if you want

@charlespwd charlespwd merged commit d1f9fef into main Sep 27, 2024
6 checks passed
@charlespwd charlespwd deleted the feature/499-html-tag-close-auto-insert branch September 27, 2024 15:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

HTML tag end auto-insert
3 participants