theme-tools icon indicating copy to clipboard operation
theme-tools copied to clipboard

Closing angle bracket autofilled after adding opening angle bracket inside liquid tag

Open david-w-shopify opened this issue 1 year ago • 3 comments

Describe the bug This bug occurs in the VSCode extension.

Inside a Liquid tag, e.g. {% if %} - typing an opening angle bracket < results in a closing angle bracket > being added as well

Source

{% if 2 < %}

Expected behaviour After typing the <, nothing else should be injected

Actual behaviour I get the following.

{% if 2 <> %}

Debugging information

  • OS: Mac
  • OS Version: Sequoia 15.0.1

Additional Context

The same behaviour happens inside a `liquid tag too.

{% liquid
  if 2 <

  endif
%}

becomes

{% liquid
  if 2 <>

  endif
%}

david-w-shopify avatar Nov 06 '24 17:11 david-w-shopify

Ah yuk. The language-configuration stuff really should be contextual...

https://github.com/Shopify/theme-tools/blob/main/packages/vscode-extension/scripts/language-configuration.ts

We probably can fix this with a OnTypeFormatter

charlespwd avatar Nov 07 '24 14:11 charlespwd

@charlespwd @david-w-shopify I tried a workaround by creating an OnTypeFormatting provider. Then we use the ast to get the current node and check whether we're inside a LiquidTag or not which handle both cases where the Liquid Tag is closed and unclosed. Then we delete the > after typing out < using TextEdit. Haven't dig much deeper but I'm sure this isn't the best solution 😅

https://github.com/user-attachments/assets/40d0f221-645f-4cdf-be51-2ddcd6890133

Smintfy avatar Nov 18 '24 09:11 Smintfy

I mean that's definitely an approach :eyes: curious what the implementation looks like.

We could also maybe do the opposite? Remove < & > from the language config and add the > with an on type formatter?

charlespwd avatar Nov 19 '24 15:11 charlespwd