Wiki Layout for Editing

A few weeks ago, I wrote a post about a wiki layout for reading. I used that project to experiment with improvements to the reading view of CWiki, a personal wiki that I am writing. I used the lessons learned in the project described in that post to make some changes to CWiki.

In this post, I describe a layout for editing. Just like last time, I created a simple project to experiment with. The page is layed out like this:

+----------------------------------------------+
| Window Header                            Nav |
+-------+--------------------------------------+
| Aside | +----------------------------------+ | 
|       | | Outer Editor Container           | |
|       | | +------------------------------+ | |
|       | | | Inner Editor Container       | | |
|       | | | +--------------------------+ | | |
|       | | | | Editor Header            | | | |
|       | | | +-------------+------------+ | | |
|       | | | | Editor      | Preview    | | | |
|       | | | |             |            | | | |
|       | | | |             |            | | | |
|       | | | |             |            | | | |
|       | | | |             |            | | | |
|       | | | |             |            | | | |
|       | | | |             |            | | | |
|       | | | |             |            | | | |
|       | | | |             |            | | | |
|       | | | +-------------+------------+ | | |
|       | | +------------------------------+ | |
|       | +----------------------------------+ | 
+-------+-----------------+--------------------+

The “Window Header”, “Nav”, and “Aside” are identical to the those used in the wiki-layout; the “Article Content” has been replaced with the “Outer Editor Container.” These sections should continue to perform just as in the wiki layout. The “Outer Editor Container” is part of the Clojure layout of the page.

Within the “Outer Editor Container” is another container, the “Inner Editor Container”, that is created by the ClojureScript editor functionality when the user elects to edit or create a page.

Within the “Inner Editor Container” there is a:

  • Editor Header that contains an editable title, editable tags, a button bar and perhaps some other information.
  • Editor where editing of the main content occurs.
  • Preview that shows a real-time preview of the main content as it is entered and modified.

The “Editor Header” should never scroll no matter how long the contents of the “Editor” or “Preview” sections are.

The “Editor” section should occupy the full verical distance between the “Editor Header” and the bottom of the view port. When it is too long to display all at once, it should scroll in the “y” direction.

Once laid out, the “Editor” section should not be re-sizeable.

The “Preview” section is similar to the “Editor” but is not editable. It may be of different length since the layout of the final contents of the preview may be longer or shorter than the “Editor.”

The “Editor” and “Preview” should scroll independently. Perhaps some day the scrolling between these two sections will by sychronized programattically.

The layout has been tested to perform as explained on Safari, Firefox, Opera, and Brave browsers.

Implementation in CWiki

Although the experimental project works as desired, copying its operation to CWiki has been problematic. At the moment, the layout mostly works as intended. However, for some reason, it is still possible for the “Window Header” to scroll out of view when editing long posts.

Even though transfer of behavior to another program has not yet been successull, I thought it would be a good idea to just go ahead and publish the experimental project since it does work.

I will post an update when I get CWiki to work as desired.

Update - 1 Nov 2018

Turns out that not allow of the CSS for the layout was included when building up the layout for the editor. It was split across two selectors in CWiki – a relic from earlier development – and one of the selectors was not included for the editor. The two CSS selectors have now been combined. The layouts work correctly for the reading view and the editor across all of the browsers tests. Whew!