Switching list formatting on or off

When an HTML document initially is filled with content by typing text, the content is not formatted as list. To reach list formatting for parts of a document the user could

  1. start list formatting and then type content in the form of list items as needed or
  2. type in content and then switch on list formatting for the recently typed paragraphs

While the first case is comparably easy to achieve, both cases require a simple toggle functionality to switch list formatting on or off.

Basic approach

Such list toggle functionality basically this is achieved by

  1. detecting whether or not the required list formatting is present for a given text portion
  2. if list formatting is present, switch list formatting off
  3. if list formatting is not present (or not present as required), switch list formatting on

Method toggleList

Above scheme is implemented with method toggleList in class SHTMLEditorPane. Method toggleList finds out the parent element of a selected text portion. It then uses method switchOn to determine whether or not list formatting is already present in the selection inside the parent element. If method switchOn 'decides' to switch on list formatting (returns true that is), method toggleList uses method listOn to switch on list formatting. Otherwise list formatting is turned off by calling method listOff.

Difficulties

Up to here the solution sounds rather simple. In detail however, some difficulty is contained in the way how existing list formatting is to be changed. There are two cases we need to look at in more detail:

  1. list formatting is to be switched off for only parts of an existing list
  2. list formatting is to be switched on for one or more lists having mixed list formatting

Splitting lists

The first case above requires to split an existing list into up to three sections: The list remaining at the beginning of the selection, the actual selection for which list formatting is to be switched off and the list part possibly following the selection.

Method listOff splits a list by iterating through all list items in three steps. In the first step, it generates HTML for the list portion remaining unchanged and creates a new list end tag at the start of the selection to mark the start of the list split.

Secondly it continues iterating through the list items belonging to the selection generating HTML code with <li> tags removed.

Finally a new list start tag is created to mark the end of the split and iteration is continued over the remaining portion of the original list generating HTML code for the remaining list elements.

The resulting HTML code is inserted into the document replacing the 'old' part.

Merging lists

The second case above requires to merge different list formattings to one new list formatting. In addition, possible list formatting preceding or following the selection has to be split as described in the previous paragraph.

Method listOn merges lists by iterating through all list items and adjusts list start and end tags, merging and splitting lists as needed. <li> start and end tags are inserted if necessary.

The resulting HTML code is inserted into the document replacing the 'old' part.