@granite-elements/ace-widget NPM

ace-widget

Even more embeddable code editor Custom Element - just one tag, and no JS needed to provide Ace - The High Performance Code Editor

Originally based on pjako's fork of PolymerLabs ace-element.
Modern implementation using Lit 3.1
The legacy Polymer implementation is still available as ace-widget-old.js

Doc and demo

https://lostinbrittany.github.io/ace-widget/

Usage example

<script type="module" src="@granite-elements/ace-widget/ace-widget.js"></script>

<ace-widget placeholder="Write something... Anything..." initial-focus>
</ace-widget>

Install

Install the component using npm:

$ npm i @granite-elements/ace-widget --save

Once installed, import it in your application:

import '@granite-elements/ace-widget/ace-widget.js';

Running demos and tests in browser

Fork the ace-widget repository and clone it locally.
Make sure you have npm installed.
When in the ace-widget directory, run npm install to install dependencies.
Serve the project using the development server:
npm start

This will automatically open the demo page in your default browser.

Simple Test Page

A simplified test page is also available at /demo/simple.html. This page contains a minimal setup with just one editor instance and controls for toggling debug features. It's useful for quick testing and debugging.

Attributes

Attribute	Type	Default	Description
`theme`	String	\| `Editor#setTheme` at Ace API
`mode`	String	\| `EditSession#setMode` at Ace API
`font-size`	String	\| `Editor#setFontSize` at Ace API
`softtabs`	Boolean	\| `EditSession#setUseSoftTabs()` at Ace API
`tab-size`	Boolean	\| `Session#setTabSize()` at Ace API
`readonly`	Boolean	\| `Editor#setReadOnly()` at Ace API
`wrap`	Boolean	\| `Session#setWrapMode()` at Ace API
`autoComplete`	Object	\| Callback for `langTools.addCompleter` like the example at Ace API
`minlines`	Number	15	`Editor.setOptions({minlines: minlines})`
`maxlines`	Number	30	`Editor.setOptions({minlines: maxlines})`
`initialFocus`	Boolean	\| If true, `Editor.focus()` is called upon initialisation
`placeholder`	String	\| A placeholder text to show when the editor is empty
`verbose`	Boolean	`false`	If true, outputs basic debug information to the console
`debug`	Boolean	`false`	If true, outputs detailed debug information to the console
`disableWorker`	Boolean	`false`	If true, disables Ace editor worker scripts (useful for environments where workers don't work)

Properties

Name	Description
`editor`	Ace editor object.
`value`	editor.get-/setValue()

Events

Name	Description
`editor-content`	Triggered when editor content gets changed
`editor-ready`	Triggered once Ace editor instance is created.

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Implementation Details

This component is built with Lit 3.1, a modern, lightweight web component library. It provides a clean, efficient wrapper around the Ace editor with reactive properties and a simple API.