A Toolbar, Some Shortcuts, and a Picture

Part 3 of 7: Documents in the Wild

Priya writes recipes. Long, careful, tested recipes with an ingredients list, numbered steps, a little table of substitutions, and a photo of the crumb so you know what you are aiming for. Priya also does not care, even slightly, that bold text is two asterisks and a link is square brackets followed by parentheses. She wants the loaf to look right on the page, and she wants to spend her attention on the loaf.

Markdown is lovely, and you can absolutely hand-type it. But the editor does not make you, and that is the point of this post.

The toolbar does the syntax for you

Across the top of the editor is a formatting toolbar, and it covers the whole span of things you actually reach for: bold, italic, strikethrough, three heading levels, bullet lists, numbered lists, task lists, block quotes, inline code and code blocks, links, images, tables, and a horizontal rule. Select some text, click the button, and the correct Markdown wraps around it. No memorization, no counting asterisks.

The editor formatting toolbar across the top, above a sourdough recipe rendered live: an ingredients list, numbered method, and a substitutions table

The toolbar over Priya's recipe. Ingredients as a list, method as numbered steps, substitutions as a real table.

The table button is the one Priya reaches for most. Tables are the single most annoying thing to type by hand in Markdown (all those pipes and dashes lining up), and the single most useful thing to have once you do. A substitutions table, a timeline, a comparison: the button builds the scaffold and you fill it in. In Live mode it snaps into an actual table on the right as you go, so you can see when a column is one word too wide.

Four shortcuts worth the muscle memory

If you write enough, your hands stop wanting to leave the keyboard. The editor has shortcuts for the four things you do constantly: Cmd/Ctrl+B for bold, Cmd/Ctrl+I for italic, Cmd/Ctrl+K for a link, and Cmd/Ctrl+E for code. That is a small enough set to actually learn in an afternoon, and once it is in your fingers you format without ever looking up at the toolbar. Priya learned exactly one of them, Cmd+B, and considers it a personal victory.

Dropping in the photo

Then there is the picture, which for a recipe is not a nice-to-have. You can add an image three ways, and all three land it as Markdown right where your cursor is, not tacked onto the bottom of the document. Click the image button in the toolbar and pick a file. Drag a photo in from your desktop. Or just paste one straight out of your clipboard. However it arrives, the image uploads and an ![image](...) reference drops in at the caret, as a single undo step, flowing through the same autosave as everything else.

One honest note on tiers, since this is where it bites: image uploads are a Subscriber action, same as they are on posts. The text and the toolbar and the tables are all just part of the editor, but putting a photo of the crumb into the page is on the paid side of the line. For Priya, whose whole thing is showing you the crumb, that is an easy call. For a document that is all words, you may never touch it.

Structure, formatting, and a photo. That is a page that looks like something. Next up, what happens when you have a hundred of these and need to find the one from March: folders, and the tree that keeps the pile honest.

Adron