added some documentation for the ace and theme builder and inputhints

docs/global-apis/ace.md

@@ -1,15 +1,26 @@
-# Ace
+# Using the Ace Global API in Acode
 
-In the context of Acode plugins, the Ace Global API refers to the Ace editor used within the Acode environment.
+**Introduction**
 
-:::info
-This api is not the instance of ace editor. For that check out [editorManager](./editor-manager)
-:::
+Acode is built on the  Ace editor to provide a robust code editing experience. The Ace Global API offers a way to interact with the underlying Ace editor instance within the Acode environment.
 
-To explore the detailed documentation and capabilities of the Ace Global API, we recommend referring to the official Ace API documentation available [here](https://ajaxorg.github.io/ace-api-docs/modules/ace.html).
+**Key Points**
 
-## Examples
+* **Not the Raw Ace Instance:** The Ace Global API is not a direct reference to the current editor instance. For direct manipulation, use the `editorManager`.
+* **Official Ace API Reference:** For a comprehensive understanding of Ace's capabilities, refer to the official documentation: [https://ajaxorg.github.io/ace-api-docs/modules/ace.html](https://ajaxorg.github.io/ace-api-docs/modules/ace.html).
 
-```js {main.js}
+**Example: Including Language Tools**
+
+To enable language tools for a specific language, you can use the following code:
+
+```javascript
+// main.js
 ace.require("ace/ext/language_tools");
 ```
+
+**Additional Considerations**
+
+* **API Differences:** While the Ace Global API provides access to many Ace features, there might be limitations or differences compared to directly interacting with the raw Ace instance.
+* **Acode-Specific Functionalities:** Explore the Acode documentation to discover additional features and customizations related to the Ace editor that might be available through the Ace Global API or other Acode-specific mechanisms.
+
+By understanding the nuances of the Ace Global API and leveraging the official Ace documentation, you can effectively customize and extend Acode's editing capabilities.

docs/helpers/input-hints.md

@@ -1,17 +1,54 @@
 # Input Hints
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+**Functionality:**
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+* Generates a list of hints based on user input.
+* Displays matching hints as the user types.
+* Allows users to select a hint and populate the input field.
 
-## Contribute to the Documentation
+**Usage:**
+you import like this
+```javascript
+const inputHints = acode.require('inputHints');
+```
+then
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
+```javascript
+const inputHints = acode.require('inputHints');
 
-:::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
-:::
+const $input = document.getElementById("myInput");
+const hints = ["apple", "banana", "cherry"]; // Array of hint strings
+
+const handleSelect = (value) => {
+  console.log("Selected hint:", value);
+};
+
+const hintsComponent = inputhints($input, hints, handleSelect);
+
+console.log("Selected hint element:", hintsComponent.getSelected());
+console.log("Hint list container:", hintsComponent.container);
+```
+
+**Explanation:**
+
+1. **Import**: Import the `inputhints` function from its location.
+2. **Arguments**:
+   * `$input`: The HTMLInputElement representing the input field.
+   * `hints`: An array of hint strings or a callback function that generates hints dynamically.
+   * `onSelect`: (Optional) A callback function called when a user selects a hint.
+3. **Return Value**: The function returns an object with two properties:
+   * `getSelected()`: Returns the currently selected hint element (HTMLLIElement) or null.
+   * `container`: The HTMLUListElement representing the entire hint list container.
+
+**Key Functionalities:**
+
+* **Hint Generation**:
+   * If `hints` is a function, it's called to generate hints dynamically.
+   * Hints are filtered based on the user's input using regular expressions (case-insensitive).
+* **Hint Display**:
+   * Up to 100 hints are displayed at a time with pagination for longer lists.
+   * The hint list automatically positions itself below or above the input field based on available space.
+* **Hint Selection**:
+   * Users can select hints using the mouse or keyboard arrows.
+   * Selecting a hint populates the input field with the hint value and optionally calls the `onSelect` callback.
 
-For more information, see official [Guide](https://acode.app/plugin-docs).

docs/helpers/theme-builder.md

@@ -1,17 +1,37 @@
 # Theme Builder
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+**Theme Builder**
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+**Introduction**
 
-## Contribute to the Documentation
+To create a new theme for your application, you'll need to utilize the `ThemeBuilder` class provided by the `acode` library. This class offers a straightforward way to customize various aspects of your theme, from primary and secondary colors to font styles and more.
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
+**Basic Usage**
 
-:::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
-:::
+1. **Import the `ThemeBuilder` class:**
+   ```javascript
+   const ThemeBuilder = acode.require('themeBuilder');
+   ```
+2. **Create a new theme instance:**
+   ```javascript
+   const myTheme = new ThemeBuilder("MyDarkTheme", "dark");
+   ```
+   * **Theme Name:** The first argument, `"MyDarkTheme"`, is the name of your theme. It should be a descriptive name that reflects the theme's style.
+   * **Theme Mode:** The second argument, `"dark"`, specifies the base mode of the theme (either "light" or "dark").
+
+3. **Customize theme properties:**
+   ```javascript
+   myTheme.primaryColor = "#333";
+   myTheme.secondaryColor = "#666";
+   // ... other theme property customizations
+   ```
+   You can customize various theme properties, such as:
+   * `primaryColor`
+   * `secondaryColor`
+   * `textColor`
+   * `backgroundColor`
+   * `fontFamily`
+   * `fontSize`
+   * `fontWeight`
+   * // ... and many more
 
-For more information, see official [Guide](https://acode.app/plugin-docs).