Editor with widgets

From MozillaWiki
Jump to navigation Jump to search

Proposal

The target of the article is to specify the behavior of Mozilla editor containing HTML elements including HTML form controls.

Application area

Now editor is used in HTML authoring tools. With using HTML form controls will be possible to develope:

  1. authoring tools for WYSIWYG development data entry forms. An example of the tool is Microsoft Office InfoPath.
  2. authoring tools for semistructured (loosely structured) forms. As an example of application area of semistructured forms are clinical documents. Clinical document authoring tool can be used for developing clinical documents with providing easy-to-use interfaces.

The specification is corresponding with behavior of Microsoft Internet Explorer 6,7,8 and Microsoft Office InfoPath 2003.

Examples

  • Medical Document
  • Simple WYSIWYG XForms editors


Widgets in containers with contentEditable attribute

The common approach - the behavior of widgets is the same with the HTML specification. But in HTML widgets are in the static place and in the editor widgets is a part of editing text, it is possible to cut, copy and paste widgets by clipboard.


Common behavior for all type of widgets in editable area

  1. if the caret is directly before/after the widget, then pressing right/left arrow key instead of next right/left caret's position to focus on the widget
  2. if the caret is directly before/after a widget then pressing of delete/backspace key is removing the widget
  3. if the widget has focus then pressing of delete/backspace key is removing the widget

SELECT

  1. if the widget has focus then pressing down/up key should change current value of widget's text field from widgets list. When the last/first list's value is achieved then the following pressing up/down key has no affects.
  2. mouse click on widget's text field should move focus to it and open widget's menu
  3. double click should open and close widget's menu, i.e. action analogous to two single clicks is executed


BUTTON

  1. if button has no focus then mouse click on button should move focus to button and execute onclick handler

INPUT type="text"

  1. if caret is directly before/after the text field then pressing right/left key should move caret into widget's text field in the first/last position of the field's content. If the widget's content is larger then text field should be scrolled
  2. if caret is in the first/last position of the field's content then pressing left/right key moves caret to directly before/after the widget.
  3. if caret is in the widget then pressing delete/backspace key can remove only field's content. If content is empty then nothing happens.
  4. mouse click on text field moves focus to widget and moves caret on field's content. If mouse click is on the field but there is no content in this place then the caret moves to the last position of the content.
  5. double click and click on text field should moves the focus to widget

INPUT type="radio"

  1. double click and click on the widget moves focus to widget and sets the value of 'checked' attribute to 'true'
  2. if the widget has focus then pressing delete/backspace key the widget should be removed

INPUT type="checkbox"

  1. click on the widget moves focus to widget and sets the value of 'checked' attribute to inverse value
  2. double click on the widget moves focus to widget and sets the value of 'checked' attribute to inverse value twice (in fact the attribute doesn't change), i.e. action analogous to two single clicks is executed
  3. if the widget has focus then pressing Delete/Backspace key the widget should be removed

Editor with widgets behavior

TABLE

  1. if in the cell there is only one widget then cell is considered to be with content (not empty)

TABBING

  1. tabbing behavior should be in consistent with tabbing preferences (accessibility.tabfocus). The tab key is pressed then focus moves to the next element independently where widget is (editable or not content)

SELECTION

  1. text and widgets can be selected with mouse or keyboard
  2. if widgets are into the selection then they should change visual presentation
  3. widgets in selection should be copied, cut, pasted as part of the selection


SPAN editable='false' inside editable area

  1. span can be removed
  2. span can't have focus but widgets in span can have focus
  3. if span is inside selection and try to remove selection then content of the selection will be removed with span (see bullet 1)
  4. span can't be copied into clipboard
  5. if caret is directly before/after the span then pressing right/left key should move caret directly after/before span.
  6. when in multiline editable field Up/Down is pressed and in the next line under caret there is the span then caret should be moved to position directly before or after span (it depends on which place is closer).

This behavior is actual for medical documents and other not fully structured documents.

Example of email letter.

Bugs

Test on FF 3.5 RC1, Windows XP, Intel Atom

SELECT

  1. SELECT widget doesn't handle any events. As the result there is no popup menu (video)
  2. if cursor is directly after SELECT widget and Left key is pressed then all typed text will appears inside the widget (video)
  3. if in the element DIV with contentEditable='true' there is SPAN with contentEditable='false' and in SPAN there is SELECT widget then it is possible to move caret into SELECT with keyboard (video).

BUTTON

  1. if the caret is directly before/after the BUTTON widget then pressing delete/backspace key is editing the widget's content. If content is empty then widget is removed (video)

INPUT type="text"

  1. if to move the caret into text field with mouse and after then it is impossible to the field by pressing Right/Left keys. There is no problems to leave field if the caret is moved into field by pressing Right/Left keys (video).

INPUT type="checkbox"

  1. widget doesn't handle any events. As the result it is impossible to change the valued of checked attribute (video)
  2. if in the element DIV with contentEditable='true' there is SPAN with contentEditable='false' and in SPAN there is INPUT type=checkbox and the caret is directly after SPAN then caret disappears after pressing the Left key. After next pressing Left key the caret will appears directly before SPAN (video)

INPUT type="radio"

  1. widget doesn't handle any events. As the result it is impossible to change widget's state (video)

TABLE

  1. if in the table's cell there is only one widget the there is no way to move caret into cell


Common

  1. if in the element DIV with contentEditable='true' there is SPAN with contentEditable='false' and SPAN is not empty and the caret is directly before/after SPAN then the caret is appeared in non editable area after pressing Right/Left key. When caret returns back to editable area then it appears in the second position before/after SPAN (video)
  2. if in editable area there are 10-20 widgets then the significant performance degradation is occurred (tested on Intel Atom)
  3. in selected area BUTTON and INPUT widgets are not visual selected (video)
  4. visual selection is not cleared after selection for widget INPUT type=text (video)
  5. it is impossible to copy to clipboard widget INPUT type=text and all text area before the widget (video)