HTMLTextEditor User Experience Documentation

Author: Jindrich Dinga

1. Introduction

This document is the user experience specification for the JavaFX HTML Text Editor control.

2. Overview

HTML Text Editor (aka WYSIWYG Editor) is a UI control that provides users with an editing interface which allows them to see the content how it will be displayed in a web browser.

HTML Text Editor control serves for three purposes::

creating/editing a web page (e.g. Wiki),
commenting an article/blog post, and
sending/displaying formatted text in an email or chat client.

In these days, there are a lot of various WYSIWYG Editors available on the Internet. Based on our research, we have identified a set of basic features and their actions that the HTML Text Editor control should provide. These are as follows:

Fundamental Features - this includes basic actions such as Cut, Copy, and Paste. In addition to these, users are also allowed to Undo and Redo changes.
Styling - allows users to define Font Family, Font Size, Style (Paragraph, Heading 1, 2, ...), and Character Style (Bold, Italic, Underline, Strikethrough). It also allows users to define Text Alignment (Left, Center, Right, Justify), Indent and Outdent,Bulleted and Numbered Lists, and insert a Horizontal Rule.
Colors - allows users to specify Text Color and Background Color.
Linking - allows users to easily Insert Hyperlink and Remove Hyperlink (Unlink).

Next generation of HTML Text Editor control should provide users with more advanced features/actions such as:

Advanced Styling - allows users to display text as Superscript or Subscript, and Clear Styles.
Inserting Rich Content - allows users to Insert File, Insert Video, Insert Picture, Insert Table, Insert Special Character, andInsert Form Controls.
Additional Features - includes features such as Find and Find and Replace. In addition to these, it also includes Print,Maximize/Fullscreen, Show HTML Source, and Insert Anchor.

3. Interaction Design

This section describes actions that are mentioned in Basic Features set in more details. Please note that each action is represented in the HTML Text Editor's Toolbar as an icon. Hovering over each icon will show the associated tooltip.

The following picture shows a wireframe of HTML Text Editor Control.

figure 1 - Wireframe of HTML Text Editor Control (please note that the final design will be provided by the Visual Design Group)

Actions and their grouping

Please note that all icons listed below are just placeholders. Final icons will be provided by the Visual Design Group.

1st group includes: Cut, Copy, Paste \| Undo, Redo
Cut		This action removes selected area and place it to the clipboard so users can paste it to another place. It has two states: enabled - area is selected, and disabled. Tooltip: Cut Shortcut: Ctrl+X (Cmd+X)
Copy		This action makes a copy of selected area and place it to the clipboard so user can paste it to another place. It has two states: enabled - area is selected, and disabled. Tooltip: Copy Shortcut: Ctrl+C (Cmd+C)
Paste		This action pastes whatever is in the clipboard, right after the I-beam cursor. It has two states: enabled - something is in the clipboard, and disabled. Tooltip: Paste Shortcut: Ctrl+V (Cmd+V)
Undo		Everytime this action is invoked, it reverts changes one step back. It has two states: enabled - there has been a change made to original of the document, and disabled. Tooltip: Undo Shortcut: Ctrl+Z (Cmd+Z)
Redo		Everytime this action is invoked, it reverts changes one step forward. It has two states: enabled - an action has been reverted back, and disabled. Tooltip: Redo Shortcut: Ctrl+Y (Cmd+Shift+Z)
2nd group includes: Styles, Font Family, Font Size \| Bold, Italic, Underline, Strikethrough \| Align Left, Center, Align Right, Justify\| Bulleted List, Numbered List \| Outdent, Indent \| Text Color, Background Color \| Clear Styles
Styles		This action allows users to choose style of the text. When clicked it opens a list with the following choices: Paragraph, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6. Tooltip: Styles Nice to have: It would be nice, if we could show an accurate preview of styles in the drop-down.
Font Family		This action allows users to change the font family. Ideally, we should be able to read fonts from the user's system, however, if this is not possible from some reason we should display the following list of "browser safe fonts": Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Lucida Console, Palatino, Tahoma, Times New Roman, Trebuchet MS, and Verdana. Tooltip: Font Family Nice to have: It would be nice if we could show an accurate preview of font families in this component.
Font Size		This action allows users to change size of the font. Predefined sizes are as follows: 8pt, 10pt, 12pt, 14pt, 18pt, 24pt, and 36pt. Tooltip: Font Size Mapping: H1 - 24pt H2 - 18pt H3 - 14pt H4, P - 12pt H5 - 10pt H6 - 8pt Nice to have: It would be nice if we could show an accurate preview of font sizes in this component.
Bold		This action allows users to change/type the text to/in bold. Users can select the text and change it to bold or invoke this action and start typing - the new text will be displayed in bold. Tooltip: Bold Shortcut: Ctrl+B (Cmd+B)
Italic		This action allows users to change/type the text to/in italic. Users can select the text and change it to italic or invoke this action and start typing - the new text will be displayed in italic. Tooltip: Italic Shortcut: Ctrl+I (Cmd+I)
Underline		This action allows users to change/type underlined text. Users can select the text and underline it or invoke this action and start typing - the new text will be underlined. Tooltip: Underline Shortcut: Ctrl+U (Cmd+U)
Strikethrough		This action allows users to change/type strikethrough text. Users can select the text and make it strikethrough or invoke this action and start typing. Tooltip: Strikethrough
Align Left		When clicked, the text, in which the I-beam cursor is placed, is aligned to left. Tooltip: Align Left
Center		When clicked, the text, in which the I-beam cursor is placed, is centered. Tooltip: Align Center
Align Right		When clicked, the text, in which the I-beam cursor is placed, is aligned to right. Tooltip: Align Right
Justify		When clicked, the text, in which the I-beam cursor is placed, is justified. Tooltip: Justify
Bulleted List		This action creates a bulleted list. Tooltip: Bulleted List
Numbered List		This action creates a numbered list. Tooltip: Numbered List
Outdent		This action allows users to outdent the text. It has two states: enabled - the I-beam cursor is placed in text that is indented, and disabled. Tooltip: Outdent Shortcut: Ctrl+SHIFT+M
Indent		This action allows users to indent the text. Tooltip: Indent Shortcut: Ctrl+M
Text Color		This action allows users to change color of the text. Users can select the text and change its color or select a color and start typing using the new color. Once clicked, it triggers Color Palette Chooser. Tooltip: Select text color
Background Color		This action allows users to change background color of the text. Users can select the text and change its background color or select a color and start typing using the new background color. Once clicked, it triggers Color Palette Chooser. Tooltip: Select background color
Clear Styles		This action clear styles from the selected area. It has two states: enabled - area is selected, and disabled. Tooltip: Clear Styles Please note that this feature will be part of next version of JavaFX HTML Text Editor control.
3rd group includes: Horizontal Rule \| Insert Hyperlink, Remove Hyperlink
Horizontal Rule		This action inserts a horizontal line upon click. Its width depends on place where it is inserted. Tooltip: Insert Horizontal Ruler
Insert/Edit Hyperlink		This action allows users to insert/edit a hyperlink to/in the document. Once clicked, it triggers this dialog. Tooltip: Insert/Edit Link Please note that this feature will be part of next version of JavaFX HTML Text Editor control.
Remove Hyperlink		When the I-beam cursor is next to a text that links somewhere or such text is selected, it allows users to remove the link without removing the text. It has two states: enabled - I-beam cursor is next to a hyperlink or a hyperlink is selected, and disabled. Tooltip: Unlink Please note that this feature will be part of next version of JavaFX HTML Text Editor control.

Dialogs

Color Palette Chooser

This pop-up window opens upon click on Text Color or Background Color drop downs. It allows users to pick a certain color that will be used for text or background.

figure 2 - Wireframe of Color Palette Chooser (please note that the final design will be provided by the Visual Design Group)

After users click on the desired color, the pop-up window is closed. The pop-up window can also be closed by pressing Esc button or by clicking outside the window.

Insert/Edit Hyperlink

This is a pop-up window that opens upon click on Insert/Edit Hyperlink action.

figure 3 - Wireframe of Insert/edit hyperlink (please note that the final design will be provided by the Visual Design Group)

Users are allowed to insert a hyperlink in two ways:

select a text and click Hyperlink icon

window pops-up
Text is pre-filled with the selected text
enter the hyperlink
select the target
press OK
text becomes underlined and points to the desired location

click Hyperlink icon

window pops-up
enter the text
enter the hyperlink
select the target
press OK
text is inserted into the page (if no title has been entered, the hyperlink is inserted into the page)

Target offers the following choices:

_blank - opens the linked document in a new window or tab
_parent - opens the linked document in the parent frameset
_self - opens the linked document in the same frame as it was clicked
_top - opens the linked document in the full body of the window

To edit a hyperlink, users can select the hyperlink or place the I-beam cursor next to it and click Hyperlink icon. Upon click, Insert/Edit Hyperlink dialog pops-up with pre-filled Title and/or Hyperlink text fields.

Keyboard Support

For keyboard support see Toolbar UE spec and TextArea UE spec.