MarsEdit Live Source Preview

December 23rd, 2014

Recently a customer wrote asking whether I would consider adding a feature to MarsEdit, so that as you’re writing a blog post, you could also keep an eye on exactly what the resulting HTML will look like. This feature would be handy for folks writing in Markdown or in the Rich Text editor, but also for folks writing in plain HTML, depending on what “preview filter” settings they have configured.

I told the customer I could see the value of such a feature, and that I would consider it for a future update. But the idea stuck with me until I suddenly realized that in fact MarsEdit could support such a feature today, without any update to the app.

Currently MarsEdit’s editor supports writing in either plain-text markup such as HTML or Markdown, or in Rich text. In any of these cases, the final result can be previewed in MarsEdit’s preview window, where the results of e.g. running Markdown or converting from rich text to HTML are shown in the context of a “preview template,” essentially a custom HTML document that users can tweak e.g. to match the appearance of their blog.

Preview window with default configuration

Because users can edit the template and add arbitrary HTML to the preview window’s content, it occurred to me that JavaScript could be added to the template such that every change to window’s content would be matched by a live display of the HTML being shown in that very window.

MarsEdit’s default preview template contains a body section that looks like this:

<div style="padding:10px 20px;">
#body#
#extended#
</div>

The #body# and #extended# placeholders are replaced with the actual content of the post while you are writing it. For the purposes of this proof-of-concept, I decided to just focus on the body text, since many people don’t use “extended” entries. I added a bit of HTML in the template to hold the source view I plan to add:

<hr>
<pre style="white-space:pre-wrap">
<div id="sourceContent" style="padding:10px 20px;">
</div>
</pre>

Now the only trick remaining is to pay attention to changes and update the contents of the “sourceContent” div above with my content’s HTML. This required a little inside-knowledge that would have been admittedly challenging to discover on one’s own. The way MarEdit currently handles updates to the preview window content is to load the HTML template once, and then as you type, recompute and replace just the “body” of the HTML document. So I added a new script element outside the scope of the body tag, where it won’t get replaced constantly:

<script type="text/javascript">
	var ignoreUpdates = false;

	function escapeHTML(theHTML) {
		var escapedHTML = theHTML
		escapedHTML.replace("&", "&amp;");
		escapedHTML.replace("<", "&lt;");
		return escapedHTML;
	}

	function updateSource() {
		var bodyDiv = document.getElementById("bodyText");
		var sourceDiv = document.getElementById("sourceContent");
		if (bodyDiv && sourceDiv) {
			var bodyHTML = bodyDiv.innerHTML;
			sourceDiv.innerText = escapeHTML(bodyHTML);
		}
	}

	document.addEventListener("DOMNodeInserted", function(e) {
		if (ignoreUpdates == false) {
			ignoreUpdates = true;
			updateSource();
			ignoreUpdates = false;
		}
		
	}, false);
</script>

I’ll leave making sense of that JavaScript as an exercise for the (very) curious reader, but the gist of it is that it listens for changes to the structure of the HTML document, and when it notices that happening, it grabs all the HTML out of the “bodyText” div, converts it to escaped HTML source, and sets that on the new “sourceContent” div that I added to the template.

Here’s what the MarsEdit preview window looks like now, with the live source preview in effect:

Preview window with new source display

While this isn’t as polished as a dedicated feature for previewing source, I found it interesting that I was able to come up with a creative solution using only the powerful and flexible preview infrastructure of the app. If you’re interested to try out the preview, you can download it here. Just copy and paste the text into MarsEdit’s preview template editor.

Let me know if you come are inspired to come up with any creative preview window solutions of your own!

MarsEdit 3.6.7: Jumpy Text Cursor

November 12th, 2014

MarsEdit 3.6.7 is available now from the MarsEdit home page, and has been submitted to the Mac App Store for review by Apple.

This release comes hot on the tails of 3.6.6, mainly because of a harmless but nonetheless obnoxious bug that was introduced in that release. While typing in either the HTML source or Rich Text editor, if you manually save a local draft of a post (as many people compulsively do), the insertion point cursor in the post would jump to the end or beginning of the post. Frustrating!

3.6.7 addresses this problem and also includes my workaround for the WebKit bug I described in depth a few days ago.

  • Fix a problem from 3.6.6 where saving a local draft caused the insertion point in the post to jump
  • Work around a bug cause a crash when closing documents with active JavaScript running
  • Fix a bug where a long list of blogs could draw funny when scrolling off the bottom of the source list

Hopefully this update will get you back to saving as compulsively as you like, without any resulting hijinx in the editor!

Burn After Releasing

November 6th, 2014

For folks interested in the more technical side of Red Sweater, I’ve written up a fairly long technical analysis of a recent MarsEdit crash report I received and how I ended up fixing it:

“I love it when customers take the time to write something about the circumstances surrounding a crash. Often even a little clue can be enough to lead to the unique series of steps that will ultimately reproduce the problem.”

I used to write more about this kind of stuff right here on the blog, but in general I leave most of this “programmer-level” stuff on the Indie Stack blog these days. Give it a look if you’re interested in reading more stuff like this.

MarsEdit 3.6.6: Performance And Bug Fixes

November 6th, 2014

MarsEdit 3.6.6 is available now from the MarsEdit home page, and has been submitted to the Mac App Store for review by Apple.

This release addresses a pair of performance issues affecting some people on OS X Yosemite, in which typing in the post editor or sorting items in the main window can become very slow.

The update also improves overall reliability, including fixes for several nuisances and crashing scenarios:

  • Fix a performance problem that caused slow typing in the post editor for some users
  • Fix a performance problem with sorting large lists of posts in the main window
  • Fix a bug in which image attachments could be removed erroneously when canceling a draft save
  • Fix the functionality of the AppleScript “save” command to save a post as a local draft
  • Fix a bug that prevented sorting posts by the Tags column
  • Fix updating of post editor window contents when left open after publishing
  • Prevent a crash when pasting text with invisible characters
  • Fix a bug that could prevent the main category from being changed by the category popup

Let me know if you notice anything unusual after updating to the latest release!