From debb193402a81ea992b22ea8c8790254970c98d9 Mon Sep 17 00:00:00 2001 From: superninjaX2 Date: Thu, 28 Nov 2024 22:41:22 +0200 Subject: [PATCH] added some documentation --- docs/global-apis/ace.md | 27 ++++++++++++----- docs/helpers/input-hints.md | 57 +++++++++++++++++++++++++++++------ docs/helpers/theme-builder.md | 40 ++++++++++++++++++------ 3 files changed, 96 insertions(+), 28 deletions(-) diff --git a/docs/global-apis/ace.md b/docs/global-apis/ace.md index 4d33c9f..2a441b3 100644 --- a/docs/global-apis/ace.md +++ b/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. diff --git a/docs/helpers/input-hints.md b/docs/helpers/input-hints.md index dc20cec..78f9419 100644 --- a/docs/helpers/input-hints.md +++ b/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). diff --git a/docs/helpers/theme-builder.md b/docs/helpers/theme-builder.md index fa12848..d2043d9 100644 --- a/docs/helpers/theme-builder.md +++ b/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).