> For the complete documentation index, see [llms.txt](https://docs.annoto.net/guides/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.annoto.net/guides/annoto-platform/annoto-widget/rich-text-editor-functionality.md). # 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) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.annoto.net/guides/annoto-platform/annoto-widget/rich-text-editor-functionality.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.