Use Shortcuts.App for Snippet Library

In the past I have used verious means to have a snippets library to hand for Hype.

I even wrote my own app that allowed me to replace text in a Hype function editor from a list of stored snippets. This worked great but broke when Apple changed the way they did extensions and did not give a lot of documentation on how to do what I was doing to adapt the legacy code I had put together (even that was a task due to crap/old documentation ).

Using the keyboard Text Replacement was another. But that shared a similar issue I had with my own app.

You have to remember what the text shortcut word is, type it in the doc before you get the option to replace it.

A snippet should not need to do this. You really just want to insert it where the cursor is.


While playing with Shortcuts.app I realised that it has an option overlooked by me to do just that.

It is not new to me to add a shortcut to the Service menu, which can be accessed in apps either by the App Menu (menu with the app name ) -> Services.

Or Control Clicking within an App.

But what I had been missing was the option Provide Output. Checking that one little check box gives us an ideal way of doing the above very easily.

Here's how:

1, Open up the shortcuts.app and add a new short cut.

2, Give it a name.

Mine will all start with Snippet Hype ....
So they all list together in the Services menu.

2, Add a Text Action.

If you cannot see it in the action library use the search field to find it.

3, paste you snippet text into it.

4, up at the top right of the window, you will see an info icon. click that.

This will show the Shortcut details. Its options.

5, Check the check boxes.

Service Menu.
Provide Output.
And Use as Quick Action, if it does not automatically check after checking Service Menu.

This will add a couple of Actions the short cut.

6, In the Receive action, make sure it set to Continue for the If there's no input.
It may be set to Ask For or another option .
Just click the blue word and change it to Continue.

Screenshot 2024-01-24 at 11.04.49

That's it for the set up. You can create new ones for each snippet you want.


Another Example

I use console.log a lot, so having a snippet for that and is also easy using a Combine Text action

This example will ask for the text for the console and the prompt you to choose quoted or plain and then use either of the Combine Text actions respectively.

With quotes embed.

Note the + with part will be use to surround the input text, so here I just put a quote. (makes sure you paste a plain text double quote in rather than type one, otherwise you will get a smart double quote.

without quotes embed

+ with part left blank

--

Now when in Hype (or other apps) you just need to access the Services menu to see your snippets listed.

Example usage

--


Have fun.

Oh, if the Actions stop showing up. There is a bug in shortcuts.app that will turn them all off after an edit. It does not always happen, but I noticed it did it a couple of times when I was adding a new one.
You will need to turn on the checkboxes again.

8 Likes

That´s great, Mark! Very helpful. I also have my list... :wink:

1 Like

Great technique!

Would you be able to share any of these for download?

Sure.

Will do when I get back

1 Like

Here is a few to start...

_Snippet Hype Video Tag.shortcut
_Snippet Hype Image Tag.shortcut
_Snippet JS for loop.shortcut
_Snippet Hype Head.shortcut
_Snippet Console.log Prompt.shortcut
_Snippet Style Block.shortcut

Shortcut Snippets.zip (68.6 KB)
When I have made some more common ones I will add here.

( maybe we should have a common area to share them)

Also working on one that can list symbol files and load them.
Not sure if its really makes sense but it works.

3 Likes

It would be great if you could organize the snippets in folders. That´s not possible, is it?

In the Short cuts app you can, mine are. but that will not be reflected in the menu system.

You could limit how many show up by using a list action and Chooser action then group types of snippets in a single menu item
If that make sense..

Yeah, I know that you can in the Short cuts app. I mean of course the menu system... It would be useful, for example, if one could organize the snippets by programs: code snippets for Hype, formulas for Excel, etc. ... I can't really do much with your tip yet, but I will look into it and try it. Thanks for that!

Theoretical…

You could add prompt and then have a super Hype script.

If you can get that working, you could have the script detect the open application and show you options based on that… for a super general script.

I will list all shortcuts here in future if I add more ideas. Saves people jumping back and forth to get them all.
(Feel free to add any ideas or snippet code to the thread. But leave this post to me)


Snippet Library

`Version 1.0.0`

Snippet Library Listing.zip (24.5 KB)


1, Shortcuts creation and Insert from list of text files.
These two Shortcuts are used in conjunction to create a snippets of text.

  • Snippet - Save Text
    This allows you to select some text and save it to a folder.
    The folder path is /snippets. where the txt file will be saved into and is inside the Shortcuts folder in iCloud Drive.

/iCloud Drive/Shortcuts/snippets/

If the snippets folder does not exist it will be created. It shouldn't overwrite an existing one

Screenshot 2024-01-30 at 21.22.49


  • Snippet - Insert Text
    This will look in the Snippets folder and list the files alphabetically by file name.
    You choose you snippet and it will be inserted.Original Shortcuts


These two are for text inserts type snippets.
You can change the folder paths to where ever you want instead of the one I set.




Snippet Library*

Version 1.1.0

SNIPPETS.shortcut.zip (13.0 KB)

The List will now look in the /snippets folder the same as version 1.
But now also looks in a Shortcuts folder in the Shortcuts App. and combines them as a single list.
You can run either one of the simple text inserts from the /snippets folder or a more complex shortcut where the input if any will be s passed on to the Shortcut.

You do not need to do anything special in the Shortcuts that are run this way.
Apart from if you want them to output by checking the output check box as normal.

This method of Organising Shortcuts can also lend its self to limit the number of Shortcuts you see in the Service menu and also ( @ktewes ) if you have more than one Library pointing at Different Shortcuts/snippets. Then you can get an approximation odf separation.



v1.10 Library Listing show the text file insert snippets as well as Actual Shortcuts to run.


ShortcutsExtras

Shortcut Snippets.zip (68.6 KB)

  • _Snippet Hype Video Tag.shortcut
    Inserts a HTML Video Tag block

  • _Snippet Hype Image Tag.shortcut
    Inserts a HTML Image Tag

  • _Snippet JS for loop.shortcut
    Inserts a JS for loop block

  • _Snippet Hype Head.shortcut
    Inserts a HypeJS for HypeDocumentLoad()

  • _Snippet Console.log Prompt.shortcut
    prompts to insert a console.log() input text with or without quotes

  • _Snippet Style Block.shortcut
    Inserts a css style block


Snippet - Save Text.shortcut.zip (12.2 KB)

  • Snippet - Save Text
    This allows you to select some text and save it to a folder.
    The folder path is /snippets. where the txt file will be saved into and is inside the Shortcuts folder in iCloud Drive.

Tips

  • Keyboard Shortcuts.
    You can add a shortcut key to a Shortcut in theShortcuts.app

For example. as well as having my Insert head js code in the Snippet Library as a text insert.
I also have it as a stand alone Shortcut action not linked to the Snippet Library
In the same settings area for setting up show in Service menu, there is a Run with keyboard shortcut field.
I can use CTRL + OPT + + H

Screenshot 2024-02-08 at 04.33.01

which will insert the head code directly without me using any menus.

Tip Pros :Very quick to insert text/code
Tip Cons: Clutters the service menu because the keyboard shortcut must exist on a menu item.
So use sparingly for most common inserts and use the Libray for the rest.

4 Likes

Snippet Library :arrow_heading_up:

Snippet Library Listings : updated.
Version 1.1.0

2 Likes