# 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](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/d028e19d6653e280e37cf9b72d389834dd5ad112/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](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/25fd8d71732e9ed220ac6424bb0f5aa1ebb535b7/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](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/8f9483478acdef72edb7821872b2bf9bd66ca6f6/image.png)

![image.png](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/b6ffe8feb17beba64e7b5af221fe228d9584cb5d/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](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/e610bd734bed4a5f84ac82704f067634c6747e70/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](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/de28cc68e053feb613a2ce115d1dc90d4e87514d/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](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/23ad238cf7aae04a6bd4f40ebc9aaede242eb272/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](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/ec4c32bfc596303e535638ed0f4bb9c4f589d65e/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](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/454b229af2388cfd011b4b3223bb080b71ecd4b9/image.png)

* The popup editor should close
* Math equation should be rendered

![image.png](https://d2cxucsjd6xvsd.cloudfront.net/public/team/328c9a7a7d5703ab2b967ef5cbf646eea75aae00/attachment/1263bb81c3e6381ec4dfed763e06e8e1447e5b3e/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)