Editor with widgets: Difference between revisions

no edit summary
No edit summary
Line 1: Line 1:
== Propose==
== Propose==


The target of the article is to specify the behaviour of mozilla editor in case of it using in containters with contentEditable attribute and with widgets inside of the editing field.
The target of the article is to specify the behavior of Mozilla editor in case of it using in containers with contentEditable attribute and with widgets inside of the editing field.


==Application area==
==Application area==
Line 7: Line 7:
# Development gecko based WYSIWYG XForms editors. An example of WYSIWYG XForms editor is Microsoft Office InfoPath.
# Development gecko based WYSIWYG XForms editors. An example of WYSIWYG XForms editor is Microsoft Office InfoPath.
# Editor of not fully structured forms.
# Editor of not fully structured forms.
Необходимость в таких формах возникает при формировании Clinical Documents.
Необходимость в таких формах возникает при формировании Clinical Documents.




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




Line 18: Line 19:




==Widgets in
==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 editing fields===
# if the caret is directly before/after the widget then instead of next right/left caret's position the focus is on the widget.
# if the caret is directly before/after a widget then pressing of delete/backspace key is removing the widget
# if the widget has focus then pressing of delete/backspace key is removing the widget
# widget has to receive all events (onclick, onchange etc)
# if widget has focus or widget is in the editor's selection then it is possible to copy (cut) the widget to clipboard and paste it to other place of the editing field or other field
 
===SELECT===
# 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.
# mouse click on widget's text field should move focus to it and open widget's menu
# double click should open and close widget's menu
 
 
===BUTTON===
# if the button has focus and widget has onclick handler then pressing enter key should perform onlick handler
# if button has no focus then mouse click on button should move focus to button
# double click on button moves focus to button and performs  onclick handler
 
===INPUT type="text"===
# 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
# 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.
# if caret is in the widget then pressing end/home key should move caret to
the last/first position of the field's content
# if caret is in the widget then pressing delete/backspace key can remove only field's content. If content is empty then nothing happens.
# 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.
# when the focus leaves the text field then onchange handler should be performed
# double click and click on text field should moves the focus to widget
 
 
===INPUT type="radio"===
# if the widget has focus then pressing space key sets the value of 'checked' attribute to 'true'
# double click and click on the widget moves focus to widget and sets the value of 'checked' attribute to 'true'
# if the widget has focus then pressing delete/backspace key the widget should be removed
 
===INPUT type="radio" checked===
# if the widget has focus then pressing space key sets the value of 'checked' to inverse value
# ouble click and click on the widget moves focus to widget and sets the value of 'checked' attribute to inverse value
# if the widget has focus then pressing delete/backspace key the widget should be removed
 
==Editor with widgets behavior==
===TABLE===
# if in the cell there is only one widget  then cell is considered to be with content (not empty)
 
===TABBING===
#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===
# text and widgets can be selected by mouse or keyboard
# if widgets are into the selection then they should change visual presentation
# widgets in selection should be copied, cut, pasted as part of the selection
 
 
=== SPAN editable='false' inside editable content===
# span can be removed
# span can't have focus but widgets in span can have focus
# if span is inside selection and try to remove selection then content of the selection will be removed with span (see bullet 1)
# span can't be copied into clipboard
# if caret is directly before/after the span then pressing right/left key should move caret directly after/before span.
# 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.