Scroll the menu to find all the places to visit
Editing Large Amounts of Text in Shortcuts
26 Feb 2019Last 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.
My Solution
I decided to try my hand with a bit of JavaScript, in Scriptable, to see if I could produce something that worked markedly better. The basic premise was to use an x-callback URL call to run Scriptable’s web view and create a web page the user could interact with. The page would be pre-loaded with the content to be edited (which could be nothing). Then once editing is complete, the edited text is sent back to the calling application.
What I came up with certainly seemed to work and was actually a much simpler solution to construct than I’d originally expected.
Expand this section to get the JavaScript for use in Scriptable. Place it in a script named "`Basic Editor"` - the custom shortcut detailed further below is configured to call a Scriptable script with that exact name.
//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>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
body {
background-color: #000000;
}
textarea {
width: 80em;
height: 50em;
border: 2px solid #cccccc;
padding: 5px;
overflow: auto;
-webkit-overflow-scrolling: touch;
font-family: "Lucida Console", Monaco, monospace
}
</style>
<textarea id="taEditor">${textContent}</textarea>
</body>
</html>`
//Load it into a web view and display it
let viewOne = new WebView();
viewOne.loadHTML(strHTMLOriginal);
await viewOne.present();
//Once returned from the web view, grab the text area content
let strTA = await viewOne.evaluateJavaScript(`document.getElementById("taEditor").value`);
//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 the 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 taEditor.
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.
Once any amendments have been made, the Done link on the top left corner of the screen is tapped to dismiss the web view. At this point, Scriptable evaluates some JavaScript (that’s right, we have JavaScript inception with JavasSript evaluating other JavaScript) against the web view; specifically it is able to access the document object model and retrieve the content of the text area.
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.
And Beyond
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.
