Editing Large Amounts of Text in Shortcuts26 Feb 2019
Last year I posted a small piece on text editing to the Automators forum. It was inspired by another post on the Drafts forum and focused on coming up with a way to edit text making more use of the screen estate than the paltry offering of the standard text options in Shortcuts. The premise was simply to enable a larger text editing area via Scriptable.
The Underling Issue
Shortcuts just doesn’t really lend itself to text editing. You can load some content into the Ask for Input field, but you don’t get a lot of space to work with.
The original poster on the Drafts forum was trying to work with an XML file. Shortcuts is hardly the best place to be editing something like that.
What I came up with certainly seemed to work and was actually a much simpler solution to construct than I’d originally expected.
//Grab the inbound content
// Set by the value of the url parameter named 'content'
let textContent = URLScheme.parameter("content");
//Set up some basic HTML for the editor
// It is just a simple text area
let strHTMLOriginal = `<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
border: 2px solid #cccccc;
font-family: "Lucida Console", Monaco, monospace
//Load it into a web view and display it
let viewOne = new WebView();
//Once returned from the web view, grab the text area content
//Send back the edited content (URL encoded for delivery)
Safari.open(URLScheme.parameter("x-success") + "&result=" + encodeURI(strTA));
Here’s a custom shortcut that utilises the Scriptable script.
It is only intended as an example, and you would simply call it in the same way from your own Shortcuts when you wish to edit text via the Scriptable script.
You can expand this section for a screenshot of the example shortcut's actions.
A Bit More Detail
When the example shortcut is run, it downloads a text file from the Internet. It then displays the text of thie file in an Ask for Input action for editing. This is just as a baseline for what you normally have with Shortcuts. The resulting text is then URL encoded and passed as a parameter called
content to the Basic Editor script in Scriptable.
This script grabs the
content parameter (implicitly decoded), and places this into an HTML string. Specifically so that it is the default text for a text area named
The HTML is then rendered in a Scriptable web view, which includes a reasonably large, multi-line text field in which to edit the text. Note that I’ve set this to be a comfortable size in landscape on my 9.7” iPad. If you run this on a different size and/or orientation, you’ll probably want to tweak the height and weight for the text area in the CSS style above.
How the basic editor currently looks on my iPad.
This content is then URL encoded and passed back on the x-success x-callback URL as a parameter called result.
The custom shortcut then picks up the baton once again, extracts the result parameter value, URL decodes it, and then simply displays it via a Quick Look action.
This idea of building a web page to interact with and pass results back to Shortcuts seems pretty useful to me. This is a relatively basic example, but you could build practically any sort of web based user interface you like and pass results back to Shortcuts.
Even if you just make use of this, you can tailor the web page so that the text area uses your preferred font and font size, the colours are appealing, etc.
Hopefully this is a useful extension for text capture for Shortcuts, and provides some ideas for other Shortcuts & Scriptable integrated automations.