Writing My First Script

Editor’s Note: I was looking through my ever-piling list of potential posts and found this one that never got published. I wrote it back in July, so it’s a few months late, but I’m still proud and wanted to document it here.

As part of my summer hobby to learn a bit about coding, I feel like a whole new world has opened up. I now understand just enough to be dangerous and to scratch my itches. As a heavy user of Drafts, I’d always wondered how folks made complex actions using Javascript. Today I took a stab at my own simple one.

Enjoy!

I created my first scripting action today! It was also the first time I’ve ever tried to learn/use javascript, and I’m far more proud of it than is warranted.

My goal was to create a prompt that would allow me to choose from several formats to insert the current date into my current draft. I started with the Prompt action but couldn’t understand how to take the output of the prompt and change it into anything useful. All I could get out of the prompt was the text that made up the button I pressed.

So…I went down the (admittedly) much harder route and tried to figure out how to use a script to display a prompt and do what I wanted. It took a while, with much-referencing example actions in the Drafts Directory, the Drafts Script Reference, and this forum.

Here’s the result: Insert Current Date (Prompt). And here’s a screencast of it working using a keyboard command.

And here’s the script. It’s my first one, so I have a lot to learn. If anyone has suggestions on how to streamline the code, I’d love to learn. As Dani Rojas says in Ted Lasso, “Roast me, amigo!”

// # Insert a formatted date in Drafts.app using a prompt.

// Store selection
const [st, len] = editor.getSelectedRange();

// Create prompt
var p = Prompt.create();

p.title = "Insert Formatted Date";

// Arrange the buttons in the order in which you prefer. The top button will be highlighted by default and can be selected by pressing the 'Return' key when prompted.
p.addButton("yyyy-mm-dd");
p.addButton("Month d, yyyy");
p.addButton("mm/dd/yyyy");
p.addButton("mm-dd-yyyy");
p.addButton("mm/d/yy");
p.addButton("mm-d-yy");

// Show prompt
p.show();

var b = (p.buttonPressed)

var ymd = draft.processTemplate("2021-07-18")
var mdy = draft.processTemplate("[[date|%B %e, %Y]]")

// Process dates based on button selection and set variable for the processed date (pd).
if (b == "yyyy-mm-dd") {
    var pd = draft.processTemplate("2021-07-18")
    }
if (b == "Month d, yyyy") {
    var pd = draft.processTemplate("[[date|%B %e, %Y]]")
    }
if (b == "mm/dd/yyyy") {
    var pd = draft.processTemplate("[[date|%m/%d/%Y]]")
    }
if (b == "mm-dd-yyyy") {
    var pd = draft.processTemplate("[[date|%m-%d-%Y]]")
    }
if (b == "mm/d/yy") {
    var pd = draft.processTemplate("[[date|%m/%e/%y]]")
    }
if (b == "mm-d-yy") {
    var pd = draft.processTemplate("[[date|%m-%e-%y]]")
    }

// Take action
if (pd != undefined) {
    // Insert processed date template into the draft at the selected range or point
    editor.setTextInRange(st, len, pd);
    // Reactivate the editor with the insertion point at the end of the newly added date
    editor.setSelectedRange(st + pd.length, 0);
}

editor.activate();

I posted this to the Drafts Community Forum and did indeed get some feedback. You can follow along with its progress on that page. Since then, I’ve updated the action a few times, and the version available from my page on the directory includes all the new features. The Drafts community is one of the best on the internet. 🥰

Coding Scripts