feat: add docs for emmet

Author: devvaannsh

docs/03-editing-text.md

@@ -9,6 +9,30 @@ This section provides an overview of the core text and code editing features in
 
 ---
 
+## Emmet
+**Coming Soon...**
+
+### Emmet in Markup Languages
+In **HTML**, **PHP** or HTML-like files such as **JSP**, when you type a valid Emmet abbreviation (for example: `ul>li`, `p`, or `!`), **Phoenix Code** displays a code hint with the abbreviation text and an Emmet icon. This icon indicates that the suggestion comes from Emmet. When you select the Emmet hint, the abbreviation is expanded into its full code snippet.
+<VideoPlayer 
+  src="https://docs-images.phcode.dev/videos/editing-text/emmet-html.mp4"
+/>
+
+### Emmet in Stylesheet Languages
+Emmet also works in stylesheets (CSS, SCSS, Less). When you type an Emmet-expandable property, a list of default code hints appears with the Emmet suggestion at the top.
+<VideoPlayer 
+  src="https://docs-images.phcode.dev/videos/editing-text/emmet-css.mp4"
+/>
+
+### Enabling/Disabling Emmet
+To enable or disable the **Emmet** feature, go to `Edit` > `Emmet`.
+
+![Toggle Emmet feature](./images/editingText/toggle-emmet.png "Toggle Emmet")
+
+Alternatively, you can also toggle the **Emmet** feature by updating the `emmet` property in the preferences file. [Click Here](#editing-preferences) to read on how to edit the preferences.
+
+---
+
 ## Multi Cursor
 Using **Multi-Cursor**, you can place multiple cursors in different locations, allowing you to edit text simultaneously. This feature is especially useful for making quick, consistent changes across multiple lines or sections of a file.