Enhancement: Enable ordering of Snippet input fields

[michaeltlombardi]

Is your feature request related to a problem? Please describe.

I'm working on some snippets and was trying to define a snippet for the hugo-book button shortcode. In doing so, I noticed that the order the snippet inputs are presented to the user is determined by the order they are found in the body key, not the order they are defined in the fields key.

Unfortunately for this snippet, the first field referenced in the body definition is the type of the link the button should have (href or relref), which means that's the first input they're presented with. The preferred ordering in this case is:

1. The text the button should display
2. The URL the button should take you to when clicked
3. The type of URL (the shortcode treats relative links differently from external)
4. Any CSS classes to be added to the button

Instead, the ordering is:

1. The type of URL
2. The URL
3. The CSS classes
4. The button text

Describe the solution you'd like

I would like to have a deterministic way to specify the order the inputs are presented to the user. I think the most user-obvious solution would be for the inputs to be displayed in the order they're defined in the fields key - that was my naive assumption when authoring the snippet.

Describe alternatives you've considered

In testing I was able to fake the ordering to a degree by alt="[[text]]" at the beginning of the shortcode to make the button text display first in the input order. I don't think this is a viable solution as it is misleading to the user who might think that the parameter is valid or needed.

Additional context

The snippet definition:

"Button": {
  "description": "Add a button linking to another page or external site.",
  "body": "{{< button [[ref-type]]=\"[[&url]]\" class=\"[[classes]]\" >}}[[text]]{{< /button >}}",
  "fields": [
    {
      "name": "text",
      "title": "Button Text: This displays on the button itself.",
      "type": "string",
      "single": true,
      "default": ""
    },
    {
      "name": "url",
      "title": "Button Url: Specify the URL this button should lead to.",
      "type": "string",
      "single": true,
      "default": ""
    },
    {
      "name": "ref-type",
      "title": "Link Reference Type: Choose relref if the link is site relative, href if external.",
      "type": "choice",
      "choices": [
        "relref",
        "href"
      ],
      "default": "relref"
    },
    {
      "name": "classes",
      "title": "CSS Classes: Specify a space separated list of classes.",
      "type": "string",
      "single": true,
      "default": ""
    }
  ]
}

And the modal view when a user wants to insert the snippet:

[estruyf]

Agree and will change the behavior @michaeltlombardi.

BTW, thank you for your detailed issues! 💚

[estruyf]

@michaeltlombardi changes have been made. The fields are presented in the order of how they are defined in the snippet's definition.

It will be testable in the beta version of the extension.

[michaeltlombardi]

@estruyf This is great!! 💜😊 Just tried it out in beta and it works perfectly for me.