Tanager README

created on Jan 13, 2017 and updated on Jan 31, 2020

My Junco, Grebe, Scaup, Veery, Wren, and Sora web publishing apps have the option to use a simple, JavaScript-based “editor” for creating and updating posts.

In 2013, I started with this person’s code borgar.github.io/textile-js.

The original JavaScript provides a Textile live preview editor. The app splits the screen within a web browser. An author writes markup in the left pane while the right pane provides a live preview of the formatted text. The brower JavaScript converted the Textile markup to HTML.

When testing the code in the summer of 2013, I found the flashing of the live preview to be annoying and distracting as I typed. I could see the live preview out of the corner of my eye.

I modified the original code a lot to support my needs. I removed the live-preview, since my web apps also support Markdown and and, at times, my own custom formatting commands. I did not want to try to add all my formatting options to client-side JavaScript. I prefer to let the server app do all of the formatting. For example, the Junco app contains Wiki functionality, which requires server-side formatting.

My version accesses the API endpoints in my web publishing apps. Using REST and JSON, the editor sends markup to the server, and it receives back the formatted HTML.

Other functionality that I added to the editor includes a single-screen view to create a larger writing area, keyboard shortcuts, and auto-save. I also added a line of buttons across the top to switch to single screen or split screen and to save or preview a post.

The original code used jQuery. When I added my changes, I added the usage of the small minified.js framework.

I've been wanting to start over and convert the simple editor utility into vanilla JavaScript, which I have done with Tanager.

At the moment, the Tanager version is used only with my Wren and Sora web publishing apps. The functionality for the end-user is the same as the version(s) used with my other web publishing apps. But Tanager now consists of only one JavaScript file that is approximately 12K in size before minifying. And no frameworks are used.

"Editor" may be an inappropriate term to use describe this browser-based JavaScript tool. It's more like a gateway that uses JSON to send markup and receive HTML.

Keyboard shortcuts:

The editor works fine on the phone's web browser. Obviously, it's easier to write on the phone with the editor in single screen mode.

During preview and save actions, the JavaScript code displays the word count (wc) and reading time (rt) info at the top of the editor. During a save action, the time of the last saved is displayed, which remains at the top of the editor. This info is not shown in the older screenshots displayed below.

The default writing environment. The button with the arrows pointing right is used to switch to single screen mode. The button with the arrows point left is used to switch to split screen mode.

Single screen mode for writing.

Single screen mode for previewing a post.

This is a desktop / laptop view after hitting ctrl-j to create a simplified writing environment. No buttons.

This is a desktop / laptop view after hitting ctrl-d to change the default colors when using the simplified writing environment.

This is a desktop / laptop view after hitting ctrl-h to reduce the writing window to only five lines tall.