Zoundry Raven: Editor

Monday, June 25, 2007

So I've been told that, since I haven't posted an entry to the dev blog in two months, I should get my you-know-what in gear and post. To be fair, I believe the forum post was more polite than that, but it shouldn't have been.

On the bright side, I think I'm ready to talk a little bit about the editor. I've been holding off on that until it was a little further along in development, but I think now is the time. What follows is a screenshot of the editor (latest alpha build) and a list, in no particular order, of interesting features. Please note that I'm not going to talk much (at all) about the standard editor stuff that we already had in Zoundry Blog Writer. Assume that any feature in the old editor will also be present in the new one. This article is intended to showcase some of the new stuff we're doing.

editor1.PNG

Tabbed Editing

The editor supports tabs, allowing multiple blog posts to be edited without cluttering up the UI with multiple windows. There are actually two sets of tabs. The tabs at the top allow the user to switch back and forth between the in-progress blog posts. The tabs at the bottom allow switching between Design, XHTML, and Preview views of the currently in-focus editor tab. Note that, if there is only a single blog post being worked on, the top set of tabs will be hidden. This saves a bit of vertical space that can be better used for editing.

The top set of tabs uses a custom control that we have created specifically for this purpose. We have done this, rather than use a standard widget, so that we can have better control over its capabilities. For instance, you can middle-click on a tab to close it, you can right-click on a tab to get a context-menu of options such as Close, Close All, Close Others, etc... Using a fully custom control allows us to do these things and more, and at the same time lets us specify the visual style of the tabs. Which reminds me, the visual style is still a work in progress. It's good enough for alpha, but it could do with some tweaking at a later date. Suggestions and/or mock-ups welcome.

Extensible Drag and Drop

We are making an effort this time around to support many more drag and drop capabilities. Many typical functions, such as adding images and linking to existing posts, will be accomplished via drag and drop. Zoundry Blog Writer supports some limited drag and drop capabilities. You can drop images, files, arbitrary HTML into the editor and that will work fine. But you can't drop, for example, a blog post from the sidebar. Raven has a well designed (hopefully) and extensible drag and drop framework that makes adding additional drag and drop functionality very easy.

Out of the box, Raven will support what you might expect:

  • Single Image file (with or without thumbnail)
  • Multiple Image files (with some thumbnail and layout options)
  • Non-Image files
  • Arbitrary HTML (e.g. from a browser)
  • Existing blog posts (from the Raven UI)

In addition to these, Raven exposes an extension point that add-on plugins can use to contribute additional functionality to the drag and drop framework. For instance, a plugin could contribute a drag and drop handler that knew how to intelligently handle YouTube videos.

There's one other feature that we have in mind for drag and drop that we haven't prototyped yet, so I'm not quite ready to talk about it. But stay tuned on this front.

Persistent Publishing Options

(I really debated calling this section "Persistent Publishing Parameters" for some sweet alliteration, but decided against it)

In a previous blog post, Zoundry Raven: Multiple Blogs, I talked about the publishing options UI and publishing to multiple blogs. In addition to that, it's worth pointing out that the publishing options for a blog post are now associated with the content. It's now persistent meta data that goes along with the blog post whenever it is saved. Whenever a change is made to the blog post in the editor, whether it is content, title, or meta-data (including publishing info), the post becomes "dirty" and must be saved. All changes made are then saved to disk and can be worked on later. This obviously isn't a ground-breaking idea, but I thought it was worth mentioning.

True WYSIWYG Editing

One feature we've been wanting to add for a while is true 'what you see is what you get' editing. I think that, for example, Windows Live Writer does a nice job of downloading the blog template and allowing you to actually edit your blog post using "Web Layout". This is a feature that we wanted to have in Zoundry Blog Writer, but decided to defer to Raven, since we felt that was our future. One somewhat ugly problem that we had to tackle was how to download the blog template. Windows Live Writer publishes a specially formatted blog post and then scrapes the resulting HTML page.

We didn't want to take this approach, if at all possible, but unfortunately it turns out to be the only reliable way to download the template. So now we've got some code that will essentially rip a single web page URL and save it to disk, getting all of its dependent resources (images, css, javascript) and downloading and saving those as well. That's really the hard part, and so we should have pretty decent support for blog templates shortly after releasing the first alpha version.

Note: Live Writer's 'Web Layout' view shows only the section of the template that immediately surrounds the content and title. Alternatively, we could show the entire template while editing in "True WYSIWYG" mode. Which would our users prefer? Let me know on the forum or in the comments!

Technorati :
Del.icio.us :
Ice Rocket :