Example tag hover support

[EvilGenius13]

What are you adding in this PR?

Closes: https://github.com/Shopify/developer-tools-team/issues/529

Add hover support for @example in liquid {% doc %} tags.

Along with parameter hover introduced in #703, we are adding support for examples.

Example product card snippet:

{% doc %}
  @param {String} title - The title of the product
  @param {Number} border-radius - The border radius in px
  @example
  {% render 'product-card', title: 'Product Title', border-radius: 10 %}
  @example
  {% render 'product-cards', title: 'Product Title', border-radius: 20 %}
{% enddoc %}

<div class="product-card" style="border-radius: {{ border-radius }}px">
  <h2>{{ title }}</h2>
</div>

Hovering over the render snippet will look like:

Before you deploy

• I included a minor bump changeset
• My feature is backward compatible

[aswamy]

Tophat went great Josh!

[aswamy]

Not sure about this .trimStart().trimEnd() - I get why you're doing it but seems clunky that we would have to worry about "examples" having extra spaces. Could we modify LiquidDocExampleNode in liquidDoc.ts so that we always trim the string for content. That way, we would never have to worry about it in the provider flow.

[aswamy]

Actually, we might have to be a bit smarter than just trimming the string. When we have an example written like the following, trimming the leading+trailing spaces will end up looking like the 2nd picture.

Instead, we should see how many space characters are leading the first line, then remove that many spaces for each line in the example. This also means that you need to update the prettier rule so that we allow format on save. What do you think?

cc: @jamesmengo

[EvilGenius13]

Great thought. thanks @aswamy. I think I want to have a bigger chat surrounding how we format our prettier rules and what we want to get out of the example tags.

[aswamy]

If you want, you can separate multi-line example support and multi-line param support into another ticket. I assume they would encounter the same formatting issues.

[jamesmengo]

@EvilGenius13 +1 to Alok's comment - though I agree we can follow up with that:

Follow up with a change that:

• Removes trimEnd and trimStart in the hover provider
• changes the prettier printing to just consider the raw example input

I have an example here

I'll document this in our decision log.