Rich Text Editor Functionality

The rich text editor enables users to create and format content using a wide range of styling options. It includes features like bold, italics, underline, headings, bullet points, and numbered lists. Users can also add links to enrich their content.

This guide explains how to use these tools in Annoto, making it easier to design visually engaging text.

Formatted Numbered List

Steps:

1. Enter '1.' and press space

2. Enter some text

3. Press Shift+Enter

4. Enter some more text

5. Press Shift + Enter, two times

Result:

1. A formatted numbered list should be created

2. When Shift + Enter pressed twice the formatted list mode should exit back to regular text

image.png

Bullet List

Steps:

1. Enter '*' or '-' and press space

2. Enter some text

3. Press Shift+Enter

4. Enter some more text

5. Press Shift + Enter, two times

Result:

1. A formatted bullet list should be created

2. When Shift + Enter pressed twice the formatted list mode should exit back to regular text

image.png

Hyperlink

Steps:

1. Write some text giving the hyperlink a name

2. Select the URL of choice and copy it

3. Select the text to be a hyperlink

4. Press Ctrl + V or Cmd + V (on Mac) to past the URL link

Result:

1. The selected text should become a hyperlink

2. Other text should remain regular

image.png

image.png

Emoji

Steps:

type one of the special character combinations and press space

Some examples:

:)

;)

:@

<3

d:

Result:

the characters should be replaces by an emoji

image.png

Bold, Italic and highlighted text

Steps:

1. Enter some text

2. Enter '**' type text to be bold, and enter a closing '**'

3. Type some more text

4. Enter '*' type text to be Italic, and enter a closing '*'

5. Type some more text

6. Enter '==' type text to highlight, and enter a closing '=='

7. Type some more text

Result:

1. Text that was entered between **some bold text** should be bold

2. Text that was enterd between *some italic text* should be Italic

3. Text that was enterd between ==highlighted text== should be highlighted

4. Other text is regular

image.png

Quatted Message

Steps:

1. Enter '>' and press space

2. Enter some text

3. Press Shift+Enter

4. Enter some more text

5. Press Shift + Enter, two times

Result:

1. A formatted text should be created

2. When Shift + Enter pressed twice the formatted text mode

image.png

History functionlity

Steps:

1. Enter some formatted text using steps 1-6

2. Press Ctrl+Z and Ctrl+Shift+Z (Cmd instead of Ctrl for MAC) to travel in history changes

Result:

Undo and redu functionality using the shortcuts should work

Math functionality

Steps:

Enter '$' character

$

Results:

1. Math editor popup should open

image.png

2. Focus should be placed in the editor text area

• Copy past LaTeX equation

\sum{\vec{F} } = \vec{0} \Rightarrow \frac{d\vec{v}}{dt} = 0 

• Hit 'Enter' keyboard and click on V button

image.png

• The popup editor should close

• Math equation should be rendered

image.png

3. Clicking on x button or 'Esc' Keyboard key should close the popup and allow entering regular text for exampl $12

4. The 'V' button should be disabled (until text is entered)