adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-03 17:12:21 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Enhancement: Enable ordering of Snippet input fields #316

New Issue
Closed
opened 2026-10-05 02:39:46 +02:00 by adam · 3 comments
adam commented 2026-10-05 02:39:46 +02:00
Owner
Copy link
Copy source

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:

Screenshot of the snippet modal showing the less-useful ordering of inputs

**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][01]. 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: ```json "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: ![Screenshot of the snippet modal showing the less-useful ordering of inputs](https://user-images.githubusercontent.com/14190564/188282141-fd5a9214-f879-4c28-9bf5-116f7a41a025.png "Screenshot of the snippet modal showing the less-useful ordering of inputs") [01]: https://hugo-book-demo.netlify.app/docs/shortcodes/buttons/ <!-- github-sync-id:1360923420 -->
adam closed this issue 2026-10-05 02:39:46 +02:00
adam commented 2026-10-05 02:39:47 +02:00
Author
Owner
Copy link
Copy source

Agree and will change the behavior @michaeltlombardi.

BTW, thank you for your detailed issues! 💚

Agree and will change the behavior @michaeltlombardi. BTW, thank you for your detailed issues! 💚 <!-- github-comment-id:1236630813 -->
adam commented 2026-10-05 02:39:48 +02:00
Author
Owner
Copy link
Copy source

@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 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. <!-- github-comment-id:1236704893 -->
adam commented 2026-10-05 02:39:48 +02:00
Author
Owner
Copy link
Copy source

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

Screenshot of the button snippet with the inputs ordered correctly

@estruyf This is great!! 💜😊 Just tried it out in beta and it works perfectly for me. ![Screenshot of the button snippet with the inputs ordered correctly](https://user-images.githubusercontent.com/14190564/188440546-7ebc3e9f-88dc-40d7-acc4-7b31fc5675c1.png) <!-- github-comment-id:1236888186 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#316