'

Editorial Workflows: Links, Images & Footnotes

For the past week or so I’ve been playing with the new darling of the iOS text editor world, Editorial. I won’t try to explain Editorial or review it. If you want to know more you should read the canonical review of the app from Frederico Viticci at Macstories.net.

What I, along with pretty much everyone else, have found the most intriguing about Editorial is its powerful Workflows automation system, including the ability to run Python code. In the spirit of giving back I’m going to share a few of the workflows that I’ve built to assist in posting to The Angry Drunk. First up are a trio of workflows that don’t require any Python code.

Disclaimer time: I’m sure that there are ways to accomplish these tasks more efficiently, feel free to prove your superiority in the comments.

The first workflow is Insert Markdown Link. This workflow basically does what it says on the box. When invoked it will prompt the user for the anchor text, the reference id and the link URL, which will be auto-filled with the current contents of the clipboard. Let’s walk through how that works.

The first conditional block is one that I am adding to all my workflows that act on an open document. It checks the filename of the current document and if it’s empty, stops the workflow.

The next six actions display a text-entry dialog asking for the anchor text, reference id, and URL. As mentioned before, the URL text-entry box is pre-populated with the contents of the clipboard — presumably you will have copied a URL from some other location. I could have added some fancy logic to check the clipboard and not prompt for the URL if one is present, but this is quick, easy, and simple. After each bit of text is captured it is saved to a variable.

The next four actions generate the Markdown code for a reference link. [anchorText][referenceText] and [referenceText]: url. Each of these is saved to a variable.

The rest of the workflow places the generated text in the appropriate locations. First the selected text is replaced with the first bit of generated text (for the purposes of this workflow “selected text” can also mean just the caret position if nothing is selected). Next a variable is set that captures the current selection/position. Then the caret is moved to the end of the document and the second bit of text is inserted. Finally the caret is moved back to the position captured before. Easy, peasy.

The next workflow in Insert Markdown Image. Again, this workflow does just what it says. Here’s how:

This workflow also opens with a block to check if an actual document is open. Then, like the Insert Markdown Link workflow, this workflow prompts the user for three bits of text: the image name, the image URL, and any alt text. Also like the link workflow the image URL prompt is pre-populated with the contents of the clipboard. Again the text is saved to a set of variables.

Next is a conditional block that checks if the altText variable is empty. If it is, text in the form ![imageName](imageURL) is generated and inserted at the current caret position. If there is alt text, then the generated text takes the form [imageName](imageURL "altText"). That’s it.

The final workflow is the creatively1 named Insert Footnote. My blogging system, [Pelican][pelican] will generate Daring Fireball style footnotes using the code [^index] \ [^index]: footnote text so this workflow will generate notes in that style.

The workflow starts out with our standard check for an open document.

Next a variable is set with the current time-stamp, to the second. Feel free to edit that to work with whatever scheme you may use. Since I’m displaying footnotes on my main page, the indexes need to be unique. Time to the second meets that requirement, even if it is unwieldy.

Then the user is prompted for the footnote text. This will look something like this:

footnote

Next the same trick used in the Insert Markdown Link workflow replaces the current selection with the footnote index code, moves the caret to the end of the document, inserts the footnote text code and moves the caret back to the original location. Bang, you gots a footnote.

All three of these workflows were used while writing this post — as well as a few that I’ll detail in the next few posts.

Have fun.


  1. Hey look at me writing a footnote…