Enhancement: Add ability to open snippet in modal for editing

[michaeltlombardi]

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

For some relatively complex snippets, they're much more pleasant to insert with the snippet feature than update once they exist. This is also useful for snippets with choice fields, especially if they're not single choice or if snippets are enhanced to support other, more complex fields.

Describe the solution you'd like

I would like to be able to highlight a snippet, click the snippet button, and - if the snippet supports editing in place - be able to view the snippet in the modal view again for editing.

I would like to be able to define a snippet similar to this (everything but the new editing key is from a real snippet):

"Linked Art": {
  "description": "",
  "body": "{{< art src=\"[[&src]]\" alt=\"[[&alt]]\" class=\"[[classes]]\" content_warning=\"[[&content_warning]]\" />}}",
  "fields": [
    {
      "name": "src",
      "title": "Source URL for the image",
      "type": "string",
      "single": true,
      "default": ""
    },
    {
      "name": "alt",
      "title": "Alt text for the art.",
      "type": "string",
      "single": true,
      "default": ""
    },
    {
      "name": "content_warning",
      "title": "Content Warning",
      "description": "List any CWs appropriate for the art.",
      "type": "string",
      "single": true,
      "default": ""
    },
    {
      "name": "classes",
      "title": "Class List",
      "description": "Specify any classes to add to the block in a space separated list.",
      "type": "string",
      "single": true,
      "default": ""
    }
  ],
  "editing": {
    // if this doesn't match, it's not this snippet
    "matchRegex": "{{< art src=.+?\\\/>}}",
    // if it did match, check each of these on the matched
    // text to find the appropriate value
    "parseRegexes": [
      "src=\"(?<src>.+?)\"",
      "alt=\"(?<alt>.+?)\"",
      "class=\"(?<classes>.+?)\"",
      "content_warning=\"(?<content_warning>.+?)\""
    ]
  }
}

I think there could be some performance considerations here, but:

1. The sorts of snippets that this would most benefit from are ones that don't have extremely long blocks of text.
2. The regex should always be iterating over highlighted text, not the whole file.
3. Each check is likely very small.

Describe alternatives you've considered

I think it should be possible to define a script which analyzes the highlighted text against the defined snippets, break out the values, open the new snippet dialogue, prepopulate the fields with the values already defined, then replace the highlighted text when you insert. This is probably okay but it would be better to have some explicit support for this in the extension or a document describing how to accomplish this so people could self-implement.

Additional context

By way of example, I'd like to go from this markdown (snippet highlighted before either clicking the snippet button in wysiwyg or right clicking for context menu or using the command pallette):

<!-- broken across lines for readability -->
{{<
  art src="https://cool.art/arachnid.png"
      alt="An illustration of a spitting spider waving its forelegs menacingly."
      class="foo bar"
      content_warning="Spiders"
/>}}

To this UI:

[estruyf]

Started thinking about this one out of the blue, what if we would add a wrapper around the snippet?

<!-- FM:Snippet:Start - "JSON string with the configuration" -->
The contents of the snippet
<!-- FM:Snippet:End -->

If you click on edit, and you are in the block, it will allow you to open the snippet edit dialog, instead of making you choose which snippet to insert.

[michaeltlombardi]

Would Front Matter automatically wrap newly-added snippets to the page? Can you walk me through the flow for this for both:

1. Adding a new snippet from UI and then editing it
2. Editing an existing snippet in the Markdown

If it's adding the comments around it, I think it's definitely doable - I'm wondering if we could highlight the snippet and run a command from the palette to say "edit snippet" and pick the snippet it relates to.

[estruyf]

It goes as follows:

1. When you are writing your content and want to insert a snippet, you open the snippet dashboard
2. User chooses the snippet, and fills in the required fields
3. When user clicks on insert, the snippet will get added with a comment wrapper. The wrapper is something the extension will add automatically.

<!-- FM:Snippet:Start - "JSON string with the configuration" -->
The contents of the snippet
<!-- FM:Snippet:End -->

4. When users want to edit the snippet, they need to place their cursor on the wrapper and open the snippet dashboard
5. The extension will notice that the user opened a snippet, and instead of showing all snippets, it will show the edit snippet experience.

I think we can add a hover-card for the snippets to tell the user the snippet can be updated.

[michaeltlombardi]

That seems pretty useful! Can I retroactively add those comments myself and have it work?

What goes into the JSON string, if anything?

Using one of my own snippets as an example:

<!-- FM:Snippet:Start - "JSON string with the configuration" -->
```details { summary="Careful!" .warning }

When you use a preset and inputs together, the values specified as an input
always **override** any values from the preset. If you specify a class as an
input, _only_ classes from the input are used, not the value of the `classes`
property in the preset.

If you want to use extensible values, you probably want to define a style
or add another preset instead.
```
<!-- FM:Snippet:End -->

[estruyf]

Working on it:

Screen.Recording.2023-04-17.at.18.38.32.mov

[estruyf]

• Check on start line
• Check on end line
• Setting to turn off snippet wrapper
• Creating placeholder constants
• Change the setting to frontMatter.snippets.wrapper.enabled: that way we can add more settings later if needed.

[estruyf]

First initial version is available for testing. The setting to turn on/off the wrapper has to be implemented.

[estruyf]

Added a frontMatter.snippets.wrapper setting to enable/disable the wrapper.