Editing large amounts of text in Shortcuts

Anyone struggle with editing larger chunks of text in Shortcuts? Perhaps this may be of interest?

Background

Over on the Drafts forum there was a tangential question recently about using Drafts as an editor for long text mid-Shortcuts custom shortcut. Unfortunately that didn’t quite fit with the functionality and purpose of the app. There’s certainly possibilities where a kludge could be applied to work around it, but it wasn’t ideal. I wondered if I could come up with an alternative and here’s what I came up with.

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 was trying to work with an XML file. 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. 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 seems to work and was much simpler than I’d expected.

Expand the section below to get the Javascript for use in Scriptable. Place it in a script named “Basic Editor” - the custom shortcut below is configured to call a Scriptable script with that name.

Basic Editor
//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));

And here’s the custom shortcut to demonstrate it.
Example - Scriptable Basic Editor

Expand this for a screenshot of the shortcut actions

A Bit More Detail

When the example shortcut is run it downloads a text file from the Internet. It then displays this in an Ask for Input action for editing. 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 and where you can modify the text in a reasonably large text field. 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. I’m sure this can actually be made more dynamic, but my CSS is rusty and it’s late Friday evening here in the UK; a challenge for another day.

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 Javascript 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 in 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’ll help a few people out with their text capture for Shortcuts or provide some idea around other Shortcuts : Scriptable integrated automations.

5 Likes

Great idea…but I keep getting this error message:

2018-10-27 01:21:26: Error: TypeError: ScriptableKit.WebViewBridgeConstructor is not a constructor (evaluating ‘new WebView()’)

Very cool. Works like a charm… just love the creative ideas here

:slightly_frowning_face:

The only thing I can think of is that maybe I’ve used something from the beta version rather than the current release. But I wouldn’t have expectrd it to be the creation of a new web view instance. I think the Javascript evaluation might be a possibility… I’ve honestly not been tracking app updates as closely of late.

Just the line above, in a new script by itself, gives the error. Maybe it’s something that has been fixed in the beta. Dunno where to start.

Can I check what version of Scritable are you using? It looks like the beta and release builds are the same right now, at v1.1.0 (41).

Yeah I was lagging behind… Updated to 1.1.0 and it’s working fine now.

2 Likes

Great. Glad it was a simple fix :sunglasses:

1 Like

This is absolutely awesome - have you considered releasing it on RoutineHub - maybe even include the UpdateKit 2.0 ?

Thanks for the suggestions, but they are not in my plans currently. I’m offering it here more as a helper and example rather than as a primetime solution.

FWIW, I’ll probably post a revised end enhanced version on my web site at some point in the future. It gives me the ownership and I’ve had a few instances of others plaigarising my stuff in the past when it has been in other places.

Right now I have a lot of work and personal projects on the go. Also a notable back log of posts and around Drafts, Shortcuts, TextExpander, and maybe even Keyboard Maestro I need to sort once I’ve actually migrated the decade’ish of content from my existng site to its new platform.

2 Likes

No worries, I was just wondering :slightly_smiling_face:
And I can relate to other users “borrowing” Shortcuts.

Anyway, I’ll keep an eye out for your revised version, while playing around a bit with the current one.

Once again thank you for this - I didn’t really know I needed it before I saw your post :grin:

Thanks so very much for this solution! I’m the “tangent” on the other forum. :slight_smile:

I’ve incorporated your magic in you my Shortcut for managing Kodi terminal functions, called Kodi Commands, as an option. It works wonderfully for the purpose.

It’s a weird, brave new world, and I’ve seen it already with my stuff too. But I’ve had much worse in “real life.” Anyway, I hope you don’t object to the incorporation. Credit has been given in the main release pages on RoutineHub and reddit and in the Shortcut, and an info menu option links to this thread. I’ve also mentioned it* in the development question I initially asked about editing text on reddit. Cheers!

  • wanted to link to that too but this will only allow me two links. wow. :slight_smile: thread in r/shortcuts called “Edit XML Text and long text”. (Someone there had recommended Drafts, where you saw my “tangent”.)
1 Like