### Complete Example: Add, List, and Get Project Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/projects.md A comprehensive example demonstrating how to add a new project template, list all available projects, and retrieve the details of the newly added project. ```javascript const projects = acode.require('projects'); async function addNewProject() { const projectFiles = { 'index.html': '...', 'css/index.css': '/* CSS file */', 'js/index.js': '// JavaScript file', }; const iconSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUdwTORPJuRPJuNOJeRPJuNQJ+RPJuNOJuNPJuROJeRPJuNOJuRPJuRQJONPJuNPJeVQI+NPJeROJuNPJuZPJ+NOJuRPJuNPJkmKsooAAAAXdFJOUwA6h5uxKGh/60/VE8BBll8izqXdDHT3jnqTYwAAAQRJREFUGBl9wY22azAURtGFhMS/Vvu9/5veHeGMMrhzAvoPkqBHgWTRo4XE6ZEjqfSoImn0qCGpZQYuBpmaJMpMXESZSFLIfLioZQoSLzMCzYmMJ+lkXsBbVx0bmR546YosSGqBUheBbJEUuFgkLWROpuMsSHJklYznTKYiK2WaHwWsMiXZRxceZpkP2SQzGO1mKGQmsigTwWvXQZSJZIVMDZ12K9QyBdks0wBDuUjvVw00MjNZJ1OxmWc2o0zHLkhynl9OUuDQyoS+jGx8PfZfSS2HXrvg6unVatdzcLrlOIy6NXIog26Ekj9+qlqdtNXkOSua/qvNt28Kbq1xfL/HuPLjH4f8MW+juHZUAAAAAElFTkSuQmCC'; projects.set('newProject', async () => projectFiles, iconSrc); // List all projects const projectList = projects.list(); console.log('Project List:', projectList); // Get details of the newly added project const newProjectDetails = projects.get('newProject'); console.log('New Project Details:', newProjectDetails); } addNewProject(); ``` -------------------------------- ### Define Python LSP Server with Pip Installer Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/lsp.md This example shows how to define a Python language server using the `pip` installer. Ensure the `python-lsp-server[all]` package is installed via pip. ```javascript const pythonServer = lsp.defineServer({ id: "python-pylsp", label: "Python (pylsp)", languages: ["python"], command: "pylsp", args: [], checkCommand: "command -v pylsp", installer: lsp.installers.pip({ executable: "pylsp", packages: ["python-lsp-server[all]"], }), }); lsp.upsert(pythonServer); ``` -------------------------------- ### Basic Context Menu Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/interface-apis/context-menu.md A simple example demonstrating how to create, show, and hide a context menu with items and a selection handler. ```javascript const menu = contextmenu('Menu Content', { top: 50, left: 100, items: [ ['Item 1', 'action1'], ['Item 2', 'action2'] ], onselect(action) { console.log('Selected:', action); } }); // Show the menu menu.show(); // Hide the menu menu.hide(); ``` -------------------------------- ### Install a Plugin Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/global-apis/acode.md Install an Acode plugin from the registry using `acode.installPlugin`, providing the plugin ID and the installer plugin name. This requires user consent and is available from version code 954. ```javascript await acode.installPlugin("com.example.pluginid", "mypluin.id"); ``` -------------------------------- ### Complete Theme Configuration Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/theme-builder.md A comprehensive example demonstrating the configuration of a 'ModernDark' theme, including color palette, typography, and specific element styles. ```javascript const myCustomTheme = new ThemeBuilder("ModernDark", "dark"); // Color Configuration myCustomTheme.primaryColor = "#2196F3"; myCustomTheme.secondaryColor = "#FF4081"; myCustomTheme.textColor = "#FFFFFF"; myCustomTheme.backgroundColor = "#121212"; // Typography myCustomTheme.fontFamily = "Roboto, sans-serif"; myCustomTheme.fontSize = "16px"; myCustomTheme.fontWeight = "400"; // Element-Specific Styles myCustomTheme.buttonBackgroundColor = "#2196F3"; myCustomTheme.buttonTextColor = "#FFFFFF"; myCustomTheme.borderColor = "#333333"; ``` -------------------------------- ### Toast Component Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/toast.md A comprehensive example demonstrating how to require and use the toast component, including both the required method and direct global access. ```javascript const toast = acode.require('toast'); tost('Hello, World!', 3000); // or window.toast('Hello, World!', 3000); ``` -------------------------------- ### Complete Settings Page Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/page.md A comprehensive example demonstrating the creation of a plugin settings page, including header buttons, form elements, and custom show/hide logic with action stack integration. ```javascript function createSettingsPage() { // Create page elements const backButton = tag('span', { className: 'icon back', dataset: { action: "back-btn" }, onclick: () => settingsPage.hide() }); const saveButton = tag('span', { className: 'icon save', dataset: { action: "save-btn" }, onclick: () => {console.log("save settings")} }); // Initialize page const settingsPage = page('Plugin Settings', { lead: backButton, tail: saveButton }); // Add content const form = tag('form'); const input = tag('input', { type: 'text', value: 'Default value' }); form.append(input); settingsPage.appendBody(form); settingsPage.show = () => { // to have proper behaviour for mobile back button press, check actionStack doc for more const actionStack = acode.require("actionStack"); actionStack.push({ id: "some_id", action: settingsPage.hide, }); app.append(settingsPage); }; // Show the page settingsPage.show(); } ``` -------------------------------- ### Install Dependencies with bun Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Install project dependencies using bun. Navigate to your plugin template folder before running this command. ```sh $ bun install ``` -------------------------------- ### Example plugin.json Structure Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/plugin-essentials/manifest.md This is a comprehensive example of a plugin.json file, demonstrating the various attributes and their expected values for a typical Acode plugin. ```json { "id": "com.example.plugin", "name": "Example Plugin", "main": "dist/main.js", "version": "1.0.0", "readme": "readme.md", "icon": "icon.png", "files": ["worker.js"], "minVersionCode": 292, "price": 0, "license": "MIT", "keywords": ["foo","bar"], "changelogs": "changelogs.md", "author": { "name": "Example Author", "email": "example@email.com", "url": "https://example.com", "github": "example" } } ``` -------------------------------- ### Example Acode Plugin with Keyboard API Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/keyboard.md A complete plugin example demonstrating how to use the Keyboard API to listen for keyboard visibility changes and implement custom shortcuts. ```javascript class KeyboardPlugin { constructor() { const keyboard = acode.require('keyboard'); // Add keyboard show/hide listeners keyboard.on('keyboardShow', () => { acode.alert('Keyboard shown'); }); keyboard.on('keyboardHide', () => { acode.alert('Keyboard hidden'); }); // Listen for Ctrl+S shortcut keyboard.on('key', (e) => { if (e.key === 's' && e.ctrlKey) { acode.alert('Saving file...'); } }); } } if (window.acode) { const acodePlugin = new KeyboardPlugin(); acode.setPluginInit("keyboard-example", (baseUrl, $page, { cacheFile, cacheFileUrl }) => { if (!acodePlugin.initialized) { acodePlugin.initialized = true; // Initialize plugin } }); } ``` -------------------------------- ### Example: File Search Palette Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/palette.md Demonstrates creating a file search palette by providing functions for generating file lists and handling selections. This example shows a practical implementation for searching files within a project. ```javascript const palette = acode.require('palette'); // Generate list of files function getFileList() { return [ 'src/components/header.js', 'src/pages/home.js', 'src/utils/helpers.js', 'package.json', 'README.md' ]; } // Handle file selection function handleFileSelect(filePath) { console.log(`Opening file: ${filePath}`); // Add logic to open the selected file } // Create the palette palette( getFileList, handleFileSelect, 'Search files...' ); ``` -------------------------------- ### Basic Select Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/dialogs/select.md A fundamental example demonstrating how to open a select dialog with a title and a list of simple string options. The result will be the value of the chosen option. ```javascript const select = acode.require('select'); const result = await select('Pick a color', ['Red', 'Green', 'Blue']); ``` -------------------------------- ### Full Prompt Example with Validation Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/dialogs/prompt.md An example demonstrating the full usage of the prompt component, including setting up a regular expression for email validation and passing it along with other options to the prompt function. ```javascript const prompt = acode.require('prompt'); const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; const options = { match: emailRegex, required: true, placeholder: 'Enter your email', test: (value) => emailRegex.test(value), }; const userEmail = await prompt('What is your email?', '', 'email', options); ``` -------------------------------- ### Install Dependencies with pnpm Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Install project dependencies using pnpm. Navigate to your plugin template folder before running this command. ```sh $ pnpm install ``` -------------------------------- ### Confirm Usage Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/dialogs/confirm.md Example demonstrating the confirm component to ask for user confirmation before performing an action, with toast messages for feedback. ```javascript const confirm = acode.require('confirm'); let confirmation = await confirm('Warning', 'Are you sure?'); if (confirmation) { window.toast('File deleted...', 4000); } else { window.toast('File not deleted...', 4000); } ``` -------------------------------- ### Install Dependencies with npm Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Install project dependencies using npm. Navigate to your plugin template folder before running this command. ```sh $ npm install ``` -------------------------------- ### Install Acode Plugin CLI Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Install the Acode Plugin CLI using cargo if you have Rust installed. ```bash cargo install acode-plugin-cli ``` -------------------------------- ### Install Dependencies with yarn Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Install project dependencies using yarn. Navigate to your plugin template folder before running this command. ```sh $ yarn install ``` -------------------------------- ### Example: Adjust Plugin UI on Resize Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/window-resize.md Demonstrates how to use `resizeStart` and `resize` events to manage UI transitions and layout adjustments in response to window resizing. ```javascript class MyPlugin { constructor() { this.container = document.createElement('div'); this.setupResizeHandling(); } setupResizeHandling() { // Handle initial resize windowResize.on('resizeStart', () => { // Prepare UI for resize this.container.style.transition = 'none'; }); windowResize.on('resize', () => { // Update UI after resize this.container.style.transition = 'all 0.3s'; this.updateLayout(); }); } updateLayout() { const windowWidth = window.innerWidth; if (windowWidth < 768) { this.container.classList.add('compact'); } else { this.container.classList.remove('compact'); } } } ``` -------------------------------- ### `installPlugin(pluginId: string, installerPluginName: string): Promise` Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/global-apis/acode.md Installs an Acode plugin from the registry by its ID, requiring user consent. The `installerPluginName` is the ID of the plugin performing the installation. ```APIDOC ## `installPlugin(pluginId: string, installerPluginName: string): Promise` ### Description Installs an Acode plugin from the registry by its ID, requiring user consent. The `installerPluginName` is the ID of the plugin performing the installation. ### Parameters #### Path Parameters - **pluginId** (string) - Required - The ID of the plugin to install. - **installerPluginName** (string) - Required - The ID of the plugin initiating the installation. ### Requirements Added in `v1.10.6`, versionCode: `954`. ### Request Example ```js await acode.installPlugin("com.example.pluginid", "mypluin.id"); ``` ``` -------------------------------- ### Install AcodeX Server on Termux Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/tutorials/how-to-run-java.md Downloads and installs the AcodeX server script. This enables communication between Acode Editor and Termux. ```sh curl -sL https://raw.githubusercontent.com/bajrangCoder/acode-plugin-acodex/main/installServer.sh | bash ``` -------------------------------- ### Start Development Server with npm Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Initiate a development server using npm. This server watches for file changes and automatically rebuilds the plugin zip file. ```sh $ npm run dev ``` -------------------------------- ### Get Specific Project Details Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/projects.md Use the `get(name)` method to fetch the files and icon for a specific project template by its name. ```javascript const projectDetails = projects.get('html'); console.log(projectDetails); // Output: // { // files: { // 'index.html': '...', // 'css/index.css': '', // 'js/index.js': '', // }, // icon: 'html-project-icon', // } ``` -------------------------------- ### Start Development Server with bun Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Initiate a development server using bun. This server watches for file changes and automatically rebuilds the plugin zip file. ```sh $ bun run dev ``` -------------------------------- ### Install Java Development Kit (OpenJDK 17) Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/tutorials/how-to-run-java.md Installs the OpenJDK 17, which is required for compiling and running Java code. This command is run within Termux. ```sh pkg install openjdk-17 ``` -------------------------------- ### Full Color Picker Usage Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/dialogs/color-picker.md This example demonstrates the complete process of requiring the colorPicker, opening it with a default red color, and logging the selected color to the console. ```javascript const colorPicker = acode.require('colorPicker'); let selectedColor = await colorPicker('#ff0000'); console.log(`Selected Color: ${selectedColor}`); ``` -------------------------------- ### Color Constructor Examples Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/color.md Demonstrates creating Color instances from different valid CSS color string formats including hex, rgb, and color names. ```javascript const red = Color("#ff0000"); const blue = Color("rgb(0,0,255)"); const green = Color("green"); ``` -------------------------------- ### Define LSP Bundle with Custom Hooks Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/lsp.md This snippet demonstrates how to define a bundle with custom hooks for `getExecutable`, `checkInstallation`, and `installServer`. These hooks allow you to control server behavior during installation and execution. ```javascript const bundle = lsp.defineBundle({ id: "my-toolchain", label: "My Toolchain", servers: [htmlServer, cssServer], hooks: { getExecutable(serverId, manifest) { return manifest.launcher?.install?.binaryPath || manifest.launcher?.install?.executable || null; }, async checkInstallation(serverId, manifest) { return { status: "present", version: null, canInstall: true, canUpdate: true, }; }, async installServer(serverId, manifest, mode) { console.log("install", serverId, mode); return true; }, }, }); lsp.upsert(bundle); ``` -------------------------------- ### Start Development Server with yarn Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Initiate a development server using yarn. This server watches for file changes and automatically rebuilds the plugin zip file. ```sh $ yarn dev ``` -------------------------------- ### Start Development Server with pnpm Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Initiate a development server using pnpm. This server watches for file changes and automatically rebuilds the plugin zip file. ```sh $ pnpm dev ``` -------------------------------- ### Alert Example with Callback Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/dialogs/alert.md This example shows a complete usage of the alert component, including defining a callback function for the 'onhide' event and displaying a toast message when the alert is closed. ```javascript const alert = acode.require('alert'); const handleOnHide = () => { window.toast('Alert modal closed', 4000); }; alert('Title of Alert', 'The alert body message..', handleOnHide); ``` -------------------------------- ### File Preview Action Stack Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/action-stack.md Manage a file preview UI and its cleanup using the Action Stack. Ensures the preview is removed and editor focus is restored when the back button is pressed. ```javascript class FilePreviewPlugin { afterShowPreview(file) { // Create preview UI const preview = document.createElement('div'); preview.className = 'preview-container'; preview.innerHTML = await this.renderPreview(file); document.body.appendChild(preview); // Add to action stack actionStack.push({ id: `preview-${file.name}`, action: () => { // Clean up preview when back is pressed preview.remove(); editor.focus(); } }); } afterRenderPreview(file) { // Preview rendering logic } } ``` -------------------------------- ### Search, Install, and Uninstall Packages with apk Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/user-guide/terminal.md Use these commands to manage packages within the Acode terminal's Alpine Linux environment. Ensure you run 'apk update' before installing new packages. ```bash # Search for a package apk search # Install a package apk add # Uninstall a package apk del # Update all packages apk update && apk upgrade ``` -------------------------------- ### Full Plugin-Style Theme Registration Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/editor-themes.md A comprehensive example demonstrating how to build and register a theme within a plugin's lifecycle. It includes defining theme extensions and handling plugin initialization and unmounting. ```js const editorThemes = acode.require("editorThemes"); function buildChaiTheme() { const { cm, createTheme, createHighlightStyle } = editorThemes; const t = cm.tags; const highlight = createHighlightStyle([ { tag: t.keyword, color: "#ffb86c" }, { tag: [t.string, t.special(t.string)], color: "#a5ff90" }, { tag: [t.number, t.bool], color: "#ffd866" }, { tag: t.comment, color: "#7f8c98" }, { tag: [t.function(t.variableName), t.propertyName], color: "#8be9fd" }, { tag: [t.typeName, t.className], color: "#bd93f9" }, { tag: t.invalid, color: "#ff6b6b" }, ]); return createTheme({ dark: true, styles: { "&": { color: "#e6edf3", backgroundColor: "#101418" }, ".cm-content": { caretColor: "#f8f8f2" }, ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#f8f8f2" }, ".cm-selectionBackground, .cm-content ::selection": { backgroundColor: "#2a3340", }, ".cm-gutters": { backgroundColor: "#101418", color: "#637083", border: "none", }, ".cm-activeLine": { backgroundColor: "#18202a" }, ".cm-activeLineGutter": { backgroundColor: "#18202a" }, }, highlightStyle: highlight, }); } acode.setPluginInit("com.example.theme", () => { editorThemes.register({ id: "chai_theme", caption: "Chai Theme", dark: true, getExtension: () => buildChaiTheme(), config: { name: "chai_theme", dark: true, background: "#101418", foreground: "#e6edf3", keyword: "#ffb86c", string: "#a5ff90", number: "#ffd866", comment: "#7f8c98", function: "#8be9fd", variable: "#e6edf3", type: "#bd93f9", class: "#bd93f9", constant: "#ffd866", operator: "#ffb86c", invalid: "#ff6b6b", }, }); }); acode.setPluginUnmount("com.example.theme", () => { editorThemes.unregister("chai_theme"); }); ``` -------------------------------- ### Get and Process File List Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/file-list.md Demonstrates how to retrieve the file list API and iterate through the files. Ensure the 'fileList' API is available and the path is correctly specified. ```javascript const fileList = acode.require('fileList'); const filelist = await fileList(path); filelist.children.forEach(file => { console.log(`Name: ${file.name}`); console.log(`Path: ${file.path}`); }); ``` -------------------------------- ### Create and Display Multi Prompt Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/dialogs/multi-prompt.md Instantiate and display a multiPrompt dialog to collect user input. This example prompts for name and age, and includes a help link. ```javascript const myPrompt = await multiPrompt( 'Enter your name & age', [ { type: 'text', id: 'name' }, { type: 'number', id: 'age' }, ], 'https://example.com/help/' ); ``` -------------------------------- ### Configure and Get Active LSP Clients Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/lsp.md Configure LSP client options and retrieve a list of currently active LSP clients. Use `setOptions` to customize UI extensions and `getActiveClients` to inspect running clients. ```javascript lsp.clientManager.setOptions({ diagnosticsUiExtension: [], }); const activeClients = lsp.clientManager.getActiveClients(); console.log(activeClients); ``` -------------------------------- ### Run Acode Plugin CLI Wizard Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Execute the Acode Plugin CLI in your terminal to start the interactive wizard for creating a new plugin project. ```bash acode-plugin-cli ``` -------------------------------- ### Comprehensive Encoding and Decoding Example Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/encoding.md Demonstrates encoding a string to an ArrayBuffer and decoding it back, including error handling for potential issues like unsupported character sets. ```javascript const encodings = acode.require('encodings'); async function example() { const text = 'Hello World!'; const charset = 'utf-8'; try { // Encoding text const encoded = await encodings.encode(text, charset); console.log('Encoded:', encoded); // Decoding text const decoded = await encodings.decode(encoded, charset); console.log('Decoded:', decoded); } catch (error) { console.error('Encoding/Decoding error:', error); } } example(); ``` -------------------------------- ### Register a Termux Runtime Provider Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/lsp.md Registers a custom runtime provider for Termux environments. This includes logic to determine if the provider can handle a given server and context, check for installation, and start the server process. Unregisters any existing provider with the same ID first. ```javascript const lsp = acode.require("lsp"); lsp.unregisterRuntimeProvider("termux"); lsp.registerRuntimeProvider({ id: "termux", label: "Termux", priority: 10, canHandle(server, context) { const isTermuxServer = server.runtimes?.includes("termux"); const isTermuxWorkspace = context.workspaceKind === "termux-saf" || /termux/i.test(context.rootUri || context.uri || ""); return isTermuxServer && isTermuxWorkspace; }, async checkInstallation(server, context) { // Check inside Termux whether the server executable exists. return { status: "present", version: null, canInstall: true, canUpdate: true, }; }, async install(server, context, mode) { // Install or update inside Termux, for example with npm, pip, or pkg. console.log("install in Termux", server.id, mode); return true; }, async start(server, context) { const command = [ server.transport.command, ...(server.transport.args || []), ].filter(Boolean).join(" "); // Start the command inside Termux and expose it through a WebSocket bridge. console.log("start in Termux", command); return { kind: "websocket", providerId: "termux", url: "ws://127.0.0.1:45130/", dispose: async () => { // Stop the Termux process or bridge if this plugin owns it. }, }; }, }); ``` -------------------------------- ### Define TypeScript Server with Raw Manifest Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/lsp.md Defines a TypeScript language server using a raw manifest, suitable for advanced configurations. This example specifies WebSocket transport and uses the AXS bridge for launching the server, including command checking and npm-based installation. ```javascript lsp.upsert({ id: "raw-typescript", label: "TypeScript (Raw)", languages: ["javascript", "typescript", "jsx", "tsx"], enabled: true, useWorkspaceFolders: true, transport: { kind: "websocket", }, launcher: { bridge: { kind: "axs", command: "typescript-language-server", args: ["--stdio"], }, checkCommand: "command -v typescript-language-server", install: { kind: "npm", executable: "typescript-language-server", packages: ["typescript", "typescript-language-server"], }, }, }); ``` -------------------------------- ### Get a Specific Theme Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/themes.md Retrieve a theme by its name using the get method. This returns a ThemeBuilder instance. ```javascript const theme = themes.get('Modern Dark'); ``` -------------------------------- ### Define and Register Local Language Server Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/lsp.md This is the recommended way to contribute a local language server. It uses `defineServer` to create a normalized server manifest and `upsert` to register it with Acode. Ensure the necessary command (`typescript-language-server`) is available or installable via npm. ```javascript const lsp = acode.require("lsp"); const server = lsp.defineServer({ id: "typescript-custom", label: "TypeScript (Custom)", languages: [ "javascript", "javascriptreact", "typescript", "typescriptreact", "jsx", "tsx", ], useWorkspaceFolders: true, command: "typescript-language-server", args: ["--stdio"], checkCommand: "command -v typescript-language-server", installer: lsp.installers.npm({ executable: "typescript-language-server", packages: ["typescript", "typescript-language-server"], }), initializationOptions: { provideFormatter: true, }, }); lsp.upsert(server); ``` -------------------------------- ### Listening to Folder Events Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/open-folder.md Handle folder-related operations by listening to events emitted by the editorManager. This example shows how to log when a folder is added. ```javascript editorManager.on('add-folder', (event) => { console.log('Folder added:', event); }); ``` -------------------------------- ### Basic Intent Handling in JavaScript Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/intent.md This example demonstrates how to register and unregister a basic intent handler, logging the received intent's module, action, and value. It also shows how to optionally prevent default behavior or stop propagation. ```js const intent = acode.require('intent'); const handler = (event) => { const { module, action, value } = event; // Optional: prevent default behavior // event.preventDefault(); // Optional: stop other handlers // event.stopPropagation(); console.log(`Intent received: ${module}/${action}/${value}`); }; // Register handler intent?.addHandler(handler); // Later: remove handler if needed intent?.removeHandler(handler); ``` -------------------------------- ### Check Terminal Installation Status Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/terminal.md Checks if the Acode terminal environment is installed. Useful for plugins that depend on terminal features to decide whether to proceed. ```javascript if (globalThis.Terminal) { const installed = await Terminal.isInstalled(); if (!installed) { console.log('Terminal environment is not installed yet.'); } } ``` -------------------------------- ### Import Tutorial Module Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/tutorial.md Import the tutorial module from the acode library. This is required before using any tutorial functions. ```javascript const tutorial = acode.require('tutorial'); ``` -------------------------------- ### Get a Specific Font Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/fonts.md Retrieve the details of a previously added font by its name using the `get` method. The returned object contains `name` and `css` properties. ```javascript const font = fonts.get('Developer Mono'); ``` -------------------------------- ### Create a Theme Instance Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/theme-builder.md Instantiate ThemeBuilder with a unique name and a base mode ('light' or 'dark'). This sets up the foundation for your custom theme. ```javascript const myTheme = new ThemeBuilder("MyDarkTheme", "dark"); ``` -------------------------------- ### Create and Write to a Themed Local Terminal Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/terminal.md Demonstrates how to register a custom theme and create a local output terminal with that theme. It then shows how to write a colored message to the terminal. ```javascript const terminal = acode.require('terminal'); // Ensure your theme exists (or use a built-in one) terminal.themes.register('cyberpunk', { /* colors */ }, 'my-plugin'); // Create a local output terminal and log const out = await terminal.createLocal({ name: 'Plugin Output', theme: 'cyberpunk' }); // Or const out = await terminal.create({ name: 'Plugin Output', serverMode: false, theme: 'cyberpunk' }); terminal.write(out.id, '\u001b[36mPlugin initialized\u001b[0m\r\n'); ``` -------------------------------- ### Accessing Global Utility Constants Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/global-apis/global-utilities.md Demonstrates how to log the asset directory path and check the free version status of the app. ```javascript console.log(ASSETS_DIRECTORY) // returns a string like "/path/to/assets" console.log(IS_FREE_VERSION) // logs true if user is using free version of the app, else false ``` -------------------------------- ### Creating a FileSystem Object Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/fs.md Shows how to create a FileSystem object by providing a URL to a file or directory. This object is used to perform file operations. ```javascript /** * Create a file system object from a URL * @param {...string} url URL of the file or directory * @returns {FileSystem} File system object */ const filesystem = await fs(url); ``` -------------------------------- ### Bundle Plugin for Production Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/getting-started/create-plugin.md Use the appropriate package manager command to create a production-ready build of your Acode plugin. This optimizes the plugin for size. ```sh npm run build ``` ```sh pnpm build ``` ```sh yarn build ``` ```sh bun run build ``` -------------------------------- ### editorManager.container Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/global-apis/editor-manager.md Gets the HTML element that serves as the container for the editor. ```APIDOC ## editorManager.container ### Description This property returns the root HTML `HTMLElement` that contains the entire editor interface. ### Type `HTMLElement` ``` -------------------------------- ### editorManager.activeFile Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/global-apis/editor-manager.md Gets the data object for the currently active file. ```APIDOC ## editorManager.activeFile ### Description This property returns an object containing the data and properties of the currently active file in the editor. ### Type `object` ``` -------------------------------- ### get(name) Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/fonts.md Retrieves the details of a specific font by its name. ```APIDOC ## get(name) ### Description Retrieves a specific font's details. ### Method `get` ### Parameters #### Path Parameters - **name** (string) - Required - The unique identifier for the font to retrieve ### Returns Font object with `name` and `css` properties ### Request Example ```javascript const font = fonts.get('Developer Mono'); ``` ``` -------------------------------- ### Initialize Input Hints Component Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/input-hints.md Initialize the input hints component with an input element, a list of hints, and an optional selection handler. ```javascript const inputHints = acode.require('inputHints'); 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); ``` -------------------------------- ### Get Hexadecimal Color Representation Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/color.md Converts a color to its hexadecimal string representation. ```javascript Color("rgb(255,0,0)").hex // "#ff0000" ``` -------------------------------- ### Import Settings Module Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/settings.md Import the settings module to begin interacting with Acode's settings. ```javascript const settings = acode.require('settings'); ``` -------------------------------- ### Create Basic Page Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/page.md Create a new page with a title. This is the simplest way to initialize a page component. ```javascript // Create basic page with title const myPage = page('My Plugin Page'); ``` -------------------------------- ### Require Fonts Module Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/fonts.md Import the fonts module to start using its functionalities. ```javascript const fonts = acode.require('fonts'); ``` -------------------------------- ### Getting File/Directory Stats Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/fs.md Retrieves information about a file or directory using the `stat()` method. ```javascript /** * Get information about a file or directory * @returns {Promise} File or directory information */ const fileStats = await filesystem.stat(); ``` -------------------------------- ### Get Action by ID Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/action-stack.md Retrieve an action object from the stack using its unique identifier. ```javascript const searchAction = actionStack.get('close-search'); if (searchAction) { // Action exists } ``` -------------------------------- ### Create, Hide, Show, and Destroy Loader Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/ui-components/dialogs/loader.md Demonstrates the lifecycle of a loading dialog using create, hide, show, and destroy methods. Includes a timeout for cancellation. ```javascript const loader = acode.require("loader"); // Create the loader with specified options loader.create("Title Text", "Message...", { timeout: 5000, callback: () => window.toast("Loading cancelled", 4000), }); // Hide the loader after 2 seconds setTimeout(() => { loader.hide(); }, 2000); // Show the loader after 4 seconds setTimeout(() => { loader.show(); }, 4000); // Destroy the loader after 6 seconds setTimeout(() => { loader.destroy(); }, 6000); ``` -------------------------------- ### Opening a Folder with Options Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/open-folder.md Use the openFolder function to open a specified directory in the sidebar. Customize its appearance and behavior using the options object. ```javascript const openFolder = acode.require('openFolder'); const options = { name: 'My Documents', id: 'folder-1', saveState: false, reloadOnResume: false, }; openFolder('/path/to/my/documents', options); ``` -------------------------------- ### Get URL Protocol Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/url.md Identifies and returns the protocol (e.g., 'http:', 'https:') of a given URL. ```javascript const protocol = Url.getProtocol('ftp://localhost/foo/bar'); // Output: 'ftp:' ``` -------------------------------- ### Get Color Luminance Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/color.md Retrieves the perceived brightness (luminance) of a color, ranging from 0 to 1. ```javascript Color("#ff0000").luminance // ~0.2126 ``` -------------------------------- ### Get Color Lightness Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/color.md Retrieves the HSL lightness value of a color, which ranges from 0 to 1. ```javascript Color("#808080").lightness // 0.5 ``` -------------------------------- ### run() Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/editor-file.md Executes the file. ```APIDOC ## run() ### Description Runs the file. ### Method (Implicitly invoked via code example) ### Endpoint N/A (SDK method) ### Parameters None ### Request Example ```js file.run(); ``` ### Response (No specific response documented) ``` -------------------------------- ### Read Setting Values Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/settings.md Use the `get()` method to retrieve the current value of a specific setting. ```javascript // Get current font size const fontSize = settings.get('fontSize'); // Get current theme const theme = settings.get('appTheme'); ``` -------------------------------- ### get(id) Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/action-stack.md Retrieves a specific action from the stack using its unique ID without removing it. ```APIDOC ## get(id) ### Description Retrieves an action object from the stack based on its unique identifier. ### Parameters #### Parameters - **id** (string) - Required - The unique identifier of the action to retrieve. ### Returns - Action object if found, otherwise `undefined`. ### Request Example ```javascript const searchAction = actionStack.get('close-search'); if (searchAction) { // Action exists } ``` ``` -------------------------------- ### Update Termux Packages Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/tutorials/how-to-run-java.md Ensures Termux and its installed packages are up to date. Run this command after setting up Termux. ```sh pkg update && pkg upgrade -y ``` -------------------------------- ### Listen for Resize Events Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/window-resize.md Use the `on()` method to register callbacks for window resize events. Listen for 'resize' when resizing is complete or 'resizeStart' when it begins. ```javascript // Listen for resize complete windowResize.on('resize', () => { // Handle resize complete console.log('Window resize finished'); }); // Listen for resize start windowResize.on('resizeStart', () => { // Handle resize start console.log('Window started resizing'); }); ``` -------------------------------- ### Get Directory Name from URL Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/url.md Extracts the directory name from a URL. Returns null for invalid inputs. ```javascript const dirname = Url.dirname('ftp://localhost/foo/bar'); // Output: 'ftp://localhost/foo/' ``` -------------------------------- ### Manage Terminal Instances Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/terminal.md Get, iterate, write to, clear, and close terminal instances using their IDs. ```javascript // Get a terminal by id const t = terminal.get('terminal_1'); // Iterate all terminals for (const [id, inst] of terminal.getAll()) { console.log(id, inst.name); } // Write text (ANSI supported) terminal.write('terminal_1', 'Hello World!\r\n'); // Clear and close terminal.clear('terminal_1'); terminal.close('terminal_1'); ``` -------------------------------- ### Importing OpenFolder Utility Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/open-folder.md Import the OpenFolder utility using acode.require. This is the first step to using any of its functionalities. ```javascript const openFolder = acode.require('openFolder'); ``` -------------------------------- ### Get HSL Color Representation Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/color.md Converts a color to its HSL (Hue, Saturation, Lightness) object representation. ```javascript Color("#ff0000").hsl // {h: 0, s: 1, l: 0.5} ``` -------------------------------- ### Listing Directory Contents Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/fs.md Use the `lsDir()` method to get a list of all files and directories within a specified directory. ```javascript /** * List contents of the directory * @returns {Promise>} Array of entries in the directory */ const allFiles = await filesystem.lsDir(); ``` -------------------------------- ### Get URL Basename Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/url.md Extracts the basename from the last segment of a URL path. Returns null for invalid inputs. ```javascript const basename = Url.basename('ftp://localhost/foo/bar/index.html'); // Output: 'index.html' ``` -------------------------------- ### share() Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/editor-file.md Initiates the file sharing process. ```APIDOC ## share() ### Description Shares the file. ### Method (Implicitly invoked via code example) ### Endpoint N/A (SDK method) ### Parameters None ### Request Example ```js file.share(); ``` ### Response (No specific response documented) ``` -------------------------------- ### defineBundle Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/lsp.md Groups multiple server manifests and optional install hooks. This is useful for managing related language servers together. ```APIDOC ## defineBundle(options) ### Description Groups multiple server manifests and optional install hooks into a single bundle. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **id** (string) - Required - A unique identifier for the bundle. - **label** (string) - Required - A human-readable name for the bundle. - **servers** (object[]) - Required - An array of server manifests or objects that can be converted into server manifests. - **installers** (object) - Optional - Installer configurations for the bundle. ### Request Example ```js const bundle = lsp.defineBundle({ id: "my-bundle", label: "My Language Pack", servers: [ lsp.defineServer({ id: "server1", label: "Server 1", languages: ["lang1"], command: "server1-cmd", }), lsp.defineServer({ id: "server2", label: "Server 2", languages: ["lang2"], command: "server2-cmd", }), ], installers: { npm: lsp.installers.npm({ executable: "my-bundle-cli", packages: ["my-bundle"], }), }, }); ``` ### Response #### Success Response (200) Returns a normalized bundle manifest object. #### Response Example ```json { "id": "my-bundle", "label": "My Language Pack", "servers": [ { "id": "server1", "label": "Server 1", "languages": ["lang1"], "launcher": { "command": "server1-cmd", "args": [], "options": {"env": {}, "stdio": "pipe"} } }, { "id": "server2", "label": "Server 2", "languages": ["lang2"], "launcher": { "command": "server2-cmd", "args": [], "options": {"env": {}, "stdio": "pipe"} } } ], "installers": { "npm": { "type": "npm", "executable": "my-bundle-cli", "packages": ["my-bundle"] } } } ``` ``` -------------------------------- ### lsp.runtimes.select Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/advanced-apis/lsp.md Selects a runtime for a given server and context. ```APIDOC ## lsp.runtimes.select(server, context?) ### Description Selects an appropriate runtime for a given server and optional context. ### Method ```javascript lsp.runtimes.select(server, context?) ``` ### Parameters #### Path Parameters - **server** (object) - Required - The server for which to select a runtime. - **context** (object) - Optional - Additional context for runtime selection. ### Request Example ```javascript const selectedRuntime = lsp.runtimes.select(server, { environment: "node" }); ``` ``` -------------------------------- ### Get Formatter Options for Extensions Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/global-apis/acode.md Use `acode.getFormatterFor` to retrieve available formatter options for a given list of file extensions. ```javascript const options = acode.getFormatterFor(["js", "ts"]); ``` -------------------------------- ### Get Sidebar App Container Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/interface-apis/sidebar-apps.md Retrieve the main container element for a specific sidebar app using its unique ID. ```javascript const container = sideBarApps.get('my_app_id'); ``` -------------------------------- ### List Available Projects Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/projects.md Use the `list()` method to retrieve an array of available project templates, each with its name and icon. ```javascript const projectList = projects.list(); console.log(projectList); // Output: [{ name: 'html', icon: 'html-project-icon' }] ``` -------------------------------- ### Removing Multiple Folders Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/open-folder.md Remove multiple folders based on a URL pattern, starting from a specified base folder path. ```javascript openFolder.removeFolders('/path/to/baseFolder'); ``` -------------------------------- ### Get File Extension from URL Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/url.md Retrieves the file extension from the last segment of a URL path. Returns null for invalid inputs. ```javascript const extname = Url.extname('ftp://localhost/foo/bar/index.html'); // Output: '.html' ``` -------------------------------- ### Create a New EditorFile Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/editor-file.md Instantiate a new EditorFile with a name and initial text content. The file can be set as editable. ```javascript const file = new EditorFile('example.js', { text: 'console.log("Hello World");', editable: true }); ``` -------------------------------- ### Import Input Hints Module Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/helpers/input-hints.md Import the inputHints module to use its functionality. ```javascript const inputHints = acode.require('inputHints'); ``` -------------------------------- ### Theme Management Methods Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/utilities/editor-themes.md Provides methods for managing registered themes, including unregistering, listing, retrieving, and getting configuration details. ```APIDOC ## Theme Management Methods ### unregister(id) ### Description Removes a registered theme from Acode. ### Parameters #### Path Parameters - **id** (string) - Required - The unique identifier of the theme to unregister. ### list() ### Description Returns an array of all registered themes. ### get(id) ### Description Retrieves a specific registered theme by its ID. ### getConfig(id) ### Description Retrieves the configuration object for a specific registered theme. ### Request Example (list) ```javascript const themes = editorThemes.list(); console.log(themes.map((t) => t.id)); ``` ``` -------------------------------- ### Instantiate EditorFile Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/editor-components/editor-file.md Create a new instance of EditorFile to represent a file in the editor. You can provide a filename and an options object to configure its properties. ```javascript new EditorFile(filename, options) ``` -------------------------------- ### List Registered Formatters Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/global-apis/acode.md Access the `acode.formatters` array to get a list of all currently registered formatters, including their ID, name, and supported extensions. ```javascript console.log(acode.formatters); ``` -------------------------------- ### get Source: https://github.com/acode-foundation/acode-plugin-docs/blob/main/docs/interface-apis/sidebar-apps.md Retrieves the container element for a specific app using its unique ID. This is useful for interacting with or manipulating the app's UI after it has been added. ```APIDOC ## get ### Description Retrieves the container element for a specific app using its unique ID. This is useful for interacting with or manipulating the app's UI after it has been added. ### Method `get(id: string): HTMLElement` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters - **id** (string) - Required - ID of the app to get ### Request Example ```javascript const container = sideBarApps.get('my_app_id'); ``` ### Response #### Success Response (HTMLElement) - **container** (HTMLElement) - The container element for the app #### Response Example ```javascript // Example of a returned HTMLElement (structure may vary) { // HTMLElement properties and methods } ``` ```