8. Editing

Most editors are basically text editors with some facility to format. However, treating a page as just a mass of text makes editing unstable.

HTML is semantic, in that a page is not just formatted text, but a hierarchical structure of elements with text in them. However, those structures are defined by specially-formatted text, which means that a typing error while editing the file as text can break the structure. To get around this, some sort of visual editing paradigm is usually implemented to maintain elemental integrity in spite of what may be typed in.

I left the editing facility until late in the product development, in favour of getting the look-and-feel of the various pages types right. All our sites were originally maintained by me editing the XML data files. I then progressively built the management pages to take over more of the site administration, eventually getting to the editing page. It was obviously the most complex, and needed a lot of rules to govern its operation.

While the aim was always to maintain the hierarchical structure of the page, the initial design had too much emphasis on the structure to the point of almost hiding the content. While a paragraph of text was simple enough to recognise, the more formatting it contained, the more its visual coherence was lost as it became a vertical list of text boxes!

A more what-you-see-is-what-you-get visual take was required. It looked much like it does now, but with floating green boxes hovering over the end of each element, exactly like still exists with children listed in an element block. While this was a substantial improvement in that a page looked more like a page, the proliferation of little green boxes was still a distraction, in itself and in the their covering of part of the content. Even though I made a way of temporarily hiding the content of the green boxes, it still looked busy.

The final iteration was to make the floating boxes hidden until hovered over. This did mean that they could not include much beyond the name, mainly due to hovering over a box rendered later taking priority, meaning any controls in a box rendered just before another would never be accessible. The only control in them now is at the start of those that the children of the current element having a checkbox used for the multi-delete facility.

The common element across these three iterations was the element block where all the editing functionality is invoked. This encapsulates the fundamental principle of the editing process, being that once created, an element and any of its ancestors cannot be broken by a typing an incorrect character in it. There may be a nominal error, such as having an incorrect number of children, but they won't be broken per se. They will just be marked as in error, which is a rule applied rather than a fundamental fault in their structure.

The editing process is fractal, in that it appears and operates basically the same at each element level in the hierarchy. Each element has its idiosyncrasies, such as particular attributes or types and numbers of groups and children in them, but the way they are worked with is the same. The rudimentary element blocks are shown for each ancestor to the current element as well, so that the hierarchy is still obvious despite the flat nature of the visually rendering of the page.